mobile responsive email design
Post on 29-Jun-2015
502 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
WEB BROWSING
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
So what happened then?Media Query
645 PX
Max Device Width
@media screen and (max-device-width: 645px), screen and (max-width:645px)
18
So what happened then?Media Query
645 PX
Header Switch
Desktop Version
table td[id='banner-switcher'], table td img[class~='image-desktop']Plus a lot more code here….
19
So what happened then?Media Query
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
So what happened then?Media Query
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
So what happened then?Media Query
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>
23
24
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.
26
27
28
29
30
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)
35
36
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 sales@newzapp.co.uk
Smart Insights member resources: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
top related