Hero banners should be a key part of your home page. Visualizations coupled with enticing content must become the most important 3 seconds of a visitor’s life.
Banners can contain powerful headlines, awesome imagery, tempting snippets, and a call to action. All with the aim of directing the visitor to carry on. It forms part of your visual marketing campaign.
Or… you could skip the banner and not bother with the CTA button. That’s great if you want to risk having the viewer leave your site in 0.001 seconds.
Getting the banner right makes a huge difference in rewarding the visitor for their time. Give them the assurance that they made the right decision to visit. Think of a product’s packaging in a shop. If it conveys what’s irresistibly inside, then you’re more likely to pick it up. Hooking interest is the crux of the banner.
Let’s go over 5 awesome tips for an effective hero banner.
When is the ideal time to create the hero banner?
Straight after the header has been forged in stone, I’ll work on the banner. Spending excessive time on this doesn’t bother me. It helps to define the messaging that’ll be carried onward throughout the site.
If the banner informs the viewer that you’re an award-winning architect, then the next section better back it up, rather than showering the page with images of a beach. Would you purchase a product again if the contents didn’t resemble the packaging? The banner allows you to set out the window of what comes next, and it will influence decisions for content and other pages.
The hero banner dangled the carrot, now serve the meal!
This banner demonstrated the client’s use of digital technology without appearing complex or conflicting with the headline’s focus on social media marketing. Rather than a tech-heavy image, we opted for a business using mobile equipment to increase relatability.
Does Image Sizing and Responsiveness Matter?
Of course, if you care about user experience. Depending on your image tool of choice, a landscape layout of at least 1920px x 1080px should be the starting point. Go for the best resolution that you can obtain with your brain locked onto the color scheme for the site. If the color theme of the website is red, then steer away from blue-hinted images. Unless you’re planning a high-contrast impact. And please, don’t dodge image compression, converting PNG to JPG where required, or the eventual WebP format.
The sublime image resonates with the branding and should tantalize visitors enough to dig deeper. No matter how big the screen, the chocolate stands its ground behind the headlines and isn’t fighting for attention. The stronger the connection of the image to your brand, then the stronger the impact on your audience.
Because it works for the desktop, it’s easy to shrug your shoulders when the image on the mobile view loses its effect. Hold your horses! My favorite page builder, Elementor, gives the facility to add an alternate image for the mobile. This saves you from creating a separate section for the mobile. My quick tip is to add a copy of the original image, and then resize with Wordpress’ scaling and cropping to obtain the portrait layout.
The background image for the mobile view below is an alternate size of 400px x 700px compared to the desktop image of 1920px x 1080px, allowing a better presentation with the headlines. Responsiveness should always include font sizes too. And I recommend using REM instead of Pixels for sizing to make the banner’s contents more accessible. Below shows the final output based on the alternate images.
Why sliders/carousels should be used below the fold rather than on the banner
[Drumroll] This argument rages on, though I’m a firm believer that the age of sliders, prominent a decade ago, is not recommended for the hero banner.
[Fights off the onslaught] Hold on, sliders can still be applied elsewhere on the home page, especially below the fold (that’s the bottom of the page before you scroll downwards on your device).
Sliders cause loading delays on your page, and even if it’s super-quick to load, the viewer may have to watch many slides to get the full message. You could lose their interest before they hit the barn-storming climax. Let alone did you have enough powerful phrases and images to maintain the momentum?
Did we need 3 slides to simply state that ‘We’ll show you how to dance in 3 easy steps’? And imagine the viewer seeing Slide 2 before Slide 1; well, in that case, the order is all messed up.
We worked on a site where the images were so varied in color and quality that the 12-slides specified drove me crazy. Just because twenty-other sites do it, doesn’t mean you follow that path. If the evidence is strong, then go ahead, but be mindful of the lag it’ll add to speed. Remember, a bone-crunching headline doesn’t need a trilogy of screens.
I challenge you to check the scores with the slider above the fold and below, and the difference will be stark. The same applies to video backgrounds or animated GIFs where lazy loading has been applied to all images; you’ll see drops in the % score.
What is the ideal page speed and why is it important for the 3-second Conversion?
Not optimizing images hurt the loading of the home page. This leads to a drop in the page speed score, and ultimately if the visitor remains on the site. Home pages with a heavy-duty banner, sliders galore, and several font families increase the likelihood of breaching the 3-second rule.
Ambiguous commentary impacts conversion too. When the banner doesn’t fit the reason that led the viewer to your site then the trust equation is wiped out. Choose your wording carefully. Keep it to the point. Poke their interest to go further.
Google understands human impatience, hence the rise of the Core Web Vitals. I can’t help but test page scores regularly as I build sections. Optimizing images, ensuring that fonts are preloaded, and not throwing a ton of text may prevent visitors from jumping ship upon arrival.
Time and again, I’ll see punches in the air because sites are hitting 98+ % for the desktop score. Though you want to do all that you can to hit 90+ % for the mobile. 70% of viewers are coming from such devices.
What happens above the fold will significantly impact the score, and that’s why I advise on sliders/carousels being deployed below the fold. If the banner’s full headline requires the viewer to scroll down, then you’re asking a lot.
To round off conversion, the call-to-action button is often confused as simply a ‘contact me’ or ‘see more’ link, when in fact it can provide a message to convert the viewer. Rather than the state ‘see more’, spin it to be a more active invite such as, ‘Find the best design for you’.
Implementing SEO Keywords and how to craft a powerful headline
Making the banner’s headlines relevant for search engines and linking to the basis of the website is massively important. Keywords form a major part of SEO. Headlines without keywords are on par with a car without wheels (which is fine if you’ve converted it into a unique garden studio).
In the vital first 3-seconds, visitors will take note of the headline. Punchy and emotive words that demonstrate a solution or empathize with a problem can hook the viewer. Depending on the domain, or the promise made in the Google snippet, the headline better repays visitors for clicking to reach your site.
There is a danger of headlines becoming diluted and losing impact when forcing in keywords, thus watch out for text sounding unnatural in delivery. Say it aloud and revisit if the words are not hitting you.
A common trick is to add power words coupled with numbers leading to a promise that can only be met if they keep reading on. Single sentences of less than 10 words are stronger than a lengthy paragraph. Great examples are news sites where conversion rates are high.
Although the keyword ‘architect’ is only present in the sub-header, the headline text of ‘In 3 affordable stages – we’ll design your perfect home’, aimed to give an appealing guarantee of what to expect by continuing.
Try to define what makes you different from the competition. Resist fancy words. No one wants to open a dictionary to understand the context. And avoid cliché slogans that are overused.
The call-to-action of ‘get the blueprint’ should prompt the viewer to do just that after they’ve been hooked by the words ‘affordable’ and ‘perfect home’. Tug the heartstrings without sounding like an overplayed record.
Using Stock Photography for the Banners
Any temptation to use images taken in your smartphone or discovered in the attic should be left well away from the hero banner, unless they are high-quality resolution, have perfect setting and lightning, and tick all the boxes of photography 101.
Not spending time researching images that complement the website’s messaging will hurt the brand. The hero banner must drive a torch into all viewers’, and not give them an irritating squint.
The simplest solution is to use stock photography websites where the images will contain the skill of the photographer that will make you stop and take notice. Experience is evident in the images. Imagine a vault of images that tell a story, continue a theme, or give you a massive range of possibilities to dance with the headline.
The key is opting for using stock photos that are authentic and resemble real life, rather than traditional staged stock photos. Authentic visuals will outperform low-quality images any day, making your hero banner even more impactful.
Conclusion
When a hero banner possesses enough imagination and thoughtful wording to stop the viewer from closing the window then you’re on the right path. Always keep them simple and ensure the message clearly directs further action. And never be afraid of changing them regularly, at least every 2 months, otherwise, the repeat visits will lose the initial pull. Surely as the basis of the website changes, so should the banner.
About the author
After surviving a brain tumour in 1999, Imran started ticking off goals to achieve, and being proud of his creativity. Although he forged a career in Health Analytics, he always sacrificed time for those goals including Digital Art, Creative Writing, and meddling with websites.
By 2020, with vast experience, a Web Design Agency was set up as well as platforms to support anyone that wanted to learn. And from that moment he decided to use Elementor Pro. Sharing is his ethos, and he can be approached for guidance and support. Imran’s a Geek, a Nerd, an adoptive father, a tinkerer and a promoter of anything that makes him smile.
