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

Like this? Share it with your network

Share

LCMC: Mobile optimization workshop

on

  • 408 views

 

Statistics

Views

Total Views
408
Views on SlideShare
408
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Mobile is here to stayConsider

LCMC: Mobile optimization workshop Presentation 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?