Email Marketing Tips & Tricks

Over the last few months I have been doing a lot of html email development. I encountered many problems during this time, especially how emails appeared in various email clients. Below I have detailed a few tips and tricks I use each time I code up and an email template.

The design & Layout

It is essential to keep all email designs basic. This mainly because Microsoft Outlook 2007 onwards has stopped using Internet Explorer to render HTML emails and instead use the horrific Microsoft Word rendering engine. The worst thing is, this is probably the most popular email client so you need to make sure your design will look right.

When designing, try avoid sidebars, background images and any crazy design ideas that would require complex table coding.

Use Nested Tables

When coding up an html email design, it is best to use nested tables. This is because it will be a lot easier to make layout changes if required. Below is an example of nested tables.

<table width="500" cellspacing="2" border="1">
    <tr>
        <td><h3>The containing table</h3>
            <table width="120" cellspacing="2" cellpadding="2" align="left" border="1">
                <tr>
                    <td>A nested table</td>
                </tr>
            </table>
            <table width="380" cellspacing="2" cellpadding="2" align="right" border="1">
                <tr>
                    <td>Another nested table</td>
                </tr>
            </table></td>
    </tr>
</table>

Reduce CSS where possible

Not all email clients support all areas of CSS. A great resource is the campaign monitor website. Here they have detailed the most common software packages and there ability to render CSS. I always try and use html attributes where possible – for example ‘bgcolor’ instead of CSS ‘background-color’ etc.

Use inline CSS not Internal

I see a lot of email templates coded up using internal CSS. This is all well and good for most email clients – however, I have noticed some versions of Outlook and Gmail, don’t read internal CSS. This mean any styles declared in the head section of the email will be ignored which may effect the design. So I would recommend using inline CSS – for example:

<p style="font-size:20px;">Test</p>

Don’t use background images

When I first coded up an email template I was puzzled why background images weren’t showing in Microsoft Outlook. This is because it doesn’t support CSS or HTML background images. So you need to embed all images in order for them to appear in all email clients.

Fix Hotmail and Gmail image issue

For some strange reason Hotmail and Gmail adds margins to all embedded images. To fix this, simply add some inline CSS to all images.

<img src="img.jpg" style="display:block;" alt="img" width="270" height="135" />

Stop the iphone resizing text

Sometimes mobile devices such as the iphone resizes text. To prevent this simply add the following CSS

p { -webkit-text-size-adjust: none; }

Hope these tips help you with email coding, please feel free to share any more.