Download Going Responsive

Going
Responsive
2015
Optimizing for
a Mobile World
Why Go Responsive?
Email Client Market Share
Welcome to a new era of email design and
development. With an overwhelming number of
devices to consider, taking the time to learn and
adopt responsive design as early as possible will
save you time, money, and resources in the future.
Not to mention continuing to keep the customer
happy and dedicated to your brand.
3% 2%
4%
23%
6%
7%
The mobile experience deﬁnitely matters when it
comes to marketers seizing their chance at making
an impression with their audience. According to
Justine Jordan, Marketing Director at Litmus, having
a poorly designed email can cause up to 80% of
subscribers to delete. And that could make a sizable
dent in anyone’s list!
8%
19%
8%
12%
In this guide, we’ll look at a couple of ways you can
improve the mobile email experience, from
designing with a mobile-ﬁrst approach to enabling
media queries. Pandora’s proverbial box of
responsive design has oﬃcially been opened. Read
on to make sense of it.
Apple iPhone
Outlook.com
Outlook
Apple iPad
Apple Mail
Google Android
Gmail
Windows Live
Windows Mail
Yahoo! Mail
Source: www.emailmarketclientshare.com
First, Some Statistics
90% of Americans are mobile users (about 290 million
people). 52% of Americans use their mobile devices to
send and receive email; this is a 25% increase from 2009*.
In just four years, we have become active participants in
the mobile world. 21% of American mobile owners are
“cell-mostly internet users*.”
52%
Gmail and Yahoo! users are the most mobile-savvy,
with 68% of opens occurring on a smartphone or tablet.
MOBILE OPENS
56% of AOL opens happen on mobile.
67% in Europe
Outlook.com users use mobile about half the time,
with 47% of opens coming from mobile devices**.
In Europe, 91% are mobile users (460 million people).
43% use their mobile for internet every day. 67% use
their mobile device to send and receive emails***.
Sources: *Pew Internet & American Life Project, **Litmus,
***Pew Internet, Cell Internet Use 2013
More Discoveries
• There is overlap in device usage—not everyone is solely a
desktop or solely a mobile user. We read an email on one
device and then revisit it on another.
• Most young adults, non-white, low-income and education
levels are likely cell-mostly internet users.
• Large ticket items are going mobile: job applications,
healthcare data, bank accounts, and school records.
Mobile devices are already the only way for many users
to access the internet.
The Need for Consistency
Consistency is exactly why Mail Chimp, an Email Service
Provider and leader in the email community, is getting rid
of ﬁxed widths in all their templates and editors, and is
replacing them with responsive width attributes.
MailChimp serves over four million users, and adds
approximately 10,000 new customers a day. Their rollover
in 2013 was very successful: of the 70 billion emails they
sent out that year, 65% of them were responsive.
Design for Distraction
Designers need to build within the constraints of the lowest
denominator, whatever that is according to your analytics.
YOUR DEAL TODAY
By and large, consumers may be busy and already
multi-tasking. To get their attention, we need to design for
distraction. An email must work with a user’s lifestyle and
be a streamlined source of usefulness. Successful responsive
design takes into consideration ﬁngers and thumbs; for
example, CTA’s should be no smaller than 46x46px and font
size should be no smaller than 16px so content is readable
at arm’s length.
TOUCH FRIENDLY LINKS
HAWAII SPECIAL
SHORT, DIRECT COPY
ONE-COLUMN LAYOUT
$295 R/T AIR
With a mobile-ﬁrst philosophy, content is key when creating
user experience. Know your purpose and keep the content
meaningful for your selected group. Focus on one thing for
each email to ensure your goal is achieved.
INCREASED FONT SIZES
FROM SEATTLE, WA
BUY NOW
CLEAR CALL TO ACTION
Email designs are not web design layouts. Emails should be to
the point, void of distractions, like navigations and other extra
links or products not pertaining to the email message at the
same time. It’s best to think of your email as an extension of
your website; toggling between the two should be seamless.
If your email is responsive, your website should be as well.
Make it pain-free.
Media Query – What is it?
Not all email clients were made equal - even on the same
device. How an HTML email displays can vary radically
from inbox to inbox. To help solve this problem,
developers use media queries.
Media Query Support in Email Clients
Media Query Support
Client
iOS (iPhone/iPad)
A media query is responsive design’s secret sauce, a CSS
module that will deliver diﬀerent styles to diﬀerent
devices allowing HTML email to render according to the
device that is targeted. It allows the designer to present
the email as consistently as possible across these ESPs,
providing the best experience for each type of user.
Gmail app (iOS + Android)
Problem Solved, Right?
Mailbox (iOS + Android)
Kind of, but there are many other factors and code
workarounds that the designer has to keep in mind when
coding responsive design for mobile devices. And even
still, one ﬁx may well interfere with another attribute
within the code.
Outlook.com (iOS)
And that is why testing, open communication, and time
for workarounds is so vital when considering any form of
email build-outs.
BlackBerry OS 7
Inbox by Gmail app (iOS + Android)
Android 4.x native client
Android Outlook Exchange via native client
Android Outlook.com app
Android Yahoo! Mail app
Gmail (Android Browser)
Outlook.com (Android Browser)
Yahoo! Mail (Android Browser)
Windows Phone 7
Windows Phone 7.5
Windows Phone 8
BlackBerry OS 6
BlackBerry Z10
Kindle Fire native client
Source: Litmus
(See table to the right for a non-exhaustive list of email
mobile devices and their media query support.)
Comprehensive Design Guide
Design Mobile-ﬁrst: Now that the majority of opens occur on
mobile devices (and will do so more and more), designers must
move away from a PSD layout, pixel-perfect, ﬁxed-width,
table-based approach to email design.
Opens By Environment
2011
23
2012
30
36
2013
27
44
Mobile
38
31
18
Webmail
8
26
Employ Summary Text: Many clients attempt to show you the ﬁrst
couple of lines as context instead of just the email's subject. For
optimal summary appearance, avoid using images or other
non-textual markup for the ﬁrst few elements in your email's
DOM.
7
12
Desktop
Email client usage by environment from 2011 to 2013. Note that
the gray represents “undetectable” devices, which increased
dramatically from 2012 onwards because Google’s decision to
cache email images aﬀected detection of both Gmail’s webmail
and mobile email clients.
Leverage Negative Space: The small size of the mobile interface
can lead to a problem where designers cram multiple elements
onto the screen in an attempt to make the most out of the
available space. The use of negative space helps screen elements
stand out and, according to Apple "can also impart a sense of calm
and tranquility."
Design More Elements and Fewer Layouts
Good Content Trumps All: If a message didn’t work for
you on standard platforms, it won’t work in mobile,
either. Use a message you know works.
A
Make It Easy to Read: Long paragraphs are hard enough
to read on a 19-inch monitor and become a scrolling
nightmare when they shrink down to 320 pixels. Keep
paragraphs short so readers with limited time to read
can easily skim to ﬁnd out what to do next.
B
A
B
Watch Your Images: Images are one of the biggest
challenges to creating responsive layouts in email.
E.g., An image with too many words can be unreadable
on a small screen.
ENLARGE FONTS
A
B
C
D
F
B
E
F
C
G
C
D
E
4 KNOW YOUR SCALE
1
To avoid illegible fonts, strive for a
body copy minimum of 16px and
headlines of 22px+
A
C
Avoid the horizontal scroll. Be sure
to scale the email to a minimum
of 320px wide.
YOUR DEAL TODAY
1 HAWAII SPECIAL
4
USING IMAGES
2
Use images carefully and be sure
they can be “read” at a small size.
5
2
$295 R/T AIR
FROM SEATTLE, WA
CALL TO ACTION
3
3
THINK THUMBS! Your CTAs should
be front and center with a
minimum size of 44x44px.
Be short, concise, and to the
point, making sure your copy is
direct but still approachable.
5
BUY NOW
CUT TO THE CHASE
6
6
BREATHING ROOM
The use of negative space helps
screen elements stand out and
makes them more legible.
Think Beyond the Click. If you have an amazing, responsive email, then you also need an amazing, responsive landing page.
It is only logical that if the reader that is viewing your email on a tablet or smartphone, they will be viewing the landing page
on that device too. That said, if you don’t have a responsive website there is no reason you should let that stop you from
having a responsive email. If you create a message that is enjoyable and engaging your users are more likely to come back to
your message when they have more time to sit down with a laptop or desktop computer.
Shaw + Scott is a digital communications agency with a passion for customer relationship
marketing. We specialize in strategic, creative and technical solutions to help deﬁne, craft and
support your email, mobile, social and web campaigns—all tailored to your brand, marketing
objectives, and production realities.
If you would like to learn more about the services we oﬀer, please email or give us a call at:
[email protected]
206.709.7790

Download Report