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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

Similaire à Responsive Email Design and Development

Similaire à Responsive Email Design and Development (20)

Dernier

Dernier (20)

Responsive Email Design and Development