Who needs resolutions?

As we were discussing what can fit on the screen, a question came up about the meaning of screen resolution.  Let me attempt a quick overview here.

The basic graphic unit for computers is the pixel (short for picture element).  What we see displayed on a monitor is composed of a grid of pixels.  The screen resolution is the dimensions of this grid.  For early computer monitors, a typical resolution was 640 x 480 — in other words, the grid was 640 pixels wide by 480 pixels high.  Over time, resolutions gradually increased, with typical values 800 x 600, 1024 x 768, 1280 x 1024, etc.  Going to a higher resolution on a screen that is the same size means that each pixel is smaller, so there are more of them;  thus, we can see more things (more of a document, more of a web page, more icons on the desktop, etc.), but everything is smaller.

You might have noticed that all the screen resolutions I just mentioned are in a 4:3 ratio.  This is called the aspect ratio.  The 4:3 ratio was pretty much standard for computer monitors (and for digital cameras) until just a few years ago.  But today, many of the monitors are wide-screen, so the aspect ratio is 15:9 or 16:9.

Most of our displays these days are digital, using technologies such as LCD (liquid crystal display). Any given display has a “native” resolution, which reflects the actual size of its pixels, and provides the best quality image. But depending on the specific display and graphics card, you can generally select a lower resolution — meaning that that display simulates the pixels being larger, resulting in less screen “real estate” but what is there is larger.

One of the complications for a web designer is that you have no way of knowing what resolutions your users are using.  And it’s even more complex than that, since the available screen real estate for a web page depends on which browser is being used, what toolbars with what size icons are being used, and how the browser window has been sized.

To bore you with some examples, I’m running a dual-monitor setup here. My left monitor is  a fairly new wide-screen display running at 1920 x 1080, and the older right monitor is at 1280 x 1024.  My Opera window is currently sized to 1350 x 870, although the viewable area for a web page is only 1290 x 700.  The viewable area for Firefox is 980 x 630.  (But I frequently fiddle with the sizes of these Windows as I’m working.)  That’s why I sometimes notice spacing issues with your assignments that you didn’t notice!

For lots more detail on the subject, look at the Wikipedia article on screen resolution. And if you’re unsure of your current resolution, and don’t want to go to the Windows control panel, you can find out by visiting whatismyscreenresolution.com.