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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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:
Hope that helps.