How to code emails

Coding emails is one of the most annoying things you can do in HTML. The reason is that email clients preprocess the code in the html before rendering it and showing it to the user. It started as a security feature but a lot of email clients also targets CSS and the html structure which makes it harder to style emails. Gmail which is one of the most popular email clients strips out any styles within style-tags. Because of this, we need to write all our CSS inline and make sure they are on every element to make sure our styles get used and not the defaults from the email clients.
Example:

<body style="margin: 0; padding: 0;">
    <img src="http://clipart-library.com/images/gceoXx7gi.png"
    style="
    background-color: #9b3283;
    display: block;
    max-width: 100%:
    padding: 18px 0;"
    width="600"/>
    <h1 style="
    color: #444555;
    font-family: 'Verdana';
    font-size: 45px;
    line-height: 45px;
    margin: 0;
    text-transform: lowercase;">
    My title!</h1>
    <p>Test </p>
  </body>

For more robust styling, instead of setting the width on images with inline CSS, use the width attribute on the img-tag directly like above!

A paragraph tag would need:
container styles
font styles
and finally reset styles (margin:0);

    <p style="

">Test </p>
  </body>

Then we need a 600px container, 600px is the magical container width for emails.

    <div style="
      margin: 0 auto;
      max-width: 600px;
      text-align: center;">
      ... previous code
     </div>

to style the surrounding areas and make sure that we have a background color we add another wrapper around our container just after the body tag

   <body style="margin: 0; padding: 0;">
    <div style="
      background-color: #211f31;
background-image: url('...texture.png');>
      "> 
       .. previous code
    </div>
   </body>

Summary:
email containers should be 600px
use width=”600″ attribute for setting width on images
use inline styles with resets on all elements you want to style, user margin:0
To make really bulletproof emails that also renders them correctly in outlooks 2003-2007, you will have to use Tables for layout.

Its important to make all styling on the table and cell elements and not the html tags such as p,img or h1.
Its also important to make specific styling directly on td elements and not on table because otherwise gmail and other email clients will rule over your table styles with default styles for td elements.
When coding emails, think of tables as wrapper and container divs and td as a wrapper div for specific elements
Each section should be a table, and when its 2 columns, its should be 3 tables in total for that section. 1 Section-wrapper and 2 column wrappers.

Make sure you use a capital M when writing Margin inline css styles in Emails as outlook.com otherwise removes margin but not Margin!

To deal with responsive layouts, we actually DO write some css in the style tag, the reason we can do this is that all email clients that accept media queries also accept the style tag.
To go forward with these responsive styles, add classes on td and table elements and then target them with media queries inside style-tag in the head.

Email clients using word processor renders text differently, to combat this we need to wrap some styles in conditionals targeting only these clients.

Because this vendor property mso-line-height-rule is not supported on inline elements it creates issues when using span tags within a td
To solve this issue, look at the highest line-height and add a class on the td surrounding the span tags and add it in the if gte mso 12 conditional.

If a cell is empty, outlook 2013 ignores the height, to fix this make sure you add a

&nbsp;

there!
Outlook 2013 treats images as text so you must set the font-size and line-height equal to the height of the image

Air mail automatically creates a hyperlink around links, these links will pick up the styling if you got global styling for all anchor tags.

If you want specfic styling for the phonenumber link, create a span tag with a class surrounding and then target the class and anchor tag

<style>
a{
 color:#c9c9c9;
}
.phone-link a {
 color: #000000;
}
</style>
<span class="phone-link">+4412345566</span>

Some email clients will automatically set the font-size to 14px even if you set it to be lower, to fight this you can use the vendor prefixes:

td {
              -ms-text-size-adjust:none;
              -webkit-text-size-adjust:none;
}

To avoid bugs its important to remember to remove -webkit-text-size-adjust none from the button code afterwards!

yahoo mail edge case:
Yahoo mail sets margin to 0 and ignore align center
because its only for yahoo we can fix this by adding css rule in our css style tag as Yahoo Mail supports the CSS in the style tag

<style>
...

table {margin: 0 auto !important;}
    </style>

2 column responsive layout

Coding a 2 column layout that becomes 1 column on mobile is a different kind of nightmare.

IE ignores max-width so if your are coding a 2 column layout the correct way with mobile first and max-width, you need to wrap your container tables inside additional tables if its outlook or IE.

        <!--[if mso|(IE)]>
        <table align="center"
        border="0"
        cellpadding="0"
        cellspacing="0"
        width="600">
          <tr>
            <td>
        <![endif]-->

        <!--[if mso|(IE)]>
            </td>
          </tr>
        </table>
        <![endif]-->

When using align left, you create a new problem with outlook. Word preprocesser adds 8px in total width to aligned tables so they wont stack properly.
To solve this you split the cells into 2 cells if its Word engine (outlook)

            <!--[if gte mso 12]>
            </td>
            <td>
            <![endif]-->

Make sure you set font-size to 0 on your wrapper cell otherwise the display property set to inline-block will cause issues..

Fonts!

Outlook doesn’t fall back to the one you have chosen, instead they go to Times New Roman if you have specified a font that doesn’t exist.
To fix this, make a specific style css for jsut outlook and target the effected td cells with a class

<!--[if mso]>
<style type=”text/css”>
.font-opensans {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->
<td class=”font-opensans” style="font-family: 'Open Sans', Arial, sans-serif;”>Open sans font for all!</td>

Resources:

Litmus for testing in all clients
Buttons.cm for bulletproof buttons for all clients!
caniuse for email clients!
Check how people code their emails that you receive
Loads of resources for reponsive emails!
Different layouts and common components that can be reused in emails

Add your comment