insure-landing-page

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  Hi @Rishabh-Pagaria nice work on this one! 🙌 I just had a quick look at your site and I think in general it looks good. In response to your questions:

  1. I think what you have works well. I personally think it is ok for the user to be able to scroll the page when the menu is open as it avoid the risk of trapping them there. Some things to consider to make this work nicely are: close the menu if the user clicks or focuses outside it; and change the hamburger icon to an X when the menu is open to show the user where they can close the menu.

  2. On point two, that's tricky! I imagine that you are hiding and showing the hamburger button with a media query, but using JS to show/hide the hamburger menu and that these two things are aligned.

  Hamburger menus are very tricky to get right, I bought a tutorial from Andy Bell's site for about $5 which is very in depth, and spent quite a bit of time going through it. It's a pattern that comes up again and again, so for me this was worth the investment and has helped with a lot of challenges.

  Some other points you might like to consider (I'm mainly focusing on the HTML here) are:

  1. On the design, there is a lot of spacing between the sections and you probably want to reduce this a little as it doesn't feel right at the moment.

  2. Rather than using a div to open the hamburger menu I would suggest a button as it is an interactive element.

  3. Similarly in the footer I would use a nav element for the list of links as you can have more than one per page no problem.

  4. In the top nav the li items should contain a link, as this will make them tab-able - I was a bit confused as I was being sent to the bottom of the page when I tried this )

  5. In general I would suggest using text-transform: uppercase rather than writing in capital letters as if the design changed later it would make changing things much easier.

  6. Last but not least! Please remember that you should only have one h1 per page and that the header order should follow down the list without skipping any levels. E.g. you shouldn't have a h3 after a h1 without a h2 in between.

  At the moment you seem to be using the heading levels to visually indicate the document hierarchy? E.g. the h4 and h3 elements you have used for the elements that have the appearance of buttons. These should just be standard links and not headers.

  This last point is really important. I have found that a well structured HTML document is a really important foundation for writing code efficiently and avoiding problems later on. Personally I do all the HTML first and don't worry about the styles until later.

  I hope this helps and keep up the great work!! 👍 Please let me know if anything is not clear. Cheers 👋

  1