Huddle landing page with curved sections with flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Desktop layout looks fine, there are just some sections where images are bigger than they should be and some text content are smaller as well compared on the design. The site is responsive and the mobile state looks fine as well.

  Others already gave their feedback which is really nice to see. Here are some other suggestions for the site:

  • For this one, the header should be only containing the top most part of the layout which is the site-logo and the try it free. The reason is that, we want the header to be reusable for other pages of the site, by including the hero-section in the header, then we can't reuse that component because we don't want the homepage's hero-section to appear again on other pages of the site right.
  • You don't need to use the nav on the header I think on this one since there are no other navigational links present ( don't know about the try it free though ). But if you insist though, remove the site-logo from it since the site-logo is not being treated as link though.
  • Do not remove the outline styling. If you did, always include a visual-indicator on the :focus-visible for those interactive elements like the button a tag and others.
  • On this one, all the images except for the site logo are just pure decorative image. Decorative images are images that doesn't really give that much content to the overall content of the site if added. 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.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.
  • Also, when using img tag, you don't need to add words that relates to "graphic" such as "image" and others, since img is already an image so no need to describe it as one.
  • Those curve-images could be use as value for the background so that you won't need to create an img tag for each.
  • Use only a single h1 on the page. For the cta part, change the h1 into just h2 , you can use h1 again only if they are used inside like in an article tag since they will be treated as either h2 and increasing. For example, there are 3 h1 inside the article they will be treated as other heading tag level.

  FOOTER

  • Use only huddle for the site-logo alt.
  • Those 2 icon below the site-logo are decorative images. Use the above method to hide them.
  • Those 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.
  • For the newsletter part, when there is a component that serves as form, use form tag to wrap them so that it will be much clearer.
  • Also, it would be nice to create your custom validation on this one so that you could practice that js skills right.Have a look at this simple accessible form snippet that I have. Feel free to always reference it^^
  • Have an type="submit" on the button. Remember that when a button is placed inside a form element, it defaults to type="submit". So imagine if you have a close-button inside the form without specifying type="button" clicking the close-button will submit the form. Be aware of this kind of scenarios.

  Aside from those, great job again on this one.

  Marked as helpful

  2

  ---

  

  MordenWebDev•500

  @MordenWebDevPosted almost 3 years ago

  @pikapikamart thankyou for your feedback I will add focus state for button and input.

  1
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  I agree with @RioCantre, nice job with this.

  Add aria-label="facebook link or whatever one it is" to the a tags with the font-awesome icons and it will clear the accessibility issues.

  Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/

  Hope this helps.

  Marked as helpful

  1

  ---

  

  MordenWebDev•500

  @MordenWebDevPosted almost 3 years ago

  @brodiewebdt thank you for your feedback I will update soon.

  0
• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hi! Great job on this one! The overall design is similar to the original, though some images might appear wider and bigger, still you made it on point. The only thing I would suggest would be:

  • the h1 tag is already good on it's own and I think there is no need to put a class attribute.

  Once again, congratulations on taking up this challenge!

  Marked as helpful

  0

  ---

  

  MordenWebDev•500

  @MordenWebDevPosted almost 3 years ago

  @RioCantre thanks for feedback.

  0