Basic Guidelines for Designing & Coding HTML Email

By marie on February 4, 2011

I recently had to revisit old-school html 4 to design and code an HTML email.  I was forced to use the dreaded TABLE.  Eek!   I was reminded how limited you are with CSS options, so wanted to share some basic guidelines for coding and designing HTML email.

Design & Layout

Regarding the actual layout and design, this really depends on your client and content. However in most cases where you're sending a promo or newsletter, you want to keep the both the design and messaging simple, easy to scan and clean.   Some tips:

  • Keep your call-to-action simple, focused and extremely clear.
  • Use visual cues and clear concise copy to make your CTA engaging and screaming for a click.
  • In terms of content, come up with a clear heirarchy of priority. You want one main message to be the main focus, followed by blocks of secondary content.
  • Keep your use of graphics minimal. Many email clients now do not show you images as the default state, so your design must still read well without images.
  • Try to NEVER use text on your images if you can help it at all. There are things you can do with table cell background images, and HTML text on top. You'd hate to miss a click because the recipient didn't see the graphic that says "click here to save 50%".
  • Remember the email preview pane can still be ridiculously small. For example if someone is using Outlook on a small laptop, you could be getting just a slice in the preview window.  Design for most impact up top.
  • Users give you just seconds to decide if your email is worth reading. Their mouse is probably hovering on the delete button. So cut to the chase, make your main message pop!

Coding the Dreaded HTML Email

Here are a few general rules that will help you code an email that tests well in all clients.  It's a good idea to design for lowest common denominator with email, since people are all over the place with what they use.  Here's a great CSS compatibility chart, bookmark it, and strive to only use elements with support across all clients.

  1. Layout With Tables
    You have to use tables, it's the ugly truth.  No floating divs, or really divs of any kind.  Use primitave HTML 4 tables, to ensure your layout renders properly across all email clients.
     
  2. Define Inline CSS for Text -- Dont' define styles in the <head>
    Limit your use of CSS to font styles. And it gets worse... you must take on the tedius task of adding inline styles to elements.  Using pre-defined styles in the <head> of your document will not render properly across all clients, most notably Gmail, which is one of the most important in my opinion. Do not define styles in your document head or link to an external stylesheet like you would with code for a website.  Instead type styles the manual way, inline like this:

    <p style="font-family: Helvetica, Ariel;font-size: 13px;line-height:18px;padding:10px 0;margin:0;">your text</p>

    This includes links, body text, headline text, etc. Basically ALL text needs to be individually defined with inline CSS at a granular element level. 
     

  3. Nix the Background Images
    I actually also refrain from using any background images at all.  Instead it's a lot of slicing & dicing combined with bgcolor="#..."  to create a seamless, current design.  Think super old-school HTML 4 solutions, puzzle piece slices.
     
  4. Center Your Design in a Master Table
    Again, it's a compatibility thing.  And another old-school HTML 4 trick.  Have your top level parent table be 100% width, with a single table cell <td align="center">.  This will ensure all clients center your design in the preview pane.
     
  5. Test Test Test
    There are now a lot of players in the email testing space, some email marketing tools like Campaign Monitor have their own built into the tool, which is great.  But if you're looking for a super slick, easy to use tool (I've tried them all) , hands down I love Email on Acid. It's just plain awesome, and affordable. You must try it out.

For those of us who have been living & breathing CSS for years, this will be a shock to your system! 

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
By submitting this form, you accept the Mollom privacy policy.

Call the giant. Email the giant. Text us. Flag us down on the sidewalks of Seattle.

Marie will meet with you and kickstart you into the realm of gigantic creative possibilities.

Contact Marie directly by email or call 206-724-7724.