Designing web sites and interactive projects requires a lot of precision measuring. Most authoring programs provide the tools you need for this, but the tools are unavailable when you're testing the final result in a browser or in a running Flash video. If you've never designed a site that looked different in a browser than it did in Dreamweaver or GoLive, you haven't designed enough sites.

I used to rely on a freeware utility called Free Ruler (OS X-only) to help me measure things "live":
http://www.pascal.com/software/freeruler/

Free Ruler puts a floating, translucent ruler, with tick marks in screen pixels, above everything else on your computer, and is simple to customize to what you want to measure. In fact I think I may have written about it in a previous DesignGeek issue.

Lately, though, I've become enamored with a replacement utility called X-Scope (OS X-only again, sorry) from IconFactory. It's not free (it's about $30 to register), but putting rulers on the screen is just one out of its many features. Its Swiss army knife-like suite of functions are always available via hot keys or a strip of icons in the OS X menu bar. My favorites include a Loupe tool, an interactive Screen mode that overlays the dimensions of browsers at different resolutions (including the iPhone), and customizable gridlines to make sure everything lines up across the screen.

The big feature with the newly-released version 2 of X-Scope is "Dimensions." Turn on this mode and your cursor sprouts X and Y grid lines with a constantly updating pixel readout of each line's length. As you move the cursor, Dimensions adjusts the lines to show what it's measuring, detecting blocks of content and measuring the space in between them, such as button to button, paragraph to margin, and so on. The pixel dimensions can be copied to the clipboard with a keystroke.

X-Scope Dimensions Video
Watch the video to see X-Scope's Dimensions mode in action:
http://iconfactory.com/graphics/software/xscope/xScope.mov

X-Scope Info/Download
There's a free tryour available, too:
http://iconfactory.com/software/xscope

Back to Potpourri Issue: What Does She Mean by Potpourri Issue?