Arrow close_button arrow_dropdown angle_left angle_right Phone Search Hand Slider Checkmark Read Icon eguide tools video
Groove Commerce
Design 1, 2, 3: Above the Fold Homepage Gold: The Hero Banner

Long gone is the notion that everything must be 'above the fold' (included in the top 600-800 px of a page) on a homepage web design. Numerous user tests and anecdotal evidence has uncovered that yes, users can and do scroll. This isn't to say that what's above the fold isn't important, because it is. Very important.

Jakob Nielsan says, "The real estate above the fold is more valuable than stuff below the fold for attracting and keeping users' attention." As an eTailer or designer, you have to decide what's going to attract and keep your user's attention. What is required information for a visitor (and at what stage of the shopping process). Then, accordingly, find a place for it on the page. Everything from a free shipping callout banner to a best sellers slider module to a simple text link for career opportunities needs to have a home.

This month's Design 1, 2, 3 examines what eTailers are doing above-the-fold, specifically looking at the primary real-estate hot spot: the homepage banner, aka the hero banner. We'll look at various Magento-based eCommerce sites (I had to choose a sample set somehow), and discuss common themes and a few mistakes.

A few things first: I'm on a 13" laptop with a screen resolution of 1280x800. Clicking an image will make it larger. To view sites, go to the bottom of the post for links.

1A. The Full-Width Banner

This seems to be the most common solution for fashion eCommerce sites.

All three images above are fairly bare-bones above the fold. A single main image that rotates (Rogan NYC's doesn't.) These bold, lifestyle shots set the tone for the site. This is important when selling apparel as consumers will buy into the emotional appeal--they want to be wrapped up in the glamour, in the attitude. The homepage banner is a way to inform and connect to the user. This is who we are, don't you what to be like us?

If you look at the scroll bar on each image, you'll see that each site has content below the fold. But they've decided their most important information is a single, concise message with compelling photograph, and that's why everything else is below the fold. It does somewhat resemble the way print magazines display fashion spreads.

I want to point something out about the Stussy site. Due to my screen size, there's a fairly strong gray bar going across the width of the bottom of the page. And considering it hold elements like e-mail and social media, a user may mistakenly believe this is the bottom of the page. Generally, try to avoid hard, full-width breaks along or near the fold line. Granted, Stussy may have great analytics and know that everyone views their site at 1920x1200 in which case, the gray bar isn't an issue. Maybe…

Here are a few sites that made sure their main banner height still allowed for the next section of the page to peek through. This is probably the best tactic when it comes to page design and length and the whole above-the-fold argument.

Looking closer at the Fred Perry site is a great transition to my next sub-point. See in the top corner the 'Quick Preview' overlay? When you rollover it, it opens up to display a collection of links for the banners. And as you rollover each link, the banner changes. And this brings me to 1B.

1B. The Faux-Width Banner
Sometimes trying to create a full width banner can be difficult if you don't have the right photography. A very wide image (about 960px) that may only be 300-500px tall can lead to some awkward photos if the photo wasn't purposely shot and cropped for the site. As a result many eCommerce sites have done what I call the faux-width banner.

toms website

This is in fact a great solution for a few reasons. 1. It means you don't have to stretch an image to fit a width that really doesn't make sense. 2. Showing navigation for the banner slides is in fact a great UI element. It allows users the opportunity to move between the slides in an informed way. They don't have to guess if it was slide 3 or 4 that they wanted. And they can jump to any slide that might grab their attention.

I also want to applaud the above eTailers who have transitioned their homepage banners to spring and/or relevant holidays like Easter. Coming across as current is crucial in building confidence with visitors. If you site still has red holiday trimming, a visitor will question how reliable and fast you can really deliver their purchases. Not to mention, you probably won't engage your visitor if you're displaying wool hats and down jackets in March.

2. The 3:1 or 2:1 Ratio
Similar to the faux-width banner, some sites use an extra column on the right of the main homepage banner to highlight other areas of the site.

Zadig Et Voltaire opts to display its high-level categories (women and men) while Blik showcases specific products (I assume that they are either best selling or new products.) Zumiez does a combination of both of these. And Fiji Water goes a different route by showcasing the buying benefit Free Delivery, additional information (perfect for a methodical shopper persona) as well as social media.

How do you choose what to use in this column? There's always guessing. But I recommend strategy and testing. If your business plan for the year includes increased social media presence, then (as mentioned at the beginning of the post) this is a 'yes, important element' that deserves to be above the fold. If you know that new products sell 50% better in their first 4 weeks, then yes, put it front and center as soon as you can. Should Zadig Et Voltaire have displayed Man then Woman instead of Woman then Man categories? It may seem banal to test that, but it could lead to an unexpected conversion bump. You should have stats for each item placed above the fold to back up those decisions.

3. Needs a Second Look

Here is a homepage that could use a second look.

I like this site, however, there's so much lost opportunity. Crumbs Bake Shop has visible blank sections which is a waste of space. Even if you have limited products or limited services, don't make it feel like you don't have much to offer a visitor. Be big and bold. There are always assurances, SEO text and other confidence builders that can be placed on a homepage to give it a more comprehensive look and feel. A great designer will fit all this in without being too cluttered.

Here are a two sites that have great background photography.

Lastly, From Around the World
I thought it'd be interesting to see what they're doing around the world. From Ireland, Spain, France and Japan.

Ireland's Interflora site is a 3:1 ratio like some of the other examples above, but also includes a left sidebar navigation. Interestingly, so does the French NafNaf site. The left sidebar navigation is slowly going extinct in U.S. eCommerce sites. Custo Barcelona has an interesting homepage banner that scrolls horizontally across the width of the page.

I really like the Japanese Muji site. The navigation is actually on the bottom of the page (I'm assuming this is responsive design, and if my screen were larger, the navigation bar would always be locked to the bottom.) The whole screen is used as a main banner and it does rotate through two slides. I thought it was a compelling choice that definitely makes it stand out. Are these the best decisions for UI and conversion rate? Perhaps not, but that might not be Muji's current goal.

To Sum Up
The 'above the fold' myth is dead. However, you still have to pay attention to what goes above the fold and why. The homepage/hero banner is a powerful area that reflects who you are as a brand, where you are in your industry, and what your quality of products and services are like. Make sure you're sending the right message to your consumers.

Tell Me What You Think
What do you think of the examples above? What do they do right, wrong? What about your own site? Have your own thoughts to add? Leave them in the comments! Thanks for checking in on this month’s Design 1, 2, 3. If you learned something new or were just pleasantly amused, pass it along. See you next month.

Mentioned in This Post
Homepage :: Stussy
Homepage :: Rogan NYC
Homepage :: Oliver Peoples
Homepage :: LaCrosse Footwear
Homepage :: Harvey Nichols
Homepage :: Fred Perry
Homepage :: Papyrus
Homepage :: Toms
Homepage :: Bonobos
Homepage :: Zadig et Voltaire
Homepage :: Blik
Homepage :: Fiji Water
Homepage :: Zumiez
Homepage :: Crumbs Bake Shop
Homepage :: Kirna Zabete
Homepage :: NorthFace
Homepage :: Interflora
Homepage :: Custo Barcelona
Homepage :: NafNaf
Homepage :: Muji

Get in Touch