Designing Above the Fold and the Google Browser Size Tool

Contributing Editor

browser resize“Above the fold” is a concept that originated in the printed newspaper industry. Only the top half of a folded paper is visible, so editors move important content to the top of the page to entice people to buy the paper.

The term has been adopted by the web design industry where it refers to the visible part of the page when it’s loaded. Many “experts” still assume that content below the fold will be missed. A certain large international IT company I worked for employed a number of teams who competed to have their content placed in prominent positions. Managers, designers, coders, copy writers, and advert sales teams would all insist their content was more important than others. It normally resulted in a confusing mess at the top of every page.

I’ve never been convinced by the “above the fold” argument. First, there is no clear fold line — monitors come in different sizes, browsers may not be full-screen, and OS controls and tool bars use space. Secondly, most users understand the scroll bar and a recent report from CX Partners provides compelling evidence. Their conclusions:

  1. Less is more
    Don’t cram everything above the fold — use of whitespace and images encourage exploration.
  2. Stark horizontal lines can discourage scrolling
    Full-width thick lines can subconsciously indicate the end of a page, so ensure content is visible to encourage scrolling.
  3. Avoid in-page scroll bars
    The browser scroll bar indicates the quantity of page content, so avoid using iframes and scrollable divs which break the convention. (I’d add that changing the scroll bar colors can cause users to miss content too).

However, you may be able to employ simple design tweaks which ensure people notice specific areas. For example, Google recently increased Google Earth downloads by 10% when they shifted the “Download” button upward by 100 pixels.

The company has subsequently created Browser Size, a new tool from Google Labs which shows how many people can typically view areas of your web page. The diagram is calculated from browser height and width information collated at Google.com. For example, the top 600 x 300 pixels can be immediately seen by 99% of users. Whereas only 10% of users can see content beyond 1250 x 800 pixels.

Browser Size tool

Designers can therefore create a page which ensures important content is prominently displayed and minimizes scrolling for the majority of users. It’s undoubtedly a useful tool, although I hope it doesn’t lead to a plethora of tiny 600 x 300 pixel websites!

Links:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://icoland.com/ glenngould

    Nice tool, thanks for sharing.

  • Amit Desai

    i have got my blog evaluated using Google’s browsing service and it has helped me identify certain critical areas where i can improve my visitor expereince and also help promoter important areas of my blog in much better way. you can see the complete analysis here http://www.gigathoughts.com/technology/google-labs-introduces-browser-size-tool-to-visually-evaluate-your-site-content.html

  • http://www.crearedesign.co.uk/ Nicola Connolly

    Designing “above the fold” certainly holds some weight in web design – grabbing your visitors attention is key to making them stay and browse, most users will bounce in a matter of seconds if what they are looking for is not obvious in an instant – placing important information/navigation in a prominent position towards the top of your page is therefore definitely important.

    The idea behind this new “Browser Size” from Google Labs is great. Not quite sure why the lines have to be so ragged though?! Concept is great, execution doesn’t appear to be “designed” – I guess I just like things to look pretty as well as provide a useful function ☺ Smart CSS which re-sizes pages depending on browser size means that a tool such as this won’t be accurate, but it’s an interesting tool to show the percentages of users browsing at different sizes.

    I’m looking forward to a website being developed where you can view websites on different screen sizes & on different devices (including the iPhone) all in one place… quickly & easily … like the sites we currently use to check websites in different browsers… unless there is already a good one out there I don’t know about?

  • http://www.optimalworks.net/ Craig Buckler

    @Nicola
    I wondered why the lines were ragged too? If it’s just data from browser window sizes, you’d expect them to be square?

    I suspect Google has factored in eye-tracking results. That could explain why the bottom-right is less prominent?

  • http://www.patricksamphire.com/ PatrickSamphire

    It’s a good concept, but it doesn’t actually work on sites that are centred in the page, unless you reduce the size of your window. E.g., check it with the http://news.bbc.co.uk website with your browser maximised, then reduce the size.

  • Stevie D

    I would guess the lines are not straight because they encompass a variety of different shapes of screen. eg, 99% of people have a screen at least 300px tall, and 99% of people have a screen at least 600px wide, but that doesn’t mean that 99% of people have a screen that is at least 600×300px – it could be a different 1% who are missing the height and the width – that would lead to the curved shape of the lines shown.

  • anonymous

    “employed a number of teams who completed” -> “employed a number of teams who competed

  • Dan

    This is a good tool to have under your belt. But further to Craig’s point, does it work on centred page sites?

  • basia

    While reading this post, I have tried to check, which screen area I am looking at, and why. It is centre to bottom – it is result of ad-blindness probably.
    Greetings :-)

  • ctweedle

    In contrast to this, check out this site:
    http://www.thereisnopagefold.com/
    Although the fold really is important, is it as important as demonstrated?

    This really got me to thinking? Since we have become web-centric in our computer use. Primarily for text (twitter, facebook, email, chat) why hasn’t vertical screens become more important. Horizontal is only good for one media and that is video.

    All other formats would benefit greatly from our screens becoming vertical.
    All the operating systems support it. Monitors technically support it (via the software). The hurdle? The mundane, low-tech monitor stand.

    Imagine the impact on web design.

  • http://www.optimalworks.net/ Craig Buckler

    @ctweedle
    Several manufacturers make rotating screens, but they’ve never been particularly popular. I agree though – for many people, a portrait view would be far more useful than landscape. I suppose the main difficulty is creating a portrait-screened laptop.