How to design for Browser Sizes

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.

Comments

Evan - Feb. 22, 2007

Can you use "em" and "ex" relative length values in your CSS to establish these optimal text widths and spacing, or is pixels best?

The min-width and max-width properties are handy here to control the limits of text box width while still obviating a horizontal scrollbar.

Do you have references for your statistics on readability and such?

Good article!

Daniel Aleksandersen - Feb. 22, 2007

1em is just about equal to 12px. This is the CSS I usually use on my layouts. As you can see I have been reading the same books as Thomas:

font-family: Arial, Sans-Serif; font-size: 1em; line-height: 1.15em;

Thomas Baekdal - Feb. 22, 2007

Evan, You will have no problems using EM's to define font sizes - but you also need to define the text box using EM's. If you use fluid sized text, you also need to use a fluid sized text box.

As for min/max-height/width then I do not fully agree with you. The point is not the scale the frame but the content itself. If you have less space available you need to scale your images and text - not just the containers.

I will post some references material later (but you can simply search on Google. There are an insane amount of studies about this.

Young - Mar. 8, 2007

Really Good Article!

Could you post some references for this data?

Thomas Baekdal - Mar. 8, 2007

I have posted a few references above. I am sorry for the delay, and not posting these to begin with.

Note: I got more references at home, I wil try to post these later this week (maybe not until next week).

Daniel Aleksandersen - Mar. 9, 2007

I just came to think about something... Would it be possible to get a good result with this?

p { width: 75em; }

Would it not set the width to about 75 characters?

Thomas Baekdal - Mar. 9, 2007

I do not think so. I think em's size is defined by the height of the font character. But, try it and let us know.

Daniel Aleksandersen - Mar. 9, 2007

em is the height of a uppercase "M", and ex is the height of a lowercase "x". [reference]

I have always believed that em where width, and ex height. Then what I suggested would not work. Too bad.

Thomas Baekdal - Mar. 9, 2007

Daniel, I have never fully understood what em and ex really was. Thank you for the clarification.

I must admit that I very rarely use any of them. I use pixels or percentages - seems simpler :)

Daniel Aleksandersen - Mar. 16, 2007

Pixels does not make much sense, though I understand your use of percentages.

I have used a lot of time reading up on fonts, and readability the lasts days. This is *the most* scallable option you can use for texts:

font-size: 85%; line-height: 1.225;

85% of height of font's uppercase M, with a baseline distance of 1.225 times 85%.

Cezary Okupski - Mar. 24, 2007

1 em is usually 16 pixels as all the modern browsers I know come with such base font settings by default.

E. g.:

Safari 2:

Preferences... > Appearance > Standard font

Firefox 2:

Preferences... > Content > Fonts & Colours > Default font

Internet Explorer as well.

Daniel, thus body{font-size:1em} doesn't make much sense as I guess you didn't mean here for example h1{font-size:1em} which depends on your design.

It is a common practice for those coping with ems to do something like:

body{font-size:62.5%}

and then have 1 em as 10 pixels to specify for example

h1{font-size:3.6em} for 36 pixels

p{font-size:1.2em} for 12 pixels

or alt=ernatively

address{font-size:150%} for 15 pixels

ems are inherited thus consider a nested list with

ul{font-size:1.2em}

first level - 12 pixels (1.2), second 14 pixels (1.2 * 1.2), third 17 pixels (1.2 * 1.2 * 1.2)

It is wise to do

ul ul{font-size:1em} then.

There are many unpleasant inhering issues when specifying font sizes in ems, but they are worth a while as it makes the document more accessible (Internet Explorer can scale the text [View > Text Size] defined with relative sizes or keywords).

Thomas Baekdal - Mar. 26, 2007

Cezary, thanks for the detailed info.

I must admit that I personally think that using EM's will be obsolete in the near future. Opera and I IE7 both feature zooming, which is a much better method to change the size of the content (text size only changes, well the text).

I think we are going to see the same with Firefox within the end of the year - and Apple might join in with the release of their new OS.

Note: As a designer we should make text readable be default (if people have to change the text size - or zoom, you got a problem).

Ummmmm - Apr. 6, 2007

Both Firefox and Safari have had the ability to scale the size of text on a site for quite a while.

Thomas Baekdal - Apr. 6, 2007

Ummmm, My point in my previous comment was that IE and Opera's Zoom feature can make everything on the page bigger (or smaller) - not just the text as in Firefox and Safari.

Wow, how confusing! - Jun. 12, 2007

Does anyone have advice on a good generic template which covers all of this?

Abu - Jun. 30, 2007

Quote: "We know from countless of studies that the optimal width of a block of text is between 65-80 characters."

We were made to believe it was less! Can you please point to any of these studies for further reading? Thank you.

Thomas Baekdal - Jun. 30, 2007

Some of the references can be found in the last part of the article (See also)

Annerose - Sep. 5, 2007

These comments have been invaluable to me as is this whole site. I thank you for your comment.

Jae - Nov. 8, 2007

Thank you for the interesting article. One point that I don't fully agree with you on is this:

Personally I often change the font size to my liking. Too many designers do not write their pages to be readable by default--at least not with my eyes.

Some sites' fonts are too small, some are just fine, and occasionally, I suppose, they are too big. In any case, if I design for a content area of just under 500px, and the user makes the font several sizes bigger, now perhaps only 40 characters will fit in that space, rather than 65-80. Conversely, if the user has a large monitor and chooses to reduce the font size, now perhaps 100-120 characters will fit in the 500px area.

It would be interesting to try to design a page such that content area would increase with font size, but I am an inexperienced designer and do not know how I would go about doing this. For now I am inclined to stick with fluid design and let the user choose how wide of a content area he or she wants, in addition to changing the font size.

Also, IE7's zoom is terrible and very unsophisticated. Go to nytimes.com for example and zoom in a bit; now you will have to scroll horizontally to read anything. Opera has the same problem on this particular page. But on other pages (e.g., google.com), at least Opera will adjust the text area so that you do not have to horizontally scroll to read one line.

Jae - Nov. 15, 2007

Never mind my previous comment about the text box area; I read over your response more carefully and I understand now that if I design the text box fluidly and the text size fluidly, then it will work. Sorry!

I do maintain that IE7's zoom is too simplistic compared to Opera's.

Talyah Aviran - Nov. 26, 2007

Hi, my problem is to design internal and external web applications that require a large amount of data on one single screen.

My users, usually, prefer using 600X800 resolution screen so that they are able to see the data presented on the application better. They also would like to be able to present as much data as possible without having to scroll either vertically or horizontally.

The question is: do we now need to design our screens to the resolution of 768X1024 to allow us to compress more data into one single screen?

Will it help if we use EM based CSS (to allow our users to size the browser's fonts)?

Thanks Talyah.

Léonie - Dec. 1, 2007

Yahoo developed a "Reset CSS" file which removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions.

I use this and other CSS files from yahoo, because they work in all common browsers and make it easy to concentrate on creativity instead of compatibility;-)

Léonie.

solarurls - Dec. 6, 2007

Very useful information. Thanks !