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.

1. Mobile Email Design Strategies
Author: Anushri Thanedar, UXer

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. Why Design for Mobile Emails?
3

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. 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. 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. “If you get a mobile email that
doesn’t look good, what do you do?”
http://blog.mailchimp.com/
7

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. Email Design Strategies
9

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. Scalable Email Design
Which Design to Pick?
11

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. 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. Scalable Email Mobile Design
UX: Do’s and Don’ts
14

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. 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. 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. 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. 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. 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. 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. 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. 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. !
Sample Mobile-Friendly Templates
24

25. 25

26. 26

27. Appendix
27

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. Scalable Email Design Examples
29

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. Responsive Email Design Examples
Twitter
31

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. 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. Scalable Email Mobile Design
More UX: Do’s and Don’ts
34

35. Copy & Content
A. Content:
1. Use short sentences and paragraphs. Avoid over scrolling of content and textual
overload.
35

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. 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. 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. 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