testimonials grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great job on this one again. Though I had to zoom out in desktop to view the desktop layout since you are using 1470px as the desktop breakpoint which is too big for lots of users including me who uses 1366x768 resolution. Toning it down would be really great. Resizing, the layout adapts well and the mobile view looks really great as well.

  Again, some suggestions would be:

  • Only have a single h1 on a site. It would be great to change those headings into something like h2.
  • Since there are not visible text that are suitable to be h1, the h1 would be a screen-reader only heading. Meaning it will be hidden visually but present for screen-reader users. On this, the h1 would have like sr-only class and the text-content should describe what is the main-content is all about. The h1 could be placed as the first text inside the main. Have a look at Grace's solution on this one. Inspect the layout and see the usage of h1 as well the stylings applied on it.
  • Also, for each testimonial card, you could use this markup:

  <figure>
    <img src="" alt={person name}>
    <blockquote>
      <p> </p>
      <p> </p>
    </blockquote>
    <figcaption>
      person name
      <p>
        person role
      </p>
    </figcaption>
  </figure>
  

  Though you would need to use display: grid on the figure and place each of the item in their position like on the design. But this extra work is worth it since it will make the site more accessible.

  • When using img tag, you don't need to add words that relates to "graphic" such as "icon" and others, since img is already an image so no need to describe it as one.
  • Also, those highlighted text in each of the testimonial aren't really heading tags. They are just like opening of the testimonial so it would be great to use p tag on them. Because a heading tags must give information on what the section would contain and those text doesn't really give those.
  • Lastly, just adjusting the breakpoint.

  Again, great job on this one.

  Marked as helpful

  0
• 

  Vueko•160

  @Vueko1Posted about 3 years ago

  EDIT : I also made additional breakdown so things don't look stretched/cramped

  0