You can see that once again I am being assertive. Why design for just this one monitor resolution? And, accepting my rule 1, exactly what fixed width ‘page’ does this imply?
The facts of monitor resolution are worth being aware of. In the year since I last analysed the statistics of visits to my small personal site, the variety of monitor resolutions has increased. There isn’t space here to list them. Look simply at the last 10 visits I received: 4 visitors had monitors set to 1024×768, 2 had monitors set to 1280×1024. The other 4 had monitors set to 1120×840, 1280×800, 1440×900, and 1680×1050 (1 each).
Apart from the variety, there are two things that can be learned even from this small example (and they are borne out by the total statistics). All of the visitors had monitors set to at least a width of 1024 pixels (most had more). And there isn’t one visitor with a monitor set to 800×600 (which some backward-looking people think we should still take as the norm).
Looking at my total figures, with the help of phpMyAdmin and a calculator, I find that just 7% of my visitors, over the last year, had a monitor set to 800×600. Are we really supposed to design for that 7%, at the expense of the 93% who will have acres of empty screen to gaze at?
So, the first two rules (which go together):
- Use a fixed-width layout
- Design for 1024×768
Just to remind you what I mean by a ‘rule.’ A rule is a bit of advice that you should always follow–unless, in the particular case, you know better. A rule should never be broken unknowingly. It is worth knowing, and worth remembering.
So what fixed width does rule 2 imply? A good 20px of the screen width should be allowed for browser furniture—its own borders, the scroll bar, whatever. That makes 1,000 pixels the broadest we can get away with, if we don’t want our visitors scrolling to the right.
There are two widths, however, that are much more common. Blueprint is a CSS framework, which makes it easy to use grids in your design. In order to to have fixed-width ‘columns’—which can be combined in many formations—and fixed-width gutters (margins), the framework starts with a fixed width of 950 pixels. This is a project well worth investigating, if you are interested in the use of grids for layouts. You may well feel that 950 pixels is ideal for your site.
My own favourite, however, is 960 pixels. As many Web designers have pointed out, this number divides by 2, 3, 4, 5, 6, 8, 10, 12, 15 and 16—which gives you immense flexibility in designing columns. If you have no strong reason for picking another width, this is the width I recommend.
