Responsive Layout with Flexbox and CSS grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

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

  Some other suggestions would be:

  • The alt for the website-logo should be using only alt="clipboard". When using alt attribute, avoid adding words that relates to "graphic" such as "logo, icon, image.." no need to describe it as an image since it is already one.
  • The alt for the computer should lose "image" word, you could use "computer using clipboard app" as a value, same goes for the below tablet and phone section, you can use "clipboard app on phone and tablet" as a value.
  • For the 3 icons below the tablet image should be using alt="" as well as adding aria-hidden="true" on it, since the icon is just a decoration, you should just hide it.
  • For the company icons, just use only their name as the alt value.
  • Adding as well a cursor: pointer for each of the button on desktop layout would be really great.

  FOOTER

  • Website logo should only use alt="clipboard".
  • Those five links should be using their own a tag since they are supposed links. Also, you don't need to use separate ul tags for each of those. Those 5 links should only use 1 ul element, since they are related to one another. Use display: grid on the ul to place like those.
  • The social media links should be using a tag to wrap each of the img.
  • Social media links as well should be inside a ul element, since those are "list" of links.
  • Each a tag that wraps the icon should have an aria-label attribute, the value of this would be the name of the social media. For example, the a tag that will wrap the facebook icon should look like:

  <a href="facebook.com" aria-label="facebook">
   img inside here
  </a>
  

  This way users will know where this link would take them. You will see and use this method a lot, you use this when there is no text content inside the element, by doing this, you are giving like a text-description for assistive-tech to read. Also, have a search for using sr-only on elements with no text-content.

  Aside from those, great work again on this one.

  Marked as helpful

  0

  ---

  

  JeremyWarui•250

  @JeremyWaruiPosted about 3 years ago

  @pikamart Woow! Thanks much. So alt value should just be a description of an image or logo? I will get myself to learn about the aria attributes. Thanks for the positive insights. I will implement.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @JeremyWarui Yes, but use only alt attribute if the image is meaningful and it adds content to the site, if that is the case, make a descriptive alt value.

  For logo, if it is a website-logo, you should always use the website's name as the alt value for it since it is one of the main content of your page.

  0