redesigning email campaigns for mobile · mobile & responsive design . the mobile landscape ....
TRANSCRIPT
Redesigning Email Campaigns for Mobile
Kim Mateus Digital Marketing Strategist @KimMateus
Calie Brennan Senior UX Designer @CalieDesigns
Agenda
Mobile & Responsive Design
The Mobile Landscape
Understanding your mobile recipients’ experiences
Current Design Trends
The Mobile Landscape
Source: http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/
Top Activities on Smartphones
Email Client Share
Source: Litmus Email Analytics http://emailclientmarketshare.com/
Calculated from 835 million opens in August 2014
Email Opens Over the Years
Source: Litmus Email Analytics http://emailclientmarketshare.com/
Current Mobile Email Trends More email is read on mobile than on a
desktop email client.
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)
Track Your Mobile Recipients
Analyze User Behavior
Where are the highest mobile open rates?Which list segments?
Analyze User Behavior
Where are the highest mobile open rates?What day of the week? Time of day?
Analyze User Behavior
Where are the highest mobile open rates?Which type of email?
Newsletters
Promotions
Alerts
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
The First Impression
Default Email App Displays A
ndro
id 4
.2
iOS
7
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
What’s Hot What’s Not
In email design - 2014
One Column Not Two
Excerpts Not Entire Articles
Flat not Skeuomorphic
Buttons Not Links
Background Colors not Borders
Responsive Design & Email
Web vs. Email Design Front End Developer Reaction..
When asked to do an HTML email
http://frontenddevreactions.tumblr.com/
What is it?
• Adapts to multiple screen widths
• Targets specific elements in your message to improve readability
• Requires CSS3 media queries
Responsive Design
What is possible? Responsive Design
• Manipulate Layout • Condense Content • Alter Image Size • Improve Readability
Layout Manipulation Responsive Design Patterns
Stack Hide Expand
Image Options Responsive Design Patterns
Scale Swap Crop
Improve Readability Responsive Design Patterns
• Increase Text Size • Increase Line
Height • Whitespace/Backgr
ound colors
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
Responsive Design Resources
http://www.responsiveemailresources.com/ http://www.responsiveemailpatterns.com/
http://www.litmus.com/ https://www.realmagnet.com/PDF/Real_Magnet_Redesigning4Mobile.pdf
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.
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
Test Test Test There are tons of email client/web browser/OS combinations be sure to check out your design across all devices
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
Questions?
@realmagnet
Calie Brennan [email protected] 240-743-2991 Kim Mateus [email protected] 240-743-2954