Email Marketing Tips & Tricks

Follow @tristarweb

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">
        <td><h3>The containing table</h3>
            <table width="120" cellspacing="2" cellpadding="2" align="left" border="1">
                    <td>A nested table</td>
            <table width="380" cellspacing="2" cellpadding="2" align="right" border="1">
                    <td>Another nested table</td>

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.

About robert

Hi my name is Rob Hills. At most times you will find me playing around with Magento and Wordpress. I am always looking to improve my web development knowledge – this ranges from PHP, Javascript, jQuery, XML etc. Other than web development – I produce Dance Music. My biggest achievement is getting my track played by Kutski on Radio 1..

3 Responses to Email Marketing Tips & Tricks

  1. Web Design West Midlands says:

    08:15 30/09/2011

    It can take a lot of time to test HTML emails across different browsers, email clients and devices! Thanks for these simple tips!

  2. Really nice post Rob!!!! Will help massively for the team and others out there!

  3. Tristar Author

    Thanks both for the comments – hope it helps.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please wrap all source code with [code][/code] tags.

Follow Tristar on Twitter