The document discusses designing emails for the mobile inbox. It provides statistics showing email is increasingly being opened on mobile devices. It then outlines three approaches to designing for mobile: mobile-aware, fluid layout, and responsive design. For each approach, it provides descriptions, examples, pros and cons. It also discusses considerations for images, text size and readability on small screens. The document highlights case studies showing increased engagement from responsive email design. It stresses testing designs across different devices and platforms.

1. 3sixty Live Boston
Designing for the Mobile Inbox
June 18, 2013

2. Kristina Huffman
Design Practice Lead
ExactTarget
@krudz
Justine Jordan
Research & Education
Litmus
@meladorri

3. Current State

4. Email Client
Market Share
May 2013
1 Apple iPhone 23%
2 Outlook 20%
3 Apple iPad 9%
4 Outlook.com 9%
5 Apple Mail 8%
6 Google Android 7%
7 Gmail 5%
8 Yahoo! Mail 4%
9 Windows Live Mail 3%
10 Thunderbird 2%

5. 0%
10%
20%
30%
40%
50%
60%
70%
Opens in Each Environment
Webmail Desktop Mobile
The last 28 months
42%
33%
10%

6. Path to Conversion

7. A Poor Mobile Experience limits Conversion

8. What can we do about it?
1. Audience discovery: where are your subscribers opening?
2. Choose the path that’s right for both your team and your subscribers
3. Execute, test, tweak

9. 1. Audience Discovery: Plan on data, not your gut
Your audience is the most important one
How mobile are your customers?
Brand/Industry A: 55% Brand/Industry B: 18%

10. 2. Decision Points: which path is best for us?
1. Resources
2. Data
3. Company type
4. User expectations
Company A
1. Resources: coders, designers, writer
2. Data: 29% mobile
3. Company type: Tech
4. User expectations: B2B Tech audience
Responsive
Company B
1. Resources: marketing manager, intern
2. Data: 36% mobile
3. Company type: Non-Profit/Education
4. User expectations: low sophistication
Aware

11. Aware/Friendly/Scalable
Simple improvement through design decisions
Design-only tactics
Fluid
Scale the content to its container
Very simple layout, simple code
Responsive
Deliver a customized mobile experience.
Advanced design + code
1
2
Approaches to the Mobile Inbox
3

12. Mobile Aware1
Establish a mobile-friendly visual framework
without specializing. A mobile-first approach.
• Single column hero
• Key info & CTA in left column
• Large text & buttons
Approaching the Mobile Inbox

13. Small Screen Considerations
• Content first: think top-down hierarchy
• Single column layout
• Large text sizes to ensure readability
• Use contrast to ensure readability across brightness levels.
• Don’t cram content into the viewport - honor legibility over length
Touch Interface considerations
• Size: keep buttons least 44px square for easy tapping
• Position: Keep links/buttons to the center or left for ease of use
• Space: separate links to avoid touching two links
• Never say: ―click here‖ because 43% of openers are tapping!

14. Highlights: single column hero, simple content, big images, text & buttons.

15. 460px wide sales nicely to vertical mobile devices

16. Product-focus, Modular design – scales nicely to iPhone

17. Big pictures, headlines and buttons create a style that’s easy
to maintain and successful in both desktop/mobile environments.

18. Pros
• Prioritizes important
data, content, actions
• Easier execution
• No reliance on media query support
• Good rendering in apps and native
clients
• Fully compatible with template-based
approach
Cons
• Desktop can suffer
• Less real estate
• Can get long
• Fixed width can be less
than ideal for Android
Mobile Aware

19. 2
Approaching the Mobile Inbox
Fluid Layout
A fluid layout is a
simple percentage-
based email layout
that changes width
along with the
screen it’s viewed
on.

20. Fluid layout |--------------------------------------------------------1166px---------------------------------------------------|
Email width changes to fit
within the window
|-----------------------------525px --------------------------|

21. Fluid layout
%-based widths, adapts to fill the
screen it’s viewed on – text wraps

22. Fluid layout
Pros
• Simple execution
• No learning curve or reliance on
media queries
Cons
• Fewer design choices
• Very narrow or very wide
emails can get awkward
and hard to read

23. 3
Approaching the Mobile Inbox
Responsive Design
Responsive web design is a set of
techniques used to make a layout
readable and usable on any screen
and/or platform on which it’s
displayed.
• Fluid grids
• Fluid images
• Media queries

24. One adaptable email that changes layout based on screen size.
Desktop ~760px Mobile ~300px

25. Layout and content changes for optimal mobile and desktop experience

26. Responsive Design
• More than a ―line of code‖
• Set of conditional statement that enables specific styles
• If the screen size is x, then display y
• If the screen size is x, then increase headline size to y
• If screen size is x, then show image at 100%
• Detects screen size, not device type

27. Pros
• Restyle, resize or reorder elements
• Ability to hide/show desktop or
mobile specific images/content
• Customized calls to action
• Seamless experience across a range
of screen sizes
Cons
• Coding learning curve
• Forces tough choices
• Increased production
and QA time
Responsive Design

28. @MEDIA SUPPORT
Mobile Email Client @media Support
iPhone Mail Yes
iPad Mail Yes
iPod Touch Mail Yes
Android Mail 2.1- 1 No
Android Mail 2.2+ 1 Yes 2
Windows Phone 8 No
BlackBerry 6 No
Yahoo App (A&i) No
Hotmail App (A) Yes
Gmail App (A&i) No
AOL App n/a
Gmail via Mobile Browser No
Yahoo via Mobile Browser No
Hotmail via Mobile Browser No
AOL via Mobile Browser Yes
Data source: ExactTarget primary
research
1 See Google’s Android Platform
Distribution site for current stats on
platform distribution
2 Mail routed through an Outlook
Exchange server may see different results
@media Support Chart
@media support is
based on operating
system and application
(software), not device
(hardware)—just as we
might discuss support
for CSS on desktop email
clients.
SinglePlatformCross-Platform

29. Results
Design for your users and they
will return the favor

30. Source:
ExactTarget,
2013
CareerBuilder saw 25%
increase in clicks.
Source:
Litmus,
2013
Deckers saw a 10%
increase in clicks.
Source:
DEG,
2013
Crocs saw 7.66% lift in
click-to-open rate
Responsive Case Studies
Responsive A/B tests typically show increase in engagement

31. Mobile optimization is a long term investment
in the user experience.
Don’t expect short term gain. Re-train users to engage over time.
Design a sustainable framework and strategy to streamline
planning, content creation, testing and user experience.

32. Responsive approach is foundational
Overall Experience: IT/Web Team
• Path to conversion – websites, landing pages
Content: Strategist/Copywriter
• Testing, Measurement, Content hierarchy
Layout: Designer
• Designing for small screens, touch, streamlined production
Technology: Coders
• Writing media queries, QA on multiple devices

33. Activity
Split into 4 groups – each group gets a device

34. Considerations for each email
• Did the design shrink? Is it cut off?
• Are the images turned on?
• If not, how can you enable them?
• Is the text legible?
• How is information presented in the inbox?
• From name
• Subject line
• Preview text
• Notice gestures on the phone/email:
• How easily can you interact or click through on the email?

35. Android Observations
• Blocks images by default; supports ALT
text
• Two apps with opposing support for
media queries
• Primary content focus on left-hand side
• Various screen sizes and no automatic
scaling

36. Blackberry Observations
• Media query support
• Blocks images; supports styled ALT
text
• Does not scale/auto-zoom
• No separate app; email joins
social, SMS and voice in the ―hub‖

37. Windows Phone Observations
• Mixed media query support
• Does weird things to fonts
• Blocks images; no ALT text
• No one has them!

38. iPhone Observations
• Automatically scales messages to fit
the screen
• Excellent support for CSS3 and
media queries
• Images on by default
• Resizes fonts under 13px

39. Thank you!
Justine Jordan, Litmus @meladorri
Kristina Huffman, ExactTarget @krudz

40. 3sixty Live: More than a user group
• Interactive/digital marketers
• ―Omnichannel‖ — not just email
• User to user, peer to peer
• Share our
ideas, successes, mistakes
• Don’t have to be an ExactTarget
user to attend!

41. Upcoming Boston 3sixty Live Events
HubExchange Launch Meetup
• Thursday, July 18th
• 5:30-7:30pm
• InterContinental Boston
• 510 Atlantic Ave, on the water
www.hubexchangeweek.com/boston-ma.html