Above the Fold

Is ‘above the fold’ still an important consideration for web designers?  How is it changing?  And how should you build it into your website design and content strategies?

‘Above the fold’ was originally a newspaper term – when editors would pack the headlines, lead stories and most striking images on the top halves of their front pages, so their papers grabbed the most attention on the newsstands and shelves of the newsagents; driving sales.

As our consumption of information has moved online, the term has stuck – and it is now used to describe the content of the top half of a web page; the part of the page that displays when the page is first opened.

Following the example of the print industry, the logic runs that the content you feature on this section of each page should be the content that is most important to achieving your business goals.

Above the fold is, of course, a much more imprecise measurement when applied to a web page instead of a newspaper.

What makes the fold?  Well, it depends.  It depends on the device, screen size, and resolution used by any given website visitor.

We can, therefore, only talk about averages when trying to define what ‘above the fold’ is on a web page.  The traditional rule of thumb is that the first 600 pixels down a web page constitutes its ‘above the fold’ area.

However, the increasing prevalence of mobile devices confuses the matter substantially – making it vital to check the way a page displays on different devices, screens and resolutions.  Depending how your web pages display on a mobile device, the above the fold area could be much smaller; leading some analysists to suggest that the ‘above the fold’ content has to work even harder.

However, there is a converse argument: since mobile users expect to scroll down a page – and often start scrolling before the page has fully loaded – it is possible to argue that the notion of ‘above the fold’ is, today, much less important.

The only way to know whether above the fold is important for your website is through analysis and testing.

First, your website analytics programme will give you data about which screen dimensions are most used by visitors to your website.

Second, heat mapping tools such as CrazyEgg will show you how far your visitors typically travel below the fold and where they are clicking on your site.

Based on this information, you can then experiment with different page formats to see what works for you.

CrazyEgg founder, Neil Patel, suggests that above the fold is still important, and there are a number of things that belong above the fold:

• A well-written USP
• Some brief explainer copy
• Your branded logo
• Simple, intuitive navigation
• Contact info – especially important if you are selling on your website
• A call to action (sometimes – not always!)

Like so much in web design, experimentation is key to optimising your page content.  The availability of tools and metrics to show how well each page performs makes experimentation easy.

Be cautious about how you apply the knowledge you gain from your experimentation: what works well on one page doesn’t always translate directly to another.

For example, your call to action (CTA) doesn’t always have to be above the fold.  Your visitors need a reason to act on your CTA.

On a landing page, your website visitor is more than likely accessing that page because they have already been convinced by your campaign elsewhere.  They already have a reason to act on your CTA, so your CTA should appear clearly at the top of the page for this visitor.

However, this isn’t appropriate for all visitors.  For those who are encountering what you do for the first time, it’s likely they’re going to need a little more convincing before they click on your CTA.  Your CTA probably belongs further down the pages these visitors are accessing – under some compelling explainer copy.

Or, as website analytics software business Kissmetrics states: “Higher conversion rates have nothing to do with whether the button is above the fold, and everything to do with whether the button is below the right amount of good copy”.

Different pages on your website are doing different jobs and knowing how visitors move onto and around your site, and optimising accordingly, is important.

There is one other consideration when choosing what belongs above the fold: search engine optimisation (SEO).

Search engines such as Google give more relevance to keywords that appear at the top of the page (and, also, to the words at the start of paragraphs).

If you run a magazine site, or another site running ads, it is also worth noting that Google penalises websites that have a lot of ads above the fold, because this doesn’t result in a good experience for users.

What you put above the fold will depend on your business goals, the devices your website visitors use, why they are accessing your site, and their behaviour on it.

A process of analysis, testing, and optimisation is the only way to know what is going to work best for your website, but the usual rules apply:

• clear, compelling copy,
• clean design,
• simple navigation, and
• appropriate CTAs.

Platform run a number of different courses to help you improve your web design and development skills.  Find out more here.

If you are particularly interested in redesigning and optimising your website pages, we can run a bespoke course for you either here at Westland Place studios or at your premises.  Request a date here.

Tags: CSS, HTML, Marketing, Training, Web, WordPress