WHY?
STATISTICS
Source: Litmus https://litmus.com/blog/mobile-opens-hit-51-percent-android-claims-number-3-spot
Source: https://litmus.com/blog/mobile-opens-hit-44-and-outlook-com-takes-a-dive
Source: https://litmus.com/blog/mobile-opens-hit-record-high-of-47?utm_campaign=aug2013news&utm_source=newsletter&utm_medi...
Source: Litmus https://litmus.com/blog/mobile-opens-hit-51-percent-android-claims-number-3-spot
If you’re not designing for mobile,
you’re ignoring half your audience.
Source: E-Dialog http://www.e-dialog.com/pdf/smartguides/edialog_responsive_email_design_guide_2013.pdf
Source: https://litmus.com/blog/saving-email-for-later-opens-across-devices-environments
pinch + zoom

≠
mobile optimized
DESIGN
Step 1

Scalable graphics
Step 2

Increase font size
TS;DR

(too small; didn’t read)
scaled images +
readable type

=
single column responsive
Limited time? Single column
Step 3

Manage the flow of content
a
Step 4

Design for mobile viewports
Not all mobile clients
support @media queries
Not all mobile clients scale to fit
Design for the upper left “mobile fold”
Step 5 Create large touch targets
Step 6

Communicate structure & hierarchy
Step 7

Embrace brevity
What is this and why do I care?
Step 8 Design your microcontent
Carefully choose the From: name
Shorten and front-load subject lines
CODING BASICS
HTML emails are not webpages
Deprecated code
Variable support for HTML + CSS
Table-based layouts
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Lorem Ipsum</td>
</tr>
</ta...
Stackable tables
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;">
<tr>
<td style="width:300px;">Lor...
a
Nested tables
<!-- :::::::::::::::::::::::::
STACKABLE TABLE
:::::::::::::::::::::::::: -->
<table border="0" cellpadding=...
a
a
Avoid colspan and rowspan attributes
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;">
<tr>
<td cols...
Define <table> + <td> widths
<!-- Fixed widths -->
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;">
...
Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE ...
HTML validators
Define image width + height
<img src="..." width="150" height="100" />
HTML entities
<!-- Symbols and Latin use entity names -->
&copy; &bull; &mdash; &eacute; &ntilde;
<!-- Non-Latin use entit...
Use CSS
.h1
.h2
.h3
.h4

{
{
{
{

font-size:32px;
font-size:26px;
font-size:21px;
font-size:18px;

line-height:115%;
line-...
But inline it
Supported CSS
/* Font styles */
.text-style {
font-family:"Lucida Grande", "Lucida Sans Unicode", "Corbel", "Tahoma", sans...
Supported CSS
/* Color styles */
.color-style {
background-color:#F0235B;
border:1px solid #999999;
color:#FFFFFF;
}
Unsupported CSS
/* Positioning */
.div-position {
float:left;
position:relative;
top:100px;
z-index:1;
}
Unsupported CSS
/* Margins */
.h1 { margin:0 0 24px; }
.p { margin:0 0 10px; }
Avoid elements with default margins
<!-- BAD -->
<h1>Headers and paragraphs have default margin styles</h1>
<p>Not all ema...
Font styles on block elements
<div class=”h1”>H1 Header</div>
<div class=”p”>Paragraph...</div>
<table>
<tr>
<td class=”h1...
Vertical spacers
/* Vertical spacers for text spacing */
.spacer-xl { height:50px; line-height:50px; }
.spacer-lg { height...
Combine for flawless text layout
<div class=”h1”>H1 Header</div>
<div class=”spacer-lg”>&nbsp;</div>
<div class=”p”>Paragra...
Partially supported CSS
/* Padding */
img { padding:5px; }
td { padding:10px; }
/* Not fully supported on table, div or p ...
Partially supported CSS
/* Background images */
td { background-image:url("http://..."); }
Background image hack
<td background="http://.../background-image.gif" bgcolor="#f6f6f6" width="200" height="200" valign="...
Partially supported CSS
/* HTML buttons */
a { display:block; }
Button hack
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:of...
Guides to CSS Support
Microsoft Outlook 2007, 2010, 2013...
...Your Worst Enemy
Conditional statements for Outlook
<!--[if gte mso 9]>
<style type="text/css">
/* Outlook specific CSS here */
</style>
<!...
RESPONSIVE
Fluid grids
Fluid media
Media queries
Source: http://moddify.com/is-android-fragmentation-for-real/
Source: http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions
Source: http://devicelab.fi/
Source:
Source: http://emailclientmarketshare.com/
Source: http://stylecampaign.com/blog/2012/10/responsive-email-support/
Source: http://www.campaignmonitor.com/guides/mobile/#mobile-support
@media
@media only screen and (max-width: 599px)
{
...
}
Breakpoints
@media only screen and (max-width: 599px)
{
...
}

@media only screen and (max-width: 480px)
{
...
}
Viewport <meta>
<meta name="viewport" content="width=device-width">
Attribute selectors
<head>
<style type="text/css">
/* Fixed Styles */
.container { ... }
.column { ... }
.gutter { ... }
/...
Percentage widths
.container { width:600px; }
.column { width:560px; }
.gutter { width:20px; }
@media only screen and (max...
!important declarations
<!-- Inlined for maximum compatibility with desktop/webmail clients -->
.container { width:600px; ...
Fluid images
[class=column-half] img {
width:100% !important;
height:auto !important;
max-width:300px !important;
}
Multi-column layouts
<!-- :::::::::::::::::::::::::
STACKABLE TABLE
:::::::::::::::::::::::::: -->
<table border="0" cellp...
Multi-column CSS
.two-column { width:600px; }
.two-column .column { width:300px; }

@media only screen and (max-width: 599...
a
Floated tables require Outlook hack
<!-- :::::::::::::::::::::::::
OUTER TABLE
:::::::::::::::::::::::::: -->
<table borde...
CSS for Outlook hack
.outlook-container-FIX {
width:100%;
}
.outlook-spacing-FIX {
mso-table-lspace:0;
mso-table-rspace:0;...
Buggy!
Quoi?????
Resources
Source: https://github.com/ladyheatherly/responsive-email/blob/master/responsive-email-template.html
Source: http://briangraves.github.io/ResponsiveEmailPatterns/
Source:
Source: https://github.com/mailchimp/Email-Blueprints
Thank you!
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Responsive Email Design and Development
Upcoming SlideShare
Loading in …5
×

Responsive Email Design and Development

1,539 views

Published on

How to design and code responsive HTML emails. Presented at a UCLA Campus Web Publishers meeting on January 22, 2014.

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,539
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
44
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Email Design and Development

  1. 1. WHY?
  2. 2. STATISTICS
  3. 3. Source: Litmus https://litmus.com/blog/mobile-opens-hit-51-percent-android-claims-number-3-spot
  4. 4. Source: https://litmus.com/blog/mobile-opens-hit-44-and-outlook-com-takes-a-dive
  5. 5. Source: https://litmus.com/blog/mobile-opens-hit-record-high-of-47?utm_campaign=aug2013news&utm_source=newsletter&utm_medium=email
  6. 6. Source: Litmus https://litmus.com/blog/mobile-opens-hit-51-percent-android-claims-number-3-spot
  7. 7. If you’re not designing for mobile, you’re ignoring half your audience.
  8. 8. Source: E-Dialog http://www.e-dialog.com/pdf/smartguides/edialog_responsive_email_design_guide_2013.pdf
  9. 9. Source: https://litmus.com/blog/saving-email-for-later-opens-across-devices-environments
  10. 10. pinch + zoom ≠ mobile optimized
  11. 11. DESIGN
  12. 12. Step 1 Scalable graphics
  13. 13. Step 2 Increase font size
  14. 14. TS;DR (too small; didn’t read)
  15. 15. scaled images + readable type = single column responsive
  16. 16. Limited time? Single column
  17. 17. Step 3 Manage the flow of content
  18. 18. a
  19. 19. Step 4 Design for mobile viewports
  20. 20. Not all mobile clients support @media queries
  21. 21. Not all mobile clients scale to fit
  22. 22. Design for the upper left “mobile fold”
  23. 23. Step 5 Create large touch targets
  24. 24. Step 6 Communicate structure & hierarchy
  25. 25. Step 7 Embrace brevity
  26. 26. What is this and why do I care?
  27. 27. Step 8 Design your microcontent
  28. 28. Carefully choose the From: name
  29. 29. Shorten and front-load subject lines
  30. 30. CODING BASICS
  31. 31. HTML emails are not webpages
  32. 32. Deprecated code
  33. 33. Variable support for HTML + CSS
  34. 34. Table-based layouts <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Lorem Ipsum</td> </tr> </table>
  35. 35. Stackable tables <table border="0" cellpadding="0" cellspacing="0" style="width:600px;"> <tr> <td style="width:300px;">Lorem Ipsum</td> <td style="width:300px;">Lorem Ipsum</td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" style="width:600px;"> <tr> <td style="width:150px;">Lorem Ipsum</td> <td style="width:150px;">Lorem Ipsum</td> <td style="width:150px;">Lorem Ipsum</td> <td style="width:150px;">Lorem Ipsum</td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" style="width:600px;"> <tr> <td style="width:200px;">Lorem Ipsum</td> <td style="width:200px;">Lorem Ipsum</td> <td style="width:200px;">Lorem Ipsum</td> </tr> </table>
  36. 36. a
  37. 37. Nested tables <!-- ::::::::::::::::::::::::: STACKABLE TABLE :::::::::::::::::::::::::: --> <table border="0" cellpadding="0" cellspacing="0" class="stacking-table"> <tr> <td class="gutter">&nbsp;</td> <td class="center"> <!-- ::::::::::::::::::::::::: NESTED TABLE :::::::::::::::::::::::::: --> <table border="0" cellpadding="0" cellspacing="0" class="two-column"> <tr> <td class="column">...</td> <td class="column">...</td> </tr> </table> </td> <td class="gutter">&nbsp;</td> </tr> </table>
  38. 38. a a
  39. 39. Avoid colspan and rowspan attributes <table border="0" cellpadding="0" cellspacing="0" style="width:600px;"> <tr> <td colspan="3" style="width:600px;">You will regret using this colspan!!!</td> </tr> <tr> <td style="width:200px;">Lorem Ipsum</td> <td style="width:200px;">Lorem Ipsum</td> <td style="width:200px;">Lorem Ipsum</td> </tr> </table>
  40. 40. Define <table> + <td> widths <!-- Fixed widths --> <table border="0" cellpadding="0" cellspacing="0" style="width:600px;"> <tr> <td style="width:300px;">Lorem Ipsum</td> <td style="width:300px;">Lorem Ipsum</td> </tr> </table> <!-- Fluid widths --> <table border="0" cellpadding="0" cellspacing="0" style="width:100%;"> <tr> <td style="width:50%;">...</td> <td style="width:50%;">...</td> </tr> </table>
  41. 41. Doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  42. 42. HTML validators
  43. 43. Define image width + height <img src="..." width="150" height="100" />
  44. 44. HTML entities <!-- Symbols and Latin use entity names --> &copy; &bull; &mdash; &eacute; &ntilde; <!-- Non-Latin use entity numbers --> 激 光 這
  45. 45. Use CSS .h1 .h2 .h3 .h4 { { { { font-size:32px; font-size:26px; font-size:21px; font-size:18px; line-height:115%; line-height:130%; line-height:150%; line-height:150%; } } } } .column-full { width:540px; } .column-half { width:260px; } .column-third { width:170px; } .column-quarter { width:130px; } .spacer-xl .spacer-lg .spacer-md .spacer-sm .spacer-xs { { { { { height:50px; line-height:50px; } height:40px; line-height:40px; } height:30px; line-height:30px; } height:20px; line-height:20px; } font-size:10px; height:10px; line-height:10px; } .border { border-bottom:1px solid #aaaaaa; } .border-thick { border-bottom:5px solid #cccccc; }
  46. 46. But inline it
  47. 47. Supported CSS /* Font styles */ .text-style { font-family:"Lucida Grande", "Lucida Sans Unicode", "Corbel", "Tahoma", sans-serif; font-size:14px; font-style:italic; font-weight:bold; line-height:1.2em; text-align:left; text-decoration:underline; }
  48. 48. Supported CSS /* Color styles */ .color-style { background-color:#F0235B; border:1px solid #999999; color:#FFFFFF; }
  49. 49. Unsupported CSS /* Positioning */ .div-position { float:left; position:relative; top:100px; z-index:1; }
  50. 50. Unsupported CSS /* Margins */ .h1 { margin:0 0 24px; } .p { margin:0 0 10px; }
  51. 51. Avoid elements with default margins <!-- BAD --> <h1>Headers and paragraphs have default margin styles</h1> <p>Not all email clients will let you override or zero them out.</p>
  52. 52. Font styles on block elements <div class=”h1”>H1 Header</div> <div class=”p”>Paragraph...</div> <table> <tr> <td class=”h1”>H1 Header</td> <td class=”p”>Paragraph...</td> </tr> </table>
  53. 53. Vertical spacers /* Vertical spacers for text spacing */ .spacer-xl { height:50px; line-height:50px; } .spacer-lg { height:40px; line-height:40px; } .spacer-md { height:30px; line-height:30px; } .spacer-sm { height:20px; line-height:20px; } .spacer-xs { font-size:10px; height:10px; line-height:10px; }
  54. 54. Combine for flawless text layout <div class=”h1”>H1 Header</div> <div class=”spacer-lg”>&nbsp;</div> <div class=”p”>Paragraph...</div> <table> <tr> <td class=”h1”>H1 Header</td> <td class=”spacer-sm”>&nbsp;</td> <td class=”p”>Paragraph...</td> </tr> </table>
  55. 55. Partially supported CSS /* Padding */ img { padding:5px; } td { padding:10px; } /* Not fully supported on table, div or p elements */
  56. 56. Partially supported CSS /* Background images */ td { background-image:url("http://..."); }
  57. 57. Background image hack <td background="http://.../background-image.gif" bgcolor="#f6f6f6" width="200" height="200" valign="top"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:200px;height:200px;"> <v:fill type="tile" src="http://.../background-image.gif" color="#f6f6f6" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> </div> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </td>
  58. 58. Partially supported CSS /* HTML buttons */ a { display:block; }
  59. 59. Button hack <div> <!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t"> <v:fill type="tile" src="http://i.imgur.com/0xPEf.gif" color="#556270" /> <w:anchorlock/> <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</ center> </v:roundrect> <![endif]--> <a href="http://" style="background-color:#556270;background-image:url(http://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;borderradius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height: 40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</ a> </div>
  60. 60. Guides to CSS Support
  61. 61. Microsoft Outlook 2007, 2010, 2013...
  62. 62. ...Your Worst Enemy
  63. 63. Conditional statements for Outlook <!--[if gte mso 9]> <style type="text/css"> /* Outlook specific CSS here */ </style> <![endif]-->
  64. 64. RESPONSIVE
  65. 65. Fluid grids Fluid media Media queries
  66. 66. Source: http://moddify.com/is-android-fragmentation-for-real/
  67. 67. Source: http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions
  68. 68. Source: http://devicelab.fi/
  69. 69. Source:
  70. 70. Source: http://emailclientmarketshare.com/
  71. 71. Source: http://stylecampaign.com/blog/2012/10/responsive-email-support/
  72. 72. Source: http://www.campaignmonitor.com/guides/mobile/#mobile-support
  73. 73. @media @media only screen and (max-width: 599px) { ... }
  74. 74. Breakpoints @media only screen and (max-width: 599px) { ... } @media only screen and (max-width: 480px) { ... }
  75. 75. Viewport <meta> <meta name="viewport" content="width=device-width">
  76. 76. Attribute selectors <head> <style type="text/css"> /* Fixed Styles */ .container { ... } .column { ... } .gutter { ... } /* Responsive styles */ @media only screen and (max-width: 599px) { [id=container] { ... } [class=preheader] { ... } span[class=highlight] { ... } } </style> </head>
  77. 77. Percentage widths .container { width:600px; } .column { width:560px; } .gutter { width:20px; } @media only screen and (max-device-width: 599px) { [class=container] { width:100% !important; } [class=column] { width:92% !important; } [class=gutter] { width:4% !important; } }
  78. 78. !important declarations <!-- Inlined for maximum compatibility with desktop/webmail clients --> .container { width:600px; } .column { width:560px; } .gutter { width:20px; } <!-- Not inlined, thus they need !important for CSS precedence --> @media only screen and (max-device-width: 599px) { [class=container] { width:100% !important; } [class=column] { width:92% !important; } [class=gutter] { width:4% !important; } }
  79. 79. Fluid images [class=column-half] img { width:100% !important; height:auto !important; max-width:300px !important; }
  80. 80. Multi-column layouts <!-- ::::::::::::::::::::::::: STACKABLE TABLE :::::::::::::::::::::::::: --> <table border="0" cellpadding="0" cellspacing="0" class="stackable-table"> <tr> <td class="gutter">&nbsp;</td> <td class="center"> <!-- ::::::::::::::::::::::::::::: NESTED 2-COLUMN TABLE :::::::::::::::::::::::::::::: --> <table border="0" cellpadding="0" cellspacing="0" class="two-column"> <tr> <td class="column">...</td> <td class="column">...</td> </tr> </table> </td> <td class="gutter">&nbsp;</td> </tr> </table>
  81. 81. Multi-column CSS .two-column { width:600px; } .two-column .column { width:300px; } @media only screen and (max-width: 599px) { [class=two-column] { width:100% !important; } [class=two-column] [class=column] { width:100% !important; display:block !important; } }
  82. 82. a
  83. 83. Floated tables require Outlook hack <!-- ::::::::::::::::::::::::: OUTER TABLE :::::::::::::::::::::::::: --> <table border="0" cellpadding="0" cellspacing="0" class="full-column"> <tr> <td class="gutter">&nbsp;</td> <td class="center"> <table class="outlook-container-FIX"><tr><td> <!-- ::::::::::::::::::::::::::::: INNER FLOATED TABLE :::::::::::::::::::::::::::::: --> <table align="left" border="0" cellpadding="0" cellspacing="0" class="column-half"> <tr> <td> <div class="outlook-spacing-FIX"> ...Content goes here </div> </td> </tr> <tr> <td> ... </td> </tr> </table> <table class="outlook-container-FIX"><tr><td> <!-- ::::::::::::::::::::::::::::: INNER FLOATED TABLE :::::::::::::::::::::::::::::: --> <table align="left" border="0" cellpadding="0" cellspacing="0" class="column-half"> <tr> <td> <div class="outlook-spacing-FIX"> ...Content goes here </div>
  84. 84. CSS for Outlook hack .outlook-container-FIX { width:100%; } .outlook-spacing-FIX { mso-table-lspace:0; mso-table-rspace:0; } .half-column { border:1px solid #FBFBF9; }
  85. 85. Buggy!
  86. 86. Quoi?????
  87. 87. Resources
  88. 88. Source: https://github.com/ladyheatherly/responsive-email/blob/master/responsive-email-template.html
  89. 89. Source: http://briangraves.github.io/ResponsiveEmailPatterns/
  90. 90. Source:
  91. 91. Source: https://github.com/mailchimp/Email-Blueprints
  92. 92. Thank you!

×