Responsive Landing Page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Though I had to zoom out to see the desktop view because you are using a 1440px as the breakpoint to show the desktop state which is too big for lots of users including me who uses 1 1366x768 monitor. The 1440px on the design is not related to the breakpoint, adjusting the breakpoint to a more suitable size will be really great. Also, just a quick plugin, maybe try using a mobile first approach. The mobile state on this one looks great on the other hand.

  Here are some other suggestions for the site:

  • On this one, the header should only be containing the topmost part of the site. The site-logo and the navlinks. In general, a header should contain this, because you want the header to be as reusable and by including the hero-section inside it, then the header is not reusable because you don't want the homepage's hero-section to appear again on some page of the site right.
  • The header nav could use an aria-label="primary" on it because there is an extra nav being used on the site. This will make sure that the nav is unique compared to other nav tags on the site.
  • The a tag that wraps the site-logo should have either an aria-label attribute or an sr-only text inside it to which the value for whatever method you will use should be the location on where the a tag would take the user. Typically, a site-logo takes the user to the homepage so use homepage as the text-value.
  • On this one, I would suggest replacing the section tag into just div on the 4 fruits section of the site since they are just regular content each heading tag is enough to structure each.
  • For each person of the testimonial section, it make sense to use img tag and the person's name as the img alt value since a testimonial is all about a person and their content/blog/text.
  • Also, for each testimonial card, you can use the below markup so that it will be easier for the user to traverse it:

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

  • For the section before the footer, replace section by div because section needs to have a heading tag inside it to be valid one.

  FOOTER

  • The site-logo is currently using a wrong path. Use ./ instead on it.
  • Same as well for the site-logo, remove the word logo from the alt.
  • Use an aria-label="footer" on the nav so that it will be unique.
  • For each of the a tag that wraps the social-media, you should add either aria-label or sr-only text inside it to know where this link would take the user. Use the social-media name as the value for it.
  • Each svg for the social-media link should have aria-hidden="true" on it since it is just a decorative svg.

  MOBILE

  • Just saw when resizing the site, the 4 images on the section before the footer , they don't occupy the full width of the screen like what they should do. Have a look on that one.
  • Instead of a tag for the hamburger, use button on it since button is for control and a tag is for link and that is not a link at all.
  • For the hamburger again, add a default attribute of aria-expanded="false" on it. This will be set to true if the user toggles it again and vice-versa.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Jack Mullane•100

  @fitzgibbonjackPosted almost 3 years ago

  @martpika Highly appreciate you taking the time to write such a comprehensive piece of feedback. I implemented all the changes suggested including ammending the breakpoint for desktop.

  Upon changing the breakpoint some of the proportions and spacing look strange at some screen sizes, this lead me to think about the units I''m using for width, padding and margin etc. What units would you recommend for these? I like to use percentages/vw for width but margin and padding I feel like px is not the best unit to use. Any suggestion on this would be a great help!

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  @fitzgibbonjack Hey, glad that you found my review useful^^

  In general, I always use rem unit. The reason for this is that, using rem makes it more responsive for the user since for example, if a user changes their font-size in the preference of the browser, the site will adapt to that value.

  I don't use vw at all except if I am doing responsive-sizing using clamp function. Oh, yeah, have a search about clamp function, that will really help you avoid creating extra styling on some breakpoints. Though you just need to wrapped around your head on that one since it might be confusing if you are new to it.

  For px I only use this as value for box-shadow. Yeah, I only use it on that :>>

  0