Imagine the Bat Signal flashing in the sky. A shining beacon piercing through the night, calling upon a hero to save Gotham City. Nope. Hold on. It just changed to Superman’s logo. And now it just flashed instructions on where to go and...wait...what’d it say? It scrolled too fast. Oop...now it’s back to Batman’s logo. Well that’s confusing. Who do they want? And what did those instructions say? Are both heroes supposed to go? And where should they go? That’s exactly what having a slider, also referred to as a carousel, on your main landing page feels like.
That scenario above would be strange to see on TV, wouldn’t it? Usually, Batman sees the signal, receives the info from the impeccably mustached Commissioner Gordon and then takes down the bad guys. That's exactly how your landing page should work. Ideally, the top of the page should simply grab your attention (the signal), prompting you to scroll a bit for more information (Commissioner), and ending with some action at the end of the page (take down the bad guys). That's what a hero-style page layout accomplishes, which is precisely the reason they’re turning landing page image sliders into the 8-track of the internet. In this era of web marketing, the only places first fold sliders belong are in baseball or between two delicious, mini whole wheat buns.
Hero Layout Explained
Let’s go back to that term “hero layout.” To understand the term, we need to talk briefly about the fold. The first fold of your web page is the first portion of the webpage that is visible without scrolling. Consider it your "foot-in-the-door" section.It should convey the single most important thought behind your product, either garnering an action or a continuation toward your main goal. [caption id="attachment_3287" align="aligncenter" width="758"]
Pictured: The first fold on a webpage.[/caption] This first fold can be filled with many different things. Images, widgets, sliders (please don’t, though), forms, content and a whole lot more. That first fold is the most valuable real estate on your page for communicating your message. With that in mind, let’s give the hero layout a concrete definition: The hero layout is based around a single content section that takes up the first fold of a page with one clear goal. It really has that feeling of a superhero signal in the sky. It’s big, stationary and grandiose. It takes up your entire screen, yet feels simplistic at first glance. [caption id="attachment_3288" align="aligncenter" width="758"]
Here, the hero layout builds anticipation.[/caption] And it consistently outperforms homepage sliders. Why?
Home Page Sliders Hurt Conversions
Getting a person to visit your site is a small miracle in itself. So many things have to go right. Whether it was solid social media outreach, great SEO, strategic paid advertising or something entirely outside those realms, having that visitor choose your site for their internet viewing experience is a gift. So why would you greet visitors with something that numerous tests are showing they do not want? When you break it down...
1) Sliders Have Low Click Through Rates
1%. Any idea what that represents? Out of the 3.7 million visits the University of Notre Dame's official website pulled in during a six-month period, that’s how many clicked on ANY of their slider images. If only 1% of your visitors are clicking on whatever is occupying your above-the-fold area, you're wasting your website's prime real estate. What’s even more amusing is what image they clicked on. 89.1% of that original 1% clicked on the first image they saw. That means just 10.9% of clicks were divvied up between four other images. While that’s only one example of many, it raises a legitimate question: do you want something that takes up so much of the landscape to command so little action? [caption id="attachment_3289" align="aligncenter" width="570"]
Low click through rate (CTR) from SearchEngineLand study.[/caption] What’s even scarier is how much the actual shape of the slider can hurt a site. As the prevalence of banner ads has gone up, so too has the banner blindness phenomenon. Visitors are becoming so desensitized to ads that they don’t even notice them. [caption id="attachment_3290" align="aligncenter" width="416"]
This heatmap image shows eyes completely missing the slider.[/caption] Guess what else looks like a banner? Guess what else visitors think is an ad? You know where this is going. They’re skipping over your slider because it looks like an advertisement. Banner blindness has bled into first fold sliders, leading to a severely decreased CTR.
2) Sliders Aren’t Often Mobile Friendly
In January of this year, 55% of internet usage was conducted from a mobile device. That’s the first time EVER that mobile overtook desktop in internet usage. The fact of the matter is, sliders are almost never mobile friendly. Those sprawling, beautiful images you’ve got scrolling around with that ever-important CTA text? Get ready for that to shrink to microscopic size, rendering your message (and image) virtually non-existent. Then you have to add in the nature of WiFi-less data surfing on a mobile device. Websites already take ages to load on data plans, but imagine that phone having to pull up huge images through Javascript while loading the rest of the site AND resizing the page (if it’s responsive). You can almost hear the “back” buttons being frantically pushed.
3) Timing Your Slider Transitions Is Tough
Timing has always been the Achilles heel of sliders. They generally suffer from two different issues:
- Too Quick: Sliders that seem to give you two seconds between images run the risk of not being comprehended at all. Take a look at this slider and try to read everything. Frustrating, isn’t it? Think about those that are hard of sight, low of literacy or aren’t natural English speakers. A quick-scrolling slider all but guarantees frustrated users and, ultimately, bounces from your site.
- Too Slow: To combat quick scrolling, some have opted to allow a generous amount of time to pass between images. The problem they face, though, is too much time passing, leaving the user to think the primary image is the only image. That leads to low/non-existent interaction with images that follow the primary one.
The main argument slider-lovers use to counter this is the “choice” slider, where the user has to advance the images themselves with easily viewable slider buttons. While this is slightly more helpful, they still run into the issue of undiscovered secondary images. It’s an inconsistent practice that results in missed opportunities.
4) Sliders Hurt Your SEO
As I mentioned earlier, the load time for a site with a slider can be absolutely back-breaking. Sliders require Javascript to be pulled every time the page is loaded. Add on multiple hi-res images and your load time can get bogged down, which is something neither Google nor your visitors will enjoy. Slow load times lead to bounces, and bounces launch you down the organic search rankings. Then there are the other factors like unwanted H1 tags that accompany sliders, text on images that aren’t read by Google and the usual Flash required to run a slider that ends up doing unnecessary damage to your web page. You can see the disadvantages of having a slider as your first-fold mainstay. They’re rampant. If there are any tangible advantages, they’re surely outweighed by problems. But if you're ready for something worthy of your website's first-fold area, look no further than the hero layout.
Why You Should Use The Hero Layout
What do sites like LeadPages, Evernote, Dropbox, Spotify, Square and a whole lot more have in common? The hero layout on the first fold. There's a reason why these types of companies are embracing the hero layout. This layout is one of the highest-converting styles on the web. And there are a multitude of reasons for that.
1) They’re Static
Where sliders have trouble with load times and sizing, hero layout pages don’t sweat that aspect. For one thing, you don’t have to pull near the amount of imagery or Javascript on a static page. The static nature of the page means there are less moving parts to synchronize, which should help tremendously with load time. Plus, one unchanging layout has a higher chance of being more uniform across all browsers and device sizes. A static page interacts better with responsive AND non-responsive sites than a dynamic slider would, which means a more consistent look and function no matter the device. Which really leads into a bigger, overarching advantage. . .
2) They’re Consistent
In baseball, pitchers are renowned for their consistency or scorned for their lack of it (I’m looking at you, Danny, the kid who drilled me with a scorching 48 mph pitch in Little League). Repeating the same motion over and over with little variation translates to a consistent, controllable result. When it comes to a landing page, that’s what you strive for. The same experience for every single visitor to your site. Think about it: if you perfected a sales pitch, you’d do everything to make sure that message was read the exact way you made it, right? A page that looks and interacts the exact same over multiple devices and browsers does that. If any one thing is off — say, a slider with your main CTA not loading or being too small — you’re cheating your customer and losing out on sales. Hero layouts capitalize on this consistency.
3) They’re Better for SEO
Granted, the content in the folds below that first fold has a lot to say about how your page is ranked, but there’s something to be said about speed deficiency and H1 tag duplication problems that a hero layout can fix. Normally, whatever you choose to put in that first fold won’t have that extra inherent H1 tag that comes with a slider widget. Pages can only have one of those, and having two can be seen by Google as keyword spamming. A slider-less page doesn’t have to necessarily worry about this (unless you actually ARE trying to keyword spam, in which case…read this article). Then comes the boost in loading time a hero layout gives you. The issues we discussed in the slider section aren’t as prevalent in a hero layout because there’s just less to load. The decrease in load time bumps you up in the eyes of Google and the hyper-short attention spans of your users.
4) They’re Flexible
Henry Ford had a great quote that talked about the slider layout. He just didn’t know it at the time. He said,
“You can have (the Model-T) in any color you want. As long as it’s black.”
With a slider, unless you have waves of coders you can throw at it like Netflix does, you’re basically stuck with sliding images and a button on the image. That’s it. Seriously. With the hero layout, you have a whole world of possibilities in front of you. A solid color background with a content box and single button? Done. A picture that just so happens to interact (statically) with an opt-in form? [caption id="attachment_3297" align="aligncenter" width="758"]
Done.[/caption] The opportunities to mix and match to make the most optimized landing page are readily available in a hero layout, whereas the slider option gives you one type of layout. But what sort of article would this be without examples? It’d be a college algebra textbook, that’s what. So let’s throw some solid imagery your way with a few great examples.
4 Great Examples of the Hero Layout
EVERNOTE
Look at the simplicity of this page. Stunning photo in the background, clear call to action centered in the middle of the page and an opt-in opportunity right after the introductory copy. Plus, they do something pretty subtle yet wildly clever. Look at the bottom of that fold. They start their next section of content right above the fold to let you know there’s more to scroll down for. AND they make those sections clickable. This is a solid page that does a lot of things right.
DROPBOX
This is one of the most simplistic examples you’ll find on the internet. They don’t even have intro copy like Evernote did. There’s just a headline, an signup opportunity and a bit of “Learn More” text to prompt some scrolling. But it works. The simplicity goes a long way and makes you focus on exactly what they want you to. Another interesting thing to note — check out their animated photo. It’s just a simple GIF that cycles through a few runs then goes stationary. It’s easy to load, scaleable and gives the simple page some not-too-distracting yet engaging movement.
SPOTIFY
This one’s a little trickier. But there are two things I really like about this apart from the obvious things it does right (engaging, quick load time, etc.). First, their imagery. A gorgeous photo, undoubtedly, but I like how it implicitly calls on associative emotion. “Remember when you relaxed on the beach with your friends, soft notes of Led Zeppelin floating in the air?” “Remember when you poorly sang ‘Bye Bye Bye’ in the middle of that 7-11?” Evoking emotion is a powerful way to inspire action. Second, there are two opt-in opportunities in the same fold. That green button stands out big-time, and they’ve got it in two places: the universal nav bar and smack-dab in the middle of the page. Even if you don’t click the download button on the first fold, that button association will follow you as you scroll down the page. It’s also a parallax site, which is something we wrote extensively about here.
SCHOOL OF GREATNESS
This is actually a page one of our customers designed using a massive converting template we made (that you can grab absolutely free here). The above pages were all for big businesses, so I wanted to show you what a hero layout can do on an individual level. The striking image plays a nice foil to the content box that tells you everything you need to know about what he’s offering, adding a strong call to action at the bottom of the box. Then, for an added bit of credibility, he’s included a “Featured In” bar to lend to his expertise. These are all high-converting pages. All beautifully designed. All technically sound. And you know something interesting about all these examples? They don’t have sliders in the first fold. The evidence is there to show that, while you can make it work, it’s just not a design that should be embraced anymore. Not with the success of the hero layout.
