Determining Resolution

Deciding the resolution of your web design is another important issue that you need to address. Having waited long enough for a page to download, you don't want to have to scroll vertically and horizontally to view the whole page. As an analogy, if you make a painting that is five foot square, but only view it through a three foot square window, you see the problem immediately. You would lose all four edges of the painting unless you scrolled around to see it.

This is what it looks like when your content is wider than your viewing window. In the picture below, notice the horizontal scroll bar (located directly underneath the viewing window) is present. This occurs when your page is wider than your viewing window. To prevent this annoying problem from occurring you need to ensure that your page is narrower than your viewers display (i.e. 595 pixels wide when viewed at 640 x 480 resolution.

Widescreen example

If your background image is only 800 pixels wide, you should be aware that when viewed at higher resolutions (i.e. 1024 X 768) a tiling effect occurs which will impact your sites appearance. In these pictures the only thing difference is the resolution of the viewers monitor, yet the visual difference is very noticeable.

An 800 pixel background viewed at 800X600

View: 800 X 600 resolution

An 800 pixel background viewed at 1024X768

View: 1024 X 768 resolution

Resolution links from Yale Style Manual: