2. Mobile Optimization
Workshop

3. Introduction
Katherine Brown
Manager of Bluehornet Professional Services

4. Agenda
• Mobile First
• Before You Design
• Methods to Optimize
for Mobile
• Design Best Practices
• Justifying a Mobile
Investment
• Further Resources
• Questions

5. Mobile First

6. Mobile First
• 9M iPhones sold during
the launch weekend of
iPhone 5c and 5s
• 4M more than last
year’s launch weekend

7. Mobile First
Users check their
smartphones an average
of 150 times a day, about
once every seven minutes

8. Mobile First
Change in Overall Opens

9. Mobile First
Mobile Open
Breakdown
iPad and iPhone
combine for nearly 80%
of mobile opens

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

11. Before You Design

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?

13. Methods to
Optimize for Mobile

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

22. Design Best
Practices

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

24. Design Best Practices
Responsive / Adaptive Design
•
•
•
•
•
•
•
•
Breakpoints
Fluid or fixed design
Dynamic layout
Text sizes
Image sizes
Navigation
Hide/reveal content
Retina display

25. Design Best Practices
Breakpoints
• CSS media query
• Which width to target?
• Recommend 480 pixels
breakpoint

26. Design Best Practices
Fluid vs Static Width
• Fluid uses
100% widths
that stretch
• Static uses a
fixed width
(320 pixels)

27. Design Best Practices
Dynamic Layout
• Stack columns to reduce width
• Hide and reveal content
• Resize images

28. Design Best Practices
for HTML Text Sizes
• Mobile headlines: 24 pixels
• Body text: 16 pixels
• Legal text: 12 pixels

29. Design Best Practices
Navigation
Keep your offer high in the mobile
experience by moving your navigation
from the top to the bottom

30. Design Best Practices
•
•
•
•
Keep it focused
Clear call to action
Avoid tap errors
Test, test, test

31. Justifying a
Mobile Investment

32. Justifying a Mobile Investment

33. Justifying a Mobile Investment

34. The Response is Off the Charts
• 450% increase in
click-through rates
From 0.82% to 4.5%
• 3x more mobile opens
From 22% to 66%

35. 3 Keys to Takeaways
• Mobile First
• There are options for mobile design
• Time to invest is now

36. Further Resources

37. Further Resources
Download our
Mobile Toolkit
• bluehornet.com/mobile
Mobile rendering
test platforms

38. Professional Services
• Creative Strategy
Session
• Campaign
Management
• Mobile
Optimized Email
• Subscription
Management

39. Questions?