Successfully reported this slideshow.
Mobile Email Design Strategies	

Author: Anushri Thanedar, UXer
I. Why Design Emails for Mobile Emails?	

!
2. Email Design Strategies:	

a. Scalable & Responsive Email Designs	

b.Which...
Why Design for Mobile Emails?	

3
Data and Numbers
For First Time Ever,
1 Billion Smartphones have been shipped
in 2013, marketing a huge milestone for the
...
And more....Data and Numbers
of emails are opened on
mobile devices, yet
many emails are only
designed for desktop
viewing...
What do consumers complain about?
T
44% 29% 27%
say mobile emails are difficult to
read because they require
excessive scrol...
“If you get a mobile email that
doesn’t look good, what do you do?”
http://blog.mailchimp.com/
7
“What kind of messages do consumers prefer
to read on their mobiles?”
Special Offers
Promos 	

& Vouchers
Real-Time 	

Del...
Email Design Strategies	

9
Two Design Strategies
• A scalable email is rendered with similar
layout no matter the size of the device
screen it is ope...
Scalable Email Design
Which Design to Pick?
11
Why Not Responsive Design?
Apple iPhone Android 4.X Windows Phone
7.5
Blackberry
OS7 + Z10
iPhone Mailbox
App
iPhone Yahoo...
And Current Top Email Clients Used
Apple iPhone
!
Outlook
!
Apple iPad
!
Google Android
!
Apple Mail
!
Outlook.com
!
Yahoo...
Scalable Email Mobile Design	

UX: Do’s and Don’ts 	

14
1. Design the email keeping in mind that the message is conveyed with images off. 

(iPhone displays images by default, how...
2. Maintain the right balance between text and images. 

Don’t focus on an image only email message. 

Walmart Email:
Imag...
2. Layout
1. Design the email to follow a single-column layout with width between 500 px and 650 px.
500 px to 650 px
17
4...
4. Make sure the CTA is immediately visible when the email is opened & not hidden past
the first screen view.
CTA not visib...
6. Links and buttons should have a minimum target area of 44 × 44 pixels, as per
Apple guidelines.
Minimum 44px button
Min...
8. Simplify navigation. Let go of the idea of navigation menus in your emails, or minimize
the categories. Users don’t tre...
3. Copy & Content
1. Use bold typeface and sub-headers to call attention to primary and secondary call of
actions to incre...
4. Pre-Header and Header
A. Preview Pane 400px by 300px: 

1. Include a line of text that describes the content or purpose...
C. Teaser Text:
1. Few email clients show a preview of the email by pulling out the first few lines of the
email content. U...
!
Sample Mobile-Friendly Templates 	

24
25
26
Appendix	

27
Scalable Email Design
A grid system for alignment and proportion
A single-column design
Larger fonts (at least 14 px for c...
Scalable Email Design Examples
29
Responsive Email Design
1
3
4
5
1
2
3
Render the email format differently depending on
the screen size the email is viewed ...
Responsive Email Design Examples
Twitter
31
Pros and Cons
• Simple, workable solution using
mobile email best practices.
• Email template is used across all
the devic...
1. Create a hybrid layout for the best of both worlds.
2. Evaluate pros and cons as per the project situation.
3. Identify...
Scalable Email Mobile Design	

More UX: Do’s and Don’ts 	

34
Copy & Content
A. Content:
1. Use short sentences and paragraphs. Avoid over scrolling of content and textual
overload.
35
C. Footer
1. Don’t hide the unsubscribe button.

2. Add a line- ‘Why you are receiving this email?’ to decrease chance of ...
B. Subject:

1. Use an informative, short subject
line. 

2. Limit words to 35 characters or
less. Don’t use spammy words....
References
1. http://www.campaignmonitor.com/guides/mobile/
2. www.webdesignerdepot.com/2013/06/responsive-html-email-desi...
References
10. https://litmus.com/blog/48-of-emails-are-opened-on-mobile-gmail-
opens-down-20-since-tabs
11. https://litmu...
Upcoming SlideShare
Loading in …5
×

Mobile Email User Experience Strategies

4,979 views

Published on

This deck provides concise User Experience strategies for designing effective emails for mobile and different screen widths. With growing number of mobile devices and the shift to mobile e-commerce, its more than necessary to optimize emails for mobile devices.

Published in: Mobile
  • Be the first to comment

Mobile Email User Experience Strategies

  1. 1. Mobile Email Design Strategies Author: Anushri Thanedar, UXer
  2. 2. I. Why Design Emails for Mobile Emails? ! 2. Email Design Strategies: a. Scalable & Responsive Email Designs b.Which Strategy Works? ! 3. UX Best Practices: Do’s and Don’ts a. Images/Layout b. Copy and Content c. Pre-Header and Header ! 4. Sample Mobile-Friendly Email Templates ! 5.Appendix Agenda
  3. 3. Why Design for Mobile Emails? 3
  4. 4. Data and Numbers For First Time Ever, 1 Billion Smartphones have been shipped in 2013, marketing a huge milestone for the mobile market. 1billion http://www.idc.com/getdoc.jsp?containerId=prUS246455144
  5. 5. And more....Data and Numbers of emails are opened on mobile devices, yet many emails are only designed for desktop viewing. 47% 150 Times a day Studies have found that people look at their phones an average of 150 times a day. These brief interactions mean that you must focus on getting your point across quickly. 71% of mobile purchasing decisions are influenced most by emails. https://litmus.com/blog/tag/mobile-email5
  6. 6. What do consumers complain about? T 44% 29% 27% say mobile emails are difficult to read because they require excessive scrolling or zooming. point to wrong layouts for mobile screens, causing awkward horizontal scrolling. point to excessive content and non-clickable targets. https://litmus.com/blog/tag/mobile-email6
  7. 7. “If you get a mobile email that doesn’t look good, what do you do?” http://blog.mailchimp.com/ 7
  8. 8. “What kind of messages do consumers prefer to read on their mobiles?” Special Offers Promos & Vouchers Real-Time Delivery Tracking New Products Newsletters Others http://blog.mailchimp.com/ 8
  9. 9. Email Design Strategies 9
  10. 10. Two Design Strategies • A scalable email is rendered with similar layout no matter the size of the device screen it is opened on. • There is only one version (one HTML file) of the email, but the email scales to look similar on desktops and mobile devices. Scalable Responsive • A responsive email is rendered differently with different layouts, depending on the size of the device screen it is opened on. • Responsive emails have different HTML versions for different device screens, and provide catered reading experiences on different devices (by auto-adjusting the layout/content, text-size/colors, resizing/ swapping/disabling images or buttons). Further details in appendix. 10
  11. 11. Scalable Email Design Which Design to Pick? 11
  12. 12. Why Not Responsive Design? Apple iPhone Android 4.X Windows Phone 7.5 Blackberry OS7 + Z10 iPhone Mailbox App iPhone Yahoo App iPhone Gmail App Android Gmail App Android Yahoo Mail App Blackberry OS 5 Windows Mobile 6.1 Windows Phone 7 Windows Phone 8 12
  13. 13. And Current Top Email Clients Used Apple iPhone ! Outlook ! Apple iPad ! Google Android ! Apple Mail ! Outlook.com ! Yahoo Mail ! Gmail ! Windows Live Mail ! Windows Mail 25% 17% 12% 9% 9% 6% 6% 3% 3% 2% #1 ! #2 ! #3 ! #4 ! #5 ! #6 ! #7 ! #8 ! #9 ! #10 ! 20% of people will not be catered to by responsive emails. 13
  14. 14. Scalable Email Mobile Design UX: Do’s and Don’ts 14
  15. 15. 1. Design the email keeping in mind that the message is conveyed with images off. (iPhone displays images by default, however Android and Outlook don’t.) 1. Images Email message conveyed even with images off 15
  16. 16. 2. Maintain the right balance between text and images. Don’t focus on an image only email message. Walmart Email: Images Off Walmart Email: Images On NY&C Email: Images Off- alt text NY&C Email: Images On 3. Provide fallback color and alt-txt whenever images are used. Supporting image text 16
  17. 17. 2. Layout 1. Design the email to follow a single-column layout with width between 500 px and 650 px. 500 px to 650 px 17 4 4 3. Improve visual emphasis of the body content such that it offers specific eye path for key offerings. Provides Key Eye Path 2. Avoid multiple column layout that can lead to horizontal scrolling. Multiple Column Design
  18. 18. 4. Make sure the CTA is immediately visible when the email is opened & not hidden past the first screen view. CTA not visible CTA not visible CTA designed using code & not an image. That simple: <a style:"color: #ffeaff; display: block;"> display:inline-block">Get Game</a> Html based CTA 5. Design the CTA buttons using html code assets and not images. 18
  19. 19. 6. Links and buttons should have a minimum target area of 44 × 44 pixels, as per Apple guidelines. Minimum 44px button Minimum 44px target Bigger CTA button Larger CTA button 7. Bigger CTA buttons result in better click through rates. 19
  20. 20. 8. Simplify navigation. Let go of the idea of navigation menus in your emails, or minimize the categories. Users don’t treat emails like websites. Reduced navigation tabs 10. Embrace white space. The most common design mistake on mobile are link targets too close together. White spaceLeft aligned key message 9. Left-align key messaging content. Eye-tracking research suggests that Western users focus the majority of their attention on the left-hand side of the email content. 20
  21. 21. 3. Copy & Content 1. Use bold typeface and sub-headers to call attention to primary and secondary call of actions to increase the focus on featured content. 2. Use of web-standard fonts like Arial, Comic Sans, Helvetica, Georgia, Impact, Times New Roman, Tahoma. If not, provide web-standard fonts as a fallback font if non- standard fonts used. Bold typeface & sub-headers Body copy min 14px. 3. Use larger text (ideal font size for the body copy should be min. 14 px, title should be minimum 22px) for improved legibility. 21
  22. 22. 4. Pre-Header and Header A. Preview Pane 400px by 300px: 1. Include a line of text that describes the content or purpose that motivates the recipients. 2. Try to keep header less than 150 px in height to avoid pushing main email message and call to action below the preview pane. B. Online Version: Include an online version of the email. 1. Studies show some percentage of users do actually click the browser version to access offer-related emails. 22
  23. 23. C. Teaser Text: 1. Few email clients show a preview of the email by pulling out the first few lines of the email content. Use this to call attention to the core messaging content of the email. E.g., "50% off dresses: Spring is finally here!" instead of “Spring is finally here, 50% off dresses.” Teaser text Teaser text 23
  24. 24. ! Sample Mobile-Friendly Templates 24
  25. 25. 25
  26. 26. 26
  27. 27. Appendix 27
  28. 28. Scalable Email Design A grid system for alignment and proportion A single-column design Larger fonts (at least 14 px for content, 22 - 28 px for sub-headers-headers) Touch-friendly buttons Key information and CTA in the upper-left of the email An appropriate balance of images and HTML text, which enables email to look great on a mobile device – whether images are disabled or not Only one version (one HTML file) of the email, but the email scales to look great on both desktops and mobile devices 3 4 5 1 2 3 4 5 1 2 28
  29. 29. Scalable Email Design Examples 29
  30. 30. Responsive Email Design 1 3 4 5 1 2 3 Render the email format differently depending on the screen size the email is viewed on. Change hierarchy of content blocks as device size changes. Change navigation structure of content. Enlarge fonts, change colors, layout of the content. Scale images, add/remove padding in the email structure. Change or hide content as needed. ! 4 5 1 2 30
  31. 31. Responsive Email Design Examples Twitter 31
  32. 32. Pros and Cons • Simple, workable solution using mobile email best practices. • Email template is used across all the devices. • Easier and quicker to implement and takes less development effort. • Images, text or content size/layout cannot be customized according to the device size. Scalable Responsive • Considered to be the true mobile email design. • Images, text or content size/ layout/visibility can be customized according to the device size. • Allows focus on featured content and device-specific experience. • Needs extra development efforts and time since generated responsive designs have to be tested across all the devices for consistency. 32
  33. 33. 1. Create a hybrid layout for the best of both worlds. 2. Evaluate pros and cons as per the project situation. 3. Identify the target customer segment and, using analytics, identify which devices/apps are commonly used by the end users. 4. Evaluate the project timeline and development efforts underneath. 33 Which Design to Pick?
  34. 34. Scalable Email Mobile Design More UX: Do’s and Don’ts 34
  35. 35. Copy & Content A. Content: 1. Use short sentences and paragraphs. Avoid over scrolling of content and textual overload. 35
  36. 36. C. Footer 1. Don’t hide the unsubscribe button. 2. Add a line- ‘Why you are receiving this email?’ to decrease chance of spamming. 4. Elements like social sharing buttons may be great in the desktop inbox, but aren’t always easy to use by recipients on mobile devices. 1. Copy & Content 36
  37. 37. B. Subject: 1. Use an informative, short subject line. 2. Limit words to 35 characters or less. Don’t use spammy words. 3. While using special characters, use UTF 8, but only if its highly relevant. 2. Brand Optimization A. Sender Name and Address: 1. Make the sender name recognizable and keep a consistent tone. Keep the sender name short, as only a limited number of characters will be displayed, and the rest will get broken off. 2. Ditch the “Newsletter” in the sender name and keep it to the brand, person, organization or campaign name. The one that users will recognize. 37
  38. 38. References 1. http://www.campaignmonitor.com/guides/mobile/ 2. www.webdesignerdepot.com/2013/06/responsive-html-email-design/ 3. https://litmus.com/blog/8-email-design-factors-influence-action 4. http://www.exacttarget.com/blog/50-email-marketing-tips-and-stats- for-2014/ 5. https://litmus.com/blog/our-favorite-responsive-and-mobile-email- resources 6. http://www.campaignmonitor.com/resources/will-it-work/ 7. http://www.campaignmonitor.com/guides/mobile/ 8. http://www.emailmonday.com/mobile-email-usage-statistics 9. http://emailcritic.com/wp-content/uploads/2013/03/Email- Newsletter-Design-Best-Practises-Infograph.jpg 38
  39. 39. References 10. https://litmus.com/blog/48-of-emails-are-opened-on-mobile-gmail- opens-down-20-since-tabs 11. https://litmus.com/blog/tag/mobile-email 12. http://mailchimp.com/resources/research/email-on-mobile-devices/ html/ 13. http://www.marketingtechblog.com/responsive-scalable-mobile- email-design/ 14. http://thenextweb.com/dd/2013/09/17/why-responsive-email- design-is-more-important-than-ever-2/ 15. http://www.marketingprofs.com/articles/2013/11525/design-emails- with-a-mobile-mindset-five-tips 16. http://www.emailmonday.com/mobile-email-strategy 17. https://litmus.com/blog/going-mobile-a-companys-journey-to- responsive-design 18. http://www.ugurus.com/responsive-design-email ! 39

×