1. Technology

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. And what this really amounts to is trying to decide how wide your design should be.

Why Consider Resolution

In 1995, 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–14-inch monitor at that resolution.

These days, 640x480 resolution makes up less than 1% of most website traffic (verify with your server logs to be sure). Instead, people are using computers with 1366x768, 1600x900, and 1920x1080 resolution. To be most accurate, you should check the server logs for your website, but if you don't have that information, designing for an 1366x768 resolution screen will work.

Luckily we are at the point in the history of web design where we don't have to worry as 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 768 pixels wide, your page will probably look fine in most browser windows even on larger monitors with higher resolutions.

Browser Width

But before you go off thinking “okay I'll make my pages 800 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 800x600 (or higher) resolution? Or do they keep them smaller than the full screen?

Back in 2006, I did an informal survey I did of 12 of my co-workers (all using 1024x768 resolution laptops, because the company standard was 1024x768); 2 kept all their applications maximized. The rest had different sized windows open for various reasons. Now, this wasn't a scientific survey, but it does show you that if I were going to design the company intranet at 1024 pixels wide, 85% would have to scroll horizontally to see the whole page.

Once you've accounted for customers who maximize or don't, you need to remember the browser borders. Every web browser has a scrollbar, 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 really 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 upon how wide the browser window is. This allows you to design pages that focus more on your customers. But 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–12 words or shorter than 4–5 words, it can be very difficult to read. This means that readers with large or small browser windows will 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.

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.

I Recommend Responsive Design

I advise creating a design that adjusts to the widths of the browser viewing it. But if you absolutely must have just one width, then I would aim for a content area that is no more than 1000px wide, and 900px is better. This is wide enough for most wide screen monitors, but smaller monitors won't have to scroll horizontally to view the pages.

©2014 About.com. All rights reserved.