What Makes a Good Website Header on Desktop and Mobile?

A website header should help someone recognise the business, find a service and take the next step. On a narrow phone, each element needs enough space to be readable and easy to tap.

Choose the actions people need most

Start with the logo, essential navigation and one clear contact route. If phone calls and quote requests both matter, give each a clear label and room to tap. Keep contact information consistent with the page and test that call links point to the intended number.

Give the mobile layout its own test

Check the logo, menu and buttons on a narrow phone, at increased text size and with the menu open. Try the header by keyboard on desktop. If it sticks to the top, check that it leaves room for content and does not cover a heading after following an in-page link.

Check the header across templates

Test the home page, a service page and an article. A header that works over a plain background can be hard to read over a photo. Our Liverpool web design team can help design and test the navigation around your users’ main tasks.

Read MDN’s guidance on the header element