Web Page Width

When designing a web page, what width should you design for?

Well the answer to this question is a bit more complicated than just specifying a particular fixed width. While some methods of accessing the web have a fixed width (such as the 544 pixel width that webTV uses where anything on your page beyond that width is lost and the 748 pixels that is the widest you can print onto paper without losing some of the content), most do not. Also, except by using JavaScript to test the browser viewport width, there is no way of determining what width the particular browser currently has available to display the page.

What this means is that if you specify a fixed width for your web page then no matter what size you choose for that width there will be some people who end up with a horizontal scrollbar because your page is too wide for their browser and some who end up with huge amounts of space next to your content because your content is too narrow for their browser.

If you want your content to fill their browser then the only width you can use that will do that is 100%. If you want a small border down each side then a slightly lower percentage width along with specifying auto margins will give you that.

This takes care of making sure that your content fits their browser but there are two additional aspects to your web page content to further complicate things.

The one thing in your web page that will always be specified in pixels are images. Only by specifying the exact size of the original image will the image display properly in the web page. If you specify a different size from that of the actual image then the image will not display correctly as browsers are not designed for resizing images. Even if you leave out the actual image size from your web page the size it displays at will be its actual size in pixels. As a result of this your page with its percentage width may break when the available viewport width becomes too small to fit your images plus whatever is supposed to be next to them. You may decide that a horizontal scrollbar is preferable to having the layout mess up when the width gets too small. The solution to this is to specify a minimum width for the page in pixels. As long as this minimum width is small enough that those devices that do have a fixed width display don't need a horizontal scrollbar this solution will not break your page. Of course if the narrowest you want is the width of the images without anything next to it then you don't need to specify a minimum width as the images themselves will enforce that for you.

The other thing that will affect the usability of your web page is the text content. Lines of text become hard to read if the line becomes too long (that's its length in terms of the number of letters displayed on a line, not its actual length). If you think that some of your visitors will be using really wide browsers where your lines of text will be too long to read easily if displayed at full width then you may want to place an upper limit on how wide your content can go. Now this width needs to vary depending on the size of the text since if your visitor makes the text bigger in order to make it easier for them to read then your page can be wider than if they display the page using a smaller sized text. If you are going to set a maximum width then it needs to be relative to the size of the text. The easiest way to do this is to specify your maximum width using em so that it will be relative to the size of the text that is actually being displayed.

All modern browsers allow you to specify a min-width and max-width as well as a width for your content. For those of your visitors using older browsers that don't allow a munimum or maximum width to be set the majority will have their browser viewport width somewhere between those sizes anyway and so the fact that their browser does not understand those commands will only impact on an extremely small percentage of your visitors.

Specifying your web page with a percentage width, a minimum width in pixels and a maximum width in ems will therefore provide your page in a usable format for the greatest possible number of visitors.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow