The nature of the beast
The 'fold' is a term coined from broadsheet newspapers and refers to the point at which the paper had been 'folded' in half. The upper section was the visible half, with the lower being only visible once the paper had been fully opened. This terminology carried over to the web in the early 90's and – rightly or wrongly – was applied to website design.
Mr Blair and me...
In May 1997 Tony Blair became Prime Minister in the UK and I'd not yet finished secondary school.
In the same year Jakob Nielsen published a study that discouraged the use of scrolling in websites because only 10% of users tested at the time would scroll a webpage to discover more content (Nielsen later retracted some of his arguments and even followed up the study in 2010).
The internet of the time (or the world wide web as it was called back then) was served up through big cumbersome beasts with tubed monitors, powered seemingly by plutonium and optimism. The screens were small, the graphics limited. Scrolling was a dark art.
Although the term 'fold' was never clearly defined in this period - in terms of actual pixel height - due to lower resolution screens and monitor sizes, between 600-700 pixels was considered the traditional 'fold' based on the most lowest common resolution of the day. This was however 14 years ago.
So where are we now?
In 2011 we're looking at a different landscape to that of 1997. We can access the internet on our laptops. Desktops. On our phones. On tablet devices. We access through different operating systems, browsers and screen resolutions. In short, it got complicated. Here's a few variables we're now faced with:
- Which browser is being used and what version?
- What screen resolution is being used?
- Is the browser window fully expanded?
- What monitor size is being used?
- What devices are being used?
- How has the user set up browser tabs (if at all)?
- Has the user installed extra toolbars?
As you can see there is a lot more to deal with and a lot we can no longer control. If we apply the notion of finding the 'fold' via the old method (I.E the lowest common denominator) then you could argue it is now in fact an iPhone in landscape mode. (320px). I think you'd agree that's not ideal or even workable.
Where do we go from here?
Simple. Take the conceptual idea of 'the fold' and apply it to your designs. Don't dwell on pixel height or cut-off points. Focus on structuring your content in the way your users would wish to consume your content. The important stuff should always come first. For example:
There is enough evidence to suggest that adverts placed higher in the page have a better click-through rate. That's not to suggest however, that placing all your adverts at the top of the page is the right thing to do. The important thing is to let your content breathe. Better spacing of your content will encourage users to explore further into a page rather. Overwhelming them in the first few hundred pixels less so.
It's also worth pointing out that context plays a large factor.
In 2011 boxes and arrows showed that the most clicked area on the TMZ.com website was the next page button, when was often over 15000px down. Right there is proof that if the content and context is correct, a well place piece of advertising could convert well at almost the base of the page. Another example would be article comments. Always at the foot of the page but often a very active part of it.
Either way, context play a huge part is designing for the 'fold less' website.
Removing the barriers
So if we now know that users do scroll, and the fold is relative, what stops them delving deeper? There are many factors to consider (such as reactions from the Lizard brain, the legibility, readability, colour choices, poor content etc...) but Joe at CX partners suggests these three as a good start to improving your layout:
Don't cram too much into the top area. Using whitespace and imagery will encourage exploration further down the page.
Stark, horizontal lines discourage scrolling. Having hard edges that give the impression the page has come to an end. He suggests overlapping content between 'fold' and below to indicate to users that there is more content to explore.
Avoid the use of in-page scroll bars. The browser scrollbar is proven to be an indicator of page length. Iframes, lazy-loaders and internal scrollbars break this convention (This may well prove interesting as OSX Lion has recently introduced scrollbar-less scrolling)
The concept of a physical pixel fold on the web now needs to be eliminated from your thinking when you design websites. Instead it needs to be thought of as a fluid point above which you should present your important content, and encourage your users to explore further.
We can no longer make safe predictions on how people will access or use our websites, so tailor your content accordingly. Whether that means using an adaptive or mobile layout to best serve your market or just re-thinking how you structure and layout your content on the desktop. The web will keep changing, and I've got a feeling; it's just about to get interesting...
image courtesy of cxpartners.co.uk