How To Create A Website Hero That Saves The Day

The website hero has become synonymous with practically every website.

Ranging from singular photo banners to rotating carousels, the website hero is the first thing that your users will see when they land on your web page. The reason for its name? It’s the brand or website’s focus of attention – it’s their superman.

That being said, I regularly see solely photos in the hero section.

No text to accompany the image, just a photo.

The famous quote is “a picture is worth a thousand words” but that photo really needs to nail every message your brand is trying to deliver, and in most cases this is not the case.

What’s Wrong With A Single Image?

From a brand or website owner’s perspective, you probably understand everything about your business. But from a potential customer’s perspective, does a single image really deliver the message?

The image or even a video should demonstrate a solution or provide a glimpse of what your business does and how you might help.

By adding a headline and some copy you can now explain briefly what it is that you do, so users can read this. Even better, Google’s crawlers can read this to, and we all want to be best buds with the Google bots.

What Do You Want The User To Do?

The hero area is your first opportunity to guide your website visitor where you want them to go next, with a good old Call To Action. For example, if your purpose is to get users to request a quote or view your case studies, you won’t be able to achieve this with a photo alone.

The Blueprint For A Great Hero Block

As mentioned above, the core building blocks of an awesome hero are:

• An attention grabbing image or photo that’s relevant to the headline.
• A headline that quickly summarises the solution or says what the product is or the brand does.
• A brief sentence that follows on from the headline and instructs the user on what to do next.
• A call to action or button that is clear and obvious to direct the user to where you want them to go (and if you’ve warmed them up right, where they want to go too).

Is This The Tip To Save The Day?

No. Many of the heroes that fill up our web pages follow this blueprint. What many of them get wrong though, is that they’re tailored to look awesome on desktop devices and not on mobile. This is the crime our hero must solve.

What Are Many Getting Wrong?

Many websites will simply stack the content for mobile, not focusing on tailoring the headline and text to best fit mobile, or ensure important elements like the call to action buttons are within the fold, before scrolling.

The other most common thing that we find is that the image or photo is never really designed to work in a portrait orientation, or it’s positioned in a way that fails to work with the layout, usually just forcing the content down the page.

How Do You Get It Right?

Shown above is an example of a website that is getting this right. Leeds Castle are using a carousel style hero banner that contains all the core elements mentioned in the blueprint.

On desktop, that follows the usual good practice layout, where as on mobile you can see that the image sits at the bottom of the fold with the content area and CTA sitting prominently above the image, in view before scrolling.

They even switch out the booking CTA block seen on desktop in place of a singular button, to not over complicate things in the smaller space.

This is a really simple action, and with mobile traffic exceeding desktop, it doesn’t make sense that this simple change isn’t followed more widely.

So What’s To Swipe And Deploy?

Today’s key takeaway is the blueprint of the hero banner, but more importantly how it should work for mobile.

A few examples for inspiration and hopefully a little ammunition that if your agency haven’t delivered this for you, you can say “Can I Have It Like That” (discreetly humming the baseline to the Pharrell song of the same name).

That’s a wrap for Swipe & Deploy #44. Join me next week when I’ll share another insight or piece of inspiration from around the web. 

If you’d like to learn more about our WordPress & WooCommerce Support & Maintenance plans, drop us an email or give James a call.

Our plans provide a holistic solution to your website’s performance, reliability and security, and are inclusive of premium tools and services.