Website Design Tips - Screen Resolutions
*Note - This page was originally written in 2002 and contains some outdated information by current standards. Two updates have been added, one in 2006 and another in 2011 to address changes common in site designs that are different than what it discussed in the original part of the article.
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
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.
Update Fall 2011 -
The potential problems associated with varying screen sizes and screen resolutions continues to get worse. There are so many screen sizes and resolutions in play these days it is impossible to account for them all. So design trends have changed to try and combat such a common problem. Using percentage based site widths no longer works as well as it did, primarily due to the rise of tablets. Tablet screen are as small as 8 inches. Laptop screens can range from 10 to 15 to 17 inches. Desktop screens are common at 19 to 24 inches. That range is just too wide to make a percentage based site that appears the same on screens from 8 inches all the way 24 inches. Add to that a mix of up to 7 common screen resolutions and a site just can't be built to expand and contract appropriately.
A fixed width site that is center justified is the only way to make a site so that the content appears the same and retains all alignments across all screen sizes and resolutions. At this time and for the foreseeable future, a 1000 pixel site width that is center justified is becoming the norm. It will stay that way until screen resolutions exceeding 1800 pixels wide are common on screens smaller than 14 inches. That is unlikely to happen anytime within the next 10 years. When it does or if it ever does, we'll post another update here.