How to make better sticky headers

If you’re a web designer, it helps to use sticky headers to guide your readers to your calls to action. But how can you optimise these for the best results? Let’s take a look at some good practices to get the most from your work.

Image credit
What makes a great sticky header

When you’re designing HTML 5 ads, sticky – or persistent – header design principles can be very useful. These types of headers are ideal for users if they are high-contrast, unobtrusive and minimally animated. Here are some good practices to know.

1. Keep them small

When you design sticky headers or HTML 5 ads, keep them small to maximise the content-to-chrome ratio. This makes sure the ad is big enough to be readable and tappable, but doesn’t take up valuable content real estate, especially for mobile users.

2. Consider content and contrast

Look at whether the sticky header or HTML 5 ads have been designed with sufficient contrast to the content in all sections of the page. If you aren’t sure, professional designers such as can bring the latest best practices to your work.

3. Minimise motion and keep it natural

Too much motion is tiring to readers and becomes irritating. So keep it natural and minimal and ensure that any actions are responsive so the motions make sense.

4. Make use of partially persistent headers

Not all headers need to be persistent and your A/B testing may show that these aren’t fulfilling your users’ needs. Try alternatives such as partially persistent alternatives which are less obtrusive.

5. Do you even need a sticky header?

As a designer, it’s easy to assume that what you’re doing is the best course of action. But sometimes, a completely alternative course of design action is worth trying. Maybe, for example, you don’t actually need a sticky header at all!

Image credit
Design features such as HTML 5 ads and sticky headers can be extremely useful when it comes to guiding website visitors to your intended actions. These tips above will help you to optimise your work for the best possible results.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top