The Importance of Homepage Headers
In the early days of website design and until some years ago homepage headers were purely informative and, most of the time contained the usual elements like the navigation menu and the logo, some contact details such as phone numbers and plain email addresses, and sometimes a search tool.
Nowadays, not only do we rarely publish plain email addresses on website pages anymore as they will attract spamming robots but, most importantly, the header has become a sort of “corporate identifier” and is supposed to give a quick overview – with images, videos and/or texts and slogans – of what the website is all about.
Homepage headers act the same way as print magazine covers: an attractive full-page image gives us an idea of what the current edition will be about and titles and summaries of articles are inviting us to read more inside. The main difference here is that magazines are limited in size while websites are made for scrolling and thus pages allow to host more content than a simple magazine page.
In other words, the header should, in less than a dozen seconds, let your visitors know that they found what they are looking for, that they are at the right place and that they are invited to discover more pages and content.
✳️ Logo placement
And for doing so, the first rule should be to avoid at any cost distracting your visitors with fancy designs for the navigation menu, useless animations in the main header image or awkward placements of your company’s logo for instance. When browsing the internet, you won’t be surprised to find out that, most of the time, logos are placed at the top left side of web pages and all other placements, like right alignment and sometimes centered on pages if not well implemented, will hurt website navigation.
Let’s have a look at some recent inspirational header designs that summarize current best trends in order to give your visitors the best first impression.
✳️ Top bar with contact info or Call To Action (CTA)
Above all header elements, navigation menu and logo, we often add an additional bar that is called “top bar” that can hold contact information (phone, physical address, social media links, etc…) or a Call To Action (CTA) banner that is used to highlight specific events or announcements.
While a bar with contact information is supposed to remain placed there at all times, a CTA bar can be temporary, related to special events and occasions, and also change its content and layout whenever it is needed.
✳️ Separate or merge the header with the navigation menu?
This is the very first design question to define as it will affect all further layout options.
Both options can work nicely if the layout is wisely designed and corresponds to the site’s overall visual identity. Header images, sliders or videos merged with the navigation menu can be more catchy provided we have the right images and a logo with a transparent background that allows being merged with those images.
Separating the header image (picture, slider or video) from the navigation menu may be needed in particular cases; for clarity, when using sliders or simply when wanting to give the logo more importance and highlight.
I either case, the visual of the header can be a fixed image, a slider with different images or a video.
✳️ With or without a slider or carousel?
Slides and carousels were trending some years ago until website designers realized that most people were scrolling down further the page without waiting for the next slide to load. This became even more evident with mobile phone usage as visitors using their phones to navigate your website won’t spend much time on the same page waiting for the next image to load.
Furthermore, with recent search engines adjustments, rankings have become heavily dependent upon time to first byte and carousels tend to increase this time.
But still, sliders are often quite attractive and, when used wisely, can help promote services or brands by promoting nice visual identity images and slogans. Depending on their design and implementation, they might also slightly slow down your site’s loading speed but this can be circumvented by using well-optimized images.
✳️ With or without a video background?
Video backgrounds are somehow a recent trend, mainly because of better connection speeds around the world. While we usually publish videos first on video-sharing platforms, like Youtube or Vimeo, and then embed them into website pages, this cannot be the case for videos used as backgrounds for headers because we need clean rendering without getting all the buttons and messages associated with the video-sharing platforms.
That’s why we always need to host those videos, together with all other images included in the website, at the hosting server. As the main purpose for having a video in a header is to get a more dynamic and attractive background it is important to keep those videos short, running on loop – around 30 seconds in general – and slightly dimmed with a light dark overlay so that the navigation menu remains clear and on top of the background.
It is really important to consider those videos as animated backgrounds because we don’t want the visitor to remain there watching the video but rather attract him to learn more and visit further the website.
Here again, as with sliders, video backgrounds can slightly slow down the loading speed of the homepage but this can be reduced to a minimum if the video is well optimized.
✳️ Supersized headers
Large images in headers are always very impressive but should be used in special conditions only as they might shadow the main content area. They work nicely with single page homepages that have no navigation menu at all and where the whole site’s content is laid down at the homepage.
✳️ Priority to content
The header is also the ideal placement for inviting visitors to “discover” more, either by clicking on a specific button or by suggesting there is more to read by scrolling down the homepage.
The header is mostly illustrative here and the main content is nicely distributed right below, in sections or columns.
This article covers especially styling headers for the homepage.
Inner pages might have different layouts, often with smaller images, particularly for the “news” posts where we use the main image as a header and we give it a smaller space to live in, like the articles of the example above:
There are, of course, several possible variations and combinations of the above examples and it is always important to analyze first the business’s corporate identity in order to adapt and fit the header to this image.
