User Experience Engineering

I often get a Web page mockup from a graphic designer, and the task of implementing the design in CSS. I use this trick to achieve precise alignment and coloring, without spending much time measuring:

1. Save the mockup as a PNG.
2. On Chris Pederick's Web Developer Toolbar, Click CSS: Edit CSS.
3. Edit the CSS in the toolbar to make the PNG your body background. The real document elements now render over the background, which highlights alignment and color mismatches.
4. Continue editing CSS until the colors match.
5. Then edit the CSS until page elements align, overlapping the background image exactly.
6. Test by removing the mockup background image statement in the CSS. The page should look no different as you toggle the mockup on and off.
7. Click the Save button in the toolbar's Edit CSS view.
8. Save the CSS changes locally, and then promote the finished CSS to the server.

And of course, follow up with browser testing.