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

LCMC: Mobile optimization workshop

on

  • 373 views

 

Statistics

Views

Total Views
373
Views on SlideShare
373
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 LCMC: Mobile optimization workshop Presentation Transcript

  • 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 Investment • Further Resources • Questions
  • 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’s 2013 Consumer Views of Email Marketing
  • Before You Design
  • 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?
  • 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 and default images on • Less design limitations with image-based design
  • 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
  • Methods to Optimize for Mobile One size fits all Ideal for: • Concise offers • Showcasing images • Limited text • Postcard email • Rapid deployment
  • 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
  • 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
  • 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!)
  • Methods to Optimize for Mobile Responsive / Adaptive Design Ideal for: • Multi-column layouts • Multiple offers • Newsletters / content-rich designs and articles • Mobile-only offers
  • Design Best Practices
  • 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
  • Design Best Practices Responsive / Adaptive Design • • • • • • • • Breakpoints Fluid or fixed design Dynamic layout Text sizes Image sizes Navigation Hide/reveal content Retina display
  • 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 the bottom
  • 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% to 66%
  • 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?