Insure Responsive Landing Page using CSS Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Desktop layout looks great, just needed the hero-section image to be taller like on the design, the site is responsive and the mobile state looks really great.

  Ben already gave a feedback on this one, just going to add some suggestions as well:

  • The header should only be containing the topmost part of the layout, the website-logo, the navlinks. The hero-section downwards should be placed inside the main.
  • Since you are treating the website-logo as interactive ( putting cursor: pointer)m, it would be great to use a tag on it and treat as a real link. Website-logo-link a tag should have either aria-label attribute or sr-only text inside, that describes where the link would take the user. Usually, website-logo directs user to homepage so use homepage as the value like `aria-label="homepage".
  • 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="Insure".
  • Also, wrap the whole content of the .nav-row inside a nav or just simply change the .nav-row from using div to using nav since those will be your navigational links.
  • If you somehow use tab key on your keyboard to navigate and navigated on the view plans it is hard to tell where you are at right. It would be great to instead use the default outline of the :focus state of an element use a custom outline. For example:

  input:focus-visible {
    outline: 2px dashed red;
    outline-offset: 3px
  }
  

  This way, your site have its own customized outline as a visual indicator.

  • The hero-section image could have used a descriptive alt value since it is meaningful if you look at it as it is descriptive in content.
  • Those background-patterns could have been used as value in the background property on an element. This way, you won't have to create extra html tags for each of them.
  • view plans is more better to use a tag rather than button since it looks more of a link rather than a control for opening up like a modal.
  • Only have a single h1 on a site. It would be great to change those headings into something like h2.
  • Those 3 icons on the We’re different are not links, they are just simple an img tag which is hidden since those are decorative images and since you are using svg on them, use aria-hidden="true" attribute on the svg to hide them.

  FOOTER

  • Same with the company logo, use a more proper alt value.
  • 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 aria-hidden="true".
  • For those 4 sets of links at the bottom, you could wrapped them in a single nav since those are still your website's navigational links and add an aria-label="footer" on the nav so that it will be unique.
  • Since those 4 sets are links, use a tag for each of those. Again, interactive components needs to use interactive elements.
  • A markup that you could use for those 4 sets could be this one:

  <nav aria-label="footer">
    <ul>
      <li>Our Company
        <ul>
          <li> <a href="">{link in here}</a></li>
          ....
          ...
        </ul>
      </li>
      <li>Help Me</li>
      <li>Contact</li>
      <li>Others</li>
    </ul>
  </nav>
  

  And so on, just use the first sample of the Our Company for the other list-heading.

  MOBILE

  • 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 so add aria-hidden="true" on it.
  • Also, you don't need to create 2 button for each toggle. You could have just changed the background of each button based on their state. Showing the hamburger if it is not toggled and showing the X if it has been toggled.

  Aside from those, great job again on this one.

  Marked as helpful

  3

  ---

  

  Stanislav Tiryoshin•60

  @stanislavtiryoshinPosted about 3 years ago

  @pikamart thank you very much!

  Well I think I didn't use proper HTML tags because I knew that I will not have to make the interactive parts of the page actually function. That's why I used p in the bottom nav and no proper alt's for buttons and so on. Of course in order to become a professional developer I'd need to work on readability and accessibbility of my code as well as clear layout, proper use of tags and properties, so in this case your feedback is very helpful.

  Also thank you for the hint on the hamburer button. It was my first JS snippet I used for a web page so this hint was really necessary.

  I appreciate all the advice and will make sure to use it when working on the next project!

  1
• 

  Ben•770

  @BenConfigPosted about 3 years ago

  Hey, I tried this and it fixed the issue:

  .hero-content {
      isolation: isolate;
      z-index: 1;
  }
  

  Marked as helpful

  1

  ---

  

  Stanislav Tiryoshin•60

  @stanislavtiryoshinPosted about 3 years ago

  @BenConfig well, thank you! I've never even heard of this isolation property, will make sure to check it out properly.

  0