Email marketing design tips

Written by Joe on Tuesday, July 13, 2010

Returning $40 per $1 spent, email marketing returns the most on your investment

Email marketing is one of the best methods of marketing, if it's done right. With all of the different email clients and email service providers, designing emails that look good in them all can become difficult. This article will give you some tips on designing and coding html emails that will render best in most email clients.

Use tables for layouts

That's right, unlike websites where you want to use a css layout, with html emails you want to use tables for your layout. Email clients don't render css very well, so using nested tables is the best way to code html emails.

Setting the width of the table however won't work. Some email clients won't render the table width correctly, so you set the width of your <td> and the table will be rendered accordingly.

For background colors, use a container table

Background css tags in the <body> section will be ignored. To set the background color of html emails, you wrap the entire email in a table with the width set to 100%. Then set the background color in the <td> containing your html email content. You can use the same code to use a background image, however always supply a fallback background color.

Always use inline CSS

Some email clients will strip css from the <head> or <body> section of your html email code so inline css is the only solution. You can use a service, such Premailer, to move all of your css inline after coding, so you can get the most out of css in your emails.

Links

Some email clients will overwrite your link colors to their defaults. The best way to get around this is to set the link color within the <a> tag, and wrap the link text in a <span> and set the color. So your link code will end up looking like:

Images in HTML emails

When using images in html emails, you have to keep in mind that most email clients won't load the images by default. So using images for important text in your email would be a bad idea. Try to keep designs simple and only use images to enhance the content of the email

This is just a short list of tips for designing html emails. Check back for more email marketing design tips.