An artist's job is to rethink the boundaries of their medium. Whether it's a canvas or a web browser, our job is to improve its value and use. Since 1994 web designers, digital gurus and usability pros have debated the topic of designing "above the fold". The term "above the fold" is a print term 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. In the early days this print term was adapted and used in web development to refer the portions of a web page that can be visible without scrolling. When I started designing web pages most users were unfamiliar with the concept of scrolling. It just wasn't a natural thing for them to do . As a result, I would design web pages so that all content would be “above the fold”. When I was designing e-commerce sites on AOL, page-level vertical scrolling was not permitted. As AOL moved away from their proprietary screen technology to an open web experience, we enjoyed the luxury of designing longer and wider pages. That was 15 years ago! A lot has changed.
That Was Then. This Is Now.
According to ClickTale's scrolling research, Today, 91% of the page-views had a scroll-bar. 76% of the page-views with a scroll-bar, were scrolled to some extent. 22% of the page-views with a scroll-bar, were scrolled all the way to the bottom. As screen resolutions vary greatly, HTML design has improved and browsers have become common place in a users life the time has come for the term and the practice to die!
Let's think about it for a moment. If you subscribe The “fold” theory, you are assuming everyone uses the same size monitor, monitor resolution and Web browser. More over, you must also assume we all have the same number of toolbars. Obviously there are too many factors involved to identify a consistent fold location. The "fold" is just silly! scrolling has become a natural practice in surfing the web. Scrolling is also associated with most Web 2.0 design. Big, clear text and spacious content implies longer web pages.
Web 2.0 Design
Today, I design my pages to use liquid layouts that stretch to the current user's window size in order to avoid frozen layouts that are always the same size. Great consumer centric design does not give equal weight to all the content in a site. It puts its most valuable messages at the top and throughout the design. If you present compelling content and use proper design queues and tools then your users will find and grab your content. Here are a few examples of mainstream sites that are designed "below the fold" for millions of uses everyday.
Facebook
YouTube
Did you scroll? of course you did. (you are scrolling now)
Advertisers currently want their ads above the fold, and it will be a while before that tide turns. But it’s clear that the rest of the page can be just as valuable to contextual advertising.
It is imperative that we begin to educate our clients and account teams that this is no longer a best practice. It really never was. Open up your design and stop cramming stuff above a certain pixel point. You’re not helping anyone. If your content is compelling enough your users will read it to the end.
Educate your peers and clients with these recommendations in mind:
Research used for this post:
That Was Then. This Is Now.
According to ClickTale's scrolling research, Today, 91% of the page-views had a scroll-bar. 76% of the page-views with a scroll-bar, were scrolled to some extent. 22% of the page-views with a scroll-bar, were scrolled all the way to the bottom. As screen resolutions vary greatly, HTML design has improved and browsers have become common place in a users life the time has come for the term and the practice to die!
The "fold" simply does not exist. There is significant research, design methods and technology that renders the "fold" theory useless. Research like ClickTale's Scrolling Research Report V2.0 - Part 1 and Part 2 completely unravels the "Above the fold" myth. The most compelling test they ran was proving ‘Absolute Scrolling Reach’.
"This graph below shows us how much time visitors paid attention to each section of different-sized web pages as they scrolled through them. ‘Absolute Scrolling Reach’ measures the distance from the page top (in pixels) that a visitor scrolls down the page."
Let's think about it for a moment. If you subscribe The “fold” theory, you are assuming everyone uses the same size monitor, monitor resolution and Web browser. More over, you must also assume we all have the same number of toolbars. Obviously there are too many factors involved to identify a consistent fold location. The "fold" is just silly! scrolling has become a natural practice in surfing the web. Scrolling is also associated with most Web 2.0 design. Big, clear text and spacious content implies longer web pages.
Web 2.0 Design
Today, I design my pages to use liquid layouts that stretch to the current user's window size in order to avoid frozen layouts that are always the same size. Great consumer centric design does not give equal weight to all the content in a site. It puts its most valuable messages at the top and throughout the design. If you present compelling content and use proper design queues and tools then your users will find and grab your content. Here are a few examples of mainstream sites that are designed "below the fold" for millions of uses everyday.
YouTube
Did you scroll? of course you did. (you are scrolling now)
Advertisers currently want their ads above the fold, and it will be a while before that tide turns. But it’s clear that the rest of the page can be just as valuable to contextual advertising.
Look at the 2010 Ford Mustang site.
They get it. I scrolled up and down, clicked and shared.
If its good they will scroll.It is imperative that we begin to educate our clients and account teams that this is no longer a best practice. It really never was. Open up your design and stop cramming stuff above a certain pixel point. You’re not helping anyone. If your content is compelling enough your users will read it to the end.
Educate your peers and clients with these recommendations in mind:
- Your content is king. If your page contains lots of engaging content, users will scroll to the bottom to view it.
- Keep important new content that helps users understand the main purpose of your site above the 600 pixel mark.
- Design universal navigation and business information that can be modular. It should allow users to manipulate and control its placement. It should also appear above the 600 pixel mark.
- Minimize your written text and maximize images and video, the web is now a converged 3D medium. Users would rather you engage them instead of asking them to read. Remember they do scan pages.
- Use design cues like icons, cut-off images and text blocks to help users expect additional content below the screen.
- Try to keep browser-less applications within a given screen space and make sure the inputs and outputs of the application appear within that space.
Join me, lets help dispel the urban design myth by sharing this data.
Research used for this post:
- ClickTale's HeatMaps
- ClickTale's Scrolling Research Report V2.0 - Part 1
- Jared Spool UIE Brain Sparks:Utilizing the Cut-off Look to Encourage Users To Scroll
- Jakob Nielsen’s Alertbox: Changes in Web Usability Since 1994
