User Experience Engineering

Thursday, August 02, 2007


CSS Alignment and Color Matching Method

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.


March 2006   May 2006   July 2006   August 2006   January 2007   March 2007   April 2007   August 2007   March 2008   April 2008   August 2008   April 2010   May 2010   July 2010   September 2010   April 2011   November 2012   March 2013   December 2013  

This page is powered by Blogger. Isn't yours?