I’m Chanpory, and this is my site on how to live and work better as a designer.

You should follow me on Twitter here.

For more, check out the archives.

A desktop background with screen guidesFor 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:
desktopwithguides-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:
Thank you everyone for the comments!

30 Comments

  • Brad Spry

    gravatarJun 23, 2006
    3:52 pm

    Another solution is a javascript bookmarklet that simply resizes your browser:

    http://www.nicholasroussos.com/2005/11/browser-hacks.html

  • mark

    gravatarJun 23, 2006
    4:17 pm

    Quite useful, but I would prefer the extensions you get in firefox to do this stuff.

  • Christopher

    gravatarJun 23, 2006
    5:16 pm

    Why wouldn’t you just use bookmarklets that resize your browser window instead of having distracting lines all over your desktop?

  • chanpory

    gravatarJun 23, 2006
    5:50 pm

    What I like about having actual guides instead of a bookmarklet, is being able to see the window in relation to a finite dimension. Most people generally size their browser windows to be smaller than their display size, so that they have room for other windows, docks, menubars/start bars. So by having guides in place, you can see how a typical window my look like. Might be an old trick, but still useful for me.

  • g

    gravatarJun 23, 2006
    6:31 pm

    Okay, too lazy to check, but what about the menu bar? When the OS places the BG image down, does it start from the top of the screen, or the bottom of the menu bar. And if it starts from the bottom of the menu bar, but you designed the file for the full rez, does it then compress the image a tad vertically?

    Like I said, too lazy to check now, but if you are going to make a blog entry for this, it might be nice if you were to include these calculations/information for your readers.

    Also a link to webstats for monitor sizes might be good to round out your info and good for newbies, but I guess that’s why the gods gave us Google…

  • Gonzalo Odiard

    gravatarJun 23, 2006
    6:56 pm

    Or use the “Web Developer Toolbar” extension for Firefox…

  • Sarah

    gravatarJun 23, 2006
    7:00 pm

    Alternatively you can just install Firefox’s Web Developer Extension (what web developer doesn’t use Firefox?).

    Or if you use Windows you can download sizer.

    Either of these options are probably more suitable as sometimes one pixel can make a difference – I wouldn’t want to be dragging windows around all day or mucking with my desktop settings.

  • egon

    gravatarJun 23, 2006
    7:20 pm

    genius

  • Arjun

    gravatarJun 23, 2006
    7:39 pm

    In Firefox, the web developer extension allows you to resize your browser to any size.

  • nah

    gravatarJun 23, 2006
    7:41 pm

    that’s pretty creative :P

  • Nathan Nutter

    gravatarJun 23, 2006
    8:00 pm

    Or you could just use javascript bookmarklets like the ones provided here to resize your browser window with no fuss. A lot less work, a lot more accurate. Makes sense to me.

  • SkinRock

    gravatarJun 23, 2006
    8:09 pm

    Or, since a web designer should be using Firefox mainly, you could use the handy Web Developer extension and use the resize tool built right in…and have Firefox show you how big the window is on various resolutions, instead of having lines in your desktop background.

  • Ben

    gravatarJun 23, 2006
    8:26 pm

    Whilst this technique is OS-agostic and a pretty good tip overall, if you have a PC, there is a much better way.

    Use a tiny program called ‘Sizer’ (http://www.brianapps.net/sizer.html)

    “Sizer is a freeware utility that allows you to resize any window to an exact, predefined size. This is extremely useful when designing web pages, as it allows you to see how the page will look when viewed at a smaller size.” (from it’s website)

    I use it to resize my browser window to all the different screen resolutions when web designing and frankly couldn’t live without it.

  • Thoeun

    gravatarJun 23, 2006
    8:53 pm

    What’s that thingy on your desktop below you mac HD icon?

  • Jimmy

    gravatarJun 23, 2006
    9:02 pm

    This wouldnt Account for the start menu would it? How many pixels does that take up? Maybe add another line within each box to account for that?

  • kevin

    gravatarJun 23, 2006
    9:44 pm

    awesome! What a great idea!

  • Ben

    gravatarJun 23, 2006
    10:39 pm

    Just use Sizer (if you are using a PC)

    http://www.brianapps.net/sizer.html

  • rolandog

    gravatarJun 24, 2006
    3:12 am

    Gonzalo Odiard is right on this one, the Firefox extension called ‘Web Developer Toolbar‘ does the trick, and even displays the size in the title (for the window an the viewport).

  • Jack

    gravatarJun 24, 2006
    3:49 am

    Thats actually a pretty good idea, but I have a small (1280 * 800) screen anyway… I guess that’d fit most major sizes though. Good idea

  • Steven

    gravatarJun 24, 2006
    9:47 am

    Clever idea, very nice :) What app is the thing on the right, though? I haven’t seen that one before, and it looks handy…

  • chanpory

    gravatarJun 24, 2006
    9:53 am

    Steven, thanks! That\’s not an app on right of the desktop screen. It\’s just some folders I\’ve set up to organize my files, according to the Getting Things Done method. Stay tuned for a longer tutorial.

  • Steven

    gravatarJun 24, 2006
    9:56 am

    (in reply to comment 15) On Windows computers, just make those sizing lines from the bottom left or bottom right corner, instead of the top left as he does.

    As to the bookmarklet-and-whatever-else vs this, this has uses REGARDLESS of what browser you use. It’s also useful for sizing other programs for display and comparison (ie, if you are a programmer).

  • Steven

    gravatarJun 24, 2006
    10:00 am

    Aah yeah, now I see it. I wish I had a bigger screen, lol (12-inch powerbook).

  • Ed

    gravatarJun 27, 2006
    12:34 am

    NIce idea, I love it. Email me when you develop a dashboard widget that you can turn this overlaying graphic over the top of the screen…that would be just perfect.

  • elsteramablog » Blog Archive » One desktop background to rule them all

    gravatarAug 1, 2006
    2:58 pm

    […] How to make a desktop background to help gauge how websites look on different monitor sizes. A downloadable template is provided.read more֚ |֚ digg story […]

  • Design Tip of the Day at Grande Talk

    gravatarSep 4, 2006
    9:49 am

    […] Here’s a handy dandy trick from the design duo at LifeClever.com. A lot of designers I know have used something similar but these dudes have made an easy to use template to create a desktop with all the standard monitor sizes marked out for you. This is especially helpful for those of us using 20 inch monitors when designing and need to know how big the average Joe’s monitor is (say for 1024×768). Get the PSD file here or read more about it on the designer’s site here. By the way, this dude seemed to make the top page of Digg with this little trick. […]

  • Caitlin

    gravatarDec 24, 2006
    4:57 pm

    You can also go to setmy.browsersize.com

  • Jose

    gravatarDec 11, 2007
    4:53 pm

    Thanks for the great informative post and if I may say, you have one pretty cool looking desktop background.

  • gamermediadownload

    gravatarApr 17, 2008
    9:36 pm

    What about firefox’s –œWeb Developer Toolbar– extension? Wouldn’t work?

  • Why Boring Desktops are Good

    gravatarMay 1, 2008
    6:00 am

    […] For extra geekerie, check out my previous desktop background hack. […]