What is an average header height for mobile websites?

  • What is recommended/average header height for mobile websites. Browsers such as Chrome and Safari have an address bar at the top which takes space so in terms of UX how big the header (eg bootstrap navigation header) should be?

    enter image description here

    I guess these days, mobile browser address bars are overlays and are not persistent.

    It depends on your site and your header, really. There is no one answer to this question.

  • tohster

    tohster Correct answer

    6 years ago

    The correct answer is: it depends on your app.

    But here are some important considerations for mobile websites to help you make the decision:

    • OS guidelines. Mobile OS's publish guidelines around header heights. IOS has guidelines for menu and nav bar layouts (for example, see this). Google also publishes guidelines for Material Design sites (here).

    • Ergonomics. Whether or not you decide to follow guidelines, minimum bar height should be design so that it's touch friendly. This article has some excellent guidelines on touch-friendly heights based on specifications from Apple, Microsoft, Nokia and others. Although it's a bit dated, it notes:

      • Apple's iPhone Human Interface Guidelines recommend 44px minimum dimension. Microsoft recommends 34px, and Nokia has a minimum of 28px.

    Hope that helps.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM

Tags used