Rule 11: Reasonable width

The common question .what screen resolution (or screen size) should I design for. is a wrong question, though it can be turned into a meaningful question. If you need to answer the question as posed, the correct answer is .any resolution.. This can be literally anything, starting from zero pixels; there are no pixels in a speech presentation of a page.

The simple test for page width is to open the page on a graphic browser and modify the browser window width. Is the content visible without horizontally scrolling if you make the browser window.s width half of the screen width?

The upper limit for the visible width without scrolling is dictated by the horizontal resolution of the screen, which is typically 1024 or 1280 pixels these days. A fairly common scenario of using two equal-wide windows side by side means that window width is 500–600 pixels, and this is often a convenient width for browsing: it roughly corresponds to typical page width in books.

You can find your monitor resolution in the system settings, e.g. via the Control Panel in Windows. You can also create a simple test page containing elements with known width, for comparison. A simple way to create such an element in HTML is <hr align="left" width="…">.

The graphic rendering of a page can “have a width” in several meanings:

A fixed-with page

has a specific width in pixels, typically set up by using a layout table with a width attribute. If you set, say, width="750" in a table tag, then the width is 750 pixels, causing some horizontal space to be unused if the browser window is wider, and forcing horizontal scroll bar if it is narrower. (To be exact, the page will be a bit wider, due to default margins.)

A free-width page

takes up the available horizontal space. This may cause very long text lines. On the other hand, it makes the page fit to even very small devices or windows without horizontal scrolling. In practice, there is some lower limit, typically the width of the widest image used or the length of the longest word.

A mixed-width page

is an in-between case that has a minimum width set, or a maximum width set, or both. This may mean, for example, that in a 1024 pixels wide window, the page content is 600 pixels wide (when the maximum width is set to that) but in window narrower than 600 pixels, the page takes the available width.

As a rule, a mixed-width page with a maximum width set to, say, 550 or 750 pixels is more accessible than the other alternatives. The value of 550 has no magic in it, but it allows the page to be viewed without horizontal scrolling on most devices, at least in full-screen mode; moreover, it probably makes the page fit on paper, for most commonly used paper sizes. A free-width page is suitable too, except for the fact that on a large screen, the user needs to know how to set the window width to something suitable. For a fixed-width page, smaller widths (down to something like 350–400 pixels) are better than larger widths.

However, the width issue is deeply entangled with the overall page design. If you have, say, a page with a layout table with <table width="900">, then the page surely has accessibility problems, but you cannot usually solve them simply by removing the width attribute or changing its value. There are probably several elements and features on the page that relate to the table width and should be adjusted too. However, on many pages that use layout tables in a rather simple way, removing all width attributes from the table and its cells can produce a considerable improvement.

Tables are not the only constructs that impose a specific a lower limit for page width. Quite often, a page is otherwise a free-width page but contains a wide logo image at the start (or elsewhere). In such situations, it is advisable to replace the image by another version that has width smaller than 550 pixels.