Responsive Email Templates Anastazy Kubiak, Sendingo Sp. z o. o.

Is it worthwhile? Is it needed?  

Top Email Clients  

1.  iPhone  

2.  Outlook  

3.  iPad  

4.  Outlook.com  

5.  Apple  Mail  

6.  Google  Android  

7.  Gmail  

Stats  by  Litmus  Email  AnalyEcs  –  May  2013

What Makes an Email Responsive  

   

Media-­‐Queries    

Fluid  widths    

Display:  none    

Table  align

Notable tactics  

•  hero  image  removed  

•  wrapper  width  adjusted  

Notable tactics  

•  content  floats  

•  phone  number  becomes    a  buRon  

•  footer  links  float  and  become  full  width  

How to Display Email in iOS

How to Display Email in iOS

1.  1024  chars  with  closing  </head>  tag  

2.  fake  CSS  

3.  white  space

An example of how it may look like

Vero Stilo newsletter  

The Nav  

align=”left”  

Outlook  adds  padding  to  images    and  breaks  up  the  layout.  

Some  images  are    not  even  displayed.  

The Fix

<p style="mso-table-lspace:0; mso-table-rspace:0;”>"

Content in 1st td of a given table"

</p>"

<style type="text/css"> table { border-collapse: collapse; } </style> <table border="0" width="600" cellspacing="0" cellpadding="0"> <tr> <td> <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #00CC99"> <tr> <td bgcolor="#00CC99">

<p style="mso-table-lspace:0;mso-table-rspace:0;"> Content in 1

</p> </td>

</tr> <tr> <td bgcolor="#00CC99">Content in 1</td> </tr> </table> <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #33FFFF"> <tr> <td bgcolor="#33FFFF"><p style="mso-table-lspace:0;mso-table-rspace:0;">Content in 2</p></td> </tr> <tr> <td bgcolor="#33FFFF">Content in 2</td> </tr> </table> <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #993366"> <tr> <td bgcolor="#993366"><p style="mso-table-lspace:0;mso-table-rspace:0;">Content in 3</p></td> </tr> <tr> <td bgcolor="#993366">Content in 3</td> </tr> </table> </td> </tr> </table>

More rows of products

– problem reappears.  

 

The Fix  

Make  your  tables  no  higher  than:  

23.7  inches  

approx.  1790  px  

Final Look  

Thank you! www.sendingo.pl  

Anastazy  Kubiak  

Front-­‐end  Developer  at  Sendingo