One desktop background to rule them all

For many designers, size matters when it comes to monitor displays. I currently have a 20-inch Apple LCD display at work, and the larger screen real estate is great for opening multiple palettes and windows. The higher resolution and size, however, isn’t so great for gauging how a site might look on a standard monitor. Instead of switching back and forth between resolutions in the system preferences, I use a trick I learned when I was a young handsome intern at Move Design:

1. First, come up with a list of standard display sizes your sites will likely be seen on. They may include both traditional and widescreen ratios:
   • 800 x 600
   • 1024 x 768
   • 1280 x 800
   • 1450 x 900
   • 1680 x 1050
2. Next, open up Photoshop or your favorite image editing program, and draw boxes with a 1-pixel stroke for each display size. Label each box with their respective dimensions. If you want to be fancy, lower the opacity of the lines and labels to make them translucent.
3. Place an image of M&M’s, Stephen Colbert, or your favorite desktop background as a layer below all the dimensions and labels.
4. Export as a flattened image in a format that’s friendly with your operating system, and set it as your desktop background.
5. Now when testing websites, just resize the browser window to fit the desired screen dimension.

If you’re lazy like me, you’ll probably want a template instead of making one from scratch. You can download the one I’ve made in Photoshop here:

desktop_with_guides-psd.zip

Use the template as a starting point, and modify it as you please. Now, you too, can look like a professional web designer!

UPDATE (June 23, 2006): After getting on the front page of digg.com, the server went down, so I didn’t get a chance to highlight some of the additional points our kind readers have sent in and some additional information I thought might be useful:

1. Many readers suggest using javascript bookmarklets or the built-in functionality of browser extensions in Firefox to resize windows according to desired screen dimensions. I like this too, but I also like having guides on the desktop because they help me see the relationship between a window and the screen’s edge. Many people make their browser windows smaller than their monitor display size to make room for other windows and interface elements such as start bars and docks, so having guides is useful for testing arbitrary window sizes. Plus, I just think it looks cool, but I’m a nerd. ;-)
2. On a Mac, desktop backgrounds start from the top of the screen, and not the bottom of the menubar, which means the guides on the desktop background I showed takes into account the menubar. If you’re on a PC, you might want to draw another set of lines representing the Windows Start Bar.
3. Here are some links to browser statistics. Some of the information doesn’t take into account the latest browsers, but they are a useful reference:
• Browser News: Resolution Trends
• Real World Browser Stats
• Sizing Up the Browsers
• Browser Resolution Trends

Thank you everyone for the comments!