----------------------------------------------
Page Width
----------------------------------------------
If you're starting a site from scratch or revamping an existing site,
one of your first decisions is how wide the pages should be. You want to
make the most of available screen space but avoid the edges of your site
disappearing into thin air at the sides of small screens. Horizontal
scrolling should be avoided if possible. It's awkward to do and users
hate it.

To make an informed decision, we need to know the demographics of screen
sizes. Which are the most popular?

Here are figures from TheCounter.com (http://www.thecounter.com/),
(repeated on echoecho.com http://www.echoecho.com/).

Popular Screen Sizes
53% 800x600
32% 1024x768
5% 640x480
3% 1280x1024
2% 1152x864

800 pixels wide is the most popular and many sites choose this option
(though 1024 is catching up fast). Just 5% of visitors still use 640
pixel screens - and they have to scroll horizontally to see 800 wide
pages.

A few sites choose 1024 pixels wide, but that can't be recommended
because it means the majority of users have to scroll horizontally. 640
pixels is a very safe option, yet isn't popular because it doesn't look
good on large screens.

Incidentally, designing for an 800 pixel screen means turning out pages
at 760 pixels wide to allow for screens that don't really produce as
many pixels as they say, plus scroll bars and other nonsense at the
sides. If you think your visitors use vertical toolbars, like the one
for Microsoft Office, you may decide to lose even more space at the
edges, but most designers assume this isn't an issue and just allow 40
pixels. That means 600 pixel pages for 640 wide screens, 760 for 800,
and 980 for 1024.

Another width issue is that if you make full use of the space then you
also need to take care that left margins created in browsers don't push
your page to the right and cause the pixels at the edge to be lost in
one browser or another. It's a common error, especially where composite
images take up the entire width of the page. For Internet Explorer, left
margins can be set to zero using leftmargin=0 in the  tag.
Netscape Navigator doesn't recognize this instruction and if you want to
remove the margin in this browser you need to also include marginwidth=0
in the  tag.

None of the fixed widths are entirely satisfactory, which is why many
big sites go for 100% width pages. These change size to fully fit the
user's screen. In terms of usability, it's definitely the best option.
The only problem is that it places limits on design, since any page
elements with a fixed width, including graphics, will cause the rest of
the page content to reflow on different screen sizes, so you can finish
up with conflicts or gaps. That's where the skill of the expert designer
comes in - making sure everything works on all screen sizes.

In the past, some sites, including those of major players, used
JavaScript to recognize the viewer's screen size and create an appropriate
page at a specific size. This is no longer popular because an increasing
number of visitors disable JavaScript to avoid the annoyance of pop-up
windows.

Highly sophisticated sites look at the environment variables sent by the
browser to the server and send appropriate pages back, even changing the
number of columns on the page for different screens. This is only
feasible on the most technically-advanced sites.

A trick often used on simpler sites is bundle the less important
elements into a column on one side, where they can be ignored by
visitors with small screens. On 760 pixel pages it's common to keep the
main text within a 600 pixel wide column, with blank space or promotions
in the remaining area.

To sum up, use 100% page width if possible. Otherwise the best balance
of usability and decent design (as seen on popular sites) currently
comes from 760 pixel width pages, with the main text in a 600 pixel wide
column.

/-------------------------------------------------------------------\