Saving Space Above The Fold In Web Page Headers

I recently visited two sites that I really liked, but only one of them designed their header space efficiently, such that they maximized the utility of the space above the fold. For those who don’t know, the space above the fold gets the most visual attention from visitors since it is by definition space visible without scrolling. While screen sizes vary, a site’s header is above the fold in 99% of the cases. 

One site was my friend Keri Morgret’s model battleship parts site, Strike Models. As you can tell, the site is based on the Thesis WP theme and they’ve got a huge header area focused on branding.

Strike Models Above The Fold

Regardless of whether you’re commercial or nonprofit (or just hiding your commercial nature to maximize linkability), there’s a great reason NOT to use such a header. Namely, that you’re wasting prime real estate that can help you move visitors to take the actions you desire.

Consider the case of Ethnio, a user recruiting service developed by Bolt | Peters. Their logo takes up just enough space to identify the site, and the rest of the header is a simple but sufficient band to enable navigation.

Ethnio header above the fold - efficient use of space

They get a lot more done in about half the space!

Some valuable uses for your above the fold space in design:

1) Promote your services.

2) Highlight quality blog posts to get visitors to convert to subscribers as fast as possible (eg fewer visits/less time).

3) Feature an email subscription signup box to build a list.

4) Sell premium ads.

5) Encourage people to join your site/group/organization.

6) Invite users to search your catalog. (Assuming you have strong in-site search – see this review of a few merchants and affiliates as to what constitutes a quality insite search engine.)

eBay used to have an incredibly obvious, eye-catching search bar as the feature of their home page, and I’m certain that’s because they had a strong search functionality. Today the browsing options are more prominent, but the search bar is still there smack in the middle of the page.

It’s especially crucial to get this right on your homepage because the homepage needs to quickly identify the site and its purpose and then funnel users deeper into the site. Making efficient use of your space above the fold by limiting the size of your header is an excellent design decision.

– If you have some other variations on this to share or questions/suggestions about the fold, header space, etc, please let me know in the comments.

– If you liked this post on usability, add my RSS feed to your reader (that link also lets you subscribe by email if you prefer). Either choice is free :).

The last word about the space above the fold, space below the fold and what you need to know. “The fold” comes from newspaper terminology – the space above the fold appears on newsstands and features the stories editors think will sell paper and/or are most important. That terminology has carried over to the web, where it is sometimes known as the space above the scroll. There’s some history to it and some great studies/reading on the topic at the following pages:

1. History of the fold and blasting the myth that people don’t scroll past it

2. The myth of the fold disproved by user testing, and how to encourage/discourage scrolling.

3.  Clicktale has some large scale data disproving the non-scrolling myth and some nice takeaways at the end.

4. More valuable takeaways on product detail pages that provide nuance to ClickTale’s data – even if people scroll, it doesn’t mean they’re doing more than skimming.


Author: sroiadmin