HTML Email Expert Guide

History Firstly it is important to know why HTML emails are poorly supported and more importantly who we should point a finger at! So if you don't already know HTML emails MUST be built using tables for full email client support and CSS MUST be in-line unless using internal CSS for media queries, and here is why.

Outlook! That is why, in short.
Outlook had been around for ages before any other email client existed, it was fantastic for its time, it was simple, reliable, efficient and had everything people needed. For many years it was chosen as the most popular email client to be used until others came on the scene like Lotus notes, Thunderbird, Kmail. Competition, Outlook had to keep up with all of its rivals to stay at the top. These other email clients started expanding, supporting better things like actual decent CSS and HTML. Outlook still on the top at this point didn't like what was happening, loosing its users, so Billy decided to do something very clever and literally did nothing with his email client to help it's support. This meant that every developer had to build the email to support Outlook as it was the number one email client to use! No-one wants unhappy clients now do they. This is how Outlook stayed on top and why we to this day have to still write in tables and rubbish CSS, Microsoft hit again.

Here is a detailed document that I have written over the years of my experience for full support across all email clients. If you follow these points by the thread of your life then you'll make an email that will have full support.




Correct HTML file setup

  • Don’t use a meta tag
  • Ensure Page title is correct (it will show up in the Web-Version!)
  • Use this as your doctype
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML Formatting

Don’t use the following in your code:

  • <p>, <div>,<dl>, <dd>, <dt>, <h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<ul>, <ol>, <li>, <center>, <form>, <hr>, <input>,<br />
  • Floats, z-index, positioning(absolute, relative), padding, margin
  • Don’t use images in .png format
  • Don’t use background images
  • Don’t use table cells spanning rows or columns – use a nested table instead
  • Don’t use CSS in the header or imported from a separate sheet
  • Don’t use Classes or ID’s unless you are building a responsive HTML email then use Classes
  • Don’t use nbsp; - with the only exception for copy that cannot be split up, ie
    hello&nbsp;there&nbsp;buddy

Do use in your code

  • Tables for layout
  • Use Character entities for special characters, ie
    Instead of £ use &pound;
    Instead of “ use &quot;
  • Inline css, contained within a span tag, ie...
    <span style=”color: #ccc;”>Example</span>
    So this means you don’t need to put styling for text into any other elements
  • Use a 1x1px transparent gif for all your spacing, using actual dimensions where appropriate
  • Declare CSS in a clear and consistent way that promotes inheritance, ie
    Style=”font-family: Arial, Helvetica, San-Serif;”
  • Use alt tags and close image tags

Custom code

When pulling in CSV data to an email via Campaign Monitor, Mailchimp, etc, it’s a good idea to check the following:

  • Check that you’ve added the unsubscribe and web-version links
  • Ensure all customised data is surrounded by a span tag with styling
  • Ensure all links are coded as below – this means that you can consistently use the same code for secure and non-secure pages, which is really useful for data capture forms.
    <a href=”[example]”>Example Link </a>
  • The only exception to the above is for a link where you want the data to also appear inside the anchor tag
    <a href=”http://[example]”>[example]</a>

Final Checks

  • Make sure your code 100% validates, if it doesn’t – fix it!
  • Fully test your code in Litmus
  • Create a text-only version, set to a fixed width

Responsive Design

  • Make all spacing gif's that are in a row 100% width to insure that you do not have to add a class to change the width.
  • Media queries classes must be added like so img[class="auto"]
  • When hiding HTML use both display: none!important; and visability: hidden !important;
  • Add !important on every selector inside your media queries.

Tips

  • For anchored images to sit flush, use the following css code in your image tags:
    style=”display:block;”
  • Tables – always declare the following in a table tag:
    <table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="600">
  • Always declare background colours for tables (even those nested) – never assume they will inherit anything! Also write inline css as a backup.
  • Declare widths for all table cells (and height if fixed/known)
  • Instead of <ul> or <ol>, use a table instead to control the layout and styling more effectively.
  • Always declare a full set of styling attributes for text, ie
    Font-family, color, font-size, line-height, text-align
  • add a class in the header called ".link a { color: black; text-decoration: none; }" and add it to every table with text inside to ensure in apple devices you do not see a blue anchor link.

And that is it, if you keep to these very strict rule you will be a pro at building emails. I really hope this helped some people.