Rising Above the Fold

If there’s one thing that we can agree on in the digital industry, it’s that nothing remains static for too long. Consumer trends come and go – and with that, so do the best practices that businesses use to leverage them. When it comes to web design, you don’t need us to tell you that the days of people browsing the internet on similar-sized screens are well and truly behind us. Yet one steadfast ‘rule of thumb’ seems to have remained – designing above the fold.

Staying above the fold

First, a bit of history. The term ‘above the fold’ evolved from the newspaper industry and referred to the traditional method of placing the most important or visually eye-catching pieces of news on the upper half of the front page (at a time when broadsheets still ruled the roost). These items were considered the highest priority, designed to grab attention and encourage you to purchase the newspaper.

During the early days of the web, many designers applied the rules that governed the existing mediums of the time meaning that the above concept was carried from newspapers to the online sphere.

In web interface design, ‘above the fold’ represents the portion of your landing page that is visible to users without having to scroll. It’s the first glimpse of your homepage that people encounter – effectively the gateway to the rest of your website. Unfortunately, the above mantra translated into cramming as much content as possible into this limited amount of space without really prioritising.

It’s understandable why some developers and business owners place a lot of emphasis on the content displayed in this considered prime website real estate. The anxiety comes from the fear that users may not stick around to explore elements of the page that are below the fold. This is further supported by the role that first impressions play in today’s online world, combined with the heavily researched three-second rule. Both reinforce the importance of this initial screen area in web design.

Limitations of the times

On the technical side, web pages back in the day shared many of the same limitations as other established traditional information channels – space being the most prevalent. In a similar way to journalists who had to mould their stories based on the broadsheet layout space, web designers shaped their content to match the memory they had at their disposal.

Page designs could, of course, extend beyond the fold boundary when the hardware permitted, but the payoff never seemed to match the effort it took to get there. Especially as unlike today, scrolling wasn’t natural practice for users. Typically, in the days where screens were of similar sizes, it was easier to ensure that all key content – information, call-to-actions, search functionalities, branding etc – fit into a 600-pixel boundary and appeared the same for everyone. However today, with so many devices capable of displaying your website, how can you be certain where the ‘fold’ is?

Problems with the ‘New’ Fold

The web view has changed. Consider the variety of monitor sizes, laptops, tablets and mobiles that exist in today’s digital world. To put it into perspective, a study from OpenSignal discovered 3,997 different screen sizes for Android alone in a period of 6 months. These findings continue to astound when you explore the varying resolutions of these devices. Combine this with the necessity to optimise your web design so that it is responsive, with flexible layouts and it’s fair to say that the concept of the ‘new fold’ is ambiguous at best.

Designing for the ‘new fold’

With 66% of attention on a web page spent towards its lower section, the key is to limit the focus on the ‘fold’ itself. The future of web design lies in the ability of a page to entice a reader to explore the rest of the website without giving them all the information in one serving. Think of it this way – if users get everything that they’re looking for at the top of the page, what incentive do they have to explore the rest of the site?

Using newspapers as an example – the original medium on which the concept is based – the majority of information displayed above the fold are headlines for the priority stories. Once the reader’s attention is hooked, the sub-text directs them to the page where they can get fully stuck-in to the details.

Website homepages should act the same way – as signposts serving as more than just an information buffet. The most effective structure is the one that builds up to the payoff on internal web pages or at the end of the page itself. This is web design skills must be used to entice and incentivise users to keep scrolling. The effectiveness of a website’s design depends on how efficiently it can pull a reader into its inner pages, and a dynamic design is one of the strongest ways to ensure that happens.

To neglect the idea of the ‘fold’ entirely would be a mistake, given the space’s high visibility and its proven capability to generate strong interactions. This space sets the tone for your website, so give core visual elements, call-to-actions, and elements that help you achieve your wider business goals the utmost priority here. This isn’t to say, however, that everything below will be ignored.

The lesson here is that most people can and will scroll if they are given the right motivation to do so. Cutting-edge design depends on the ability to present relevant information in creative and unique ways that go beyond restrictions and engage users to take action. Carry out tests, learn from your visitor’s browsing behaviours and apply your findings to your website to create a more satisfying user experience overall.

If you want to develop a dynamic and responsive web design that leads to conversions and keeps users from bouncing, why not get in touch? Whether it’s to chat through a design idea or take things a step further with the developmental process – we’re here to help!