Above the Fold – Tips for Design

Since time immemorial, there has been a saying: “First impressions count”. We won’t insult you by explaining what it means, but firmly believe that when it comes to website design, how people perceive your website in those first seconds is critical for how they interact with your brand moving forward. Disturbingly, according to the Missouri University of Science and Technology, it takes only a fraction of a second to form that opinion. The inference is, what you have above the fold (in the visible area of a site) is vital to engaging a user moving forward.

Above the fold definition

Above the Fold is a term that derives from print journalism to refer to the upper half of the first page of a newspaper. This location is the prime real estate in a paper and would be used for the leading news story, with the term actually referring to the fact that newspapers are regularly folded in half and stacked on top of each other; so what people could instantly see needed to be important and entice a reader.

Above the fold in web design

When the concept is interpreted in the field of web design, it alludes to the content the viewer can see in their browser before they need to scroll down. It is the data first displayed to users on their screens without requiring user engagement whatsoever when they visit a website or page.

While geared towards the selling of newspapers, in website design the fold originates from an assumption that a business needs to rapidly catch the viewer’s attention and the premise that if nothing is interesting for them, they will promptly move on (aka “bounce”). In this case, similar to print media, the above-the-fold content should captivate and engage a visitor and quickly funnel them deeper into the website or, in the case of landing pages, to perform an immediate action.

The fold in a responsive web design world

In website design, the fold has customarily been pegged to the most widely recognized PC monitor and browser dimensions. These range from 1024×786 pixels to 1280×1024 pixels, excluding the browser navigation bar, elements of the window, and the scroll bar. Essentially, the fold would be 1000 pixels wide and 600 pixels tall.

However, designing for desktops only is counter-intuitive in a world where more and more people are using portable and mobile devices such as smartphones and tablets. This has led to a paradigm shift in responsive web design, with the dimensions of the fold now needing to vary considerably. For instance, while 1024×768 pixels might be the most common screen dimension for our site users, other popular dimensions are 320×568 pixels followed by 360×640 pixels and 320×480 pixels.

Does above the fold help CRO?

So, the question that needs answering is this: Does above the fold actually influence site success, and improve click rate optimisation (CRO)? Technically speaking, it does, as most website visitors have a very short attention span. If you lose them in the first seconds or don’t put your best foot forward, you could be failing to channel your customers to your most important action. People are easily distracted and want almost immediate gratification, and their eyes by and large remain above the fold– that space of a site in immediate view.

Since the emergence of the Internet and immense growth of social media, instant gratification has become an expectation, and the norm rather than the exception. Consumers expect responses to their questions or concerns quickly if not immediately.
–  Forbes Magazine

Many studies have found users will leave if they cannot see what they are looking for or fail to clearly understand the messaging in a short time frame. In other words, you will lose them as a potential customer if they find it too hard to get to the information they need.

Whilst everything under the fold remains important, as it is not in their direct view, you need content which engages them enough to push them deeper. As mentioned earlier broadsheet newspapers place the main stories above the fold in the paper! So, it follows that you should place essential information within immediate view on your website.

Shifting Perceptions

In the past (and occasionally, today still) organisations crowded the above the fold space with as much “significant content” as possible. The initial 600 pixels would be filled up with links to all their different pages, calls to action, design elements, messages, and any other information they felt users may be interested in when they arrived on the site. The result was a mess, with competing messages, and people unsure where to look first. If first impressions count, this was a dog’s breakfast.

Don’t fall victim to this. The beauty of smartphones is, people are willing to scroll. If you entice them enough with a compelling message or two, they will happily scroll to find exactly what they need. Users are more inquisitive and once enticed, will take time doing their research, scrolling until they are satisfied they found or did not find what they need in order to transact.

The take out message for you is this then: Entice, do not overload people with your content above the fold.

Bigger screens on PC vs increased mobile usage

So, in today’s modern world we are faced with two opposing phenomena. Desktop Screens are getting larger and larger whilst mobile usage is becoming the predominant device of use.

If we look at common device sizes, most smart phones are 4-5 diagonal inches (although some larger smartphones can be up to 6), with 9-12 diagonal inches in the case of a tablet. A typical notebook screen has a size of 13-17 inches, with common desktop screen sizes now averaging well above 25 inches.

And, as good as mobile displays are getting, most mobile displays have fewer pixels than desktop computer displays. But if people are on mobiles more, yet the experience can be “better” on a desktop, what should you design for?

Our thought is this, design for both (and consider serving different content for different devices), but irrespective of what device you are building to, do not overwhelm users with too much content. It is better to write contextual and value adding content, than it is to overload people with images, content and calls to action.

Evolving user behaviour

As user behaviour evolves, so has the way they digest information (Almost gone are newspapers) resulting in new responsive design and web design. With the meteoric rise of the smartphone, portable device, tablet computing and superfast broadband, an opportunity has arisen for web designers to reevaluate how they develop their responsive layouts and design websites.

Today’s web designers practically have no restriction to how long they can make a page and users of today are generally happier overall to explore websites, whether they use links or scroll; touch screens and ‘flick’ have influenced us so much that it is as normal as turning a page in a book.

We could wax lyrical about design, User Experience and content and which is the most important. I guess the crux of the matter is this though: All three aspects are vital, all three aspects go a long way to influencing first impressions, and as such, all three are vital components of a successful website. What you put above the fold needs to entice, stay true to your brand persona and ultimately, make people view you favourably. Don’t overload them and you will be rewarded.