The Mythical Fold
The Mythical Fold
Congratulations! You just scrolled down a web page. “Well, yeah,” you’re probably thinking. “So what?”
Well, it’s simple. It proves that people who use the web already understand that scrolling is a normal and expected interaction in web browsers and other applications. It’s why mice have scroll wheels, why we swipe up and down on an iPhone, and why we slide around on the Blackberry trackpad. It’s why the length of a scrollbar changes based on page length — it’s a known cue to let users know that there’s more page content below. The myth that people won’t see content that’s not immediately visible on their screen is just that — myth.
The Fold
You, or someone you know might have referred to “The Fold” — a term which originated in print. The fold refers to the physical, horizontal fold of a newspaper when displayed on newsstands. The area above this fold is the only area visible until a person picks up the paper and opens it. The myth of the fold on the web implies that if a user has to scroll to see content, they’ll likely not see it at all. While this might be relevant in print, it has no place in web design.
Although you, personally, might not be able to see a section of your website without scrolling on your own computer display, this does not mean it lies below the fold. Here’s why:
Screen sizes are different.
The fold does not apply in web design for a simple reason — it’s an imaginary line. Screen sizes and devices on which we view the web are all different. What appears on screen for one user might require scrolling for another user on a different device. We, as designers and website owners, have no way of predicting which device a person will use to view these sites — whether it’s a laptop, desktop, iPhone, Blackberry, or a device with a screen size that hasn’t even been invented yet.
You can, however, tell which screen resolutions were used after someone has visited your site. Consider these statistics taken from the Idea Factory website. Over the past three months, there has been a total of 103 different screen resolutions in use by our visitors. Below is a sample of just nine of these resolutions.
Where is the fold? It’s impossible to tell. If you’re having trouble understanding why this doesn’t work — grab a few different devices and try it for yourself. Look at the same website on an iPhone, an iPad (don’t forget to turn it sideways!), Blackberry, desktop computer and laptop computer. I bet you’ll notice quite a difference in the visible areas of the page on your screen.
Here’s a further breakdown:
Browser Chrome
On top of screen size, consider the areas of your web browser that are reserved for menu bars, status bars, bookmarks, and customized menus. These browser interface elements are referred to as browser chrome (not to be confused with the Google Chrome web browser, which has these elements too, of course). The chrome affects the height of the viewport of your browser and influences the amount of content visible at any given time.
What can we do about it?
As these statistics prove that the fold is not something we can define on a website, our concerns should lie in smarter, more responsible web design.
Consider responsive design, a technique that adapts layouts to different screen sizes instead of relying on a fixed-width, static page. Read more about responsive web design on A List Apart.
Keeping the reader engaged is key to your site’s success — not an imaginary line that will blur even further as technology constantly advances. A well-designed website with compelling content, intuitive navigation and an easy-to-read layout will take care of any fears of the fold.
- Categories:
- news
- |
- Tags:
- design,
- web design
- |
- 5 Comments
5 Responses to “The Mythical Fold”
Leave a Reply
We're currently looking for:
General Enquiries (View Details)ARCHIVES
- May 2012
- April 2012
- March 2012
- February 2012
- January 2012
- December 2011
- November 2011
- October 2011
- September 2011
- August 2011
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- January 2011
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- December 2009
- November 2009
POPULAR TAGS
- advertising (9)
- Apps (1)
- augmented reality (1)
- branding (20)
- buzz (1)
- campaigns (1)
- change (2)
- clients (1)
- commercials (1)
- communications (2)
- community (1)
- contest (2)
- customer service (6)
- design (4)
- education (1)
- employees (1)
- environment (1)
- ethics (9)
- etiquette (1)
- history (1)
- ideas (3)
- illustration (1)
- jargon (1)
- marketing (9)
- news (1)
- outdoor (1)
- packaging (1)
- print (2)
- public relations (3)
- responsibility (12)
- retail (1)
- sex (1)
- soci (1)
- social media (24)
- social networking (2)
- sports (2)
- strategy (15)
- stress (1)
- technology (8)
- television (2)
- The Toy Factory (5)
- tips (4)
- tourism (1)
- traditional media (1)
- viral marketing (5)
- web design (1)
Good article.
Even though we are trained to scroll down to see more content, you still need compelling content visible to the reader when they first view your site (in most cases). If your site has a high amount of bounce rate, maybe you should rethink how your content is displayed.
I scrolled down because I am already interested in ifactory, hence why I follow you on twitter. Not because I am familiar how web pages are displayed, or the fact that I know how to use a mouse.
As for mobile devices, the same site viewed on a monitor of 900px+ really shouldn’t look the same on a mobile device with a width of 320 – 560px.
So I completely agree that compelling content + good design are the most important factors that go into a website.
I also think that sites should be tested on various devices / screens prior to launch to see where “the fold” is and make changes to content accordingly.
It’s hard to educate clients and print designers about this, but I have just forward your article on to a lot of people telling them to read!
One point I would like to make
“On top of screen size, consider the areas of your web browser that are reserved for menu bars, status bars, bookmarks, and customized menus. These browser interface elements are referred to as browser chrome”
We must also not that Google Analytics is recording screen resolution, not the size of the browser window. Which you may also need to consider, as I have a screen resolution of 1920 x 1200 but have my browser window roughly half width, and anywhere from 800 – 1000 height.
@Jon: Exactly — the way content is displayed is important, but fussing exact locations of certain elements right down to the pixel is futile.
@Matthew: That’s also true. I almost never view websites in a full browser window on my desktop monitor.
I likes scrolling sure. =)
Nice post, people need to think about these things, there’s no doubt.
Also the stats we’re pretty enlightening.
Never underestimate curiosity – beyond ‘training’, people can be easily enticed to scroll down and see what else is there. That can be more fun than clicking to the next page!