Monday, June 25, 2007

Building Websites - Screen Resolution

Why does my site look like X when I view it on one computer, and like Y when I view it on another computer?

The answer is likely to be screen resolution.


Many times when I get the opportunity to sit down with a client and discuss their website, screen resolution is discussed more often than not. Screen resolution is so frequently discussed in meetings that it's time for me to do a write up, so that I can use it as a reference later. I figured that if I'm going to write it up, that I might as well put it on the blog so that perhaps someone else could benefit from it as well.


What is Screen Resolution?

Screen resolution is usually a user controlled setting that controls how may pixels can be represented on a screen at any given time. The most common misconception I see with screen resolution is that it has something to do with the physical size of the monitor. Let me be clear, monitor size has nothing to do with the screen resolution.

Why is Screen Resolution an issue?

Screen Resolution affects how much area a website will fill on a given screen. If you are using a low resolution (e.g. 800 x 600), you will only see about 800 pixels horizontally on your screen. Many websites are built to fit horizontally into an 800 x 600 resolution screen. If you are using a resolution higher than 800 x 600, and the site is built to horizontally fit into an 800 x 600 resolution screen, there will be extra space on either or both sides of the website. In some cases, a site has been constructed to fill the screen regardless of the screen resolution. This is the ultimate goal with any site design, however, not every design can be made to function this way.

For example, obchinc.com, is made to fill the screen regardless of resolution, in contrast, fredlemire.com, is built to fit in the browser window of an 800 x 600 pixel resolution display.

There are many ways to deal with the screen resolution issue. Many technology related sites has elected to build their sites to fill up the screen real estate on a much larger display. This is a problem if you are using a display with lower resolution. If your display is using a lower resolution than the one the site was intended for, you will see horizontal scroll bar appear on the screen, so that you will be able to see the whole site.








1 comment:

Unknown said...

There's a question I'd love to find an answer to. Any idea what the percentage is of people's monitors are still set at 800 pixels? I would imagine that the percentage is quite small and, I believe, most computers come with a default setting of 1024 (or somewhere in that range). I would love to find a 'stat' on this. Do you know of a good site that posts up to date info on this kind of stuff?... Or do you have any insights yourself?