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

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

1billion

http://www.idc.com/getdoc.jsp?containerId=prUS246455144

And more....Data and Numbers

of emails are opened on mobile devices, yet many emails are only designed for desktop viewing.

47% 150Times 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

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

“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 Delivery Tracking

New Products

Newsletters

Others

http://blog.mailchimp.com/8

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

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

And Current Top Email Clients UsedApple 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

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, however Android and Outlook don’t.)

1. Images

Email message conveyed even with images off

15

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

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

44

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

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

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

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

1

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

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

4. Pre-header and Header 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

!

Sample Mobile-Friendly Templates

24

25

26

Appendix

27

Scalable Email DesignA 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

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

Responsive Email Design Examples

Twitter

31

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

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?

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

1. Copy & Content

36

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

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

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