Project: product landing page feedback needed thankyou!

[xavier.yeung]

Click here to my project

Thank you very much!

[MyTrueName]

Page looks nice on large screen.
On a small screen not so much.

I would make text size dynamic by using em, rem or vw/vh.

[xavier.yeung]

thank you! i will try now!

[Roma]

Your page looks good @xavier.yeung. Some things to revisit;

• Run your HTML code through the W3C validator.
  • There is an HTML coding error you should be aware of and address. This is HTML5 and you shouldn’t use that obsolete attribute.
  • Since copy/paste from codepen you can ignore the first warning and first two errors.
• Check that the user has entered a valid email addr. Throw an HTML5 validation error if not.
  • You learned to do this when coding the survey form
• Make your page responsive. Remember, the R in RWD stands for Responsive
  • There’s a horizontal scrollbar on smaller screens
• Don’t use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?

[xavier.yeung]

Thank you so much!

@Roma

There’s a horizontal scrollbar on smaller screens

I don’t really understand what this means, isn’t it supposed to have scrollbar when people are on a smaller screen?

@Roma

• Don’t use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?

oh yes! I should use em an rem! I will remember that

[Roma]

@xavier.yeung

isn’t it supposed to have scrollbar when people are on a smaller screen?

No, there should not be a horizontal scrollbar when you have a responsive website. It’s a bad UX for the user to have to scroll side to side to see the content of the website.
When styling your page start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.