Responsive design done with Flexbox and SASS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Right now, the layout is much shorter than the design so have a note about that one. The desktop layout looks fine for now but needed those spacings. Resizing the site, the content in the first section is overlapping the left-side image. For mobile state, the first-section image is being hidden by the screen slightly, the 3 icons-section content is too squished and the footer grey color is not occupying the full width.

  Some suggestions on the site would be:

  • On your body tag, you should use this for the background to work properly:

  background: url("../images/bg-header-desktop.png") no-repeat center top
  

  • I just noticed, when using dev tools at the bottom, your images resizes really small, suspecting vh unit usage in here.
  • For this one, I would prefer the header only wrapping the website-logo and not the hero-section. header typically wraps logo and navlinks of the site, hero-section belongs to the main because you want the header to be reusable for other pages so including only necessary.
  • 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="clipboard".
  • Changing those section tags into just using div since section as landmark is not informative enough unless they are labelled by aria-labelledby attribute.
  • Use rem value for the img height instead of vh since it is not consistent.
  • Use a more descriptive alt for the images. For example on the computer image, you can use like alt="clipboard application on a computer".
  • For the content of the right side of the computer image, it would be great to have a div that wraps a single h3 and p tag so that it won't clutter the markup. Isolating related contents.
  • For those 3 icons they only act as decorative. 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.
  • When using a heading tag, make sure you are not skipping a level. If you use h4 then make sure that h1, h2, h3 are all present before it's section.

  FOOTER

  • Same with the company logo, use a more proper alt value.
  • Those 5 links should be using a link a tag. You can nest them inside of a ul inside of a nav:

  nav aria-label="footer"
    > ul
      >li
        >a
  

  Have 5 li tags since there are 5 links.

  • 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.
  • Social-media image should be hidden since it is only a decorative image so use alt="" and aria-hidden="true".
  • Lastly, checking always for different screen-sizes when you are coding the site. For example, where the layout is too squished for mobile state, always check before going into live-preview of the site:>

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Vasinc Daniel•190

  @VasincPosted almost 3 years ago

  @pikapikamart I'm so grateful for taking so much of your time just to check my project. Really appreciate this <3 Love and peace for you, bro. Imma really take in consideration what you said, it would really help me out :)

  1