Website Design Tips - Screen Resolutions

As promised, here we will discuss the topic of screen resolution or page width. One of the most frequent mistakes we see people make is they build their site in such a way that it looks great on their own computer, but terrible on just about any other. How can this happen you ask? It happens because of the various screen resolution or display settings available on every computer.

A few short years ago, monitors were so small that the best screen resolution setting on them was 640x480. Then as average monitor sizes increased the best resolution moved up to 800x600 and eventually the standard will move up again to 1024x768 or higher. The problem that occurs because of these different display settings is that a page created on a computer set to 1024x768 or higher will only be seen the same way on other computers set to the same resolution. Because we are at a time in the evolution of computers where the standard is currently moving between two widely used settings this issue occurs a lot. Look at the images below for an example.

The good news is that as long as you create your website with your computer set to the 800 x 600 resolution it will appear fine on any computer set to that same resolution or higher, which is 95% of all the computers connected to the Internet.

Update - Spring '06
The above article was originally written way back in 2002. Unfortunately, the potential problems that can arise with varying screen resolutions hasn't gone away or gotten any better. In late 2004, many computer manufacturers started offering wide screen computers presumably to accommodate movie watchers. Now there are as many as 7 or 8 different screen resolutions commonly in use instead of the 3 or 4 that were common a few years ago.

Because of that, we now recommend our customers use a percentage option when setting their site page width setting. The percentage options allow the site to automatically expand or contract to fill the computer screen up to a specific percentage of the screen width. For example, the 90% setting will fill 90% of the screen width regardless of the resolution being used by the computer.

Using percentages as the site width setting does make it easier for your site to look its best on as many different computers as possible. However, there is still the potential for problems. You should still check your site in various screen resolutions after each time you add new pages or content to make sure nothing is overriding the percentage option you set. For example, if you put a very large image on a page that prevents the page from contracting for smaller resolutions then visitor's browser won't be able to accommodate the percentage setting the site is telling it to use. Images and other graphics cannot automatically resize themselves on the fly based on the visitor's computer resolution. Your site page boundaries can expand and contract based on the percentage width setting, but only if the images and other graphical content give it enough room do to so.