LCMC: Mobile optimization workshop

450 views
364 views

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
450
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
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?

    ×