When designing your website, it is easy to get distracted by the unimportant details. One that keeps popping up is the idea of “the fold” and that content must appear above this imaginary line.
Why is the fold an unimportant detail? Because it doesn’t exist. At least not how you think it might.
What is the fold?
From Wikipedia:
“Above the fold” is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. Most papers are delivered and displayed to customers folded up, meaning that only the top half of the front page is visible.
On the web, the fold is considered what is visible on a page before scrolling.
The web is dynamic
The web is not a static, printed document like a magazine or a newspaper. You have absolutely no control over the dimensions of the medium your visitors will use to view your website.
People may be using wildly different screen sizes (as small as a wristwatch or as large as a wall), and different resolutions on that screen (the screen resolution is really what determines how much of the page a user can see at one time). Additionally, many people browse the web with their browsers not maximized–thereby seeing less of your website at once than what their resolution allows.
With the exploding mobile market, the wide array of your visitors’ resolutions and screen sizes is only exacerbated.
Our analytics show that we don’t know what the resolution is for 46.28% of our visitors. For the remaining, our top 5 resolutions are:
- 13.36% of visitors are at 1280 x 800 px
- 7.23% of visitors are at 1024 x 768 px
- 6.31% of visitors are at 1366 x 768 px
- 5.34% of visitors are 1280 x 1024 px
- 4.52% of visitors are at 1680 x 1050 px
Essentially, this means that your fold might be very different from my fold.
People scroll
User testing and eyetracking studies have shown that, at least since 1997, people use their scrollbars.
You can actually design your page to encourage people to scroll more. Joe Leech at cxpartners recommends using whitespace and imagery near the top of your page because it encourages exploration. In the Gustavus template, we have a banner area that serves this purpose very well. Also, avoid using stark, horizontal lines because they act as a visual barrier that may indicate that the relevant content has ended.
If it is important, put it near the top
More important content should typically be placed near the top of the page, so it is good to prioritize your goals for your website and design accordingly. Website analytics can help you determine the most accessed areas of your website which can be used to help prioritize your content.
Help your headline
In the newspaper world, “the fold” makes a lot of sense–that’s the part of the paper that people can see before they spend their money on a copy, so it is quite important. For websites, the fold is analogous to the headline or page title because that is what people will see before they decide to spend their time actually looking at your content. So, instead of designing for the fold, you should spend more time writing a better headline or page title.
Break your content into scannable chunks
People don’t read the web, they scan it. Therefore, people will be able to easily find what they are looking for if you help them by breaking up your website into scannable chunks.
This is often most effectively done by using headings, short paragraphs, and bulleted and numbered lists.
Additionally, the appropriate use of these types of elements on your page will make it more accessible to blind visitors and search engines. And, the more accessible your page is to search engines, the more likely it is that people will actually find your content in the first place.
Great information, Joe.
Thanks! I’m glad you found it beneficial.