Your SlideShare is downloading. ×
LCMC: Mobile optimization workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

LCMC: Mobile optimization workshop

262

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
262
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Mobile is here to stayConsider
  • Transcript

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

    ×