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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
428
On Slideshare
428
From Embeds
0
Number of Embeds
0

Actions

Shares
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?