4. Agenda
• Mobile First
• Before You Design
• Methods to Optimize
for Mobile
• Design Best Practices
• Justifying a Mobile
Investment
• Further Resources
• Questions
10. Mobile First
Only 7.2% of subscribers
are opening the same email
on both their desktop and
smartphone.
SOURCE:
BlueHornet’s 2013 Consumer Views of Email Marketing
12. Before You Design
• Do I have the right resources?
• Is my website optimized for mobile?
• Should I display mobile-specific
content / offers?
• Which method of optimization is right
for me?
14. Methods to Optimize for Mobile
One size fits all
•
•
•
•
Single column
Limited text
Large images
Keep it simple and sexy
15. Methods to Optimize for Mobile
One size fits all
Pros
• Much easier and faster to code
• Good for iPhone due to auto
zoom and default images on
• Less design limitations with
image-based design
16. Methods to Optimize for Mobile
One size fits all
Cons
• User has to zoom out on
Android
• Harder to read HTML text
• Less options for content,
navigation, and CTAs
17. Methods to Optimize for Mobile
One size fits all
Ideal for:
• Concise offers
• Showcasing images
• Limited text
• Postcard email
• Rapid deployment
18. Methods to Optimize for Mobile
Responsive / Adaptive Design
• Email design responds or
adapts to screen size
• Fixed or fluid widths
• Adjust or swap imagery
• Resize HTML text and CTA
buttons
• Hide/reveal content
• Dynamically change the layout
19. Methods to Optimize for Mobile
Responsive / Adaptive Design
Pros
• Looks great across desktop and
mobile clients
• Able to target different screen
sizes – phones or tablets
• Serve up different content
20. Methods to Optimize for Mobile
Responsive / Adaptive Design
Cons
• Advanced coding techniques required
• Time consuming and difficult to update
• Some mobile apps do not support the
media query and will show the desktop
version (Gmail and Yahoo!)
21. Methods to Optimize for Mobile
Responsive / Adaptive Design
Ideal for:
• Multi-column layouts
• Multiple offers
• Newsletters / content-rich
designs and articles
• Mobile-only offers
23. Design Best Practices
One size fits all
• Keep width under
520 pixels
• Use large clickable
images with
limited text
• Make sure text is
at least 24 pixels
• CTA buttons should
be at least 80 x 80
pixels
• Single column
• Limited navigation