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

  • I guess these days, mobile browser address bars are overlays and are not persistent. – Harshal Mar 23 '15 at 12:13
  • It depends on your site and your header, really. There is no one answer to this question. – DA01 Apr 22 '15 at 19:35
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, privacy policy and cookie policy

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