What Should the Width of Your Web Page Be?

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 anymore as a standard website width.

Why Consider Resolution

In 1995, the standard 640-pixel-by-480-pixel 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, the 640-by-480 resolution makes up less than 1 percent of most website traffic. People use computers with much higher resolutions including 1366-by-768, 1600-by-900 and 5120-by-2880. In many cases, designing for a 1366-by-768 resolution screen works.

Todya, 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

Read More

Learn to Design Page Sizes Based on Monitor Resolutions

By Jennifer Kyrnin

One often overlooked problem when deciding the width of a web page is how big your customers keep their browsers. Specifically, do they maximize their browsers at a full-screen size or do they keep them smaller than the full screen?

After you account for customers who maximize or don't, think about the browser borders. Every web browser uses a scroll bar and borders on the sides that shrink the available space from 800 to around 740 pixels or less on 800-by-600 resolutions and around 980 pixels on maximized windows at 1024-by-768 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 approach 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, 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 strategy brings designs that focus more on 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, use percentages or ems for the widths of your page divisions. 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. 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.