Sizing Websites
Common Resolutions - Designing for Multiple Resolutions
Three Main Resolutions - Comparing These Values
Common Resolutions
The majority of viewers on the Web today are using the Microsoft Windows operating system in displays ranging from 1024x768 (usually 17" LCD monitors) to 1280x1024 (usually 19" monitors) although there are still some people running 800x600 or less (usually older 15" LCD or CRT monitors).
The first number is the width of the screen and the second number is the height, so 800x600 is a display 800 pixels wide and 600 pixels high.
There has been a pivotal shift in the size of displays in the last couple of years. Because of dropping prices, most users have moved to flat panel (LCD) monitors and are able to see wider content without scrolling than with traditional tube (CRT) monitors because they support higher resolutions at a more reasonable physical size and price.
Other Practical Considerations
Of course, there are other practical considerations in determining an optimum display width for your site:
- Netbooks, the laptop's tiny siblings, have smaller screens often running 800x600.
- Not everyone has their browser set at full screen — windowed browsers are more susceptible to problems with large resolutions.
- There will be users with much older equipment running much lower resolutions.
Not all visitors view sites full-screen, particularly those that run multiple applications at one time or use their larger monitors to more easily switch between various windows by keeping them all at least partly visible at all times. Also, developers tended to have better equipment than their viewers typically employ.
Be sure to leave room for the vertical scroll bar. A page with a fixed size of 1024 pixels wide will require a vertical scroll bar even at full screen at a display resolution of 1024x768 once the height of the content exceeds 768 pixels. At that point, a horizontal scroll bar will appear to compensate for the new vertical scroll bar.
Pixels and Monitor Resolutions
Pixels are a unit of measurement that applies primarily to the screen, where each pixel representing one dot of colour on the monitor. Obviously, the larger the area a set number of pixels is spread to, the blurrier it will appear to the viewer, so people tend to use higher resolutions (larger numbers of pixels) as the size of the monitor increases.
The reason for the range is that the video cards have become more powerful and larger monitors have become less expensive, enabling larger display areas. At one time a monitor's resolution was "fixed" so that it would only work at a single resolution. Today, most monitors are capable of a wide range of resolutions and the viewer's settings often depends upon preference and the capability of their video card.
Higher resolutions are uncommon because Windows doesn't yet provide an easy way to alter the size of displayed text so people tend to choose resolutions in which they can see the largest screen real estate and still read the text in dialogue boxes and their programs.
Designing for Multiple Resolutions
Obviously people are going to see your Web pages on various different sizes of screens (and in varying colour depths). Sites designed with frames are most susceptible to this challenge. It is not unusual to see a site designed for a larger screen become unnavigable when viewed at a lesser resolution.
There are several ways you can resolve this issue.
- Many sites use Javascript or other means to determine the size of the viewer's screen and adjust their content accordingly. This will not work if Javascript is not enabled.
- You can offer various options at the entry point (home page) but this doesn't help someone that lands in the middle of your site from an outside link or as a result of a search.
- A very common approach is to use tables to lay out the content of a site. The content is stretched to the width of the browser window and adjusts accordingly.
- Newer browsers allow for multiple Cascading Style Sheets to be loaded for a single page. This can allow for a simple menu system where users can select a better viewing resolution according to their needs. This requires more skill and knowledge from some viewers than they currently possess.
Each of these solutions requires you to keep in mind how your content is laid out on the page so that it doesn't wrap onto another line inappropriately. You need to check these solutions out on several browsers, particularly Firefox and Internet Explorer. There is nothing more annoying than trying to read text that overlays other text or content that disappears altogether.
Keep in mind that there will always be users that have special needs such as colour perception problems and reliance on Web readers for the blind. You must also understand that most Web designs lack the absolute control that people take for granted in the print world.
This is something that is sometimes very difficult to grasp for those that have never viewed a site in multiple browsers, operating systems and monitor sizes. Many have never viewed the Web with anything but Internet Explorer opening in the Windows default start page. If you show them computer with a different default browser opening on a different start page they'll ask, "Where is the Internet?"
Three Main Resolutions
The following are the three main resolutions that you will need to worry about for the time-being.
640 Pixels
640x480 is becoming quite rare and the number of people running this resolution is decreasing.
Exceptions would include people running very old computers and those with viewing disabilities where they have increased the size of the screen to make it easier for them to see the content.
800 Pixels
An assumed resolution of 800x600 is a good standard for today's Websites. Most people are capable of viewing at this resolution or higher, and those running higher resolutions are more likely to operate their Web browser "windowed" so that it is not the full width of their screen.
Those running 640x480 may have to scroll for some of the content, but most will be visible.
1024 Pixels
There are more and more computers running at resolutions of 1024x768 or better. The main problem with designing for this resolution is that you will be more likely to create a problem for those running smaller resolutions.
Comparing These Values
I've created a page showing the relative 640-, 800- and 1024-pixels widths illustrated with red images for each of those widths. The navigation bar has been moved to the right and all padding outside of this new page to make the comparison easier.
There is another important lesson illustrated on this page. There is some text set at 1024 pixels wide with instructions to set your browser window so that it is as wide as the 800 pixel line above it. This will demonstrate what you are asking users to deal with if you choose a resolution that is too high for their display settings.
Other Methods
While you can certainly manually resize your browser to 800 pixels wide using an image like the ones I've used, or reset your computer's resolution to 800x600, there is an easier way.
The Web Developer Extension for Firefox, includes a "resize" option that will automatically set the browser window to 800x600 or tell you what width your browser is currently set at. You can add various other widths to test your pages.
www.RussHarvey.bc.ca/resources/pixels.html
Updated: August 24, 2009
