Web Page Width and Height

Page Width

Computer screens vary widely in size – older ones may be as narrow as 600 pixels wide, while modern wide-screen monitors may be 1600 pixels or more. People also have preferences for the width of their browser – some use the full screen width, while others don't so that they can access other applications simultaneously. So, the width window in which somebody is viewing your website can vary enormously, and you need to take this into account when designing your site.

Fixed versus Variable Page Width

The width of a web page can be fixed or variable, each with their own advantages and disadvantages. A page with a fixed width will, as the term implies, always be exactly the same width. The good side of this is that it means that your page will display exactly the way you intended. The bad side though is that if your visitor has a browser window that is wider than your page, there'll be empty space (or space filled only by a background color or image) on one or both sides of your page – space that you could have used to display more content or ads.

It's worse if your visitor's browser window is narrower than your page, because in that case they'll only see the left-hand side of the page, and will have to scroll horizontally to see the rest. While we're all used to scrolling vertically down a page as we read through the contents, scrolling back and forth horizontally is a real pain, and is likely to put visitors off.

If you use a page with a variable width, then you avoid these problems, because the width of your page automatically resizes to fit in the browser window. This is great is your content is primarily text-based, because the text will just wrap from one line to the next at the appropriate point depending on the width. It's not as good if you're using images though, because you can't automatically wrap images the way you can text (in this case, you'll get the horizontal scroll bar again if an image won't fit). You'll also find that you can't design your page layout as precisely (if you're concerned about things such as alignment of text in different columns), because you don't know exactly how it will be displayed.

So, if the body of your website is primarily text (you might still have ad units, menus or other images on the left and/or right sides), then you should probably look at using variable width pages. If your content includes a significant number of images, you're probably best off with a fixed width.

What Fixed Page Width Should You Use?

If you do decide to use a fixed width, then what width should you choose? This really depends on two factors – your target audience and the screen sizes they're likely to be using, and on the effect on your website if the right-hand edge gets cut off.

If your target audience is a group who are generally early adopters of new technologies (supposing, for example, if you were putting together a site aimed at webmasters and other computer experts), then it's probably safe to assume that they'll be using wide-screen monitors, and therefore OK for you to use a fairly wide page width (maybe 1000 pixels or more, for example). On the other hand, if your target audience is likely to be viewing your side using older monitors (if, for example, your site were intended for use in schools, where older hardware might be retained for many years), then you should use a narrower page width (maybe 800 pixels or less).

If you want to be really safe, then you should design your site so that it can be viewed on monitors 800 pixels wide (older monitor sizes of 800x600 pixels are still in use). Allowing 40 pixels for the borders of the browser window and the vertical scroll bar etc. would give you a page width of 760 pixels.

The other factor to consider is how critical it is if the right-hand side of your page gets cut off. If you content runs right up to the edge of the page, then this would be a problem, because it would force people to scroll horizontally. If, however, the right-hand side is used for ad units or other graphics, then it may not be as critical if it gets truncated (people may not see all of your ads, but since they wouldn't have to scroll so much, might be more likely to return to your site).

Page Height

Another thing that you need to consider is the height of your pages. This sounds straightforward – you divide your pages up into logical topics, and as long as none of them go on for too long (in which case you might consider subdividing them), the page height is whatever it is (i.e. wherever the content ends, plus perhaps a footer if you're using one).

This seems logical, and is what we try to do. Not all sites do though. We've all seen sites where you get the first paragraph or two followed by a link to the rest of the article, which may in turn further contain links to even more parts of it, with a minimal amount of content on each page. This would definitely boost the number of page views, and therefore increase advertising revenue, if their visitors do indeed go through each part of the article. The danger though is that this can put visitors off, resulting in them going elsewhere (which is what we do when we encounter sites like this), so we don't recommend taking this approach.

<-- Previous Page

Web Page Layout

Next Page -->

Navigation and Usability