Chanpory Rith
Jun 22, 2006
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:
- 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
- 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.
- Place an image of M&M’s, Stephen Colbert, or your favorite desktop background as a layer below all the dimensions and labels.
- Export as a flattened image in a format that’s friendly with your operating system, and set it as your desktop background.
- Now when testing websites, just resize the browser window to fit the desired screen dimension.
desktopwithguides-psd.zipUse 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:
- 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. ;-)
- 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.
- 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:
30 Comments
Brad Spry
3:52 pm
Another solution is a javascript bookmarklet that simply resizes your browser:
http://www.nicholasroussos.com/2005/11/browser-hacks.html
mark
4:17 pm
Quite useful, but I would prefer the extensions you get in firefox to do this stuff.
Christopher
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
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
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
6:56 pm
Or use the “Web Developer Toolbar” extension for Firefox…
Sarah
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
7:20 pm
genius
Arjun
7:39 pm
In Firefox, the web developer extension allows you to resize your browser to any size.
nah
7:41 pm
that’s pretty creative :P
Nathan Nutter
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
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
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
8:53 pm
What’s that thingy on your desktop below you mac HD icon?
Jimmy
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
9:44 pm
awesome! What a great idea!
Ben
10:39 pm
Just use Sizer (if you are using a PC)
http://www.brianapps.net/sizer.html
rolandog
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
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
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
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
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
10:00 am
Aah yeah, now I see it. I wish I had a bigger screen, lol (12-inch powerbook).
Ed
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
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
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
4:57 pm
You can also go to setmy.browsersize.com
Jose
4:53 pm
Thanks for the great informative post and if I may say, you have one pretty cool looking desktop background.
gamermediadownload
9:36 pm
What about firefox’s –œWeb Developer Toolbar– extension? Wouldn’t work?
Why Boring Desktops are Good
6:00 am
[...] For extra geekerie, check out my previous desktop background hack. [...]