Cross Client Email Templates – Practices and Resource

cross-email-template

If you are a web developer you must have had a chance to write Email Templates which should work across all major email clients consistently. I too have fought that battle many times and I know it’s hard and frustrating to write and check Cross Client Email Templates.

This article is an attempt to help avoid the frustration one has to go through when designing Cross Client Email Templates. I’ll try to list down the DO’s and DON’Ts that we should adhere to when writing Email Templates for maximum compatibility across email clients. Also I’ll list down the common issues/bugs that are faced in Email Templates and their solutions.

  1. Use of table for layout
  2. Make sure to have a correct DOCTYPE Declaration
  3. Use of inline style
  4. Issue with empty cells
  5. White space issue with images
  6. Close every tag properly
  7. Properly using the background images
  8. Specify height, width and alt attribute with images
  9. Test test and test

Use of table for layout

This one is the most accepted point and no one is going to argue with you on this. We all know how poor the support for CSS is across email client so relying on CSS( positioning and floating) for creating email layouts will earn you headache only. Always use tables for creating layout. Here are some tips when using table for creating layout.

  1. Always have one container level table with width 100%. Use Width Attribute for the same. All your email content should be within that table.
  2. Make maximum use of the attributes of table, tr, td e.g bgcolor and align
  3. Using Stacked tables instead of Nested tables can also save help you avoid some frustration. Nothing wrong with nested tables though they can be used where required. Here is what I meant by Stacked Tables:
    <!-- header -->
    <table>
    	<tr><td></td></tr>	
    </table>
    
    <!-- Body -->
    <table>
    	<tr><td></td></tr>	
    </table>
    
    <!-- Footer -->
    <table>
    	<tr><td></td></tr>	
    </table>

 

Make sure to have a correct DOCTYPE Declaration

It’s a basic practice. Have a proper DOCTYPE Declaration in your Html Email Template.

Use of inline Style

Inilne Styles are your best friends when designing Email Templates. Using link tag for external Stylesheet is big no, that wouldn’t work in any email client. Having style tag for using internal Stylesheet is also problematic. Gmail for example will strip that tag and all it’s contents. But you still can have them for some fixes in other email clients i.e outlook

You don’t have to write the inline style yourself

I know inline style is a pain to write and a nightmare to maintain. There are few tools which you can use to help. These tools will allow you to write internal or externet css and then provide the inline styled version of the same. Following are few which you can use:

  1. premailer.dialect.ca
  2. beaker.mailchimp.com/inline-css

Issue with empty cells

We know there are many peoples out there who use empty rows and cells as a way to create spacing within the layout. We should never have empty <td></td> tags. Many browser will ignore these tags even if you have applied a height to them thus never adding the empty space you intended. A simple fix will be to place empty <a></a> tag within the cell i.e <td></td>.

White space issue with images

This is another issue which you’ll face quite often when designing Email Template. When rendering images in a table cell an email client will sometimes add extra white space in the form of a line break immediately after the image and you had no idea where it is coming from. Here’s two simple tricks you can use to fix this

  1. Always use style=’display:block’ with images
  2. Make sure to remove any whitespace between the <img/> and </td> tags

Close every tag properly

You all know what it meant, right!

Properly using background images

Dealing with background images can be little trickier some time. Here are few ways.
The table background attribute approach

<table width="100%" border="0" cellspacing="0" cellpadding="20" background="background_image.png">
  <tr>
    <td>
      <p>Content on a pretty background image.</p>
    </td>
  </tr>
</table>

The Css Approach

body {
   background-image: url('background_image.png');
   background-repeat: repeat-y no-repeat;
   background-color: #333;
   margin: 0;
   padding: 0;
}

Combine both of these approaches and you can have a very decent result on most of the popular email clients.

Reference
http://www.campaignmonitor.com/blog/post/3170/adding-background-images-to-your-email-in-two-simple-steps/

Also always have a backup plan if images are not loaded. e.g for gradient images you can have a solid color as fallback. Same goes for image buttons.

Specify height, width and alt attribute with images

Use alt, height and width for all images to ensure layout when images aren’t loaded.Most of the client now a days block the rendering of images by default and if images are not loaded in an email, the image areas of your template where width and height aren’t defined will collapse and break your layout. Just do it. It’s good practice.

Test, test and test

Checking out how your email looks on all email clients can be a big job. Thankfully there are few tools to help us out here.
https://litmus.com
http://www.emailonacid.com/

Here you can easily check how your template will look everywhere on browsers, on mobile and on desktop clients. Don’t forgot to check your template every time you make a change, even a small mistake can break out your whole layout.


Wrapping UP

To wrap it up basically you have to forgot all your Html & CSS Ninja skills which you have learnt after so much of hardwork when coding html email templates. Code it like we used to code web pages in in 90’s and simply stick to the days of early html4 .Here are few other resources and tools for further studies and use.

Don’t forgot to share if that helped. Discussions are welcomed for the improvements of the quality of the article

The following two tabs change content below.

Ankit Kumar

Team Leader at Logiciel Solutions
This is my personal blog. I post about Laravel, Angular, SQL and Web Technologies here. I have been into web development for 7 years and learning new things always interest me. Looking forward to find a teacher in you all.
  • Gagan

    thanks for giving links of convert engines for email templates.