Many of our design discussions include the term "above the fold." Some designers think it's no longer relevant; we are still having the discussion.
What's the FOLD?
The "fold" refers to the top half of a newspaper - the part of the page that is visible to a buyer at a point of sale, such as a newsstand or newspaper vending machine.
In my high school journalism class, and later working for the Daily Texan, UT Austin's college newspaper, "above the fold" was hotly contested layout real estate - only the lead stories and most important "teasers" made it there.
Designers and information architects still debate the relevance of the "fold" - but I believe we all agree that getting mission-critical site content immediately delivered to the users is a primary goal.
This practice of stacking the most important stuff at the top to help sell newspapers was (and I argue, still is) useful to web designers. Lead with your strengths. Capture the user's attention. Immediately communicate what is MOST important.
Sure - a web page can be long, and research shows people can and will scroll to see more, if:
- they realize there's more content on the page they're not currently seeing, such as headings or images "peeking" at the bottom of the fold.
- they believe that you offer something of value on this page - somewhere. In other words, they're motivated enough to keep looking.
This "get to it" mentality of users is one reason we steered clients away from having an "intro" or splash page (with our without Flash animation) that users had to watch or click through to see the website. People are busy and distracted, so don't play games - get right to it.
Determining Your Website's Fold
So one of the most important design decisions up front is: What is our TARGETED size? We can rely on some folks to scroll, sure. But we don't want most users to have to scroll to see the most critical content. We have several ways of making a good, educated guess.
- If your website has enabled website analytics, such as Google Analytics, Omniture or WebTrends, we can know from your server records the screen resolution through which visitors are seeing your website. Your IT staff or digital agency may already know much more about your visitors than you're aware of.
- We can look at aggregate browser statistics from organizations like WikiMedia (the publishers of Wikipedia) or W3C Schools, and adjust for any differences between your target audience and these general web public" audiences.
- We can do surveys or usability studies of your existing website or a proposed new design. We have inexpensive remote usability tools that generate heat maps of user activity - showing how many people clicked where, when given certain tasks to perform.
- We can ask your users - either in surveys, or by walking around and looking over their shoulders. The over-the-shoulder method is specially useful when we're designing internal applications or intranets/extranets.
But - It's Complicated
Unlike newspapers, which are produced in a relatively few standard sizes, we can't know for sure (without some expensive and time-consuming research) where the fold is for our users. It varies. For starters, people use all sorts of devices, browsers and screen resolutions, as this screenshot from Firecat's own analytics suggests (click the image for a full-size view).
See how many pie wedges there are? A few years ago, there were a couple of big wedges, and many smaller ones. This is one reason designers are now saying "Stop worrying about the fold."
But it's not that simple. As designers, it's our job to do our research and select a target size that will serve most of your users well, the majority of the time. Sure, it's more fun for a designer to work with a bigger canvas. It takes a talented, experienced designer to use available space extremely well. Firecat's designers welcome the opportunity to evaluate their designs across several platforms and browsers, such as:
- iPhones, Androids, Blackberries and other smart phones
- iPads and other tablets
- Various monitor resolutions
- In multiple browsers
- Using Google's Browser Size Tool
There are many simulators available to help designers check how a design might appear, many are plugins integrate right into their favorite browsers.
The Fold Is a Moving Target
Over the years, we've moved our most common targeted size from 600x480 to 800x600, to 1024x768, while taking into account these additional maddening factors that reduce available "fold" area:
- The screen resolution does NOT equal the browser window size. Most users fail to "maximize" the screen, including myself (my team twitches their mouse fingers when I pull a site up on the projector).
- The available browser window area includes a bunch of "chrome" from the browser software - Internet Explorer, Google Chrome, Firefox, Safari, and so forth.
- Users often have additional "chrome" taking up space due to browser extensions they run.
- Mobile use is growing exponentially. When warranted, we test our designs on iPhone, iPad, Android and Blackberry - even if we are developing an alternate mobile experience. Users want to be able to surf the "real" website on these devices - not be prevented from seeing the full site instead of a different web version they're routed to automatically.
Our Favorite Size to Target - Right Now
These days, on the majority of projects, we design with 1024 x 768 screen resolution in mind, which translates to roughly 960 x 740 as a relatively safe targeted area (minus the "browser chrome." We also hedge our bets by:
- not placing critical elements on the far right side (where they'd be truncated)
- ensuring logo/branding stays top left - this is usual design pattern for a very good reason
- placing "there's more below" visual cues at the bottom of the likely fold area, such as headings with text AND images
- avoiding horizontal lines that signal "end of page" and might cue users to stop looking lower
What Belongs Above the Fold?
This is a great question, and one you should spend some time considering. I believe these elements should be above the fold on almost every site:
- Your logo/identity.
- Your phone number or other "best" contact information for your primary prospects/users.
- A search feature.
- Global navigation choices.
- A couple of sentences that say what the site offers, to whom, and why.
If you've done all that, you've led with your strengths. The rest can go below the fold.
We often recommend a slideshow or gallery in the top spot, with a few well-chosen words or calls to action. Animation, dynamic media and video are great for delivering a lot more content above the fold, and we hope you know people don't read as much as you'd like them to.
What's your take on "the fold"? Are you making the most of your best screen real estate? Firecat Studio offers a free website analysis, so contact Firecat to arrange yours.