A major web-design problem is that the designer has chosen to unnecessarily make the page a particular width, i.e., a fixed or frozen width.

Question: What page size should you design your site for?
Answer: The size of the space it is being rendered in.

Question: What are the standard page sizes?
Answer: There are no standard page sizes.

Let's go into details. How big is your browser window? Can it be bigger? Can it be smaller? (Did you not know you can change it?) How big is the window of someone visiting your site? You don't know. You might think you know, but you don't. You might think that they have no right to use a different size to you (or to one of the supposed ‘standard’ sizes), but you are wrong. The World Wide Web does not have a fixed size, or even a few – it is infinitely varied, and was designed that way. HTML was designed to allow a document to be expressed in a manner independent of its rendering environment, thereby being widely compatible.

Yet many pages have a specific width designed into them, either using the CSS width property, or by placing the content in a <table> with the width attribute. This is extremely annoying for anyone whose browser window is narrower than the specified size, because the dreaded horizontal scroll bar becomes necessary, and each and every line of text has to be read with a time-consuming shuffle to the one side, then to the other. And let's be clear – the visitor is being perfectly reasonable to suppose that a page will fit into her window, even down to very narrow widths.

Why has the designer chosen to do something so irritating? If I don't limit the width of the page, the lines of text become too long, so it's harder for the reader's eye to find the start of the next line, I hear the designer protest. But that's not his problem, for two reasons:

  1. It might be harder to read for the designer, checking his design, because he's using his full screen to observe the page. It might, and probably can, look fine to his narrow-window visitor if he does not try to ‘fix’ it. There is nothing to fix for such a visitor, because the page is not broken for her.

  2. If someone views a page with no styling using her full screen, then she is inviting the page to fill it. This is not a fault with the page or of its designer, because the page (with no styling) cannot anticipate the many and varied environments in which it will be rendered.

    The visitor might not even regard it as a fault. She might have chosen to use a larger font with her wider window, so the lines won't appear so long in that case.

It is, therefore, the responsibility of the visitor to deal with very long lines, not the designer's. The designer should assume that the unadorned page is always correct, even if a little plain.

However, the designer can do something about it through styling – make a flexible hint with the max-width property.

The max-width property has been standard since CSS2, and allows the designer to advise that a visual object should have a maximum width. Mozilla/Firefox, Opera and Safari all support it; possibly others, even IE7. And it does no harm if not recognised.

max-width might ideally apply to a group of paragraphs (perhaps in a <div>), or to a whole page (by setting it on the <body> element).

Now, when your visitors' browsers recognise the max-width property, those with narrower windows will see the page fill the window as before. This is not a problem for them – they asked the page to use up that space, and their lines were never too long anyway. Indeed, such visitors might not even notice that you constrained the width.

However, visitors with wider windows do see a difference – the lines of text now don't go beyond a certain point, regardless of slight variation in window width. So their experiences are improved, at no expense to the narrow-window visitors.

What value should be specified by max-width? Firstly, choose the unit carefully. If the purpose of constraining the width is to prevent lines of text getting too long, and this excessiveness is defined in terms of the average number of words per line, then you can roughly equate this to an average number of characters, and therefore to a certain number of ems. The em is most useful here since, if the visitor uses a larger font size as her default, she can probably cope with a wider column of text – the lines will naturally be taller and easier to traverse, and the number of words per line won't change until the full window width is consumed. And when it does, the word count actually goes down; so you're effectively setting the maximum number of words. Try around 45em to start with, and adjust according to comfort.

(The ex unit may be more appropriate, but I've seen doubts raised about its usefulness.)

It is also advisable to set one or both lateral margins to auto when using max-width. Set them both to achieve a centering effect.

Finally, I'll mention that some browsers allow the user to set max-width in their user stylesheet, to be applied to all pages in the absence of any suggestion that comes with the page itself. The wide-window user can use it to visit pages both with and without styling, because her own max-width comes into effect whenever the page fails to specify something. However, she can not know beforehand the structure of the mark-up of every page, and so can probably at most apply:

body {
  max-width: 35em;
}

…which is suitable for an unstyled page. But if you set max-width on individual components of your layout, that default <body> setting might be too restrictive for your layout, so it is reasonable to loosen it up a bit by overriding.