sunnyside-agency-landing-page-main

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, great work on this one. Desktop layout looks fine, hero-section is just too tall that's why the content are pushed down on the screenshot. Site is responsive but the breakpoint of 1000px for mobile state is too big for the whole mobile view to occupy. Desktop layout could use more of those. Mobile state looks great , though the each person's name on the testimonial section have their position besides their name which should not be and should be instead placed in another row.

  Some other suggestions would be:

  • The .attribution should be inside the footer so that it will be inside a landmark element.
  • On this one, the header could be absolute with width: 100% so that the content will not be pushed down.
  • 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="sunnyside".
  • Reduce usage of section tag since they don't give any information when navigated as landmark unless they are being labelled by aria-labelledby. You can replace them with div since the heading tags are enough to describe each section.
  • Add an extra aria-hidden="true" attribute on the img that is using alt="" so that the image will be completely hidden for screen-reader users.
  • Those learn more in desktop state should be placed on the left side and not being centered.
  • For each testimonial card, you can use this markup so that it will be easier for users to navigate on it:

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

  • Person's image should be using the person's name as the alt value like alt="Emily R". Components like this where a person's information is presented, make sure to use their name as the person's img alt value.
  • The person's name and the person's position are two separate text so don't use a single text element to wrap them.

  FOOTER

  • Those 3 links after the logo could be inside a nav since those are still your website's navigational links. Just add an aria-label="footer" on this nav so that it will be unique.
  • Those social-media links could be inside a ul element since those are "list" of 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.

  MOBILE

  • Hamburger menu should be using a button since it is an interactive component.

  SUPPOSING BUTTON IS USED

  • The hamburger button should have a default attribute of aria-expanded="false" and it will be set to true when the users toggles it and vice-versa.
  • The hamburger button should have either aria-label attribute or sr-only text inside it which defines what the button does. You could use aria-label="navigation dropdown menu"
  • The img inside the hamburger-menu should have been hidden since it is only a decorative image.
  • The dropdown is not being hidden properly. Using only opacity and transform hides them visually but not internally like what it should be. Add an extra visibility: visible on the hidden state of the dropdown and use visibility: visible on the visible state. This way, it will be hidden properly.

  Aside from those, great job again on this one.

  Marked as helpful

  0