Web Page Widths

Defining the Width of Your Site for Different Browser Resolutions

Three versions of the same site, for desktop, tablet, and smartphone.
Three versions of the same site, for desktop, tablet, and smartphone. Screen shot © 2012 J Kyrnin licensed to About.com

The first thing most designers consider when building their web page is what resolution to design for. What this really amounts to is deciding how wide your design should be. There is no such thing any more as a standard website width.

Why Consider Resolution

In 1995, the standard 640x480 resolution monitors were the biggest and best monitors available. This meant that web designers focused on making pages that looked good in web browsers maximized on a 12-inch to 14-inch monitor at that resolution.

These days, 640x480 resolution makes up less than 1 percent of most website traffic. People use computers with much higher resolutions including 1366x768, 1600x900 and 5120x2880. In many cases, designing for an 1366x768 resolution screen works.

We are at a point in the history of web design where we don't have to worry much about resolution. Most people have large, wide-screen monitors and they don't maximize their browser window. So if you decide to design a page that is no more than 1366 pixels wide, your page will probably look fine in most browser windows even on large monitors with higher resolutions.

Browser Width

Before you go off thinking “okay,  I'll make my pages 1366 pixels wide,” there is more to this story. One often overlooked issue when deciding the width of a web page is how big your customers keep their browsers. Specifically, do they maximize their browsers at full screen size or do they keep them smaller than the full screen?

In one informal survey of co-workers who all used a company-standard 1024x768 resolution laptop,  two kept all their applications maximized. The rest had different-sized windows open for various reasons. This illustrates that if you are designing this company's intranet at 1024 pixels wide, 85 percent of users would have to scroll horizontally to see the whole page.

After you account for customers who maximize or don't, think about the browser borders. Every web browser has a scroll bar and borders on the sides that shrink the available space from 800 to around 740 pixels or less on 800x600 resolutions and around 980 pixels on maximized windows at 1024x768 resolutions. This is called browser “chrome” and it can take away from the usable space for your page design.

Fixed or Liquid Width Pages

The actual numerical width is not the only thing you need to think about when designing your website's width. You also need to decide if you'll have a fixed width or liquid width. In other words, are you going to set the width to a specific number (fixed) or to a percentage (liquid).

Fixed Width
Fixed width pages are exactly like they sound. The width is fixed at a specific number and doesn't change no matter how big or small the browser is. This can be good if you need your design to look exactly the same no matter how wide or narrow your readers' browsers are, but this method doesn't take into account your readers. People with browsers narrower than your design will have to scroll horizontally, and people with wide browsers will have large amounts of empty space on the screen.

To create fixed width pages, simply use specific pixel numbers for the widths of your page divisions.

Liquid Width
Liquid width pages (sometimes called flexible width pages) vary in width depending on how wide the browser window is. This allows you to design pages that focus more on your customers. The problem with liquid width pages is that they can be difficult to read. If the scan length of a line of text is longer than 10 to 12 words or shorter than 4 to 5 words, it can be difficult to read. This means that readers with large or small browser windows have trouble.

To create flexible width pages, simply use percentages or ems for the widths of your page divisions. You should also familiarize yourself with the CSS max-width property. This property allows you to set a width in percentages, but then limit it so that it doesn't get so large that people can't read it.

And the Winner Is: CSS Media Queries

The best solution these days is to use CSS media queries and responsive design to create a page that adjusts to the width of the browser viewing it. A responsive web design uses the same content to create a web page that works whether you view it at 5120 pixels wide or 320 pixels wide. The different-sized pages look different, but they contain the same content. With the media query in CSS3, each receiving device answers the query with its size, and the style sheet adjusts to that particular size.