Responsive Email Design and Development

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_medium=email

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

TS;DR

(too small; didn’t read)

scaled images +
readable type

=
single column responsive

Step 3

Manage the ﬂow of content

Step 4

Design for mobile viewports

Not all mobile clients
support @media queries

Not all mobile clients scale to ﬁt

Design for the upper left “mobile fold”

Step 5 Create large touch targets

Step 6

Communicate structure & hierarchy

What is this and why do I care?

Step 8 Design your microcontent

Carefully choose the From: name

Shorten and front-load subject lines

Variable support for HTML + CSS

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

Stackable tables
<table border="0" cellpadding="0" cellspacing="0" style="width:600px;">
<tr>
<td style="width:300px;">Lorem Ipsum</td>
</tr>
</table>

<tr>
</tr>
</table>

<tr>
</tr>
</table>

Nested tables

<table border="0" cellpadding="0" cellspacing="0" class="stacking-table">
<tr>
<td class="gutter"> </td>
<td class="center">

<table border="0" cellpadding="0" cellspacing="0" class="two-column">
<tr>
<td class="column">...</td>
</tr>
</table>
</td>
</tr>
</table>

Avoid colspan and rowspan attributes
<tr>
<td colspan="3" style="width:600px;">You will regret using this colspan!!!</td>
</tr>
<tr>
</tr>
</table>

Deﬁne <table> + <td> widths

<tr>
</tr>
</table>


<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td style="width:50%;">...</td>
<td style="width:50%;">...</td>
</tr>
</table>

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

Deﬁne image width + height
<img src="..." width="150" height="100" />

HTML entities

© • — é ñ

激 光 這

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; }
font-size:10px; height:10px; line-height:10px; }

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

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

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

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

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>

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

Combine for ﬂawless text layout
<div class=”h1”>H1 Header</div>
<div class=”spacer-lg”> </div>
<div class=”p”>Paragraph...</div>
<table>
<tr>
<td class=”h1”>H1 Header</td>
<td class=”spacer-sm”> </td>
<td class=”p”>Paragraph...</td>
</tr>
</table>

Partially supported CSS
/* Padding */
img { padding:5px; }
td { padding:10px; }
/* Not fully supported on table, div or p elements */

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

Background image hack
<td background="http://.../background-image.gif" bgcolor="#f6f6f6" width="200" height="200" valign="top">

<div>
</div>

</td>

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

Button hack
<div>

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

Microsoft Outlook 2007, 2010, 2013...

Conditional statements for Outlook

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://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
{
...
}

{
...
}

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

Attribute selectors
<head>
<style type="text/css">
/* Fixed Styles */
.container { ... }
.column { ... }
.gutter { ... }
/* Responsive styles */
{
[id=container] {
...
}
[class=preheader] {
...
}
span[class=highlight] {
...
}
}
</style>
</head>

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] {
}
[class=gutter] {
}
}

!important declarations

.container { width:600px; }
.column { width:560px; }
.gutter { width:20px; }


@media only screen and (max-device-width: 599px)
{
[class=container] {
}
[class=column] {
}
[class=gutter] {
}
}

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

Multi-column layouts

<table border="0" cellpadding="0" cellspacing="0" class="stackable-table">
<tr>
<td class="center">

<table border="0" cellpadding="0" cellspacing="0" class="two-column">
<tr>
</tr>
</table>
</td>
</tr>
</table>

Multi-column CSS
.two-column { width:600px; }
.two-column .column { width:300px; }

{
[class=two-column] {
}
[class=two-column] [class=column] {
display:block !important;
}
}

Floated tables require Outlook hack

<table border="0" cellpadding="0" cellspacing="0" class="full-column">
<tr>
<td class="center">
<table class="outlook-container-FIX"><tr><td>

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

<table align="left" border="0" cellpadding="0" cellspacing="0" class="column-half">
<tr>
<td>
<div class="outlook-spacing-FIX">
...Content goes here
</div>

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

Source: https://github.com/ladyheatherly/responsive-email/blob/master/responsive-email-template.html

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

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

Responsive Email Design and Development

Responsive Email Design and Development

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Responsive Email Design and Development

Similar to Responsive Email Design and Development (20)

Recently uploaded

Recently uploaded (20)

Responsive Email Design and Development