6

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

2
  • I guess these days, mobile browser address bars are overlays and are not persistent.
    – Harshal
    Mar 23, 2015 at 12:13
  • It depends on your site and your header, really. There is no one answer to this question.
    – DA01
    Apr 22, 2015 at 19:35

1 Answer 1

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.