Working With Window Sizes The Low Tech Way

Background

Every few weeks another article or two crops up, talking about what a pain it is to create layouts that are "friendly" at one screen resolution when your normal operating environment is different, e.g. it's a good idea to target 800x600 window sizes, but you're running your station at 1280x1024.

Eighteen months ago, I came up with a creative workaround for this problem.

Assumptions you can make

One nice thing about display environments is that a pixel will always be a pixel (unless the user is a reasonably savvy Windows user who's changed their ppi equivalency and/or window geometry). A recent article in A List Apart talks about this convenience.

One of things that follows from this is that regardless of resolution—and excepting the situation posed in the previous paragraph—browser chrome will always have the same pixel dimensions.

Therefore, what matters most are the overall dimensions of the browser window.

This brings us to the desktop and—more specifically—the image that you intend to place on it.

Finally, the solution

The following assumes that you have access to Photoshop.

1. Take an image that you've already sampled and cropped to the size of your display. digitalblasphemy.com has always been my favorite place to look when I've got time to kill.
2. Use ascending layers, containing successively smaller rectangles, to represent each full-screen window size, and manipulate their opacity, color, or whatever else to achieve a result resembling this. How you arrange the squares is entirely your own affair; it just so happens that I like to center mine on the desktop. The important thing is to provide enough contrast so that you can see each outline without straining.

This done, you can put the new image on your desktop and then when it comes time to ask, "what does this design look like at resolution n?" all you have to do is drag inside the lines. You'll then have a painfully simple way to see how your design renders under various conditions, and not have to do too much guesswork.