Responsive Landing Page Using Media Queries and Flex Box

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, awesome work on this one. The desktop layout looks great, though it would be really nice to have a bit more padding in general since the content right now are too spaced out compared to the design. When resizing the layout, there are issues since the layout gets too squashed. Try going into like 530px on your screen, you will see that the content are squished and the layout in the footer is destroyed. Though the mobile state looks fine.

  For some other suggestions, here are some:

  • Adding a max-width on the body along with margin: 0 auto. If you zoom out on your screen, you will see that the contents are going out of places and just occupy the full width. Adding the max-width will help the site's content layout to be placed properly and be controlled.
  • The header and footer should be living outside the main tag so that it will be treated as primary landmark element properly.

  <header />
  <main />
  <footer />
  

  • The primary header should only be containing the topmost part of the site where it includes the site-logo, site-links and other controls if there are. The hero-section should be left for the main tag. The reason is that, we want the header to be as reusable so that we could used it on other pages of our site. By including the hero-section in the header then we won't be able to reuse it now because we don't want the hero-section to appear on the pages again right.
  • When using img tag, you don't need to add words that relates to "graphic" such as "logo, illustration" and others, since img is already an image so no need to describe it as one.
  • If you somehow look again on the images that are used on this site, almost all images except for the site-logo doesn't really give any information at all, meaning these images only serves as decoration on the site. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if you are using svg instead of img tag.
  • Only use descriptive alt on images that are meaningful and adds content to the site otherwise hide the image for screen-reader users.

  FOOTER

  • Same with the company logo, use a more proper alt value.
  • Those 3 icons on the 3 information below the site-logo should be hidden as well using the method mentioned above.
  • Those 6 links on the right side, they could be placed inside the nav since those are still your website's navigational links right. Also, since they are all related links, using a single ul would be really nice:

  <nav>
    <ul>
      li*6
    </ul>
  </nav>
  

  • 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 svg so use aria-hidden="true" on it.
  • Lastly, just addressing the responsiveness issue on the site:>

  Aside from those, great job again on this one.

  17

  Marked as helpful