Put it above the fold!
‘Above the fold’ on the web is out-dated and should be left out of the conversation when discussing website design. The phrase, ‘Above the fold’ originates from the newspaper industry. Newspapers were actually folded (newsflash, I know!), so the idea of putting the top story above the fold was important. Primarily because there was a literal fold, and only one fold. On the web, there is not a literal fold. There are, however, thousands of ‘folds’ in the form of various mobile devices, laptops and desktop computers.
The commonly used mantra, ‘Above the fold’ was handed down from newspaper design to web design. Newspapers are a very controllable medium – but web design is not. The newspaper designer knows the width and height of the page. The web designer has no idea what width and height their users will be viewing their website. Could it be on an iMac, iPad or iPhone? Possibly an Android tablet or Galaxy S5 phone? The list goes on – just take a look at the tweet below.
There are so-called best practices when it comes to the ‘fold’, but those are always changing and with the variety of mobile device usage, each website’s audience may require a different ‘above the fold’ best practice. If we look back a few years, we see that the ‘fold’ grew very quickly. One year it might be 600px, the next year, 800px, the year after that 1000px. Strangely, the idea of the ‘fold’ never seemed to be dismantled, it simply kept growing.
Websites are living documents, not dead trees. Websites can be consumed from phones, tablets, laptops and desktop computers. Each device has a different height and width. This means a different fold to obey…if you want to keep things above the fold. Could it be that it isn’t about the ‘fold’ at all, but about the right content in the right context?
There is no fold. [part 6] pic.twitter.com/T1b7AnkDCS
— Luke Wroblewski (@lukew) December 8, 2014
Why has the ‘fold’ taken so long to die?
A website is not the product of one profession or discipline, it’s the product of at least two professions. When a website is ‘designed’ by the designer and ‘coded’ by the developer – there is an inherent trust between the two about what is best practice in each profession. Pile on top of that – the almighty client who may often ask to put something ‘above the fold’ – and you have a recipe for disaster. If we don’t treat the client relationship as one of education and understanding, we may get in the habit of ‘doing what we’re told’ regardless of best practice. Can you see now, why the ‘fold’ lived on for so long?
How many other bad habits are we carrying on by ‘doing what we’re told’ rather than seeking to bring our clients along and helping to educate them for the sake of a successful website?
The fold may have been necessary in the early years of the web, when we were all learning how to browse the web – but now scrolling is second nature. When is the last time you consciously thought about scrolling? You just do it.
Why people don't scroll… pic.twitter.com/sd01TL3Rbk
— Luke Wroblewski (@lukew) December 10, 2014
The fold is really a code word for hierarchy and importance of content. It simply got dumbed-down and tied to the constantly changing constraint of screen resolution. If the content is prioritized correctly, there are then some things to consider with design to ensure you are optimizing for users to scroll. One option is to try the ‘cut-off content’ method (illustrated above) to hint there is more to see below. This provides an intuitive experience for browsing a website. Of course, this requires thinking about the various screen resolutions and possibly utilizing vertical media queries.
What others say
Sophie Shepherd explains that ‘the fold’ has really just become whatever the user is seeing when they have to decide to engage further or move on. So the fold is really at any point in your content or website design that could cause users to browse away. Damn! That’s a tall bar to reach – having no weak spots in your content or website design? No one ever said website design/development was easy.
With the number of mobile devices on the market and the changing landscape of screen size, holding on to ‘the fold’ concept is impossible. Consider these statistics:
- Nearly two-thirds of Americans are now smartphone owners, and for many these devices are a key entry point to the online world – source
- The average smartphone screen size when the original iPhone was launched was 3.2″, when the iPhone 5 launched, it was 4.3 source
- It took five years for the average screen size to get from 3″ to 4″, but only two more to get to the current average of 5″. source
Note the various mobile device sizes illustrated by the blue outlines in the tweet above. Which fold would you like to follow? All of them? None of them? Doesn’t this illustrate the need for a paradigm shift?
That paradigm shift is: Design for content, not the fold. Design webpages with a hierarchy of content that encourages consuming the content and taking action at just the right time, in the correct context. Just as imaginary friends are not very helpful, neither are imaginary ‘folds’ on a webpage.