Since last October, we’ve been tracking the mobile-friendliness of the promotional emails sent by a group of nearly 160 B2C brands. We saw a big bump in the adoption of mobile-aware and responsive design during the holiday season and this summer we expect serious progress, followed by another jump in adoption as we approach Christmas again. Beyond detailing the adoption rates we’ve observed, this infographic explains the difference between desktop-centric design, mobile-aware design, and responsive design—and the future outlook for each of these. It also includes links to examples of mobile-aware and responsive design from the Email Swipe File.

1. Source: All data based on observational research performed by ExactTarget Marketing
Cloud involving approximately 160 B2C brands using anonymous email accounts.
With the majority of emails now being read on mobile devices
and mobile-users regularly unsubscribing from or deleting
emails designed solely for desktops, more brands are adopting
mobile-friendly email design techniques—whether it’s
mobile-aware design or more sophisticated responsive design.
No matter how mobile-friendly your emails are, if your website landing pages
are not mobile-friendly as well, then it’s all for naught.
Desktop-Centric ResponsiveMobile-Aware
Chart
Key:
A significant portion of those brands that still employ desktop-centric email
designs have adopted some half-measures toward becoming more
mobile-friendly—such as applying mobile-aware design principles to their
primary message only. These are signs of more definitive actions to come.
Representing the pre-mobile status quo, desktop-centric email design is
optimized for viewing on large monitors. Desktop-centric designs...
Desktop-Centric
Future Considerations
Mobile-aware design uses basic techniques to create a single email that functions
well across a range of screen sizes, but is deferential to smartphones.
Making your email template mobile-aware involves three key elements:
Employing a
single-column layout
The Growing Adoption of
Percentage of B2C brands using mobile-unfriendly desktop-centric design or
mobile-friendly mobile-aware or responsive design for their promotional emails
Mobile-Friendliness of Emails
As tablets and other touchscreens
replace laptops and desktops,
mobile-aware design will likely
replace mouse-dependent
desktop-centric designs
completely within a few years.
Future Considerations
“Responsive design” has become a general
term for a basket of advanced techniques that
serve up versions or renderings of an email
that are optimized for particular screen
resolutions or email clients.
Whether it’s fluid, liquid, scalable, adaptive or
truly responsive design or powered by live
content, all of these techniques involve extra
email design and coding. But the result is email
messaging that looks good and functions
properly on a range of devices.
Responsive
Email service providers are increasingly
offering responsive email templates,
making it much easier for brands to take
advantage of this technology. More than
anything else, the productizing of
responsive design is what will make it a
mainstream tactic this year.
Responsive design also enables you to
create “mobile-targeted content,” where the
content of your email differs depending on
the device it’s read on. For instance, mobile
readers might see a banner promoting your
mobile app, whereas desktop readers of the
same email would not.
Future Considerations
Using large text, images
and buttons
Spacing out links and
buttons to be easily tapped
(Including navigation, social,
and administrative bar items)
1 2 3
Email Design
Have small, tightly
clustered links and
buttons well suited
to mouse clicks, but
not easily tapped
with a fingertip.
Require mobile
users to zoom and
swipe left and right
as well as up and
down to interact
with emails.
Mobile-Aware
Don’t Forget Landing Pages
2-column product
grids are okay
Mobile users are very likely to abandon
websites that are not optimized for mobile.
Even worse, they’re quite likely never to
visit your site again.
Develop a comprehensive plan
to make both your emails and
website mobile-friendly today.
Amazon.com:
extg.co/mobileaware1
Reiss:
extg.co/mobileaware2
Vizify:
extg.co/mobileaware3
Examples of
Mobile-Aware Design from
The Email Swipe File
AT&T:
extg.co/responsiveemail1
Toms:
extg.co/responsiveemail2
Foursquare:
extg.co/responsiveemail3
Examples of
Responsive Design from
The Email Swipe File
0%
10%
20%
30%
40%
50%
60%
70%
80%
Oct 2013 Dec 2013 Feb 2014 Apr 2014 Dec 2014