redesigning email campaigns for mobile · mobile & responsive design . the mobile landscape ....
TRANSCRIPT
![Page 1: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/1.jpg)
Redesigning Email Campaigns for Mobile
![Page 2: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/2.jpg)
Kim Mateus Digital Marketing Strategist @KimMateus
Calie Brennan Senior UX Designer @CalieDesigns
![Page 3: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/3.jpg)
Agenda
Mobile & Responsive Design
The Mobile Landscape
Understanding your mobile recipients’ experiences
Current Design Trends
![Page 4: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/4.jpg)
The Mobile Landscape
Source: http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/
![Page 5: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/5.jpg)
Top Activities on Smartphones
![Page 6: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/6.jpg)
Email Client Share
Source: Litmus Email Analytics http://emailclientmarketshare.com/
Calculated from 835 million opens in August 2014
![Page 7: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/7.jpg)
Email Opens Over the Years
Source: Litmus Email Analytics http://emailclientmarketshare.com/
![Page 8: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/8.jpg)
Current Mobile Email Trends More email is read on mobile than on a
desktop email client.
![Page 9: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/9.jpg)
However…
Mobile email will account for 15 – 70% of your email opens, depending on your target audience, product and email type. - emailmonday -Ultimate Mobile Email Stats (2014)
![Page 10: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/10.jpg)
Track Your Mobile Recipients
![Page 11: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/11.jpg)
Analyze User Behavior
Where are the highest mobile open rates?Which list segments?
![Page 12: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/12.jpg)
Analyze User Behavior
Where are the highest mobile open rates?What day of the week? Time of day?
![Page 13: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/13.jpg)
Analyze User Behavior
Where are the highest mobile open rates?Which type of email?
Newsletters
Promotions
Alerts
![Page 14: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/14.jpg)
Of those who open on mobile…
Only a quarter (23%) of campaigns initially opened on mobile devices were later opened a second time. – Campaign Monitor, Email Interaction Across Desktop (2014)
80% of people delete an email (viewed on mobile) if it doesn’t look good on their mobile device. – Litmus, The How-To Guide to Responsive Email Design
![Page 15: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/15.jpg)
The First Impression
![Page 16: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/16.jpg)
Default Email App Displays A
ndro
id 4
.2
iOS
7
![Page 17: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/17.jpg)
How do we improve this experience?
• Vertical Scrolling instead of horizontal
• Eliminate the need to zoom
• Creating content blocks that are easy to scan and digest
• Clear tappable call-to-action
• High Contrast
![Page 18: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/18.jpg)
What’s Hot What’s Not
In email design - 2014
![Page 19: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/19.jpg)
One Column Not Two
![Page 20: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/20.jpg)
Excerpts Not Entire Articles
![Page 21: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/21.jpg)
Flat not Skeuomorphic
![Page 23: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/23.jpg)
Buttons Not Links
![Page 24: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/24.jpg)
Background Colors not Borders
![Page 25: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/25.jpg)
Responsive Design & Email
![Page 26: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/26.jpg)
Web vs. Email Design Front End Developer Reaction..
When asked to do an HTML email
http://frontenddevreactions.tumblr.com/
![Page 27: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/27.jpg)
What is it?
• Adapts to multiple screen widths
• Targets specific elements in your message to improve readability
• Requires CSS3 media queries
Responsive Design
![Page 28: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/28.jpg)
What is possible? Responsive Design
• Manipulate Layout • Condense Content • Alter Image Size • Improve Readability
![Page 29: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/29.jpg)
Layout Manipulation Responsive Design Patterns
Stack Hide Expand
![Page 30: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/30.jpg)
Image Options Responsive Design Patterns
Scale Swap Crop
![Page 31: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/31.jpg)
Improve Readability Responsive Design Patterns
• Increase Text Size • Increase Line
Height • Whitespace/Backgr
ound colors
![Page 32: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/32.jpg)
Responsive Considerations
Gmail Mobile App Yahoo! Mobile App Outlook MobileApp
Responsive design is not supported by…
Responsive techniques are compatible with only some devices or email clients
![Page 33: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/33.jpg)
Responsive Design Resources
http://www.responsiveemailresources.com/ http://www.responsiveemailpatterns.com/
http://www.litmus.com/ https://www.realmagnet.com/PDF/Real_Magnet_Redesigning4Mobile.pdf
![Page 34: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/34.jpg)
Don’t have the resources to convert your emails to responsive design at the moment?
Try mobile aware!
Design with mobile in mind, but without the hassle of extra code.
![Page 35: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/35.jpg)
Quick Mobile-friendly Updates
• One Column • Plenty of padding • Larger font-sizes - at least 18pt • Clear separation of content
– Background Colors, Dividers, Headers
• Spread out your clicks
![Page 36: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/36.jpg)
![Page 37: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/37.jpg)
Test Test Test There are tons of email client/web browser/OS combinations be sure to check out your design across all devices
![Page 38: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/38.jpg)
Mobile-Friendly Landing Pages
• One Column • Plenty of padding • Larger font-sizes - at least 18pt • Clear separation of content
– Background Colors, Dividers, Headers
• Spread out your clicks
![Page 39: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/39.jpg)
![Page 40: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/40.jpg)
![Page 41: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/41.jpg)
![Page 42: Redesigning Email Campaigns for Mobile · Mobile & Responsive Design . The Mobile Landscape . Understanding your mobile . recipients’ experiences . Current Design Trends . ... In](https://reader034.vdocuments.us/reader034/viewer/2022050203/5f5705309387ab297979dbc4/html5/thumbnails/42.jpg)
Questions?
@realmagnet
Calie Brennan [email protected] 240-743-2991 Kim Mateus [email protected] 240-743-2954