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?
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.