Loopstudios landing page - Mobile first (SASS & JS)

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout looks great in desktop, it is very responsive and the mobile state looks really great as well.

  At first I used a pseudo element as well to that white filter and when I refactored it, I didn't know that "white" filter should be include, I just realized it by now on what you said hahaha, though I don't know other approach since I will still use pseudo if I were to refactor it again.

  Some other suggestions on this would be:

  • Website-logo img should be using the website's name as the alt like alt="loopstudios". Remember that a website's logo is meaningful so always make sure it uses the proper alt value and do not aria-hidden="true" an image if it is meaningful.
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "logo" and others. An img is already an image/graphic so no need to describe it as one.
  • Navlinks could be wrapped inside ul since those are "list" of links.
  • Those decorative images on the site could have use an extra aria-hidden="true" attribute so that they will be totally hidden alongside with the alt=""
  • see all should be a link a tag since it is more like a link to "see all" creations rather than button to control.
  • For the creations card, you could wrap those inside their own figure element, since each card title are great for a figcaption, this way it is more related even if the img is being hidden.

  FOOTER

  • Same goes for the website-logo, use a proper alt value.
  • As well for the navlinks, ul could be used.
  • Social media links could be inside ul since those are "list" of links.

  MOBILE

  • The hamburger button will b eusing aria-label attribute or screen-reader element inside. The value will describe what does the button do. The value could be aria-label="navigational dropdown menu".
  • The hamburger button should have a default aria-expanded="false" attribute on it. It will be set to true if the user toggles the button.
  • img inside the hamburger button should be using an extra aria-hidden="true" attribute.
  • It would be better if you have reused the same navigation dropdown instead of creating 1 for mobile and 1 for desktop, this way you won't be duplicating your markup and keeping it dry.
  • The dropdown is not being hidden properly. Visually it is hidden but it is still picked up by screen-reader because you are only using height to hide it, instead add a visibility: hidden on it as well and when it transition, make it visible.

  Aside from those, great work again on this one.

  Marked as helpful

  1
• 

  Anuar•190

  @anuarshaidenovPosted about 3 years ago

  THIS IS CLEAN NGL YOU KILLED IT BRO KEEP UP GOOD WORK

  1