Join some of the smartest thinkers in the mobile/multiscreen email marketing design arena. Together they will tackle some of the toughest questions and offer real-life advice for getting multiscreen email right. Among the specific topics will include the following: - Learning the implications of each major screen size and device - Determining what devices your subscriber base is using and how and where they are converting - Discussing the different types of design approaches, such as responsive and scalable, and which is the best fit based on your resources and expertise - Creating a consistent user experience across email and Web/landing pages - Examples and key best practices - Communicating with your designer and programmer - Testing, learning, optimization and measurement/analysis - Future trends and predictions This presentation was given at Silverpop Amplify 2013 on May 16, 2013 by Alex Williams, Trendline Interactive & Justine Jordan, Litmus.

1. Email Strategy and Design
for a MultiscreenWorld

2. Alex Williams
Creative Director
Trendline Interactive
@alexcwilliams
Justine Jordan
Research & Education
Litmus
@meladorri

3. We’re GonnaTalk. A Lot.
The lay of the land
Multiscreen design approaches
Implications…
Workflow and process
Key best practices

4. Got screens?

5. A look
back at
#spop11

6. Today, at
#spop13
OF OPENS ARE ON A MOBILE DEVICE
5-50% on individual campaigns
60%+ for niche audiences

7. Email Opens: April 2013
Mobile:
Smartphones (iPhone,Android) and
tablets
Desktop:
Installed email programs (Outlook, Apple
Mail)
Webmail:
Email accessed through a web browser
(Gmail, Hotmail,Yahoo!)
Desktop
34%
Webmail
24%
Mobile
42%
Source: Litmus Email Analytics

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

9. The Most Important Audience…
YOURS.

10. How mobile are your customers?
Brand/Industry A: 55% Brand/Industry B: 18%
Plan on data, not your gut

11. +366%since #spop11

12. +366%since #spop11

13. Small Medium Large
Screensize-apalooza
iPhone
2.3” wide
Galaxy Note II
3.2” wide
Nexus 7
7.3” wide
BB Bold
2.6” wide
iPad Mini
5.3” wide
Excite 13
8.5” wide

14. 14
The unifying characteristic?
TOUCH.

15. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
15% two handed
49% one handed
36% cradled
67% used right thumb on the screen
33% used left thumb on the screen

16. Approaches

17. As with most
things with
email, there’s
not a one-size-
fits-all
approach
(sorry to disappoint you)

18. Mobile First
Considers the
mobile user as
a priority
|-------------------460px -------------------| |---------------------600px ---------------------|

19. Mobile First / Friendly
• One layout for all screen sizes
• Single column design
– 320-500px
• Large text & buttons
• Generous white space
• Clear calls to action
• Short, concise body copy
Agnostic / Aware / Scalable

21. Pros
• Prioritizes important
data, content, actions
• Easier execution
• No reliance on media query support
• Good rendering in apps and native
clients
Cons
• Desktop can suffer
• Less real estate
• Can get long
• Fixed width can be less
than ideal for Android
Mobile First / Friendly
BEST FOR:
Ready for change, testing the waters, or resource strapped

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

23. Fluid layout
• Percentage-based
widths
• Adapts to fill the
screen it’s viewed
on; text wraps
automatically

25. Fluid layout
BEST FOR:
Simple layouts, automated emails, mostly text/few images
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

26. Responsive
Design
Uses media
queries to detect
screen size and
alter content
accordingly
|-----------320px ------------||--------------------------------------------700px------------------------------------------
|

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

29. 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
BEST FOR:
Growing mobile audiences, travel alerts, tech companies

30. Email is an *application*

31. Email is an *application*
Device ≠ email client

32. IMPLICATIONS!!

33. iPhone native yes
iPad native yes
Android 2.1 native no
Android 2.2 native yes
Android 2.3 native yes
Android 4.x native yes
Gmail mobile apps no
Mailbox iOS app yes
@media support
http://stylecampaign.com/blog/2012/10/responsive-email-support/
Yahoo! mobile apps no
Windows Mobile 7 no
Windows Mobile 7.5 yes
Windows Mobile 8 no
BlackBerry OS 6 yes
BlackBerry OS 7 yes
BlackBerry Z10 yes
Kindle Fire native yes

34. Inconsistent
rendering
across devices
and operating
systems

35. iPhone: 23% of opens
• Automatically scales
messages to fit the screen
• Excellent support for
CSS3 and media queries
• Images on by default
• Resizes fonts under 13px

36. Android: 8% of opens
• Blocks images by default;
supportsALT text
• Two apps with opposing
support for media queries
• Primary content focus on left-
hand side
• Various screen sizes and no
automatic scaling
Image source: stylecampaign.com

37. BlackBerry Z10 < 1%
• Media query support
• Blocks images; supports
styledALT text
• Does not scale/auto-zoom
• No separate app; email joins
social, SMS and voice in the
“hub”

38. Windows Phone < 1%
• Mixed media query
support
• Does weird things to fonts
• Blocks images; no ALT text
• No one has them

39. What about tablets?
• Desktop version
usually works just fine
• Plan for tap targets
and plenty of white
space
• Mobile first/friendly
rules apply

40. Ch-Ch-Ch-Ch-Choices
• First, we must choose our design approach
• Next, every module and piece of content has
to have a plan
• Lastly, we need a plan B in case we run into
trouble in execution.

41. Mobile Success =Tough Choices
• Analyze each section of the template
• Look at historical performance, remove
feelings from the process
• Trace required-content back to the source to
understand rationale.

42. Workflow and process

43. First Steps of Design Planning
• Identify top email clients on Desktop,Tablet and
Smartphone. Focus on top 3-5 in each.
• Prioritize - in order - 3 desired actions from each
email.
• Audit assets. Are we working with raw assets or
pre-designed assets from different channel?

44. A Responsive Design Process
1. Grid
2. Wireframe
3. ResponsiveWireframe HTML Prototype
4. Visual Design (varies depending on stakeholders)
5. Code Final HTML

45. Key best practices
But first…

46. In
Memorium

47. The
Fold

49. Small
Grey
Fonts

51. Glossy Image
Buttons

53. The“Mobile Version”

55. Link Clusters

57. Busy Images

59. Magazine Ad
Emails

61. Claustrophobic
Pre-headers

63. Key best practices

64. Bigger buttons & fonts
• Increase all font sizes
25%, especially headlines
– Body copy: 16px+
– Headlines: 22px+
– Buttons: 44px by 44px
– White space: 15px
• If you don’t make them
bigger, Apple will!

66. Consider the experience
• Landing pages are part of
that experience
• Driving people to stuff that
doesn’t work on mobile is
stupid
????
Page/Site
Tap
Preview/Open
Preheader
Subject Line
From Name

67. Fsdlkjfsldjf
Flash Interstitials / pop-ups Painfully long forms

68. Prioritize and focus
• Identify the top 3-5 activities and use those
– Purchase?
– Download?
– Registration?
– Social?

69. Device targeting can
display app/OS specific
content

70. Dial up the contrast
Bright screens
kill batteries

71. Say no to link clusters and yes to white space

72. Retina Optimizing Images
400x300 - 12kb - 70% Compression …width=”200" height=”150” class=”Loren”…
@media only screen and (max-width: 599px)
img[class=”Loren"] {
width: 100%;
height: auto !important;
}

73. THANKS!
@alexcwilliams
alex@trendlineinteractive.com
@meladorri
justine@litmus.com