PSD To HTML Slicing Checklist For Landing Pages

Author: Gab Goldenberg

If you’re designing a custom landing page, chances are that you’re using a PSD to HTML chop shop, like my friends at PSD to HTML/CSS. The problem is that things you may obviously require won’t be obvious to the coders.

Here’s a checklist of things to specify in your PSD to html landing page order in your order to minimize revisions and save time.

1) Editable text.

If you have a button on the page, or fancy headers, you’ll probably want to test them.

If you don’t specify to the coders that the text must be editable , you may just get an image of text, instead of a button image with editable text positioned over it (the positioning is done using CSS). That will make testing harder, as you’ll need to get the graphic artist to design new buttons, headers etc for each test.

2) CSS that enables flexible width page and buttons.

The corollary to having editable text is that you’ll need the page width to be flexible, and likewise your button width. Otherwise you’ll find that the positioning of the page elements will overlap and look aweful.

3) Flexible borders on images.

You don’t want your hero shot to get overlapped by a border, so ensure the border will adjust to the image size. Otherwise you’ll constantly need to crop, and get things pixel perfect.

4) Form submissions lead from the landing page to a thankyou page.

Most conversion tracking requires placing javascript code on a thankyou page. If your form executes with AJAX, your conversion tracking becomes a lot more complex for nothing.

5) Easy to comment out sections of the html.

You won’t know whether an element’s presence helps or distracts until you test it. For that reason, you want arguably distracting elements to be coded in such a way that you can easily comment them out. The end result should still look good, and not have overlapping or ‘broken-looking’ elements.

6) The logo should not be wrapped in html tags reading “h1″.

This seems obvious, but sometimes things get coded this way. If you ever want to rank the page, or use the template for another page you want to rank, this is something to check over.

7) Test the landing page ASAP.

Most providers provide a time-specific support guarantee, like 30 days free support. If you buy a design but then delay launching the campaign for too long, you may find bugs after the guarantee period.

At that point, you’re at the mercy of the provider whether or not they’ll fix the bug.

Partly, it’s an accounting thing – they need to know when the revenue is fully “earned” for accrual accounting purposes.

Partly it’s also a memory thing. When the code is recent, the coder can edit and proofread more easily than if he has to re-read the whole thing from scratch.

So once you get your code, put in your various texts and images etc and see how it performs.

Pay attention especially to longer vs shorter text, and functionality of buttons and forms. How are errors handled? Can users correct the mistake easily? Is the error message clear and not insulting ([You entered incorrect information [you idiot]” vs “We had trouble understanding your phone # because…”)?

If you liked this, add my rss feed to your reader or get my latest posts by email.

Tags:

Sidebar Story

Comments

  1. Thanks for the shout-out Gab! Really poignant tips for seo-conscious psd to html clients. We're going to suggest this going forward...

    Comment by Eric - January 31, 2011 @ 2:15am
  2. These are good "should have thought of that" ideas. I'll have to try out your friends at PSD/HTML for wordpress designs.

    Comment by UD - February 21, 2011 @ 3:49pm
  3. Good tips. It's a common mistake to use images instead of text. Of course some designers prefer using a professional service like mine:)

    Comment by Sara K - September 20, 2011 @ 2:51am
  4. you said "The logo should not be wrapped in html tags reading 'h1'". What is the matter?

    Comment by Threelands - April 4, 2012 @ 4:46am

Leave a Reply