When you design a Web page, how wide should it be?
The resolution of a computer monitor determines how much of a Web page fits on the screen. It has nothing to do with the dimensions of the monitor (e.g. 17-inch, 20-inch).
Resolution is measured in pixels, width by height (we also measure Web pages in pixels):
Most computer users today use a resolution of 800 x 600 or better. That was not always the case. Just a few years ago, in the early Web boom years, the majority of people had only 640 x 480. If you made a Web page that was wider than 640 (actually, if it was wider than 580), the poor user had to scroll sideways, which is rather awkward.
Every Web browser takes up some of the space available on the user's computer screen. The scrollbar on the side eats away at the width; the buttons at the top eat away at the height. You end up with fewer pixels to work with if you want the user to see everything without scrolling.
Now that most people have better resolution, you need not worry much about "640," but you should be concerned about "800."
Look at these helpful files:
You can see that if you design a Web page to be 1,024 pixels wide, about 260 pixels on the right side will not be visible at 800 x 600 resolution. If the content height exceeds about 420 pixels, the user will need to scroll. Scrolling vertically is usually okay, unless you are cutting an image off in the middle (which looks very bad).
If you're designing for the Web, you cannot be content with how a page looks on your own screen. Your screen is not the same as everyone else's screen. Test the size (both width and height) of every page you design by resizing your browser to 800 x 600!
Why not go to a width of 1024? Because plenty of people still use 800. Not everyone can read teeny tiny letters on a computer screen. If you design for 1024 today, you're going against what is considered good sense in Web design.
In May 2003, theCounter.com captured the monitor resolutions of 38 million users. The most common resolution: Still 800 x 600 (14.7 million, or 44 percent), followed by 1024 x 768 (13.9 million, or 42 percent).
Another consideration concerns the readability of a long line vs. a short line. Did you ever wonder why newspapers and most magazine print text in narrow columns? There's a good reason: Short lines are easier to read quickly.
How wide can a page be and still fit inside 800? The answer is about 750 x 400, but ...
If you want your content to appear in a Web browser without any excess space around the edges, you must tell all the browsers to reset their default page margins. There are several ways to do this, depending on whether you use CSS or not.
If you don't use CSS, add these four attributes to the BODY tag of the page:
leftmargin=0 topmargin=0 marginwidth=0 marginheight=0
(In Dreamweaver, open Page Properties from the Modify menu and type 0 into the four fields labeled "Left Margin," "Top Margin," "Margin Width," and "Margin Height.")
If you use CSS, this does it:
body { margin: 0; }
You don't need to use zero; you can set the margins to another width. The key fact to know is that the different browsers have different offsets! So you must compenstate for that any time you want to align things on a Web page.
See Jason Summers's Browser Image Offset-o-Meter to get a measurement of your browser's offsets.
See also CSS (Style Sheets) >>>
Copyright © 2003 by Mindy McAdams