Hybrid email coding

Hybrid (or Spongy) is a method of coding that was developed (by MailChimp’s Fabio Carneiro) when a fix was needed for emails to display responsive on devices that didn’t read media queries. The basic idea for this method is to have separate code for the notorious outlook and the rest reads the html as its coded (inline).

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”[class.name]”>
<tr>
<td align=”center” valign=”top” style=”padding:0px;text-align: center; vertical-align: top; font-size: 0px;” class=”padleft“>

Before hybrid coding is started the table data that will contain the div’s has to have the above code. The code allows each div width a specific width to sit beside each other when rendered in a browser. A class will be created and used in a media query (max-width:601px) to force the table to be 600px wide. This will ensure devices that read media query render the outer table at 600px. 

<!–[if (gte mso 9)|(IE)]>
<table align=”center” border=”0″ cellspacing=”0″ cellpadding=”0″ width=”600″> <tr>
<td align=”center” valign=”top” width=”600″>
<![endif]–>

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

Next up is the hybrid code, this will be read by outlook email clients only. It reads if greater than Microsoft Outlook 9 then display the code within the comment. If a 100% table is placed in between the commented code, the result from the above code will be a 600px wide table in Outlook.

style=”width: 441px; display: inline-block; vertical-align: top;” class=”[class.name]”>

Next up are the div tags. Each div will be given a specific width and with the inline styles it allows the element to align top and let the other elements sit beside it. If your div is bigger than the screen size you can control it using media queries for devices that read it.

<!–[if (gte mso 9)|(IE)]>
</td>
<td width=”13″ align=”left” valign=”top”>
<![endif]–>

To add in another column simple add in another conditional statement and add another div.

<!–[if (gte mso 9)|(IE)]>
</td>
</tr>
<tr>
<td width=”13″ align=”left” valign=”top”>
<![endif]–>

For geeks: add a row for outlook only  

Using the hybrid method of coding you can use two classes to force wider elements to fit to screen so you have an idea as to how Gmail app renders emails. Through my past 8 years of email coding experience I have devised a way to create spaces in mobile versions of email without using media queries and the final result mimics a fluid email and works on all devices.

Full code from this post:

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”[class.name]”>
<tr>
<td align=”center” valign=”top” style=”padding:0px;text-align: center; vertical-align: top; font-size: 0px;”>
<!– Full hybrid coding starts –>
<!–[if (gte mso 9)|(IE)]>
<table align=”center” border=”0″ cellspacing=”0″ cellpadding=”0″ width=”600″> <tr>
<td align=”center” valign=”top” width=”600″>
<![endif]–>

column 1

<!– hybrid coding: column starts –>
<!–[if (gte mso 9)|(IE)]>
</td>
<td width=”13″ align=”left” valign=”top”>
<![endif]–>

column 2

<!– hybrid coding: ends –>
<!–[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]–>
</td>
</tr>
</table>

If there are any questions regarding any of the code above just contact me and I will be more than happy to help out.