Responsive Email Templates

1,028 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,028
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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  

×