Clipboard-Landing-Page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop a bit smaller and shorter than the design, the site is responsive and for mobile state, it looks great but like what you said at 350px going down, the site is not adapting anymore because on your clamp you min value is greater than 350px that is why it creates horizontal scroll and layout won't resize.

  Some suggestions would be, but first, why is your pikachu looks like that:>:

  • Making font-size for desktop bigger so that it will be easier for the text to be read.
  • header does not need the role="banner since header itself is a banner/landmark.
  • For the website-logo, use only the website's name as the alt value like alt="clipboard".
  • 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.
  • Maybe add an outline to the focus-visible state of the button because those transition to scale when focusing on the button is not enough since it still looks the same with the other one.
  • You don't need to use figure on the images since when using figure you should use figcaption along with it. A regular img would be enough.
  • Make a more descriptive alt value and lose the image word as well for other images. For example on the desktop image, you could use like `alt="clipboard app running on apple desktop".
  • Use only company name as the alt like `alt="Google".

  FOOTER

  • role="content info" is not needed for footer since it is one.
  • Same with the company logo, use a more proper alt value.
  • Those 5 links could be inside a nav since those are still your website's navigational links.
  • Again, those 5 links should have use grid so that you could place each item properly. It should have 5 list-items and do not nest 2 links inside 1 li.
  • Also another visual indicator for the 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.

  Marked as helpful

  1

  ---

  

  Hetesh•230

  @LightisicusPosted about 3 years ago

  @pikamart Thanks for the tips I will start applying those! Also, you said that I should use five li's for each of the footer links, but do you need a ul or an ol to use li or could they be inside of a nav also?

  Like...

  <nav> <li></li> <li></li> <li></li> <li></li> <li></li> </nav>

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @Lightisicus Hey, great that you find it useful!

  For that part, yes use 5 li items since there are five links. Your markup should look like:

  <nav>
    <ul>
      <li>
        <a />
      </li>
      ....
      ........
    </ul>
  </nav>
  

  0