How wide to design for? My data on viewport sizes show the quick answer is 960 pixels, but as you’ll see, you should pay as much attention to the height of your main content as the width.
You want the important content on your web pages to be visible to visitors without them having to scroll, right? Computer screens have grown bigger in recent years, making more screen real estate available. So how should you decide how big your web page should be? Jakob Nielson recommended in 2006:
Optimize Web pages for 1024×768, but use a liquid layout that stretches well for any resolution, from 800×600 to 1280×1024.
Overall, Nielson’s suggestions seem sound, but screen resolution is the wrong measurement to go by. What matters is the viewport size. The viewport is the space inside the browser window in which a web page displays.
As you can see from the example below from a Macbook Pro laptop, the screen may be much larger than the browser window.
The viewport is just part of the browser window, which may also contain scrollbars, a status bar at the bottom, tabs, toolbars, a menu bar and title bar at the top, and possibly a sidebar, too.
Good data on viewport size is more difficult to obtain that data on screen resolution (which is reported on by most web stats software). Conducting my own research, I have collected viewport measurements several times, and here are my latest findings, from June 2009:
- Nearly all visitors have their browser maximized to fill their screen
- 33% of the available height of the screen is taken up by all those toolbars and tabs
- The most common screen resolution is 1280 x 800
- 85% of visitors have a viewport size of at least 990 x 540, which can comfortably accomodate a 960-pixel-wide based grid system.
Based on this research, my thoughts are:
In deciding what size to design for, it’s good to approach it as a question of tolerance. How many of your visitors can you tolerate forcing to scroll? 5%? 10%? The chart below illustrates what percentage of visitors can see a given viewport area.
Click to open a life-size version of this chart
Above the fold is cramped. Despite the increase in viewport width over the past few years, you still don’t have that much vertical space to work with. “Above the fold” means a height of no more than 500 to 600 pixels. That gives me second thoughts about having a page header use up so much real estate.
Change your orientation: web pages are viewed within a landscape orientation, not a portrait. You’re effectively working in a space that is like a movie screen (or HDTV) with a 16:9 aspect ratio.
Some features are more equal than others. I recommend a lower fault tolerance for certain page elements, such as a search box, or site ID. You want to make sure nearly everyone can see them. A lot of sites (including mine) put the search box in the upper right corner. If 1 out of 10 visitors can’t see it because their browser isn’t wide enough, I would say that is too many. The data on viewport size shows that 10% of visitors won’t see a right sidebar on a 960-wide design.
Update on December 17, 2009.
The folks at Google Labs have created a very cool “Browser Size” tool (see the comments below from Bruno Bowden) that visualizes a web page against their data on viewport size, so you can see what’s visible to visitors. The Google Code blog announced the project yesterday.
I’ll admit I was a bit taken aback at how similarly we had conceived the method to measure and analyze web page designs. But, it’s clear we came to the issue through similar routes. With my first post on the topic three years ago on the SIGIA-L mailing list gathering dust, it’s nice to see there are others out there who care at this level of detail when thinking about interface design.
[...] site’s expanding role as a hub for my work in marketing strategy, branding, and social media. My post about what screensize to design for helps to frame a lot of the points below. To make sure I get what I want, I’m starting with a [...]
Hi John, I found you through your tweets. I'm the developer at Google who was worked on "Browser Size". One of the reasons I worked on it was that I couldn't find any data online… so it's very interesting to find someone like yourself who's already been working on it.
Hey, Bruno. Thanks for writing in. It's very cool to see your project, presumably working with a much bigger data set! Though I was a bit astonished to see that we'd approached representing the issue of who could see your web page content in such similar ways.
Q: I'm assuming you are using screen dimensions, rather than viewport size. Is that right? It doesn't really affect horizontal width, but it does make a difference for vertical height, thanks to toolbars etc. Are you accounting for that in your vertical height data?
The data is exclusively based on viewport information. As you also found, the screen resolution data is widely available but highly misleading. The tool has a limitation in that it doesn't take account of page reflow as you change the width. I'd argue that the scrolling makes a very big difference. As I mentioned in the Google Blog article, we got a 10% increase in Google Earth installs by raising the button 100 pixels. All of those people could have scrolled to see the button but the fact that they didn't is why this tool can be so valuable. Email me directly – probably easier than talking here.
Thanks for the info. We will be reworking our website with a wider layout