Presentation from the 2013 MarketingSherpa Email Summit Roundtable discussion, "Mobile Email Design: 5 Fundamentals of Mobile-Friendly Emails." With more than one-third of emails being opened on smartphones and tablets, designing emails for mobile is crucial. In this presentation, Justine discusses the topic of mobile-friendly emails, including: • The fundamentals of what makes an email mobile-friendly • Different strategies for approaching mobile emails • Quick wins that you can implementing changes to your program right away • Myths, rumors and things to avoid

1. MOBILE EMAIL DESIGN

2. Mobile opens up 120% in 18 months

3. 42% of email
opens are on a
mobile device
in 2014!
Desktop
33%
Webmail
25%
Mobile
42%
iPhone: 25%
iPad: 12%
iOS: 37%
Android: 8%

4. iOS and
Android
dominate
opens on
mobile
iPhone
56%
Android
16%
iPad
27%
Other
1%

5. Mobile trends don’t stop there.
Learn about recent increases.
CHECK IT OUT
Updated data surrounding
mobile trends is available in
our 2015 industry report.

6. Strategies for tackling mobile…
1. Do nothing
2. Mobile text version
3. Mobile aware
4. Skinny template
5. Fluid layout
6. Responsive design
SIMPLE
COMPLEX

7. Mobile aware
Creating email designs that consider the
mobile experience but aren’t specially
constructed for it. Best when you want to
increase mobile usability without making radical
changes or specializing.
• Single column primary content
• Big images
• Big text
• Big buttons

8. One column primary content, and easy to press buttons.
Visual style works well on mobile without special setup.

9. Fluid layout
Email width that adapts to screens both large
and small. Best used in situations where the
structure is basic, readability is key, and
scaling would destroy usability.
• Use percentages for widths
• Most effective for simple layouts
• Heavy reliance on text content

10. ~740 pixels ~320 pixels
Email width scales rather than text size, ensuring
readability in any environment.

11. Test email designs on iPhone
and android mobile devices.
RUN A QUICK TEST
Guarantee your emails look
great in every inboxes.

12. Responsive design
Using CSS3 @media queries to detect screen
size, and display specific content or elements in
different types of viewing environments. The most
advanced way to deliver a specialized mobile
email experience.
• Detects large vs. small screen size
• Rolls back to standard version when @media isn’t
supported
• Hide or remove content on small screens

13. Learn more about responsive design
—combat rendering differences.
CHECK OUT OUR GUIDE

16. QUICK
WINS

17. The finger is the new mouse
Design for tappable touch targets; not text links
44 x 44px minimum

18. Text Buttons Image “Buttons”
Create touch targets

19. Bigger fonts are better
• Body copy < 13px will be resized
• Recommended minimums
• Body copy: 14px
• Headlines: 22px
• CSS fix: “-webkit-text-size-adjust: none;”
Beware minimum font sizes; automatic resizing

20. Bigger fonts are better

21. Streamline, be aware
Single column layout = simplified content
• Short, direct copy
• Eliminate or hide low priority content
• Links
• Copy
• Images
• Clear and direct calls to action
• Make it obvious

22. Preview pane still counts!

23. The iPhone 6 + 6 Plus demands
attention be paid to Preview panes.
FIND OUT MORE
With a larger screen, the iPhone 6
requires changes to media queries,
preview text, and more.

24. THINGS
TO SKIP

25. Lots of links create friction
Don’t give users a reason NOT to click by making text or
other calls-to-action impossible to tap.

26. email web sitemobile version
The “mobile” version

27. You can’t predict where users will open!
Mobile versioning
Distinctions between
environments –
mobile and desktop
– drive behavior
more than
distinctions between
email clients.
Focus on viewing environment rather than
specific devices or email clients.
iPhone
Version
Android
Version

28. Resources
stylecampaign.com/blog
campaignmonitor.com/blog
litmus.com/blog
exacttarget.com/sff
mobileawesomeness.com
cssiphone.com
androidpatterns.com
mobilepatterns.com
mediaqueri.es

29. 53% of opens occurred on mobile
devices in 2014. Ensure your emails
are mobile friendly.
GET MOBILE FRIENDLY