Redesigned Product Landing Page - Your thoughts

Code Feedback
1

I redesigned my product landing page and made it responsive. Let me know what you think!

https://codepen.io/emily-meredith/pen/QWjEjeg

2

The first thing that jumps out at me is that I can barely read any of the content because the text color does not have enough contrast with the background. A good tool for checking color accessibility can be found at:

https://webaim.org/resources/contrastchecker/

The second issue is also relating to the text. You should not use ‘vw’ or ‘vh’ units for font size. When you do this then the only way to make the font size bigger is to make the browser window bigger. What if someone can’t make their window big enough so that they can read the content? The user should be in complete control of the text size and should be allowed to make the text size as big as they need regardless of the browser window size. Change those font size units to ‘em’.

Third issue, when I narrow the browser window, those three orange boxes at the bottom just get really small instead of rearranging to form one column. Use responsive design to rearrange the layout so that you have more room for your content.

1 Like
3

Thanks for the feedback! I think I’ve fixed those issues. :+1:

4

Your page looks good on a desktop @emilymeredith. Some things to revisit;

  • When using codepen it only expects the code you’d put within the <body> </body> element in HTML because codepen supplies the boilerplate template for you. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • Mentioning because the link to your font belongs in the head element, not header.
  • Don’t use the <br> tag to force line breaks
  • On smaller screens the content is too small to be seen. I honestly can’t read the links or most of the content on the page.