responsive email design and development

182

Upload: ladyheatherly

Post on 28-Jan-2015

116 views

Category:

Design


2 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Responsive Email Design and Development
Page 2: Responsive Email Design and Development
Page 3: Responsive Email Design and Development
Page 4: Responsive Email Design and Development

WHY?

Page 5: Responsive Email Design and Development

STATISTICS

Page 6: Responsive Email Design and Development

Source: Litmus https://litmus.com/blog/mobile-opens-hit-51-percent-android-claims-number-3-spot

Page 9: Responsive Email Design and Development

Source: Litmus https://litmus.com/blog/mobile-opens-hit-51-percent-android-claims-number-3-spot

Page 10: Responsive Email Design and Development

If you’re not designing for mobile, you’re ignoring half your audience.

Page 12: Responsive Email Design and Development
Page 13: Responsive Email Design and Development
Page 14: Responsive Email Design and Development
Page 15: Responsive Email Design and Development
Page 17: Responsive Email Design and Development

pinch + zoom

≠mobile optimized

Page 18: Responsive Email Design and Development

DESIGN

Page 19: Responsive Email Design and Development

Step 1 Scalable graphics

Page 20: Responsive Email Design and Development
Page 21: Responsive Email Design and Development
Page 22: Responsive Email Design and Development
Page 23: Responsive Email Design and Development
Page 24: Responsive Email Design and Development
Page 25: Responsive Email Design and Development

Step 2 Increase font size

Page 26: Responsive Email Design and Development
Page 27: Responsive Email Design and Development
Page 28: Responsive Email Design and Development
Page 29: Responsive Email Design and Development
Page 30: Responsive Email Design and Development

TS;DR (too small; didn’t read)

Page 31: Responsive Email Design and Development
Page 32: Responsive Email Design and Development
Page 33: Responsive Email Design and Development
Page 34: Responsive Email Design and Development
Page 35: Responsive Email Design and Development

scaled images +readable type

=single column responsive

Page 36: Responsive Email Design and Development

Limited time? Single column

Page 37: Responsive Email Design and Development
Page 38: Responsive Email Design and Development

Step 3 Manage the flow of content

Page 39: Responsive Email Design and Development
Page 40: Responsive Email Design and Development
Page 41: Responsive Email Design and Development
Page 42: Responsive Email Design and Development
Page 43: Responsive Email Design and Development
Page 44: Responsive Email Design and Development
Page 45: Responsive Email Design and Development
Page 46: Responsive Email Design and Development
Page 47: Responsive Email Design and Development
Page 48: Responsive Email Design and Development

a

Page 49: Responsive Email Design and Development

Step 4 Design for mobile viewports

Page 50: Responsive Email Design and Development

Not all mobile clientssupport @media queries

Page 51: Responsive Email Design and Development
Page 52: Responsive Email Design and Development
Page 53: Responsive Email Design and Development

Not all mobile clients scale to fit

Page 54: Responsive Email Design and Development
Page 55: Responsive Email Design and Development
Page 56: Responsive Email Design and Development

Design for the upper left “mobile fold”

Page 57: Responsive Email Design and Development
Page 58: Responsive Email Design and Development
Page 59: Responsive Email Design and Development
Page 60: Responsive Email Design and Development
Page 61: Responsive Email Design and Development
Page 62: Responsive Email Design and Development
Page 63: Responsive Email Design and Development
Page 64: Responsive Email Design and Development

Step 5 Create large touch targets

Page 65: Responsive Email Design and Development
Page 66: Responsive Email Design and Development
Page 67: Responsive Email Design and Development

Step 6 Communicate structure & hierarchy

Page 68: Responsive Email Design and Development
Page 69: Responsive Email Design and Development
Page 70: Responsive Email Design and Development
Page 71: Responsive Email Design and Development
Page 72: Responsive Email Design and Development
Page 73: Responsive Email Design and Development

Step 7 Embrace brevity

Page 74: Responsive Email Design and Development
Page 75: Responsive Email Design and Development
Page 76: Responsive Email Design and Development
Page 77: Responsive Email Design and Development
Page 78: Responsive Email Design and Development
Page 79: Responsive Email Design and Development
Page 80: Responsive Email Design and Development

What is this and why do I care?

Page 81: Responsive Email Design and Development
Page 82: Responsive Email Design and Development
Page 83: Responsive Email Design and Development
Page 84: Responsive Email Design and Development
Page 85: Responsive Email Design and Development

Step 8 Design your microcontent

Page 86: Responsive Email Design and Development
Page 87: Responsive Email Design and Development

Carefully choose the From: name

Page 88: Responsive Email Design and Development

Shorten and front-load subject lines

Page 89: Responsive Email Design and Development

CODING BASICS

Page 90: Responsive Email Design and Development

HTML emails are not webpages

Page 91: Responsive Email Design and Development

Deprecated code

Page 92: Responsive Email Design and Development

Variable support for HTML + CSS

Page 93: Responsive Email Design and Development

<table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Lorem Ipsum</td> </tr></table>

Table-based layouts

Page 94: Responsive Email Design and Development

<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>

Stackable tables

Page 95: Responsive Email Design and Development
Page 96: Responsive Email Design and Development

a

Page 97: Responsive Email Design and Development

<!-- ::::::::::::::::::::::::: 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>

Nested tables

Page 98: Responsive Email Design and Development
Page 99: Responsive Email Design and Development
Page 100: Responsive Email Design and Development

aa

Page 101: Responsive Email Design and Development
Page 102: Responsive Email Design and Development

<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>

Avoid colspan and rowspan attributes

Page 103: Responsive Email Design and Development
Page 104: Responsive Email Design and Development
Page 105: Responsive Email Design and Development

<!-- 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>

Define <table> + <td> widths

Page 106: Responsive Email Design and Development

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Doctype

<!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">

Page 107: Responsive Email Design and Development

HTML validators

Page 108: Responsive Email Design and Development

<img src="..." width="150" height="100" />

Define image width + height

Page 109: Responsive Email Design and Development

<!-- Symbols and Latin use entity names -->&copy; &bull; &mdash; &eacute; &ntilde;

<!-- Non-Latin use entity numbers --> &#28608; &#20809; &#36889;

HTML entities

Page 110: Responsive Email Design and Development

.h1 { font-size:32px; line-height:115%; }

.h2 { font-size:26px; line-height:130%; }

.h3 { font-size:21px; line-height:150%; }

.h4 { font-size:18px; line-height:150%; }

.column-full { width:540px; }

.column-half { width:260px; }

.column-third { width:170px; }

.column-quarter { width:130px; }

.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; }

.border { border-bottom:1px solid #aaaaaa; }

.border-thick { border-bottom:5px solid #cccccc; }

Use CSS

Page 111: Responsive Email Design and Development

But inline it

Page 112: Responsive Email Design and Development
Page 113: Responsive Email Design and Development

/* 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;}

Supported CSS

Page 114: Responsive Email Design and Development

/* Color styles */.color-style { background-color:#F0235B; border:1px solid #999999; color:#FFFFFF;}

Supported CSS

Page 115: Responsive Email Design and Development

/* Positioning */.div-position {

float:left; position:relative; top:100px; z-index:1;

}

Unsupported CSS

Page 116: Responsive Email Design and Development

/* Margins */.h1 { margin:0 0 24px; }.p { margin:0 0 10px; }

Unsupported CSS

Page 117: Responsive Email Design and Development

<!-- BAD --><h1>Headers and paragraphs have default margin styles</h1><p>Not all email clients will let you override or zero them out.</p>

Avoid elements with default margins

Page 118: Responsive Email Design and Development
Page 119: Responsive Email Design and Development
Page 120: Responsive Email Design and Development

<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>

Font styles on block elements

Page 121: Responsive Email Design and Development

/* 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; }

Vertical spacers

Page 122: Responsive Email Design and Development

<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>

Combine for flawless text layout

Page 123: Responsive Email Design and Development

/* Padding */img { padding:5px; }td { padding:10px; }

/* Not fully supported on table, div or p elements */

Partially supported CSS

Page 124: Responsive Email Design and Development

/* Background images */td { background-image:url("http://..."); }

Partially supported CSS

Page 125: Responsive Email Design and Development

<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>

Background image hack

Page 126: Responsive Email Design and Development
Page 127: Responsive Email Design and Development

/* HTML buttons */a { display:block; }

Partially supported CSS

Page 128: Responsive Email Design and Development

<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;border-radius: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>

Button hack

Page 129: Responsive Email Design and Development
Page 130: Responsive Email Design and Development

Guides to CSS Support

Page 131: Responsive Email Design and Development
Page 132: Responsive Email Design and Development
Page 133: Responsive Email Design and Development
Page 134: Responsive Email Design and Development

Microsoft Outlook 2007, 2010, 2013...

Page 135: Responsive Email Design and Development

...Your Worst Enemy

Page 136: Responsive Email Design and Development

<!--[if gte mso 9]><style type="text/css">

/* Outlook specific CSS here */</style>

<![endif]-->

Conditional statements for Outlook

Page 137: Responsive Email Design and Development

RESPONSIVE

Page 138: Responsive Email Design and Development

Fluid gridsFluid mediaMedia queries

Page 139: Responsive Email Design and Development

Source: http://moddify.com/is-android-fragmentation-for-real/

Page 141: Responsive Email Design and Development

Source: http://devicelab.fi/

Page 142: Responsive Email Design and Development

Source:

Page 143: Responsive Email Design and Development

Source: http://emailclientmarketshare.com/

Page 145: Responsive Email Design and Development

Source: http://www.campaignmonitor.com/guides/mobile/#mobile-support

Page 146: Responsive Email Design and Development

@media only screen and (max-width: 599px){

...}

@media

Page 147: Responsive Email Design and Development

@media only screen and (max-width: 599px){

...}

@media only screen and (max-width: 480px){

...}

Breakpoints

Page 148: Responsive Email Design and Development

<meta name="viewport" content="width=device-width">

Viewport <meta>

Page 149: Responsive Email Design and Development

<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>

Attribute selectors

Page 150: Responsive Email Design and Development

.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; }}

Percentage widths

Page 151: Responsive Email Design and Development

<!-- 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; }}

!important declarations

Page 152: Responsive Email Design and Development

[class=column-half] img { width:100% !important; height:auto !important; max-width:300px !important;}

Fluid images

Page 153: Responsive Email Design and Development

<!-- ::::::::::::::::::::::::: 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>

Multi-column layouts

Page 154: Responsive Email Design and Development
Page 155: Responsive Email Design and Development

.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;

}}

Multi-column CSS

Page 156: Responsive Email Design and Development
Page 157: Responsive Email Design and Development
Page 158: Responsive Email Design and Development

a

Page 159: Responsive Email Design and Development
Page 160: Responsive Email Design and Development

<!-- ::::::::::::::::::::::::: 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> </td> </tr> <tr> <td> ... </td> </tr> </table> </td></tr></table>

</td> <td class="gutter">&nbsp;</td> </tr></table>

Floated tables require Outlook hack

Page 161: Responsive Email Design and Development

.outlook-container-FIX { width:100%;}

.outlook-spacing-FIX { mso-table-lspace:0; mso-table-rspace:0;}

.half-column { border:1px solid #FBFBF9; }

CSS for Outlook hack

Page 162: Responsive Email Design and Development

Buggy!

Page 163: Responsive Email Design and Development
Page 164: Responsive Email Design and Development

Quoi?????

Page 165: Responsive Email Design and Development

Resources

Page 166: Responsive Email Design and Development
Page 167: Responsive Email Design and Development
Page 168: Responsive Email Design and Development
Page 169: Responsive Email Design and Development
Page 170: Responsive Email Design and Development
Page 171: Responsive Email Design and Development
Page 172: Responsive Email Design and Development
Page 173: Responsive Email Design and Development
Page 174: Responsive Email Design and Development
Page 175: Responsive Email Design and Development
Page 177: Responsive Email Design and Development

Source: http://briangraves.github.io/ResponsiveEmailPatterns/

Page 178: Responsive Email Design and Development

Source:

Page 179: Responsive Email Design and Development

Source: https://github.com/mailchimp/Email-Blueprints

Page 180: Responsive Email Design and Development
Page 181: Responsive Email Design and Development

Thank you!

Page 182: Responsive Email Design and Development