Huddle Landing Page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, nice work on this one. Desktop layout looks great, the site is responsive but your breakpoint is too early for mobile view to show. Right now, 0-1080px is already showing mobile state which is too big for all the mobile view to occupy, desktop layout could use more of those screen time.

  Some other suggestion on the site would be:

  • Adding a max-width on the body tag so that the layout won't be stretched our for large-screen users. Try zooming out from the current layout, you will see that the contents are being pulled away from one another.
  • 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="huddle" and do not use aria-hidden="true" on it. When you are using aria-hidden="true", it means you are hiding an element/image, so partner it up with alt="" but not on this one.
  • When using img tag, you don't need to add words that relates to "graphic" such as "logo, illustration" and others, since img is already an image so no need to describe it as one.
  • The hero-section image is only acting as decorative. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if you are using svg instead of img tag.
  • hose social-media links could be inside a ul element since those are "list" of links.
  • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.
  • 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.

  0