Strategic insights
How to design for Browser Sizes

Written by Thomas Baekdal on February 21, 2007

A while ago I looked into what browser sizes people use to... well... browse the internet. I have received a good amount of feedback both as comments on the website, but more so in form of emails. With this article I will try to make sense of it all, and explain why the whole discussion about fluid vs. fixed layout is irrelevant.

Fixed, fluid, smart, elastic, flowing, intelligent... layouts

There is an amazing amount of articles on the net on how to make the overall layout. But, none of these gets it right. They are all trying to solve the wrong problem.

These articles define the problem as either having too much space - i.e. large empty areas outside your content - or too little space that forces horizontal scrolling and lack of whitespace.

I understand why this is a problem, and why people want to eliminate it. But, you are not solving the right one. The real problem is; how do you optimize the visual presentation of your website? How do you make your content look amazing? How do you make it easy to see - to read?

Text

Let's start with text. We know from countless of studies that the optimal width of a block of text is between 65-80 characters (with a line-height of about 1.15). This is the optimal size of text, and it has been proven to be:

Easier to move from one line to the next
It is much faster to read in general
The brain use less mental effort (which increases understanding and learnability)

It has no relevance to discuss fixed vs. fluid layout. We know that the best way to present text is when there are 65-85 characters per line. An example is that with "Arial 12px" the size of your text box should be about 495px wide (+ whatever whitespace you want).

BTW: This is the reason content area on this site is 496px wide (+25px whitespace on each side) ...

Designing text on a website is simply about 3 things:

Make it readable (use a readable font and adequate size)
Prevent scrolling as much as you can
Make the width of the text box 65-85 characters per line.

Do not make the text too small because then you cannot read it. But, if you make it too big you also need to use the scrollbars more. The tricks is the balance them out.

Images

When we look at the best way to present images we have tackle a different set of requirements. As rule of thumb the best way to present an image is to balance its size between two things:

To prevent unnecessary eye movements (mental strain)
Make it big enough to see the details

This, of course, is not easy as they are in direct conflict with each other.

We have the same experience when we go to the cinema to watch a movie. If you sit in the back, the screen gets too small and you cannot see the details. If you sit at the front everything is so big that you constantly have to move you head just to see the actors. The solution is to sit somewhere in the middle. And it is the same on a website.

The correct size of an image depends on the number of details in it. Many details require a larger image - while a few can easily be seen in a smaller area. But you can generally size your images based on a 14:5 ratio. The distance from your eyes should be about 2.8 times further away (14:5) than the width/height of your image.

As an example:

An image should have a width of about 750px, if you are using a 17" screen running at 1024x768 - positioned on a normal office desk.
It should have a width of about 1100px if you are using a laptop 15.4" widescreen running at 1680x1050px.

BTW: in both cases it is about 70% of the full width of a computer screen

The best way to present an image is thus to use a fluid layout - or even an elastic one. If you happen to display the image inside a text box, you either need to resize the text to fit the image, or decrease the image-details so that it can fit a smaller area.

Note: You need to stream the correct sized image to the browser, since the browsers are horrible at scaling images. There are several products on the market that can do this - but they are expensive.

Rich media sites / Web Applications

Lately we are seeing many new kinds of websites - often being referred to as rich media sites or web applications. Sites like Live Local, Flickr, iTunes Music Store etc.

To begin with it seems much more difficult to design the interface for a rich media site - and it often is. But, the trick is to set priorities for your content. You always need one thing that has the first priority, followed by a number secondary things and some less important stuff.

To create good design you must then look almost exclusively at the content that has priority. For instance, when I made the concept for the Flickr X Image Viewer, I specifically designed it so that the most important element - the active image - was designed according the requirement for images I wrote above. Everything else (menus, actions, image bars etc.) was then placed in locations surrounding the main content.

You see the same concept with modern desktop applications - like Word 2007. Your primary content is text, and the secondary elements are the toolbars (or the ribbon as it is called).

What good is the Browser Sizes report?

Now you are probably thinking that the browser size report is rather useless.� And, you are right - as a design tool it has little relevance. But, the report visualizes two very important things:

It illustrates design constraints
It exposes areas that can cause problems

One example is when you are designing a blog.� You know that the main content - the blog text - should have a width of 65-85 characters. You know that you cannot read the text if you make the text smaller than 11px (translates to a text box width of about 450px). But what about an upper limit?

With the report I found that you layout width need to be less than 776px, if you want to reach 95% of your visitors - and that is your design constraint. You cannot make your text larger than 19px, because the text box needs to be larger than the available screen space.

It is the same with images and other elements. The browser size report identifies the design limitation. It is less important when deciding on a design direction.