Window sizes and the fold

It can be difficult to design a webpage. Sure, there is a great deal of freedom. You are not limited by, say, the size of a piece of paper.

But there is, of course, a limit to what you can reasonably do with a webpage. One potential constraint is the size of a browser window. As monitors have increased in size over time, webpages have gradually become wider in order to fully use the available space.

Sometimes a web developer will be asked to optimise a webpage so that it looks perfect on a client’s setup, but not necessarily anyone else’s setup. While it may be common for something to be displayed at the bottom of a page on a physical publication, it is impossible to guess where the bottom of a monitor will be when designing a webpage.

Estimating browser sizes

There is not one set browser window size. While the vast majority of visitors use a display that is at least 1024 pixels wide, a handful are still using a display that is 800 pixels wide or smaller. Even then, there is nothing to say that the user has their browser window maximised! In essence, a user can be peering through a window as small or large as you can imagine.

Screenshot of the University of St Andrews website and browser sizes

To help us out, Google have a useful tool called Google Browser Size. This is probably familiar to those whose work focusses on the web. But it may be useful to other content creators and website maintainers to see this in action.

Google Browser Size shows you an estimate of the browser window sizes of web users. It displays this data like a map with contours, which is then overlayed onto your webpage. As you can see, 80-90% of users can comfortably view the full width of the University website.

What about the ‘fold’?

Where is the ‘fold’? Almost everyone has to scroll to view all of the content on a normal webpage. But when does this begin to matter? At the 80% mark, where horizontal scrolling stops? The 50% mark?

It is impossible to say. The truth is that web content should be accessible to all users. If the motivation is to stop people from having to scroll, arbitrarily selecting a percentage of people who must scroll is not good enough.

But we needn’t worry about squishing up our webpages so that no-one has to scroll. The fact is that scrolling is okay. We all do it. The fold is largely a myth.

Don’t worry about where the fold is. Of course, what appears at the top of a page is important. But cramming everything up there will overwhelm users. They would prefer to scroll. Just lay out your page so that it entices your users to read on.

Designing with all users in mind

The evolution of browser window sizes is one of those challenges that can make web design a tricky job. Just as developers have become accustomed to designing for monitors at least 1024px wide, the mobile web is ensuring that we must always keep smaller displays in mind too.

The beauty of the web is that there is great freedom. We really don’t have to worry about concepts like the fold. The trick is to embrace this freedom while exercising restraint.

Advertisements

3 thoughts on “Window sizes and the fold

  1. With regard to the fold… You still have to prioritise your important information above the fold. Users won’t go looking for information on a page. If it’s important, it really must be above the fold (sure the meat can be below the fold, but the initial hook must be above). I’m a huge fan of Jacob Nielson’s usability bulletins and he wrote a really nice article on Scrolling and The Page Fold in March this year.

    Of course if your browser looks like this – then you’re in trouble!

  2. For those who don’t realise where it comes from, the term ‘fold’ comes from newspapers. Here’s what the mighty Wikipedia says on the matter:

    “Above the fold” is a graphic design concept 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. Most papers are delivered and displayed to customers folded up, meaning that only the top half of the front page is visible. Thus, an item that is “above the fold” may be one that the editors feel will entice people to buy the paper.

    George, you wrote, “You still have to prioritise your important information above the fold.” I think you’re right in as much as you do need to prioritise your information but I think one of the points that Duncan was trying to make is: where is the fold?

    I regularly use three different browser sizes: my PC and laptop (1280 x 1024 px), my wife’s laptop (1024 x 768 px) and my Opera Mobile browser on my phone (480 x 640 px). The mythical ‘fold’ is different on each.

    Of course, it should also come down to a good site-wide information architecture. Good writing for the Web guidelines would encourage you not to put all your information on one page but to break it up, make it more focused, concise and scannable.

    And homepages are a whole other ballpark of worms!

  3. Thanks for the comments.

    I definitely agree that information on a web page should be prioritised. In that case the more important information should be as close to the top (and left) of the page as possible.

    But the fold is not a useful concept when considering this. The fold could theoretically be anywhere on the page, depending on the size of your browser window. Trying to fit everything above a line that could appear anywhere is a tricky task, as well as being a distraction from the core principles of usability.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s