Websites fluctuate in model, format, and high quality. But one factor all of them have in frequent? Headers—that strip on the top that makes for straightforward navigation.
Despite taking over minimal actual property, headers are essentially the most closely engaged-with component on a web site. Businesses trying to go away an impression will attempt to strike an ideal steadiness—of offering a simple and intuitive but distinctive and stimulating expertise.
In this publish we’ll be sharing 24 web site header examples whereas breaking down:
- Exactly what a web site header is
- What to incorporate in your web site header
- Best practices to optimize for conversion
This means, you may present a strong consumer expertise whereas additionally supporting your advertising objectives.
What is a web site header?
An internet site header is a visible typographic strip or menu that usually runs throughout the highest of a web site. It incorporates quite a few clickable elements, like a brand, navigational tags, login buttons, and extra. Virtually all web sites—even essentially the most primary web sites—function a header on their homepage, and lots of have variations of the header on the remainder of their pages.
Here’s a really primary, instantly-recognizable web site header:
As alluded to above, web site headers have a twin duty:
- Navigation. First and foremost, they want to have the ability to successfully information website guests to different pages on the web site.
- Marketing. When designed proper, a header can (and may) be a advertising asset and promotional automobile for your corporation.
What ought to a web site header embrace?
Below you’ll discover quite a few components that may seem in a web site header. But it’s vital to notice that not each header will function all of those. It all will depend on your business, enterprise sort, and web site format. Furthermore, a header could change relying on which web page you’re on throughout the identical website. For instance, the homepage header could function 5-6 clickable components, whereas on the assets web page, the header may embrace fewer clickable icons.
Logo
With only a few exceptions, all variations of a web site’s headers will prominently function the company logo which, when clicked on, brings the consumer again to the homepage. If they get misplaced, they will all the time depend on it to direct them again to acquainted territory.
This can also be core to any web site header. Typically you’ll wish to hold your fundamental navigation choices to between 5-7 components, however which pages you hyperlink to will fluctuate relying in your area of interest. For some companies, the navigation menu hyperlinks to the about us web page, product or providers web page, pricing web page, assets web page, and get in touch with us web page. For others, it’s to the careers web page or first-time sufferers web page. It all will depend on the business.
Most SaaS and tech web site headers look one thing like this:
- Product offers guests an in-depth view of the varied options or product varieties.
- Solutions leads guests to a web page/hub the place they will see how the corporate’s platform could be leveraged in numerous situations, or see totally different packages.
- Resources typically incorporates the weblog, case research or testimonials, information base, and/or whitepapers.
- Pricing will lead guests to a complete web page wherein the platform’s numerous subscription packages are displayed. It’s value noting that some SaaS platforms draw back from making their pricing packages public. This is particularly true with reference to enterprise options which can be custom-made and lack a uniform pricing construction.
Search bar
In the sooner days of the web, search bars had been way more pervasive and closely used than they’re as we speak. You’ll know a search bar whenever you see it, with most websites utilizing a magnifying glass icon to point the component’s operate.
You’re extra more likely to discover a search bar on a weblog menu header than on the homepage header. Still, some websites function it on their homepage header. Brightcove, a number one video internet hosting platform, apparently sufficient includes a search bar however doesn’t function the extra frequent pricing component.
Shopping cart
A staple of ecommerce web sites, this CTA needs to be on the highest proper and both a procuring cart or procuring bag icon.
Though these are extra generally displayed in a web site’s footer, some web site headers embrace hyperlinks to social channels. Here’s an instance:
Login area
Any web site that has a login possibility ought to embrace the login area in its header as properly. If you’re an lively buyer, you’ll have a consumer and password which you can punch in to achieve entry. Most main platforms give you the choice of gaining entry by way of your Google account, as properly.
CTA
One factor you’ll discover in nearly the entire examples on this publish is that the header incorporates a name to motion. As that is essentially the most closely used component on a web site, you’ll wish to make the most of that to assist assist your corporation objectives. This might be to make use of a free device, join for one thing, contact the enterprise, begin a free trial, and extra.
Website header examples & developments
Though they’ve only a few elements, there are a ton of the way to configure your web site header. Let’s take a look at much more web site examples to provide you concepts and inspiration.
Single-line header with left-aligned brand
Basic however efficient, Zoho has simply 4 clickable navigation components plus a search bar. Notice additionally how Zoho opted for proper alignment. This accentuates the brand, giving it extra room to attract guests’ consideration.
(*24*)
Single-line header with a notification bar
While the header itself is fairly atypical, the banner on high is supposed to attract consideration to one thing new, vital, and/or thrilling. Elementor used this lately to announce that it now provides cloud hosting for WordPress.
SE Ranking is presently utilizing its notification bar to advertise assist for Ukraine:
These banners will, in fact, embrace a CTA. Once clicked on, guests shall be directed to a delegated touchdown web page detailing the supply within the banner.
Two-tiered header
A two-tiered header may help current extra navigational choices with out overwhelming guests with one steady line of icons.
Two -tiered hHeader with notification bar
Amplitude added a notification bar above its double-tiered header to advertise its upcoming convention. The notification bar is equal in size to the header, making it really feel much less cluttered and extra like a separate part of the location.
Header with a utility bar (sticky bar)
Some websites affix the header in order that it sticks with guests as they scroll down the web page. Their rationale is easy: Provide your guests with the choice of navigating to any a part of your web site at any time.
This header sticks with you all the way in which to the underside of the location.
Floating header
As seen on Mixpanel’s homepage, a floating header is just like a sticky bar, the distinction being that whenever you scroll down, you see the webpage under and above the header, thus making a floating impact.
Some web sites can’t afford to be scarce with the knowledge they share of their headers. In these circumstances, utilizing a mega menu can show very helpful.
Usually seen on retail and ecommerce web sites, multi-navigational headers enable for customers to simply leap from one sister firm’s website to a different.
Left-aligned vertical header
The first of the non-traditional header examples, you’ll discover lots of the identical navigation menu gadgets hanging vertically to the left.
Right-aligned vertical header
Same idea however this time aligned vertically on the correct. These guys took it a step additional by having every menu merchandise cling vertically, as properly.
Hamburger slide-in
Less frequent however nonetheless participating, hamburger menus are a pleasant demonstration of glossy net design. The background goes darkish because the menu slides in, serving to draw guests’ consideration to the clickable choices.
Here’s the identical factor, simply on the opposite aspect:
Full takeover slide-in
You can get actually daring and have the menu prolong over all the display screen, like Vimeo does:
Website header greatest practices
- Use colour distinction. At naked minimal, there needs to be a ratio of 4.5:1 between your headers’ background colour and your chosen font. This goes for the header together with any secondary info included round it. You might also wish to darken the background of a web page as soon as the header menu is exhibited to make it extra targeted.
- Include a CTA. We talked about this above however it’s value mentioning once more. Whether it’s to contact your corporation, strive a free device, begin a trial,
- Make it sticky. Some web sites simply wow you with their design and dynamic scrollytelling, however finally, most web sites have one clear goal: Conversions. You have about 15 seconds to supply guests worth earlier than they bounce, so it’s essential make it as straightforward as potential for guests to navigate to vital pages, always. Not to say see that all-important CTA always.
- Make it intuitive. Before choosing one for your individual web site, look at opponents and different websites in your area of interest to see what’s commonest. Website navigation just isn’t an space the place it is best to attempt to be distinctive or “disruptive.”
- Optimize for cellular. Unless you go together with a font measurement solely seen underneath microscope, a horizontal header just isn’t an possibility on cellular. The commonest strategy is to configure a hamburger menu for cellular shopping.
It’s value noting that if you happen to want it, you don’t need to lose the search bar and even the CTA button when optimizing for cellular. Here’s how Hubspot does it:
- Stick with easy fonts. Legibility is all the things with regards to UX (and because it seems, copywriting psychology too), and it’s doubly vital with regards to your website’s most foundational clickable component. Sans Serif font is frequent for web site header textual content because it’s extremely legible.
Good factor Lemonade didn’t use its brand font for its header font.
Website headers: A fragile artform
Coming in a wide range of sizes and styles, web site headers are crucial to your website’s success. Whether you select to go for a extra conventional design or one thing a bit extra experimental, it’s vital you adhere to common greatest practices. It’s fairly oblivious when a web site has aced the header component. Visitors to your website will come away having been supplied a succinct but stimulating navigational expertise. Very typically, that is instrumental in main them in direction of your final enterprise aim; be it touchdown on particular pages or truly changing into paying clients.
About the creator
Yoni Yampolsky is a Marketing Manager for Elementor. With greater than 10 million lively customers, Elementor empowers nearly anybody to create beautiful WordPress web sites, code-free.