54. @meladorri @litmusapp
From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
Email user flow
Subscriber experience
55. @meladorri @litmusapp
From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
55
From name
~25 characters
25% of the inbox
Subject line
~35 characters
25% of the inbox
Preview text
~85 characters
50% of the inbox
56. @meladorri @litmusapp
From name Subject line Preheader Open Tap/Click Page/Site
Inbox Email/Body Page/Site
56
TAP, NOT CLICK!
69. @meladorri @litmusapp
Considers the mobile user a priority
• One layout for all screen sizes
• 320-500px
• Large text & buttons
• Generous white space
• Clear calls to action
• Short, concise body copy
75. @meladorri @litmusapp
• Resize content: make images fit,
make text larger
• Hide content on mobile
• Stack columns
• Move a two-column design to a
one-column design
• Learning curve; but plenty of
pre-tested templates exist
• Mixed support for media queries
across mobile
https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
76. @meladorri @litmusapp
• More than a “line of code”
• Set of conditional statements 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
Uses media queries to detect screen size and alter
content accordingly
77.
78.
79. @meladorri @litmusapp
Responsive design results in a
15% increase in unique clicks for
mobile users.
https://litmus.com/blog/the-science-of-email-clicks-the-impact-of-responsive-design-inbox-testing
83. @meladorri @litmusapp
You can’t say “responsive
email works on an iPhone.”
When clients say “it looks
like crap on my Android.”
You should ask “what email
app are you using?”
85. @meladorri @litmusapp
• Enlarges fonts in a ‘modified view’
• No responsive design support
• Mail sorted into tabs that mirrors
desktop/browser experience
• Images on automatically
Gmail app
87. @meladorri @litmusapp
• No responsive design support
• Displays a sender icon/image in the
inbox—sometimes
• Emails bundled into categories
• Images on automatically
Inbox by Gmail
89. @meladorri @litmusapp
• Samsung Hell
• Support for ALT text
• Various screen sizes, OS and app
versions
• Mixed support for media queries
• Some auto-scale, some do not
Android Gmail
91. @meladorri @litmusapp
• Support for responsive design
• Blocks images; supports ALT text
• Does not scale/auto-zoom
• No separate app; email joins social,
SMS and voice in the “hub”
BlackBerry