Understanding Responsive Email Design Vision6

Summary

Understanding Responsive
Email Design
A How To Guide for Agencies
If an email is not
responsive... 80 %
of consumers will
delete the email
34
of consumers
%
Currently, won’t buy
47 27 %
of email is
opened on a
% mobile device,
70
with some
brands seeing of consumers will
open rates at % simply unsubscribe
INTRODUCTION
Because email uses HTML and CSS, the same
technologies as the web, many designers assume
that the design approach will be very similar

Unfortunately, this just isn’t the case

While the web standards movement has
browsers, the same movement has not
occurred to modernize email clients. Email
designers are burdened with email clients
that use old rendering engines. These email
clients lack the standards compliance of
modern browsers, making it difficult to achieve
consistent results with many common
responsive web design techniques. An email
opened in Gmail can look very different from
one opened in Outlook or Apple Mail

In this guide, we will outline 7 simple steps to
create a modular, reusable framework to
achieve responsive email success. To help you
get started, we’ve created an example
responsive email template which uses many of
Similar to web development, you need to “cut the mustard”
and determine the baseline email client which you will
support. It’s impossible to design for the countless
the label of “dark
determine which email clients make the most sense for you
to support

art” from building
top email clients by usage and market share. Vision6 releases
a monthly metrics report that can provide you with the stats
you need

responsive emails,
If you have an ESP, review the data on open rates by email
client, and determine which are most important to support
for your recipients

because “responsive support older, less common email clients. If you’re in a
email client (“the CEO uses Outlook”), research the specific
email design” accordingly

some unavoidable problem children, namely Outlook
IS “email design”

(especially 2007, 2010 and 2013) and Gmail. Outlook is the
used as the rendering engine for displaying HTML emails in
Outlook 2013

Webmail clients, including the popular Gmail, are also
STEP ONE: which could interfere with the way it chooses to render an
SET YOUR BASELINE email. This strips out JavaScript and Flash as well as
and tags

STEP TWO: One column emails are
SIMPLI FY simple to put together,
look good, and work nice
as a responsive template
YO U R L AYO U T because there is minimal
reflow required to make
To reduce the complexity of your layout, the content work in a
narrower viewport

design with the smallest number of columns
possible

Two column emails are
still fairly easy to
support in a smaller
viewport size with
some trade-offs

Three or more columns
will mean messier
markup, and will
cause problems for
some mobile clients

STEP THREE: NORMALIZE
FOR KNOWN BUGS
Just as we accommodate for known bugs across web browsers using
normalized CSS, the same principle can be applied to email

The good news is, you don’t need to reinvent the wheel. The design
community has already discovered fixes for a whole variety of issues
pplying
normalizing styles in your email template, you can create a standard
which irons out many of these known rendering issues

Our e
normalizing styles which
S T E P F O U R : U S E TA B L E S
TO BUILD YOUR EMAILS

using table cell stacking allows for more
consistency

table-based layouts have near-universal support Hello, world! HTML emails are built using tables because

We recommend building a fluid layout using one
fixed width as the containing column size. The
containing column size is the width at which
your email looks the best, and will serve as our
default layout for wider viewports

the basic building block for your responsive
email template. We have set the column width
fixed width in our responsive email template

USE A FLUID
C O N TA I N E R W I D T H
We are frequently asked by designers if it is possible to use
a media query to create a responsive email template. The
600 PX 600 PX short answer is yes, but it won’t be supported in all clients,
so shouldn’t be relied upon as the only means for your
content to scale

We recommend taking a hybrid approach, where your basic
TABLE smaller than the column size, then use a media query as a
progressive enhancement for those clients which support it

TABLE TABLE
You’ll see in our example template that wherever we fix a
width, we also apply a .responsive-container class, which
TABLE sets the width to 100% when our media query fires

Unlike responsive web design, where we commonly design
for a number of breakpoints at different device sizes, in
responsive email design our primary concern is that our
most important factor is how the email looks when it is first
opened, not how it scales up and down

progressive enhancement to introduce nice-to-have
the web, we just need to make sure that the fallback style=”display:block; border:16px solid #006666;
works sufficiently well on those clients below our border-radius:3px; color:#FFFFFF; background-color:
baseline. #006666;”>Rounded button
some simple CSS, reminiscent of what we might use Webfonts
on the web. The trick here is to use an extra-wide /* Wrap webfonts in a media query so Outlook ignores
border instead of padding to ensure the whole them, otherwise it falls back to Times New Roman. */
@media screen{
@font-face{
Webfonts have a reasonable level of support in email font-family: ‘Source Sans Pro’;
font-style: normal;
clients, so feel free to include them. Just ensure that font-weight: normal;
you’ve specified a font stack that contains at least src:
one default font. We can wrap our font-face url:(https://fonts.gstatic.com/s/sourcesanspro/v9/
0De1aHBYDBqgeIAH2z1NV_2ngZ8dMf8fLgjYEouxg.woff2)
format(’woff2’);
back to an incorrect default. }
}
STEP FIVE:
USE PROGRESSIVE ENHANCEMENT
STEP SIX:
STYLE INLINING
behaviour when applying CSS

To maximise the chance that our styles are applied accurately by all email
clients, it is advisable to use style inlining. “Inlining” refers to copying a
matches an element

sending, and there are inlining tools available online

STEP SEVEN:
TESTING
Before sending your email, it is always
advisable to test your code to see how it
displays in a variety of email clients. Even if
you follow all of these steps, things can and
up issues before your email goes out

If resources weren’t an issue, you could build a
which allows you to preview and test your code
used email clients. Vision6 has an inbuilt Litmus
previews

CONCLUSION
This guide has provided you
techniques necessary to design responsive emails. By employing
responsive email techniques you should find a significant increase
in user engagement

Remember: if in doubt, keep it simple

To get started, go to vision6.com/responsiveemailtemplate to see
what the template looks like live and download it for yourself!

Responsive web design techniques. An email opened in Gmail can look very different from one opened in Outlook or Apple Mail. In this guide, we will outline 7 simple steps to create a …

Download Now

Documemt Updated

Popular Download

• › Understanding Poetry 5th Grade Introduction To Writing Poetry
• › Understanding Your Request For Information Letter
• › Us Small Business Administration Counseling Information Form
• › Using Google Slides To Create Flyers Antioch University
• › Using The Templates For Word 2003 Manitobaca
• › University Services The Advising Ecosystem At Cmu
• › Uscis Form I 9 University Of Central Arkansas
• › Understanding Responsive Email Design Vision6
• › Udx Shopping Using Punch Out Catalogs
• › University Services Coursecatalogwebcmuedu
• › Udx Shopping Using Hosted Catalogs University Of Delaware
• › Uploading Tests Or Test Pools In Blackboard Using Excel
• › Using The New Nursing Practice Assessment Document
• › Us Army Marketing And Engagement
• › User Instructions For Authorized Personnel Virginia
• › User Guide For Work Order Control Rma Depot Repair
• › Us Small Business Economic Profile Small Business
• › Using Microsoft Teams To Manage Care Requests
• › Using Semantic Technologies To Manage A Data Lake Data
• › Uscis Form I 9

Frequently Asked Questions

What is a responsive email?

A responsive email is an email that renders well across all devices - desktop, mobile, and tablet in all email clients. The email is made responsive using fluid images, fluid tables, and media queries to control and adjust the email layout, images, text size, CTA buttons and maintain a smooth flow across different devices, OS, and email clients.

How do fluid tables and images work in responsive emails?

Responsive emails use fluid tables and images to make content flow across different screen sizes. How? By using CSS media queries to change fixed-width tables and images on desktops into fluid ones for smaller screens. Let’s say we have a section of an email with an image, headline, and bit of copy. The code looks like this:

What is a responsive design?

A responsive – also called adaptive – design is a design that adapts and displays properly on screens of various sizes. For example, avoiding an image being wider than the screen or the user having to increase or reduce the size of text to be able to read it.

What makes a good email design?

Use your email spacers and dividers to give your images, text and CTA buttons room to breathe. This will help establish a clear hierarchical flow to lead the eye. Think of your email design as a shop window – you want to give your audience a sneak peek of what you have to offer in the hopes of enticing them to explore further.