email Getting started with email Coding emails for all email clients

Example

Coding method used: Hybrid/Spongy

It has been forever a myth that div's can not be used in emails. There are email clients (unlike outlook) that can render div's properly. The example below will illustrate how an email can be coded that will work on Gmail app (with updates not rolled out yet), Samsung device's and other email clients that don't read media queries.

Introducing Outlook conditional statements

Outlook conditional statements are very useful when it come to rendering emails or showing something specific like fall backs for outlook.

<!--[if (gte mso 9)|(IE)]>
<![endif]-->

The above code reads if greater than microsoft outlook 9 or IE

Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15

Versions for conditional statements listed.

Starting a hybrid email template

Each step has been explained in a way that it should be easy for anyone with basic HTML knowledge to understand.

First we start with a wrapper table which will span all the way across the screen and with a class of container.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[CONTENT GOES HERE]</td>
    </tr>
  </tbody>
</table>

After that we add in a media query for email clients that dont read max width but read the CSS in the header. The media query will be targeting all screens and showing the container at 700 pixels width.

@media only screen and (max-width : 700px) {
.container{width:700px;}
}

Next we add an outlook conditional statement that keeps the table (with class container) to be at a width of 700 pixels.

<!--[if (gte mso 9)|(IE)]>
    <table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="left" valign="top" width="700">
    <![endif]-->
    
        <table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
              <tbody>
                <tr>
                  <td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
                </tr>
              </tbody>
        </table>

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

The above code should now hold your template in outlook at 700px wide.

Now for the columns. Below code will create two equal columns on the template both at 350px wide.

<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>
                                  
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->

<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>[COLUMN CONTENT HERE]</td>
    </tr>
  </tbody>
</table>
</div>

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

After this the limit is only your imagination or the designer. When designs are done it is important to be involved in the wire framing stage so there are no suprises once the design is in coding stage.

Note:

• Retina images will need images set at the element level not on its style <img src="" width="" ...
• You can still choose to do in-line CSS or you can choose to CSS in head only if all your clients support CSS in the head.