Dave Mello

Dave Mello's Web Development Blog

Avoid design application issues with an overlay

April 9, 2009 at 2:03 pm by Dave

When a finalized design concept is being applied to a new site, it is of course important to make sure that crucial design details are not lost in the process. To a large degree, this can simply be facilitated using a methodical approach to the application.

I have found, however, that often when I think a site is "perfect" there are actually a lot of elements that don't quite line up with what the designer had in mind.

One method I've used to counter this is to add the original design source an an overlayed layer to the final site, one that can be toggled on and off. This allows me to verify that things like element placement, margins and padding, and even line height and font size are faithfully being reproduced.

Here's the simple method I use to add an overlay to a site:

if ($t)
{
    print '<div style="position:absolute;top:0px;left:0px;zoom:1;filter:alpha(opacity=50);opacity:.5"><img src="/images/layout.jpg"></div>';
}

with layout.jpg being a flattened version of the provided psd. With this, I can toggle the overlay on or off using an ?t=1 url parm, as I quickly make tweaks and adjustments. If I wanted to test multiple layouts, I could extend this by passing t=1, t=2, etc, and then adding

if ($t)
{
    switch($t)
    {
        case 1:
        $layout_file = '/images/layout1.jpg';
        break;

        case 2:
        $layout_file = '/images/layout2.jpg';
        break;
    }

    if ($layout_file)
    {
        print '<div style="position:absolute;top:0px;left:0px;zoom:1;filter:alpha(opacity=50);opacity:.5"><img src="' . $layout_file . '"></div>';
    }
}

For example, here's a screen-grab of a recent site, made after the design was applied but before I started adjustments:

And here's the site with the overlay applied:

Not bad - the header looks pretty good, but clearly all of the main content elements are misaligned by at least 10 pixels or so. Using the overlay as my guide, I was able to fine-tune things into a much more acceptable end result:

Of course, difference in copy and browser typeface rendering will cause inconsistencies in some text layout issues, but overall I can confirm that everything is placed where it is supposed to be.

A couple of detail shots, showing some of the things I would be looking for:

Granted, this is a pretty simple approach to the concept, but it has worked well for me in the past. There are other approaches, such as the Firefox add-on PixelPerfect, that do the same thing with more control. What is lost, however, is the ability to quickly review the site and layout in all relevant browsers, which is a crucial part of a project's QA.

What are some other methods you use to accurately apply design to a website?