What is "Above the Fold?"
By Stephen Bucaro
If you're a Web Designer, you may have heard the term "above the fold", or
you received a nasty email from one of your advertising affiliates threatening
to terminate your account if you don't move their ads above the fold. The term
"above the fold" originates in the paper publishing industry where "fold" refers
to the place where a newspaper is folded in half.
Of course, on the Internet there is no "fold", the phrase "above the fold" now
refers to the area visible when a visitor first loads a webpage in their browser,
before they do any vertical scrolling. In both the paper industry and the Internet,
advertisements above the fold get a higher response rate, and therefor advertisers
are willing to pay more to have their ads placed there.
If you email back to your advertising affiliate, asking where the "fold" is, you'll
trigger a corporate meeting where, after much debate, they'll determine that they
don't know where the fold is, but get their ads above it anyway. The actual location
of the fold for any given user depends upon the size of their computer screen,
their computer's screen resolution setting, how may toolbars they have configured
in their browser, and if they've made any personal font size adjustments. No wonder
nobody knows where the fold is.
OneStat.com, a provider of web analytics, has determined that most users (54 percent)
have their computer's screen resolution set to 1024 x 768 pixels. The next biggest
group of users (25 percent) have their computer's screen resolution set to 800 x 600,
and I would guess this group is shrinking rapidly. So you're going to need to keep your
affiliate ads above the 512 pixel mark.
• How do you know where the 512 pixel mark is? Open your webpage in your
browser. Press the [Print Screen] button. Open Windows Paint program (Accessories group).
In the Paint program menu, select Edit | Paste. Click on the Pencil icon
in the toolbar. Now when you move your mouse pointer across the screen image, its position
will be displayed in the right corner of the status bar. The second number is the vertical location.
One problem with placing ads above the fold is that most Web site designs have
a header which, including the menu bar, is about 250 pixels high. Even a design with
no header can't display an IAB (Interactive Advertising Bureau) standard "skyscraper"
ad (600 pixels high) entirely above the fold. Another problem with placing ads
above the fold is that this is also prime content area.
Assuming that you want to place three or more ads on each webpage, if they're all
above the fold, when a visitor first loads a webpage in their browser, they'll see
not much more than advertising. With no visible useful content, most visitors will
click away immediately. So as a Web Designer, what are you to do?
What we need is cooperative understanding between Advertisers and Web Designers. As
a Web Designer you need to keep the Advertisers interests in mind. Minimize the height
of your Web site header, and place ads as high on the page as possible. Place some
interesting content above the fold which entices the visitor to scroll.
As an advertiser, you need to understand that if, when visitors first load a webpage
they see not much more than advertising, they'll click away immediately. This doesn't
help your ads response rate. Of course, most advertisers think their ad should be
the only ad on the page, above the fold, and in the center of the page. Unfortunately,
along with this desire does not come the desire to pay your rent.
Fortunately, most advertisers don't know where "above the fold" is. Many advertiser
employees use large displays set to 1280 × 1024 resolution or higher. When they
first load the webpage displaying their ad, if they see most of their ad, they'll
consider it to be above the fold. You can also consider dumping picky advertisers and
signing up only with advertisers who don't require their ads to be above the fold.
More General Web Design:
• How to Run User Testing Fast and Cheap
• Designing Your B2B Website
• What is "Above the Fold?"
• Keys to Real Estate Sites - Ten "Must Haves" of Real Estate Sites
• Ten Essential Questions for Creating a Web Design Brief
• Make Your Web Site User-Friendly
• How You Can Make Your Own Professional Website For Free With Weebly
• Website Blunders of Even Top Designers!
• How to Add a Search Engine to Your Site
• A Day in the Life of a UX (User Experience) Designer