Mobile Optimization
Workshop
Introduction
Katherine Brown
Manager of Bluehornet Professional Services
Agenda
• Mobile First
• Before You Design
• Methods to Optimize
for Mobile
• Design Best Practices

• Justifying a Mobile
...
Mobile First
Mobile First
• 9M iPhones sold during
the launch weekend of
iPhone 5c and 5s

• 4M more than last
year’s launch weekend
Mobile First
Users check their
smartphones an average
of 150 times a day, about
once every seven minutes
Mobile First
Change in Overall Opens
Mobile First
Mobile Open
Breakdown
iPad and iPhone
combine for nearly 80%
of mobile opens
Mobile First
Only 7.2% of subscribers
are opening the same email
on both their desktop and
smartphone.
SOURCE:
BlueHornet’...
Before You Design
Before You Design
• Do I have the right resources?
• Is my website optimized for mobile?
• Should I display mobile-specifi...
Methods to
Optimize for Mobile
Methods to Optimize for Mobile
One size fits all
•
•
•
•

Single column
Limited text
Large images
Keep it simple and sexy
Methods to Optimize for Mobile
One size fits all
Pros
• Much easier and faster to code
• Good for iPhone due to auto
zoom ...
Methods to Optimize for Mobile
One size fits all
Cons
• User has to zoom out on
Android
• Harder to read HTML text
• Less ...
Methods to Optimize for Mobile
One size fits all
Ideal for:
• Concise offers
• Showcasing images
• Limited text
• Postcard...
Methods to Optimize for Mobile
Responsive / Adaptive Design
• Email design responds or
adapts to screen size
• Fixed or fl...
Methods to Optimize for Mobile
Responsive / Adaptive Design
Pros
• Looks great across desktop and
mobile clients
• Able to...
Methods to Optimize for Mobile
Responsive / Adaptive Design
Cons
• Advanced coding techniques required
• Time consuming an...
Methods to Optimize for Mobile
Responsive / Adaptive Design
Ideal for:
• Multi-column layouts
• Multiple offers
• Newslett...
Design Best
Practices
Design Best Practices
One size fits all
• Keep width under
520 pixels
• Use large clickable
images with
limited text
• Mak...
Design Best Practices
Responsive / Adaptive Design
•
•
•
•
•
•
•
•

Breakpoints
Fluid or fixed design
Dynamic layout
Text ...
Design Best Practices
Breakpoints
• CSS media query
• Which width to target?
• Recommend 480 pixels
breakpoint
Design Best Practices
Fluid vs Static Width
• Fluid uses
100% widths
that stretch
• Static uses a
fixed width
(320 pixels)
Design Best Practices
Dynamic Layout
• Stack columns to reduce width
• Hide and reveal content
• Resize images
Design Best Practices
for HTML Text Sizes

• Mobile headlines: 24 pixels
• Body text: 16 pixels
• Legal text: 12 pixels
Design Best Practices
Navigation
Keep your offer high in the mobile
experience by moving your navigation
from the top to t...
Design Best Practices
•
•
•
•

Keep it focused
Clear call to action
Avoid tap errors
Test, test, test
Justifying a
Mobile Investment
Justifying a Mobile Investment
Justifying a Mobile Investment
The Response is Off the Charts

• 450% increase in
click-through rates
From 0.82% to 4.5%

• 3x more mobile opens
From 22%...
3 Keys to Takeaways
• Mobile First
• There are options for mobile design
• Time to invest is now
Further Resources
Further Resources
Download our
Mobile Toolkit
• bluehornet.com/mobile

Mobile rendering
test platforms
Professional Services
• Creative Strategy
Session
• Campaign
Management
• Mobile
Optimized Email
• Subscription
Management
Questions?
LCMC: Mobile optimization workshop
Upcoming SlideShare
Loading in...5
×

LCMC: Mobile optimization workshop

294

Published on

Published in: Marketing, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
294
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Mobile is here to stayConsider
  • LCMC: Mobile optimization workshop

    1. 1. Mobile Optimization Workshop
    2. 2. Introduction Katherine Brown Manager of Bluehornet Professional Services
    3. 3. Agenda • Mobile First • Before You Design • Methods to Optimize for Mobile • Design Best Practices • Justifying a Mobile Investment • Further Resources • Questions
    4. 4. Mobile First
    5. 5. Mobile First • 9M iPhones sold during the launch weekend of iPhone 5c and 5s • 4M more than last year’s launch weekend
    6. 6. Mobile First Users check their smartphones an average of 150 times a day, about once every seven minutes
    7. 7. Mobile First Change in Overall Opens
    8. 8. Mobile First Mobile Open Breakdown iPad and iPhone combine for nearly 80% of mobile opens
    9. 9. 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
    10. 10. Before You Design
    11. 11. 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?
    12. 12. Methods to Optimize for Mobile
    13. 13. Methods to Optimize for Mobile One size fits all • • • • Single column Limited text Large images Keep it simple and sexy
    14. 14. 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
    15. 15. 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
    16. 16. Methods to Optimize for Mobile One size fits all Ideal for: • Concise offers • Showcasing images • Limited text • Postcard email • Rapid deployment
    17. 17. 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
    18. 18. 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
    19. 19. 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!)
    20. 20. Methods to Optimize for Mobile Responsive / Adaptive Design Ideal for: • Multi-column layouts • Multiple offers • Newsletters / content-rich designs and articles • Mobile-only offers
    21. 21. Design Best Practices
    22. 22. 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
    23. 23. Design Best Practices Responsive / Adaptive Design • • • • • • • • Breakpoints Fluid or fixed design Dynamic layout Text sizes Image sizes Navigation Hide/reveal content Retina display
    24. 24. Design Best Practices Breakpoints • CSS media query • Which width to target? • Recommend 480 pixels breakpoint
    25. 25. Design Best Practices Fluid vs Static Width • Fluid uses 100% widths that stretch • Static uses a fixed width (320 pixels)
    26. 26. Design Best Practices Dynamic Layout • Stack columns to reduce width • Hide and reveal content • Resize images
    27. 27. Design Best Practices for HTML Text Sizes • Mobile headlines: 24 pixels • Body text: 16 pixels • Legal text: 12 pixels
    28. 28. Design Best Practices Navigation Keep your offer high in the mobile experience by moving your navigation from the top to the bottom
    29. 29. Design Best Practices • • • • Keep it focused Clear call to action Avoid tap errors Test, test, test
    30. 30. Justifying a Mobile Investment
    31. 31. Justifying a Mobile Investment
    32. 32. Justifying a Mobile Investment
    33. 33. 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%
    34. 34. 3 Keys to Takeaways • Mobile First • There are options for mobile design • Time to invest is now
    35. 35. Further Resources
    36. 36. Further Resources Download our Mobile Toolkit • bluehornet.com/mobile Mobile rendering test platforms
    37. 37. Professional Services • Creative Strategy Session • Campaign Management • Mobile Optimized Email • Subscription Management
    38. 38. Questions?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×