Clipboard-landing-page with flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Desktop layout looks great, the site is responsive just a quick suggestion, on size 541px above there are appears a horizontal scrollbar on the site and on the keep track of your.... section, you could already show the mobile state at the point so that the layout on that part won't be tall ( talking about the right-side content). Mobile state looks great.

  David Turner already gave feedback on this one, just going to add some suggestions as well:

  • It would be nice to add a max-width on the body tag. If you zoom out from your screen, you will see that the content of the site just stretches along with the screen-size. Adding the max-width will prevent that and will make the layout more consistent.
  • For this one, I don't really know if you need to use the header because the site-logo is the only content that is suited on it on this layout.
  • Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="clipboard".
  • Like what I said before, using words that relates to "graphic" should not be used inside the alt since the img is already an image. Remove those words like "logo" and other text if there are.
  • The desktop image could use a more meaning alt since computer is too broad, it could be like `alt="clipboard app running in desktop".
  • Same for the tablet and mobile-phone, use a more meaningful alt.
  • Those 3 icons after the Supercharge your workflow section are just decorative images and should be hidden for screen-reader users by using alt="" and aria-hidden="true" to the img tag.
  • Use only the company's name as the alt value and remove the image word on it.
  • Change the h1 usage from the cta section part to use only h2 so that h1 won't be redundant.

  FOOTER

  • The background-color on the footer selector is missing. You should add so that there will be contrast and just distinction on where the footer is located or occupying.
  • Include the .attribution inside the footer tag so that it will be inside a landmark element.
  • Same with the company logo, use a more proper alt value.
  • Those 5 links could be inside a single ul since those are related list items. Use grid to place each item properly and you could nest the ul inside of an nav element since those are still your site's navigational links. Lastly, use a tag for each since they are supposed links.
  • Those social-media links could be inside a ul element since those are "list" of links.
  • Social-media image should be hidden since it is only a decorative image so use alt="" and aria-hidden="true".

  Aside from those, great job again on this one.

  Marked as helpful

  0
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  This is very good. You did forget to add the background color to the footer.

  Hope this helps.

  Marked as helpful

  0