Apple.com uses a content width of 984. I didn’t know that until after I wrote this post, but I came to about the the same conclusion. Read on to find out why…

Simple statistics…

Of visitors to websites in mid-2010 (source):

1. A quarter (24.3%) were using a screen resolution of 1024, less than 3% were narrower than that.
2. A quarter (24.2%) were using screen resolutions of 1366 or more pixels.

►  Note: These data skew slightly to higher-tech audiences.

…lead to a simple conclusion:

1. Use a fixed width design, unless your site looks great on very wide screens (1 in 4).
2. Make sure your site is not too wide for visitors with screens set to 1024 (1 in 4).
3. Fluid (varying width) designs that use min-width and max-width limits are also an option.

â–º  Note: On a site that is wider than the content viewing area a visitor’s browser will actually reduce the height as well, because a horizontal scroll bar will appear and take up space at the bottom of the window when your site is too wide for the browser’s viewable content area.

The answer: Design for a viewable content area of 990 pixels or less

What size content area are most 1024 users seeing in their browser?

The table below shows that 80% of users with their screen set to 1024 resolution see a content area in their web browser that is 984 pixels wide. Every pixel narrower than 984 improves the results for very few more users. But every pixel wider than about 990 hides part of your site for MANY more users. So your site should be between 980 and 990 pixels wide. Why that works:

Loss/Gain in the table means what percentage of 1024-width resolution users will lose or gain sight of part of your site as it gets wider. For example, if you have a site that is 976 pixels wide, changing it to 984 pixels wide will cause some of your site to be hidden for less than 1% of your visitors. (Conversely, if your site is 984 pixels wide, narrowing it to 976 pixels will unhide content for less than 1% of your visitors.)

Source

►  Note: Even fully maximized, the content area of a typical brower on a 1024 width screen is just 1004 pixels wide.

What about the invisible grid?

A great article on this is Is it time to move beyond 960? They note that the masters of design at Apple prefer the 984 width for the Apple.com website.

What about tablets?

If you have a site where you expect many of your visitors to be using smaller screens, (960px is common on tablets) then you need to plan for those specific users. But most of the time you don’t know in advance the screen size of your visitors, and 990 or less is your best choice.

How wide should the content area vs. sidebar be?

A content area of 500 is common and safe, but consider your content. You may wish to use fewer or no sidebars on pages that have wider content, or make the content enlarge when clicked. Search for jquery thumbnail viewer in Google for some common tools to do this for images.

As YouTube began providing higher-resolution videos, they made it harder to embed small-size videos, which meant they overflowed the content area on many sites. YouTube has fixed this, and no longer emphasizes 560-pixel width embedding. Simply use YouTube’s custom size embed feature to make sure any videos you embed are not wider than your content area.

►  Note: Most mobile device users zoom in as needed when browsing.

What about the future?

The great thing is, this should hold true for a long time, because:

1. Mobile devices are being used more and more, and many use 1024-width for the web page, even though their screens are smaller: mobile user are used to panning and zooming.
2. There are so many users using 1024 resolution on their desktop it’s unlikely they will fall below 5-10% of all users (when you could start to ignore them) anytime soon.
3. The wider a column of text is, the harder it is to read. So main content areas are likely to stay at sizes similar to what they are now. Adding an extra right sidebar (that some users won’t see) is a common cause/opportunity for making sites wider.
4. Since tablets and mobile device users are used to zooming/panning, once these devices become the vast majority of 1024-width and under resolution visitors, you should be safe increasing to 996-width sites. Currently mobile devices account for less than 2% of web site visitors.

â–º  Note: Even though screens are getting wider and wider, more and more folks are using multiple monitors. So it’s unlikely that really wide resolutions will dominate any time soon either.

Exceptions and other things to take into account

One thing to realize is that web design width strategies haven’t changed much since 2006. Back then, the sweet spot was a little lower, so 960 fixed-width or less was more common, and the right sidebar was often set to be just barely visible for 800-resolution width screens when using wider layouts.

Alternative: Fixed width that goes fluid for smaller screens

An 1140 grid fits perfectly into a 1280 monitor and can be made to resize smaller for smaller monitors/mobile.

There are other issues, but most are not relevant so I’ve kept it simple and left them out. I’ve tried to create the best, simplest reference possible, while linking to more complex analyses.

What issues are you facing? Do you disagree with my conclusion? Click here to add your comment!

back to top