SlideShare a Scribd company logo
1 of 38
Successful Email Design Approaches That Work For All Devices Justine Jordan  |  Litmus  |  @meladorri #SPOP11
Successful Email Design Approaches That Work For All Devices
Introductions… Justine Jordan Marketing Director, Litmus justine@litmus.com |  @meladorri Presentation available at www.slideshare.net/litmusapp
Email is moving beyond the desktop Subscribers are viewing emails in a diverse ecosystem of webmail, desktop, mobile and social contexts. Today we’ll talk about: Current status and predictions for the future Options for mobile email Best practices in mobile email design Agenda
9.29% OF OPENS ARE ON A MOBILE DEVICE 2-15% on individual campaigns 30%+ for niche audiences Source: Litmus Email Analytics, March 2011
Mobile Opens by OS iPhone accounts for 85.95%of iOSopens; iPad for 14.05%  Source: Litmus Email Analytics, March 2011
Top Ten Email Clients by Opens Source: Litmus Email Analytics, March 2011
Your mileage may vary… Source: Email Analytics for Litmus Newsletter, February 2011
Smartphone OS Share Predictions Source: IDC Worldwide Quarterly Mobile Phone Tracker, March 29, 2011
Do you have a mobile audience? Web analytics, user agent detection, surveys and preference centers can help you decide.
The analytics make a case User agent detection Web analytics Clicks on mobile link Existing mobile site/app Existing SMS program Transactional emails for “on the go” situations In-store coupons Mobile purchases Travel updates Urgent communications Making the mobile email choice
Display and Support Challenges There are no mobile email standards! *HTML or images enabled by default ◐ Blackberry HTML email may be enabled, but is not on by default in 4.5/5. The ability to download images automatically is an option. Blackberry 6 has webkit support and displays HTML email by default, but a prompt appears to download external images ‡ inconsistent wrapping and scaling of text
Display and Support Challenges Android alt text Symbian images off Symbian images on
Display and Support Challenges WinMo Preview WinMo images off WinMo images on
Link to a “mobile-friendly” text version Usually a modified plain text version Often the first step in a testing phase Requires an extra click No longer truly mobile friendly Link to mobile-specific version Requires extra resources (more design/production time) Requires an extra click CSS @media queries and scalable layouts No extra click Suitable for newer phones with HTML capability May require more advanced coding know-how Mobile Email Options
Link to “mobile friendly” text version Why the extra click?? web site mobile version email
Link to “mobile friendly” text version Mobile “friendly”??
Link to mobile-optimised version
Scalable design
Scalable design elements ,[object Object]
Larger fonts
Finger-sized targets,[object Object]
Consider context & subscriber experience
Consider context & subscriber experience Nice touch! Direct to mobile site
Consider context & subscriber experience
Facebook Messages FBM viewed on the iPhone app have functioning links and better HTML support. “Other” inbox does not appear in Android or WinMo app
Facebook Messages: Another “Device”? Use caution with divider lines FBM may cut off footers,  unsubscribe information
Monitor for @facebook.comaddresses Messages are grouped together by from name (i.e. info@acme.com) No subject lines Commercial email goes in the “other” folder Text Version Tips Drop navigation bar and submessages Place the most important message first Line length < 60 characters to avoid undesirable line breaks Use capitalisation, line breaks, dashed lines and other devices to visually separate different messages.  Facebook Messages
“Best Practices” in Mobile Email “Methods and techniques that have consistently shown results superior than those achieved with other means, and which are used as benchmarks to strive for. There is, however, no practice that is best for everyone or in every situation, and no best practice remains best for very longas people keep on finding better ways of doing things.”  - BusinessDictionary.com “The idea is that with proper processes, checks, and testing, a desired outcome can be delivered more effectively with fewer problems and unforeseen complications.” - Wikipedia
“Best Practices” in Mobile Email Single column design Large(r) fonts Pressable buttons & “thumb navigation” Short, direct content Clear + direct calls to action Eliminate or hide low priority content Remember subscriber experience & context is key Design for mobile first!
Beware text resizing
Beware text resizing After (Android) Before (Android) Plan for font sizes to auto-adjust (13px minimum on iOS) Use CSS “-webkit-text-size-adjust: none” for iPhone and Android, possibly BlackBerry 6
Elevate the Content People Care About Think Top Down Brand Appropriately Use UI Elements Consistently Make Targets Fingertip-Size Read the User Experience Guidelines http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design
44px ~ 0.3” iOS as Inspiration
iOS as Inspiration
Outlook, Gmail, iPhone and WinMo pulls in the preheader or first few lines of text in the email as a “snippet” or AutoPreview Maximise subject line (35 characters), preview text (90 characters) Leverage this feature to extend your message: ,[object Object]
Important announcements
Another way to reinforce your call-to-action

More Related Content

What's hot

Going mobile edu web presentation - 2011
Going mobile   edu web presentation - 2011Going mobile   edu web presentation - 2011
Going mobile edu web presentation - 2011
Nathan Gerber
 
Mobile version of web site or native mobile application what to choose
Mobile version of web site or native mobile application what to chooseMobile version of web site or native mobile application what to choose
Mobile version of web site or native mobile application what to choose
Katerina Selezneva
 

What's hot (13)

Mobile Email User Experience Strategies
Mobile Email User Experience StrategiesMobile Email User Experience Strategies
Mobile Email User Experience Strategies
 
Justine Jordan
Justine JordanJustine Jordan
Justine Jordan
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
 
NEDMA14: Fat Fingers and Small Screens - Justine Jordan
NEDMA14: Fat Fingers and Small Screens - Justine JordanNEDMA14: Fat Fingers and Small Screens - Justine Jordan
NEDMA14: Fat Fingers and Small Screens - Justine Jordan
 
NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Jus...
NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Jus...NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Jus...
NEDMAInno14: The Mobile Inbox: Tips and Tricks for Small Screen Success - Jus...
 
Conversational apps UX best practices
Conversational apps UX best practicesConversational apps UX best practices
Conversational apps UX best practices
 
Mobile Marketing & Customer Retention
Mobile Marketing & Customer RetentionMobile Marketing & Customer Retention
Mobile Marketing & Customer Retention
 
West
WestWest
West
 
Putting Mobile First
Putting Mobile FirstPutting Mobile First
Putting Mobile First
 
Email-to-Speech - the industry's first integrated text-to-speech email capabi...
Email-to-Speech - the industry's first integrated text-to-speech email capabi...Email-to-Speech - the industry's first integrated text-to-speech email capabi...
Email-to-Speech - the industry's first integrated text-to-speech email capabi...
 
Mobile Web 101 (by Mobile Web Up - Oct 2011)
Mobile Web 101 (by Mobile Web Up - Oct 2011)Mobile Web 101 (by Mobile Web Up - Oct 2011)
Mobile Web 101 (by Mobile Web Up - Oct 2011)
 
Going mobile edu web presentation - 2011
Going mobile   edu web presentation - 2011Going mobile   edu web presentation - 2011
Going mobile edu web presentation - 2011
 
Mobile version of web site or native mobile application what to choose
Mobile version of web site or native mobile application what to chooseMobile version of web site or native mobile application what to choose
Mobile version of web site or native mobile application what to choose
 

Viewers also liked

Know Before it Goes: Testing Your Email Design
Know Before it Goes: Testing Your Email DesignKnow Before it Goes: Testing Your Email Design
Know Before it Goes: Testing Your Email Design
Litmus
 
AiMA "The Mobile Future for Email"
AiMA "The Mobile Future for Email"AiMA "The Mobile Future for Email"
AiMA "The Mobile Future for Email"
Litmus
 

Viewers also liked (7)

Know Before it Goes: Testing Your Email Design
Know Before it Goes: Testing Your Email DesignKnow Before it Goes: Testing Your Email Design
Know Before it Goes: Testing Your Email Design
 
AiMA "The Mobile Future for Email"
AiMA "The Mobile Future for Email"AiMA "The Mobile Future for Email"
AiMA "The Mobile Future for Email"
 
Fat Fingers and Small Screens: Three Strategies for Mobile-Optimized Emails
Fat Fingers and Small Screens: Three Strategies for Mobile-Optimized EmailsFat Fingers and Small Screens: Three Strategies for Mobile-Optimized Emails
Fat Fingers and Small Screens: Three Strategies for Mobile-Optimized Emails
 
Mobile email: strategies and how-tos for the small screen
Mobile email: strategies and how-tos for the small screenMobile email: strategies and how-tos for the small screen
Mobile email: strategies and how-tos for the small screen
 
Designed for Success: Optimizing the Email Experience
Designed for Success: Optimizing the Email ExperienceDesigned for Success: Optimizing the Email Experience
Designed for Success: Optimizing the Email Experience
 
Social Fresh: Optimizing Email for Mobile Audiences
Social Fresh: Optimizing Email for Mobile AudiencesSocial Fresh: Optimizing Email for Mobile Audiences
Social Fresh: Optimizing Email for Mobile Audiences
 
Customer-Centric Email Marketing
Customer-Centric Email MarketingCustomer-Centric Email Marketing
Customer-Centric Email Marketing
 

Similar to (UK Version) Email Design Approaches That Work for All Devices

Mobile-content-strategy.pptx
Mobile-content-strategy.pptxMobile-content-strategy.pptx
Mobile-content-strategy.pptx
DANYVERFULLO
 

Similar to (UK Version) Email Design Approaches That Work for All Devices (20)

Email for Mobile Devices | Stream:20 Best Practice
Email for Mobile Devices | Stream:20 Best PracticeEmail for Mobile Devices | Stream:20 Best Practice
Email for Mobile Devices | Stream:20 Best Practice
 
Mobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big OpportunityMobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big Opportunity
 
Mobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big OpportunityMobile Email Marketing: Small Screen, Big Opportunity
Mobile Email Marketing: Small Screen, Big Opportunity
 
Email for mobile webinar
Email for mobile webinarEmail for mobile webinar
Email for mobile webinar
 
Email for mobile webinar slideshare
Email for mobile webinar slideshareEmail for mobile webinar slideshare
Email for mobile webinar slideshare
 
Email Tips 2010
Email Tips 2010Email Tips 2010
Email Tips 2010
 
The Mobile Experience Through Email
The Mobile Experience Through EmailThe Mobile Experience Through Email
The Mobile Experience Through Email
 
Email + Mobile Webinar
Email + Mobile WebinarEmail + Mobile Webinar
Email + Mobile Webinar
 
Webinar: Mobile Email Design & Intro to Mobile Optimized Templates
Webinar: Mobile Email Design & Intro to Mobile Optimized TemplatesWebinar: Mobile Email Design & Intro to Mobile Optimized Templates
Webinar: Mobile Email Design & Intro to Mobile Optimized Templates
 
Email Tips and Trends 2010
Email Tips and Trends 2010Email Tips and Trends 2010
Email Tips and Trends 2010
 
Mobile optimization success guide
Mobile optimization success guideMobile optimization success guide
Mobile optimization success guide
 
Ad:Tech NYC - Mobile-Friendly Email Design
Ad:Tech NYC - Mobile-Friendly Email DesignAd:Tech NYC - Mobile-Friendly Email Design
Ad:Tech NYC - Mobile-Friendly Email Design
 
SMCSTC - Email Marketing Presentation on 11/19/14
SMCSTC - Email Marketing Presentation on 11/19/14SMCSTC - Email Marketing Presentation on 11/19/14
SMCSTC - Email Marketing Presentation on 11/19/14
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
 
The Growing Adoption of Mobile-Friendly Email Design #Infographic
The Growing Adoption of Mobile-Friendly Email Design #InfographicThe Growing Adoption of Mobile-Friendly Email Design #Infographic
The Growing Adoption of Mobile-Friendly Email Design #Infographic
 
Mobile-content-strategy.pptx
Mobile-content-strategy.pptxMobile-content-strategy.pptx
Mobile-content-strategy.pptx
 
3sixty Live Boston: Designing for the Mobile Inbox
3sixty Live Boston: Designing for the Mobile Inbox3sixty Live Boston: Designing for the Mobile Inbox
3sixty Live Boston: Designing for the Mobile Inbox
 
How to Optimize (and Automate!) Your Campaigns for Mobile
How to Optimize (and Automate!) Your Campaigns for MobileHow to Optimize (and Automate!) Your Campaigns for Mobile
How to Optimize (and Automate!) Your Campaigns for Mobile
 
Emerge 2012: Keys to Email Creative Success
Emerge 2012: Keys to Email Creative SuccessEmerge 2012: Keys to Email Creative Success
Emerge 2012: Keys to Email Creative Success
 
Andy Steggles: Social Media on the Go: Crafting a Mobile Strategy
Andy Steggles: Social Media on the Go: Crafting a Mobile StrategyAndy Steggles: Social Media on the Go: Crafting a Mobile Strategy
Andy Steggles: Social Media on the Go: Crafting a Mobile Strategy
 

More from Litmus

More from Litmus (20)

Litmus Live 2018 Workshop: Reinvent Your Email Workflow
Litmus Live 2018 Workshop: Reinvent Your Email WorkflowLitmus Live 2018 Workshop: Reinvent Your Email Workflow
Litmus Live 2018 Workshop: Reinvent Your Email Workflow
 
The Trends Transforming the Email Service Provider Landscape
The Trends Transforming the Email Service Provider LandscapeThe Trends Transforming the Email Service Provider Landscape
The Trends Transforming the Email Service Provider Landscape
 
Engaging Users with High-Performance Design
Engaging Users with High-Performance DesignEngaging Users with High-Performance Design
Engaging Users with High-Performance Design
 
Litmus Live 2018: Reinvent Your Email Workflow
Litmus Live 2018: Reinvent Your Email WorkflowLitmus Live 2018: Reinvent Your Email Workflow
Litmus Live 2018: Reinvent Your Email Workflow
 
Email Workflows that Work: 5 Trends to Help You Build Better Emails Faster
Email Workflows that Work: 5 Trends to Help You Build Better Emails FasterEmail Workflows that Work: 5 Trends to Help You Build Better Emails Faster
Email Workflows that Work: 5 Trends to Help You Build Better Emails Faster
 
The State of Email in 2018: 5 Insights from the Litmus Marketing Team
The State of Email in 2018: 5 Insights from the Litmus Marketing TeamThe State of Email in 2018: 5 Insights from the Litmus Marketing Team
The State of Email in 2018: 5 Insights from the Litmus Marketing Team
 
The Best of the 2017 State of Email Survey Research Series
The Best of the 2017 State of Email Survey Research SeriesThe Best of the 2017 State of Email Survey Research Series
The Best of the 2017 State of Email Survey Research Series
 
5 Embarrassing Subject Line Mistakes to Avoid
5 Embarrassing Subject Line Mistakes to Avoid5 Embarrassing Subject Line Mistakes to Avoid
5 Embarrassing Subject Line Mistakes to Avoid
 
Email Tactics Customers Hate and Why Marketers Continue to Use Them
Email Tactics Customers Hate and Why Marketers Continue to Use ThemEmail Tactics Customers Hate and Why Marketers Continue to Use Them
Email Tactics Customers Hate and Why Marketers Continue to Use Them
 
Email Marketing Kickoff for 2018
Email Marketing Kickoff for 2018Email Marketing Kickoff for 2018
Email Marketing Kickoff for 2018
 
The Top 5 Opportunities for Improving Your Email Creative
The Top 5 Opportunities for Improving Your Email CreativeThe Top 5 Opportunities for Improving Your Email Creative
The Top 5 Opportunities for Improving Your Email Creative
 
20 Things Successful Email Marketing Programs Do
20 Things Successful Email Marketing Programs Do20 Things Successful Email Marketing Programs Do
20 Things Successful Email Marketing Programs Do
 
The Root of Poor Email Deliverability
The Root of Poor Email DeliverabilityThe Root of Poor Email Deliverability
The Root of Poor Email Deliverability
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a Pro
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a Pro
 
8 Embarrassing Preview Text Mistakes + 4 Tips on How to Avoid Making Them
8 Embarrassing Preview Text Mistakes + 4 Tips on How to Avoid Making Them8 Embarrassing Preview Text Mistakes + 4 Tips on How to Avoid Making Them
8 Embarrassing Preview Text Mistakes + 4 Tips on How to Avoid Making Them
 
Troubleshooting Email Like a Pro
Troubleshooting Email Like a ProTroubleshooting Email Like a Pro
Troubleshooting Email Like a Pro
 
Building Successful Email Workflows
Building Successful Email WorkflowsBuilding Successful Email Workflows
Building Successful Email Workflows
 
Webinar: State of Email 2017
Webinar: State of Email 2017Webinar: State of Email 2017
Webinar: State of Email 2017
 
Everything You Need to Know About Gmail Rendering
Everything You Need to Know About Gmail RenderingEverything You Need to Know About Gmail Rendering
Everything You Need to Know About Gmail Rendering
 

Recently uploaded

Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
eeanqy
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Nitya salvi
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
gajnagarg
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
gajnagarg
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
ZurliaSoop
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
Isadora Agency
 

Recently uploaded (20)

Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
 
Design-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora AgencyDesign-System - FinTech - Isadora Agency
Design-System - FinTech - Isadora Agency
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 

(UK Version) Email Design Approaches That Work for All Devices

  • 1. Successful Email Design Approaches That Work For All Devices Justine Jordan | Litmus | @meladorri #SPOP11
  • 2. Successful Email Design Approaches That Work For All Devices
  • 3. Introductions… Justine Jordan Marketing Director, Litmus justine@litmus.com | @meladorri Presentation available at www.slideshare.net/litmusapp
  • 4. Email is moving beyond the desktop Subscribers are viewing emails in a diverse ecosystem of webmail, desktop, mobile and social contexts. Today we’ll talk about: Current status and predictions for the future Options for mobile email Best practices in mobile email design Agenda
  • 5. 9.29% OF OPENS ARE ON A MOBILE DEVICE 2-15% on individual campaigns 30%+ for niche audiences Source: Litmus Email Analytics, March 2011
  • 6. Mobile Opens by OS iPhone accounts for 85.95%of iOSopens; iPad for 14.05% Source: Litmus Email Analytics, March 2011
  • 7. Top Ten Email Clients by Opens Source: Litmus Email Analytics, March 2011
  • 8. Your mileage may vary… Source: Email Analytics for Litmus Newsletter, February 2011
  • 9. Smartphone OS Share Predictions Source: IDC Worldwide Quarterly Mobile Phone Tracker, March 29, 2011
  • 10. Do you have a mobile audience? Web analytics, user agent detection, surveys and preference centers can help you decide.
  • 11. The analytics make a case User agent detection Web analytics Clicks on mobile link Existing mobile site/app Existing SMS program Transactional emails for “on the go” situations In-store coupons Mobile purchases Travel updates Urgent communications Making the mobile email choice
  • 12. Display and Support Challenges There are no mobile email standards! *HTML or images enabled by default ◐ Blackberry HTML email may be enabled, but is not on by default in 4.5/5. The ability to download images automatically is an option. Blackberry 6 has webkit support and displays HTML email by default, but a prompt appears to download external images ‡ inconsistent wrapping and scaling of text
  • 13. Display and Support Challenges Android alt text Symbian images off Symbian images on
  • 14. Display and Support Challenges WinMo Preview WinMo images off WinMo images on
  • 15. Link to a “mobile-friendly” text version Usually a modified plain text version Often the first step in a testing phase Requires an extra click No longer truly mobile friendly Link to mobile-specific version Requires extra resources (more design/production time) Requires an extra click CSS @media queries and scalable layouts No extra click Suitable for newer phones with HTML capability May require more advanced coding know-how Mobile Email Options
  • 16. Link to “mobile friendly” text version Why the extra click?? web site mobile version email
  • 17. Link to “mobile friendly” text version Mobile “friendly”??
  • 20.
  • 22.
  • 23. Consider context & subscriber experience
  • 24. Consider context & subscriber experience Nice touch! Direct to mobile site
  • 25. Consider context & subscriber experience
  • 26. Facebook Messages FBM viewed on the iPhone app have functioning links and better HTML support. “Other” inbox does not appear in Android or WinMo app
  • 27. Facebook Messages: Another “Device”? Use caution with divider lines FBM may cut off footers, unsubscribe information
  • 28. Monitor for @facebook.comaddresses Messages are grouped together by from name (i.e. info@acme.com) No subject lines Commercial email goes in the “other” folder Text Version Tips Drop navigation bar and submessages Place the most important message first Line length < 60 characters to avoid undesirable line breaks Use capitalisation, line breaks, dashed lines and other devices to visually separate different messages. Facebook Messages
  • 29. “Best Practices” in Mobile Email “Methods and techniques that have consistently shown results superior than those achieved with other means, and which are used as benchmarks to strive for. There is, however, no practice that is best for everyone or in every situation, and no best practice remains best for very longas people keep on finding better ways of doing things.” - BusinessDictionary.com “The idea is that with proper processes, checks, and testing, a desired outcome can be delivered more effectively with fewer problems and unforeseen complications.” - Wikipedia
  • 30. “Best Practices” in Mobile Email Single column design Large(r) fonts Pressable buttons & “thumb navigation” Short, direct content Clear + direct calls to action Eliminate or hide low priority content Remember subscriber experience & context is key Design for mobile first!
  • 32. Beware text resizing After (Android) Before (Android) Plan for font sizes to auto-adjust (13px minimum on iOS) Use CSS “-webkit-text-size-adjust: none” for iPhone and Android, possibly BlackBerry 6
  • 33. Elevate the Content People Care About Think Top Down Brand Appropriately Use UI Elements Consistently Make Targets Fingertip-Size Read the User Experience Guidelines http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design
  • 34. 44px ~ 0.3” iOS as Inspiration
  • 36.
  • 38. Another way to reinforce your call-to-action
  • 39. Secondary subject lineAdd Preview Text!
  • 40. Are mobile users more engaged? “Killing time is a killer app for mobile use.” -Nielsen Norman Group Email Newsletter Usability, 4th Edition Read (>7 seconds) Skim Read (2-7 seconds) Glance/Delete (<2 seconds) Source: Litmus Email Analytics, March 2011
  • 41. Don’t panic! Mobile is changing fast, but it’s easier than you think Discovery is an accomplishment! Look for the mobile use case, use resources wisely HTML is well supported, but images are often blocked Ditch the plain text “mobile friendly” version Adapt to a single column design with touch-friendly elements Optimise text versions for Facebook messages Get inspired by your mobile OS, apps, site Readability, experience and context is key Let analytics and data be your optimisation guide Top Ten Takeaways
  • 42. Get in touch! Justine Jordan Marketing Director, Litmus justine@litmus.com | @meladorri Presentation available at www.slideshare.net/litmusapp

Editor's Notes

  1. Stats and figuresNo best practices!! No silver bullet!! OMG!!How different smart phones handle HTML email (examples)Start with a plan: Design and content strategy – it’s always mattered but it REALLY matters nowOptions for mobile email (text version, dedicated, scalable, css @media) (examples)Scalable layouts – can responsive web design make the leap to email? What’s the future hold? We don’t know, but we can speculate.
  2. Smartphone vendors shipped a total of 99.6 million units in 1Q11, nearly double from the 55.4 million units in the first quarter of 2010.Mobile web browsing is dominated by devices that are web-friendly
  3. Now it’s time to start figuring out how/when YOUR subscribers are using mobile email. Instead of guessing if mobile should be an important focus for your business, instead of guessing which devices your audience is using for mobile communication – find out with real, hard data. Tools for doing so – web analytics, litmus, pv, returnpathpercentmobile.com
  4. Key questions to consider when you are looking at developing a mobile strategy. Audience size – This is a business decision that is going to be unique to everyone. List size also comes into consideration – 5% of 3 million subscribers Do you include a “view on mobile device” link in emails? If so, how many people are consistently clicking this? Does it represent a large enough population?Talk about the decision framework What are the inputs for you to consider making a decision about your mobile plight?Audience, goals, content, etc.Hypothetical use cases for “if you fit xyz profile, try this...”Do I create a separate mobile version?Do I include a view on mobile link?
  5. Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  6. Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  7. Snapshot of the challenges and diversity of devicesNokia Remote Device Access is a great way to experience Symbian first hand.
  8. “Other” inbox does not show up on Android app