Look very - very - closely at your screen. In fact, make your nose touch it and look right here. Yeah, right here. There you go. See those itty-bitty little dots? You may not be able to see them unless your eyes are really good, but most of the time, you can at least see a small trace of extremely tiny dots on your computer screen. These are called pixels. They’re the way a computer puts images on your screen.

The number of pixels used to make up all the images on your computer screen at one time is what’s called your screen resolution. The more pixels you have, the more screen space you have to fit stuff - computer programs, web pages, etc. - on your screen.

Quick Note…

The following screen shots and images are not real-size. They aren’t actually 1,024 pixels wide, for example. I’ve shrunk them down to display correctly on this website; the important thing to observe is the proportional differences of space available when an application is running.

An Example

For example, let’s say you’re running a screen resolution of 1024x768. That means there are 1,024 pixels from the left edge of your screen to the right, and 768 from the top edge to the bottom. Multiply those two numbers together, and you get a total of 786,432 pixels of screen space.

If you’re at 1024x768 and running a program that takes up 200 pixels wide by 300 pixels tall of screen space, that’s 60,000 pixels used out of your 786,432.

Now, contrast this with how the same screen of 200x300 pixels would look if your screen resolution were, say, 1920x1200:

Even though the size of the program is the same, there’s more space to go around overall. That’s why the blue rectangle looks smaller here - because the entire size of the “desktop” in this example has been drastically increased.

Practical Application

This is usually most applicable to website design because, in addition to never knowing what screen resolution somebody who visits a website is using (until they get there), user’s web browsers (programs such as Internet Explorer, Firefox, and so on) have a multitude of varying options that clutter the interface. For example, maybe one user is using the browser defaults at 1024x768, but another has their font size abnormally large. This makes the interface larger, at the cost of rendering space for actual web content, meaning scroll bars will be showing up more often.

Let’s say you are running a 1024x768 screen resolution vanilla (using UI defaults) and you visit a website with content that is slightly larger than your browser has room for. You’ll see scrollbars show up on your computer.

Screenshot: 1024x768 resolution, content can’t fit on screen due to browser constraints

If you look closely, you’ll see the Internet Explorer scrollbar on the right-hand side in that image. This is because the content on-screen there isn’t large enough to fit in the browser at that screen resolution. It needs to be BIGGER in order for the whole thing to show up.

So what happens if the screen resolution is increased?

Screenshot: 1920x1200 resolution, content easily fits within browser window because the browser itself has more room!

Ahh, much better. We can see all the web content and still have room for much more in this case.

Everybody has different screen sizes.

One size does not fit all in this world. The current “standard” (if you could really call it that) for web design is to design sites for 1024x768 resolution. This is because, in theory, the majority of web users are surfing on a 1024x768 (or relatively close - usually higher) screen resolution. According to this press release by OneStat, over 55% of web users are on a 1024x768 resolution, and this is why we design for this standard, because the next step below it (800x600) is in use by only 8.18% of web users worldwide, on average.

Years ago, the standard used to be to design for 800x600, but due to the cheapening cost of technology, the constant upgrade cycle, and the fact that these two things work together to get more people buying better computers that can support higher resolutions, fewer and fewer people are using such low screen resolutions.

Personally, I run dual monitors at 1920x1200 each, but I’m far from normal when it comes to this! I’ve seen some graphic designers run resolutions of 2560x1600 and higher before (example: Apple Cinema Display) - and let me tell you, it’s a thing of beauty.

So why is this important?

Any time I (or anyone, for that matter) have to design any content for the web, or any computer software, I have to know how much room end users have to work with. Since everybody is using different resolutions, it’s a pretty difficult thing to make it work perfectly on all resolutions. So you have to just take your best guess based on the stats, and roll with it.

If a designer thinks his or her audience fits the general statistics and creates their items for a 1024x768 resolution, people on 800x600 screen resolutions may not be able to view it without using their scroll bars. This could present a problem if that 800x600 crowd is a larger portion of his or her audience than the people running 1024x768 or higher. And, due to the nature of some content, s/he may not be able to go back and simply “shrink it down” - to do it right, it may have to be completely rebuilt from scratch. That’s why planning on a web project is so important.

How do I know what my screen resolution is?

There are some easy ways to check your screen resolution on various operating systems.

OS X

Apple Menu -> System Preferences -> Display Tab Your current resolution size will be highlighted. Just select another size here to change your resolution.

Windows XP

Right-click some empty space (any area not with an icon) on your Desktop, then select “Properties”.

Next, select the “Settings” tab and look at the select menu on this screen:

Windows Vista

I don’t use Vista yet, so I can’t speak to this exactly, but I’m pretty sure the method for accessing the display properties will be the exact same in Vista as it is for XP. It was that way all the way back in Windows 95, and if there’s one thing Microsoft isn’t, it’s “creative”. I doubt it’s moved much, if at all. The screens may look a bit different, but it’s basically the same thing.

Conclusion

Your screen resolution plays a big part in how things appear on your computer. Web pages, software, everything: they all require at least a minimum of visual space to put stuff in. Asking a designer or developer to “just make it work” is a futile approach because the technology just doesn’t allow things to “just work”; designing for various differing resolutions is a painstaking feat, and often a pointless one. In most cases, designing for a default-UI, 1024x768 resolution will allow you to capture a majority target segment without any need to re-adjust, and those who aren’t part of the normal crowd will usually be able to adapt quite easily.