lcmc: mobile optimization workshop

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?