(Mobile First) Huddle landing page

Community feedback

• 

  Gustavo Vargas•150

  @Strau-sstPosted about 3 years ago

  Thank you very much for your feedback. It will help me a lot. I'm going to make all this changes and read a few more documentation about HTML semantics in order to make a very nice and structured website. And of course, practice a little more responsive design.

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop seems fine and the mobile layout as well. Though when resizing the screen, some contents or text overflowed its parent container like on the second box with the "flowing conversation" title.

  Some suggestions would be:

  • The alt text of the browser logo could have alt="huddle" text instead of alt="logo". Since the image itself already have the name, better use it. Also when using altattribute on aimg` element, do not include the words like "logo", "icon" or anything else that relates to "graphic" word. Assistive tech will handles those for you.
  • The try it free should have used either a tag if it would be a link, or button if it is just control for like a modal. Do not use p tag on a supposed interactive element.
  • get started for free in hero section could as well used a or button element.
  • The alt attribute on the hero-section image could have been left empty like alt="". If you think an image is just for decorative purpose only, better to use alt="". If the images add content, use descriptive alt text.
  • The get started for free as well on your cta section should use either a or button element.
  • On the footer using article is not really intended for that. You use article when it is a independent element, like an actual article, those kind of things. On this one, div is just fine.
  • The company logo in the footer section, since it is an svg you could use a span element inside the svg but this span would have an sr-only class. An sr-only class is a css styling that is intended for screen readers. You can look up on google on such css styling, then the span will have a <span>Huddle</span>, this just adds more meaning when screen reader navigates to that svg.
  • The icons on the footer as well, the location, phone, and email, could have used an alt="".
  • The social media links should be wrapped inside an a tag. Since those are links, use a tags along with their respective aria-label, like <a aria-label="facebook"> The icon goes inside here</a>. aria-label is added to an element to describe what is inside that. Since the i tag that holds the social media icons doesn't have any text to describe what it is, aria-label does that for you.
  • Resizing, like what I said earlier, there are sections that are being overflowed. On the footer the first sections on the left side gets hidden if the screen is resized. You should always test you layout by simple checking if the layout is destroyed when the screen size gets changed using dev tools.

  Aside from those, good job on this. If you have any question, just drop it here okay.

  0