Took me six days but it is finally done: Product Landing Page - Nature
Github repo: Github repo product landing page
This is my first significant project using SCSS so pardon my spaghetti code.
3 Likes
Yeah, it looks pretty good. With a quick scan, I don’t see any problems that jump out to me in the code. Good job.
1 Like
@UmiKami, do you know how to manually increase the text size? If not, while using Firefox, go to Edit->Preferences, scroll down to Zoom and activate ‘Zoom text only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. It won’t take long before you see several issues with your page.
In addition to being responsive to changes in the view port width your page should also be responsive to changes in the text size. One thing you can do to handle this is to use em units for your CSS break points as that will take into account both view port width and text size.
1 Like
tried what you suggested and em kind of fixes it but it breaks after 150%
I mean, not many people go over 150% zoom, right?
The important part here is:
“Content satisfies the Success Criterion if it can be scaled up to 200%”
So you should make sure your page behaves properly to at least a 200% text size increase. I generally go to 300% because that’s how far FF will go. And there are some people who will need even bigger text. But as the article I linked says:
“The working group feels that 200% is a reasonable accommodation that can support a wide range of designs and layouts, and complements older screen magnifiers that provide a minimum magnification of 200%. Above 200%, zoom (which resizes text, images, and layout regions and creates a larger canvas that may require both horizontal and vertical scrolling) may be more effective than text resizing.”
So for most people who really need the text that big they will probably be using page zoom instead.
1 Like
Got it. Thank you so much! I completely ignored the zoom capability. I am going to try and fix as much as I can.
Your page is beautiful. I love the colours you used. Some words were hidden behind the tiles. A wonderful site overall though.
1 Like
Thank you!
Do you mean the text on the cards from the pricing section? That’s done on purpose. If don’t hide it then you can still select that text from the back of the card. It also kind of breaks the button haha
Oh, alright then. I checked the site again and I don’t see what I pointed out earlier. lol.
1 Like
Looking great, I really love the overall feel of it.
I’m new to the code portion, so that I’ll leave that to the experts on here, but I can offer you a few comments on design to think about.
- I love the color scheme. Might be worth having a think about the visibility of the white menu items and the white text in the Nature Inc logo. Gradients are great, but they often create problems achieving good contrast, I struggle with it all the time. What contrasts well on one side of the page doesn’t contrast well on the other etc.
One thing I sometimes do in these instances is give the text a thin stroke (a medium gray looks like it might be appropriate) just to crisp up the definition.
You could also play with the gradient direction so that the lightest part is bottom right.
It’s not a problem as is, just something to think about with gradients.
- I would personally experiment a bit with the top/bottom margins on your containers. With the big text on the site there’s a risk of things feeling crowded.
Playing around with your margins will give it a different feel, might be worth experimenting a bit.
- If it were me, I would horizontally center all of the footer elements, and make the spacing between the Nature Inc. logo and the Copyright equal to the spacing between the Copyright and the top of the three links. Minor detail, and just a personal preference.
Overall, great job!
1 Like
Looks really good! I do feel though that maybe making the text input in the contact form wider and some more space between the text inputs would look nice.
1 Like
how about giving the form’s input some padding?
1 Like
Oh yikes! it had padding before. Did something that messed it up haha
Fixed
Thanks for the tips!
1 Like