When you talk to people who work in real estate, they will all tell you about the importance of “curb appeal”. Quite simply, the impression that a house on sale leaves on people when they first see it is the strongest. And the same goes for your website. If it was the house, its header would be the exterior. Once people first visit, the header is the first element they will look at. That’s why developers and designers are often tempted to cram too much stuff into the header, such as CTA elements that may be better elsewhere. With this is in mind, we’ll examine the value of CTA headers and header design in general!
Importance of the Header
If you have the right header, its use in your online promotion must not be understated. For instance, your header may contain the basics of your brand identity; by showcasing colors, slogans, and other images. Your header is the place where you display the basics of your visual identity.
On the other hand, CTA headers may contain fields where users can interact with the website in basically every way imaginable; such as language and other settings, subscriptions, and search navigation. More specifically, CTA fields like “buy” or “subscribe” buttons that lead the users towards a specific behavior are also found in the header. It could also lead your users towards a connected website, or the right social media accounts.
That being said, these are just elements that a header may contain — not elements it must always have. Not every website header is a CTA header, and you should never try to include every single function there; you will just lower the overall user experience. You want a design that captures the user’s attention, not one that tires them out. The point of headers is for them to be easily discernible, and simple to access.
Aspects of Header Design
Before you can work on the specific design of your website, you need to decide on the functions of your header. And that means taking all of the possibilities of header design that we’ve outlined above, and deciding on which of these will be priorities for you. For instance, if you’re creating a sales funnel where you want to pitch a specific product or service — your CTA field will be more important than links to social networks.
Conversely, if the point of the website is to raise brand awareness or provide information on a specific subject, a CTA header wouldn’t be the right kind of focus for you.
Styles of Headers
In order to truly showcase the advantages and drawbacks of CTA headers on your website, we’ll take a look at this issue from a more practical perspective. While we’ve only talked about the theoretical aspect of this so far, we’ll examine the practical side of headers on specific examples. In other words, we’ll see what styles of headers are the most popular at the moment; which speaks volumes about the priorities designers and website owners have in 2020. Both of these styles have their advantages and drawbacks — but the target demographic of the website and its ultimate purpose dictate the nature of the header as well.
Hero
If you opt for the hero design for your header, the focus of the header and the landing page will be on a large image. Usually, it occupies the entirety of the page that your users first see — and header elements are in a semi-transparent overlay across the image.
Provided that we’re talking about a standard image, such headers are not difficult to load, and they go in line with responsive design techniques because they look great on mobile displays. Websites that want to have a CTA header will find this style to be a good fit, because it often manages to make a bold first impression with such a dominant image right on the landing page. That way, any CTA element you implement will ride that first impression.
On the other hand, this is simultaneously one of the downsides of a hero-styled header. As we’ve mentioned, this makes the user’s impression stronger. But that has a flip side as well; if you miss the mark in terms of design elements or the dominant image of the page, users will react to that far more strongly than they would with some other type of design. In that situation, users don’t give second chances if they’re not satisfied with the style of the landing page.
Video Headers
Conversely, we’ve got the video header. This is a newer trend in the realm of web design, and it’s not one that’s completely disparate from the hero concept that we’ve talked about above. In fact, it’s more of an evolution of that than a revolution. Instead of using a single image to spark the users’ interest, these header designs focus on an entire video clip, or series of clips that serve to make a strong first impression. As you might imagine, videos can often keep someone’s attention longer than a single image – providing for better attention.
While digital videos have been around for ages, there’s a reason why this hasn’t been a trend for long. In order for this to look good, you need a high-quality video in HD. And such higher definitions mean longer loading times. Sure, you may have a speedy internet connection, but a surprising number of Internet users don’t. Plus, when you’re viewing the video from a mobile data connection, this becomes an even more amplified problem.
