4
6 Comments

[Ask IH] Hamburger menu concept

First of all this is my first post.
I am working on a project based on the PWA concept, this mean is a cross betwen a website and an native mobile app.
In my opinion the HTML language together with CSS and javascript has matured enough to be another alternative to mobile application development.
I made some research tha past days and the biggest downfall is still user interaction, like:

  • In a website when you open the hamburger menu container and press the back button it will go back the whole page, but in the mobile app it will hide the container.
    My question is: it will be wise to implement this feature in a normal website, beside PWA?
    This is not only the case for hamburger menu but also for information pop-ups also.
  1. 1

    Is there way to do a javascript fix?

    1. 1

      It' s not tested but I think it can done with location hash property or maybe with e.preventDefault

  2. 1

    Do you want your mobile users to feel home at your website (ie: interact the same way that they do with other UI's on their smartphone)? Then go for the PWA approach and hide the container.

    For example, check out this website (Indiehackers.com) on your smartphone device. It has a nice balance by doing the hamburger menu thing, without making it extra native by fixing the top navigation.

    It is "native enough" to feel comfortable at your small smartphone screen.

  3. 1

    If your normal website should be indexed by and found in Google, I would follow the classical approach with navigation between pages. Simply because Google indexes pages so the notion of a page is still essential for being found in Google. They try to get better in indexing PWAs, but are not still there yet, at least not without your help. (Google server side rendering to get more details.)

    But if it's really an application, without the need to let subpages be indexed by Google, go for the PWA approach.

    1. 1

      I believe you are referring to populate the site content with the help of an API with jquerry/ajax. Yes, this kind of situation is bad for SEO.
      But I will use server side rendering without an API, the content will be served in html itself. Think something like this:

      • the hamburger menu container is embeded in html but is hidden with CSS (opacity: 0), in this form the search engine spiders can craw the site.
        PWA must be fast, that means without bloatware like bootstrap/bulma and without jquerry, it can be done in CSS grid and vanilla js.
      1. 1

        Then I think I did not get what your question was about