mobile responsive email design

Digital Marketing Priorities 2014 Brought to you by:

How and Why Mobile Responsive Design is essential to today's email marketing

Darren Hepburn - @DarrenHepburnSales DirectorNewZapp Email Marketing

51% of all emails are opened on a mobile device.Is your email marketing looking its Sunday best or is it letting you down?

#PlanToSucceed

About SmartInsights.comPlan, Manage and Opimize your Marketing

Email capability review - free downloadwww.slideshare.net/Smart-Insights

http://www.smartinsights.com/solution/email-marketing-strategy

http://www.slideshare.net/Smart-Insights



3

Agenda

Responsive Email Design Should I worry about it? The science User engagement Does it work? Q & A

4

Who is this guy?Darren Hepburn - @DarrenHepburnSales DirectorNewZapp Email Marketingwww.NewZapp.co.uk

Leader of the sales, support & marketing team

at NewZapp

Email Marketing consultant for over 10 years,

Trade show speaker, blogger and training

specialist.

5

Responsive Email Design

One Email

All Devices

A code driven reaction to the

screen width of the device your email is

been read on.

6

Quick straw poll

How many of you use a mobile responsive template/design when building email campaigns

Yes No Thinking about it I shamefully don’t do any email marketing currently

7

51

%

MOBILEDEVICES

OF ALL EMAILS ARE OPENED ON

8

Most popular activity on mobile

EMAIL

WEB BROWSING

FACEBOOK

MAPS / DIRECTIONS

GAMES

GENERAL SEARCH

SHARE / POST PHOTOS

78%

73%

70%

64%

60%

53%

57%

9

49% READ EMAILS ON A MOBILE WHEN WAKING UP

55% READ EMAILS ON A MOBILE BEFORE GOING TO BED

63% READ EMAILS ON A MOBILE DURING THE WEEKEND

32% READ EMAILS ON A MOBILE WHILST COMMUTING

58% READ EMAILS ON A MOBILE ON HOLIDAY

Apsis “The email Barometer, Email on mobile devices” (2013)

10

Quick straw poll

What mobile phones are we carrying today? iPhone Samsung Sony HTC Blackberry Other

11

Who’s the Daddy?

10 Windows Mail 2%

9 Windows Live Mail 3%

8 Yahoo! Mail 5%

7 Outlook.com 6%

6 Gmail 6%

5 Apple Mail 8%

4 Apple iPad 12%

3 Google Android 12%

2 Outlook 14%

NUMBER ONE

AppleiPhone

26%

Source: Litmus.com

12

71

%

DELETED

OF EMAILS THAT DO NOT DISPLAY CORRECTLY

13

The Science

@mediaTelling the content how to display based on the width of the screen it’s

been read on

<style type="text/css"> @media only screen and (max-device-width: 480px) { /* mobile-specific CSS styles go here */ }

/* regular CSS styles go here */</style>

14

All DevicesOne Email

15

All DevicesOne Email

16

So what happened then?Media Query

17


645 PX

Max Device Width

@media screen and (max-device-width: 645px), screen and (max-width:645px)

18


645 PX

Header Switch

Desktop Version

table td[id='banner-switcher'], table td img[class~='image-desktop']Plus a lot more code here….

19


645 PX

Stacked Content*[class~='responsive-sub'], *[class~='responsive-sub-centered'] {float:left !important;width:100% !important;height:auto !important;text-align:left !important;}*[class~='responsive-sub-centered'], table td[class~='responsive-sub-centered'] img {text-align:center !important;vertical-align:top !important;}*[class~='responsive-sub-centered'] table {float:none !important;margin:0 auto !important;}

20


645 PX

table td[class~='text-to-12px'] {font-size:12px !important;}table td[class~='scale-me'] img {width:100% !important;height:auto !important;}

Bigger TextImage Scaled

21


645 PX

*[class~='hide-me']{display:none !important;}

Hidden Areas

Desktop Version

22

<!doctype html><html><head><title>NewZapp Email Marketing</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="format-detection" content="telephone=no" /><STYLE type="text/css">�.ReadMsgBody {

width: 100%;}.ExternalClass {

width: 100%;}td a, td a:link, td a:visited, td a:hover, td a:active, div a, div a:link, div a:visited, div a:hover, div a:active {

color:#115599;text-decoration:underline;

}td span.bigger-text-plain-links a, td span.bigger-text-plain-links a:link, td span.bigger-text-plain-links a:visited, td span.bigger-text-plain-links a:hover, td span.bigger-text-plain-links a:active {

text-decoration:none !important;}img {

border:none !important;} @media only screen and (max-width: 645px) {table[class='responsive-table'] { width:100% !important;}table[class='responsive-sub'], td[class='responsive-sub'], td[class='responsive-sub-margin-below'] { float:left !important; width:100% !important; height:auto !important;}

td[class='responsive-sub-margin-below'] { margin-bottom:15px !important; border-width:0px !important;}table[class='responsive-sub-with-margin-RL'] { width:95% !important;}td[class='responsive-sub-centered'], td[class='responsive-sub-centered'] img { text-align:center !important; vertical-align:top !important;}td[class='responsive-sub-centered'] img, td[class='responsive-sub-centered'] table { display:inline-block !important;}td img { width:auto !important; height:auto !important;}*[class='no-resize'] {width:auto !important;}table[class='table-with-margins-LR'] { width:95% !important;}td span[class="bigger-text"], td span[class='bigger-text-scale-img'] { font-size:1.2em !important;}td span[class='bigger-text-scale-img'] img { width:100% !important;}td[class='hide-me'] { display:none !important;}}</STYLE></head>

25

User Engagement

TRASH

Remember what happens to 71%of emails that don’t play nice in

mobile devices?

Engagement rates improve when emails are optimised for mobile screen sizes.

When people are busy they need clear, easy to read messages or they don't respond.

31

Quick straw poll

Is your website mobile responsive? Yes No Nearly

32

Good User Engagement

Make sure your landing area is mobile responsive too.

Images are on automatically – so use them Watch your text links More meat less veg Up down good – left right bad You’re a reader too – what got you clicking

33

Does it work?

1st

2nd3rd

EMAIL MARKETING GENERATED 26.7% OF SALES ON MOBILE

COMPARED TO 23.1% ON TABLET AND 20.9% ON DESKTOP

26.7%23.1

%20.9

%

Custora “E-commerce Pulse Mobile report” (2014)

34

Email Marketing drives mobile purchases – social media doesn’t.

Custora “E-commerce Pulse Mobile report” (2014)

37

Summary – questions please! 1. Responsive Email Design 2. Should I worry? 3. The science 4. User engagement 5. Does it work?

@NewZapp NewZapp.co.uk @DarrenHepburn [email protected]

Smart Insights member resources:http://bit.ly/smarteremail

http://bit.ly/smarteremail

38

Further Resources

www.NewZapp .co.uk

blog.NewZapp.co.ukwww.emailmonday.com

www.litmus.com

Get in touch with @DarrenHepburn for a free library of readyto go mobile responsive templates or a full demo of

NewZapp Email Marketing