View
603
Download
1
Category
Preview:
DESCRIPTION
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.
Citation preview
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
Recommended