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!
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.
Where was the fold?
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
It also has to do with the recognition that, no matter how scroll-accustomed Internet users are becoming, they will without fail see that first screenful. Pretty much always. The rest is lesser percentages – improving, but always will be lesser. If you came out with a display device that was 10″ wide and 50″ tall, displaying the equivalent of an average blog page all at once, people would still start at the top. The data from ClickTale demonstrating that 15-20% of page viewers go to the bottom REGARDLESS of the page length – still shows that only 15-20% go that far.
It’s a relief to have all that space down below – and I am implementing tools like collapsing panels of content that draw more attention downward. But I will continue to keep the must-see stuff above the fold. That’s what the fold is all about, really. And people will continue to regard websites like Craftsman’s “The Garage of Knowledge” as the coolest places on earth. Because when mood is important, scrolling spoils the mood.
By the way, what’s an “urban design myth”?
the Web does not have to be a mass medium. How do you know that the lowest common denominator is your best customer? Or a customer that is interested in your product? You should be concentrating on reach.
Too many marketers approach the web the same way they do approach TV and print. Why try to talk to everyone? When you can target the audience most likely to buy your product and distribute your content? The mass approach seems wasteful.
Marketers should know who their target customer is (Demo), what they are using (techno graphic) and how they shop or consider brands (behavioral). This type of targeting combined with good old fashioned ethnography can save you the hassle of attempting to design for a 2-5% of people who may or may not want to engage with you.
This type of targeting is imperative to design and content creation.
I encourage brands, their agencies and designers to design for your ideal customer not for the masses. (this is not a TV spot)
This is the most impactful way to get them engaged with your content, site or advertising.
Again – good research shows that if the content is good your users will scroll. (http://blog.clicktale.com/2007/12/04/clicktale-scrolling-research-report-v20-part-2-visitor-attention-and-web-page-exposure/) If your content is not useful you can bet that they wouldn’t use it even if it was at the top of the page in the right hand corner.
Brands such as UNIQLO (http://www.uniqlo.com/us/), American Express (http://www1.amexnetwork.com/shopping?issuerName=us_amexnetworkdefault), Target (http://www.target.com/), MTV (MTV.com) and design leader Apple (apple.com).
I happen to be writing about this subject as I was reviewing work this week and found squished work and imaginary lines floating on people’s screens. I noted that this myth was being propagated by designers, clients,consultants and account people and designers as recently as late week.
There are a litany of examples out there. We are now in a world where your content is KING. How we design that content is imperative to its uses and relevance.
If the digital channel is used properly you will find that data will help guide you to how your audience wants their content delivered.