Base apparel coming soon

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 as well but a quick suggestion for the breakpoint, maybe you could lower down the breakpoint more. Because if you to at 1024px, the hero-section is just thin making the image blurred that is why lowering down the breakpoint will not prevent it but it could make the image "less" blurred because it will show it on a smaller size. Mobile state looks great as well.

  For some other suggestions, here are some:

  • The header should be placed outside the main tag so that it will be treated as landmark properly.
  • Also, the header should be containing the site-logo and not the hero-section. Typically, a primary header will contain the site-logo, the navlinks and maybe some controls, because you want the header to be reusable for other pages of the site and only including content that could be redistributed.
  • On your .desktopView, you don't really need to set a height on it because the content should be the one making the size or maybe you could add a min-height instead and not height so that it won't have a fixed size.
  • 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="sneakers".
  • When using img tag, you don't need to add words that relates to "graphic" such as "logo" and others, since img is already an image so no need to describe it as one.
  • When making a text uppercase, do not directly type the word in the markup uppercase. Doing this results screen-reader reading the text letter-by-letter and not by word. Instead just use regular lowercase text and just use text-transform: uppercase on it on the css.
  • For the h1, you don't need to set a br tag on it so that it will wrap the text on another row. Use max-width on it and adjust the value until you get the desired look.
  • The error-icon is only acting as decorative image. 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.
  • Right now, the error-message or just error in general is only seen visually on the form but not really linked to the input properly. A proper way of adding error would look something like this:

  if ( input is wrong )
    input.setAttribute("aria-invalid", "true");
    input.setAttribute("aria-describedBy", id of the error-message);
  else 
    input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  

  The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy. Have a look at this simple accessible form snippet that I have. Let me know if you have any queries about this one.

  • When you hit the breakpoint of 1024px? The site-logo is huge. To fix that, you can just remove the width on it so that it won't resize.

  Aside from those, great job again on this one.

  Marked as helpful

  0
• 

  nanc•940

  @naiiidenPosted almost 3 years ago

  One thing I forgot to mention, when submitting the email address at desktop resolution, the email tab moves few pixels to the bottom I don't know why...

  0