1

Click here to load reader

The Growing Adoption of Mobile-Friendly Email Design #Infographic

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: The Growing Adoption of Mobile-Friendly Email Design #Infographic

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

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 asingle-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 o�ering 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 di�ers 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 productgrids 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