Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ResponsiveEmail TemplatesAnastazy 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.  ...
What Makes an EmailResponsive      Media-­‐Queries    Fluid  widths    Display:  none    Table  align
Notabletactics  •  hero  image  removed  •  wrapper  width  adjusted  
Notabletactics  •  content  floats  •  phone  number  becomes    a  buRon  •  footer  links  float  and  become...
How to Display Email in iOS
How to Display Email in iOS1.  1024  chars  with  closing  </head>  tag  2.  fake  CSS  3.  white  space
An exampleof how it may look like
Vero Stilonewsletter  
The Nav  
align=”left”  Outlook  adds  padding  to  images    and  breaks  up  the  layout.  Some  images  are    no...
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" cellpaddi...
More rows ofproducts– 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  
Responsive Email Templates
Responsive Email Templates
Responsive Email Templates
Responsive Email Templates
Upcoming SlideShare
Loading in …5
×

Responsive Email Templates

1,114 views

Published on

Slides from a talk given in Berlin by Anastazy Kubiak on Responsvie Email Templates. Information is given on what exactly is a Responsive Email Template and why is it important. Examples of successful RWD emails are given plus a working example of a template created for Vero Stilo by the team @ Sendingo.

Published in: Technology, Business
no profile picture user

  • Login to see the comments

Responsive Email Templates

  1. 1. ResponsiveEmail TemplatesAnastazy Kubiak, Sendingo Sp. z o. o.
  2. 2. Is it worthwhile?Is it needed?  
  3. 3. 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
  4. 4. What Makes an EmailResponsive      Media-­‐Queries    Fluid  widths    Display:  none    Table  align
  5. 5. Notabletactics  •  hero  image  removed  •  wrapper  width  adjusted  
  6. 6. Notabletactics  •  content  floats  •  phone  number  becomes    a  buRon  •  footer  links  float  and  become  full  width  
  7. 7. How to Display Email in iOS
  8. 8. How to Display Email in iOS1.  1024  chars  with  closing  </head>  tag  2.  fake  CSS  3.  white  space
  9. 9. An exampleof how it may look like
  10. 10. Vero Stilonewsletter  
  11. 11. The Nav  
  12. 12. align=”left”  Outlook  adds  padding  to  images    and  breaks  up  the  layout.  Some  images  are    not  even  displayed.  
  13. 13. The Fix
<p style="mso-table-lspace:0; mso-table-rspace:0;”>"Content in 1st td of a given table"</p>"
  14. 14. <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>
  15. 15. More rows ofproducts– problem reappears.    
  16. 16. The Fix  Make  your  tables  no  higher  than:  23.7  inches  approx.  1790  px  
  17. 17. Final Look  
  18. 18. Thank you!www.sendingo.pl  Anastazy  Kubiak  Front-­‐end  Developer  at  Sendingo  

×