Mail templates on HTML and CSS ? Find your guide here!

Creating templates for mail clients on web development can be a really challenging task, it can be so complicated and even frustrating due to the layout design involved, which turns to be sometimes very complex because of the limitations. Honestly, I find this tasks very interesting and pretty fun.

My first experience creating templates for mail clients was really complicated since I had no idea about its functionality and about their limitations on the CSS support. That’s the reason why this info may help your enter to the hard world of creating templates for mail clients.

 

1. Nested Tables

 

Web development - nested tables

Due to the lack of standards on mail clients for web development, is not possible to use divs, sections or articles reliably. Instead you may use a lot more nested tables to build your template.

 

2. Use HTML attributes instead of CSS when possible

 

One of the most useful advices that I learned making some research about templates layout for mail clients is that in case there is an attribute in HTML, is much better to use it instead of a CSS property.

Web development

3. Begin with the structure

 

Structure HTML web development AmplemindAt the beginning of the web development of the layout, build the structure of your mail template first, this will help you to avoid some bugs or unexpected results.

Sometimes we work until finishing with the entire template content and once everything is done, we proceed to test it and it turns into unexpected results.

It is important to create a solid and completely functional structure for the different clients and once we tested our basic structured without any issue, we can proceed to finish the content of each defined section.

 

4. Optimize the images to the maximum

On web development, is really important to optimize the images in general, in case the images are too heavy, the loading time for our website will be affected. When creating mail templates, this is important too, since loading time is specially slow at mobile devices, which they are often using a limited data plan, and heavy images would consume lot of their data plan.

You can use compression services as TinyPng to compress your images, delivering an outstanding loading experience to the user that receives the mail template.

 

5. Always define the width of the containers

Web development Amplemind

Its very important to define the width of the containers, otherwise you might obtain unexpected results when visualizing the template, always consider defining the width of the principal container in pixels. The containers inside the principal container have the option to use percentages if you want.

 

6. Tag <style> or inline styles

I think that this can be a matter of tastes, since in general, people used to separate the CSS of the HTML to facilitate the maintenance.

I personally don’t like to use the label <style> since there are mail clients that undo this label. In general, when the label  <style> is used or an external styles sheet, people use tools or services like Mailchimp, that allows to place the created inline styles automatically.

Based on  my experience, this method has turned more complicated to me, since the code gets unrecognizable and fixing bugs gets really hard. I prefer to use inline styles when building my template, to have a better control of the styles and identify easily where the mistake is located.

Inline Styles web development Amplemind

7. Cells or labels  <p>, <h1>, <h2>, span, etc. for text styles

 

Cells or labels web development AmplemindUsing labels is really problematic since every mail client uses them differently, getting unexpected and complicated to fix results.

The most reliable way to give style to the text is to set every text block on a separate and individual cell and give inline style, this also allows you to use the padding to generate spacing between elements, since is pretty safe to apply padding to the <td> labels, unlike applying padding to the <p>, <h1>, <h2>, etc. labels.

 

8. Make continuous tests to your mail and to any web development 

Testing your template on different mail clients is important, you can use any browser to visualize the result of your development, but this must also be tested on mail clients to get a real preview of the content.

There are services like PutsMail of litmus that allows you to send a test mail  to every mail address you would like for free. Or if you prefer, there are paid plans that allows you to get a preview of your mail to over 50 apps and devices, giving you the guarantee of the compatibility as well as some other benefits and tools.

There are also services as campaignmonitor  that offer tools and utilities related with the mail design with HTML, for example this guide of CSS properties supported by of the most popular mail clients.

 

The layout of mails with HTML, can be a pretty complicated task since normally we have to forget about the standards we use to make a website layout and take other things into consideration. I found it very interesting and I think that any frontend developer should have the abilities and knowledge to build a mail clients template from the beginning, not because of its importance, but because of the learning you can get from this.

 

Related web development sites:

Litmus

Email on Acid

Litmus Blog

Campaign Monitor

Mailchimp Email Design Reference

 

Jorge - Developer
Jorge Barron             Senior Developer