What’s above the fold on your website?

Websites are now often an endless field of text, images and ads, so why is the content that appears ‘above the fold’ so important? And what is the fold online anyway? While the terminology might seem out of date, websites still rise and fall based on their website design strategy and what they put above the fold, and it’s essential to understand where the fold lies, both on your own website and when buying advertising space or collaborating on editorial content on other sites.

What does ‘above the fold’ mean anyway?

The phrase ‘above the fold’ comes from printed newspapers which are typically displayed with their front cover folded in half. This means that any text, pictures or advertising which appears on the top half of the page (i.e. above the fold line) will be seen by a lot more people than anything hidden below the fold or on the inside pages. This valuable space maybe sold at a premium as advertising or used to draw customers into buying the paper by showcasing a particularly intriguing image or headline.

Why do we use the phrase online?

Websites aren’t displayed folded, but they do show a limited chunk of their content to the viewer at first glance. Whether a visitor reaches a particular page deep in a website (perhaps from a search result or link) or lands on the homepage, they’ll only get a limited glimpse of what the site has to offer. The comparison to the top half of the front page of a newspaper is particularly apt when you think about the size of sites like Amazon – much, much more is hidden than seen. As on a newspaper, the content shown above the fold and on the front page has to be carefully selected by website designers and content managers to ensure that the site is immediately useful to customers. Visitors looking for something particular may click into a site and away again in less than a second if they don’t spot what they’re after straight away. As snap judgements are so common, it’s pretty clear that whatever your visitor first sees is going to have a big impact on whether they stay – and potentially become a customer – or vanish back into the search engine results page to find one of your competitors.

So where does the fold lie?

The fold on a website is essentially at the bottom of the screen: everything you can see without clicking or scrolling is above the fold. But how do you know what that’ll be? Your customers might be browsing on a 50in smart TV or a 4in smart phone – and that’s before you start wondering if they’ve tweaked their font size or resolution settings. As a result, even the website developer building your site won’t be able to draw a fixed line for you and call it the fold. However, by using responsive design strategies, it’s possible to create a website which displays effectively on screens of all sizes and also lets you control what’s above the fold.

How we control what’s above the fold

Controlling what visitors first see as they arrive at a webpage involves two separate disciplines. One is content curation and the other is web design. In plainer English, someone needs to decide what’s important, and someone needs to make it all fit. We usually assume that content curation is limited to text and images that change regularly – making sure your Christmas special is eventually replaced by your Valentine’s offer or that tomorrow’s headlines aren’t just yesterday’s news – but web developers have to consider a much broader set of content, including menus, search boxes and your company logo. At boxChilli, our team use responsive design techniques, which lets us set priorities for these items. This means that if the site detects the user has a really limited amount of space (that 4in phone screen, perhaps) then it still displays your logo, headline, onwards link and menu button in a pleasing and accessible way, but strips out less important items, pushing them below the fold. On the flip side, responsive design lets us make the most of large screens without overwhelming the viewer.

What should go above the fold?

This varies from industry to industry, so when we’re working with clients the boxChilli team will first make sure we understand what you’re trying to achieve; what your target market is; what your content strategy is; how often you update your site and so on. However, there are some good general rules for selecting content to go above the fold:

  1.  Let the visitor know where they are – provide enough information so users can quickly identify the company they are viewing
  2.  Make it clear what they’re seeing – a simple, straightforward product title or article headline is best so no one is struggling to guess if the picture filling the whole screen captioned “Red floral #2928” is a fabric, a plate pattern or perhaps carp food.
  3.  Give the visitor what they want straight away – this is particularly important for landing pages. If you know your visitor searched “cheap car tyre Portsmouth”, the first thing they see should be relevant – even if your MOT deal is a better offer.
  4.  Show your customers where to go next…
  5.  …And make it easy to get there – this may be as simple as continuing text over the fold so they scroll down to see more offers or using buttons with direct links. For example, the ‘buy now’ button should be above the fold or at least clearly signposted.

As you can see, making the best use of the area above the fold can have a dramatic impact on your business. It’s also a great way to give your landing pages a boost. With content creators, SEO specialists and web developers working together, at boxChilli we fight to give our clients every advantage online.

Back to blog list

About the Author

boxchilli