lcmc: mobile optimization workshop
TRANSCRIPT
Mobile Optimization Workshop
Introduction
Katherine BrownManager 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 FirstChange in Overall Opens
Mobile First
Mobile Open BreakdowniPad 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
• Single column• Limited text• Large images• Keep it simple and sexy
Methods to Optimize for MobileOne 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 MobileOne 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 MobileOne size fits all
Ideal for:• Concise offers• Showcasing images• Limited text• Postcard email• Rapid deployment
Methods to Optimize for MobileOne size fits all
• 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 MobileResponsive / 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 MobileResponsive / 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 MobileResponsive / Adaptive Design
Ideal for:• Multi-column layouts• Multiple offers• Newsletters / content-rich
designs and articles• Mobile-only offers
Methods to Optimize for MobileResponsive / Adaptive Design
Design Best Practices
Design Best PracticesOne 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 PracticesResponsive / Adaptive Design
• Breakpoints• Fluid or fixed design• Dynamic layout• Text sizes• Image sizes• Navigation• Hide/reveal content• Retina display
Design Best PracticesBreakpoints
• CSS media query• Which width to target?• Recommend 480 pixels
breakpoint
Design Best PracticesFluid vs Static Width
• Fluid uses 100% widths that stretch• Static uses a
fixed width (320 pixels)
Design Best PracticesDynamic Layout
• Stack columns to reduce width• Hide and reveal content• Resize images
Design Best Practicesfor HTML Text Sizes
• Mobile headlines: 24 pixels• Body text: 16 pixels• Legal text: 12 pixels
Design Best PracticesNavigation
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
• 450% increase in click-through ratesFrom 0.82% to 4.5%
• 3x more mobile opensFrom 22% to 66%
The Response is Off the Charts
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?