tma going mobile

Carol Jones/ ChapterBrian Healy/ Tincan

Going mobile

In 2012 the number of smartphones sold will exceed the number of PCs sold

Annual Sales Volume(in millions)

Estimate

It's not the strongest species that survives, nor the most intelligent but the ones most responsive to change ...

Smartphone demographicsby age and income

So what do people do on mobile ...

...they consume content

AND they shop

They listen to music, use social media

4 out of 5 consumers use smartphones to shop

Fandango sold 68,000 tickets in an hour on the opening day of ‘The Avengers’ on their mobile site and app

How can we convert all this mobile usage into tickets sales?

So the big question:

“Your chance of converting all that traffic into ticket sales without a mobile sales tool is very low.”

Mashable, Oct 2012

Solutions + Examples: A Web Developers PerspectiveNative app

Other end of the spectrum - platform specific,

downloaded via store (Apple App Store/ Android

Marketplace). A completely different experience for the

user

Web appMobile web as an app - in looks if nothing else tho

this is changing. Accessed via the browser. No app

store download, tho initial visit can take time.

Mobile webWebsites that are mobile

friendlyTypically the same website as what you see via your desktop, it’s responsive and adapts to the users

device

Hybrid appCombines Native + Web. Native app provides shell, downloaded via app store, means all device features

(e.g. camera) available. Web delivers ‘live content’

Device Access

Speed Costs(Dev + Ongoing)

Approval Process

Richness of experience

Audience Reach

NativeNative FullFull Very FastVery Fast ExpensiveExpensiveMandatoryMandatoryHighHigh LowLow

HybridHybrid FullFull Native speed Native speed as necessaryas necessary

ModerdateModerdateLow Low overheadoverheadMediumMedium MediumMedium

Web Web AppApp PartialPartial FastFast ModerateModerateNoneNoneMediumMedium MediumMedium

Mobile Mobile WebWeb LowLow FastFast BestBestNoneNoneLowLow HighHigh

Which solution?

Solutions

•Native app•Hybrid app•Web app•Mobile web

Questions ...

•Business needs/ user goals•Your audience•Your content•Experience you want to deliver

Strategic questions

Which solution?

Solutions

•Native app•Hybrid app•Web app•Mobile web

Questions ...

•Business needs/ user goals•Your audience•Your content•Experience you want to deliver

Strategic questions

5%

• Went live Dec 2011, refined and further improved over 2-3 weeks

Build it

Analyse + Workshop it

Get buy in

Identify: Business goals

Launch, measure, test, refine

Understand: Users, offering• Users: 20-35 yrs; high rates mobile usage• No obvious reason why audience not using the site on

mobile

• Extend reach: Increase mobile audience• Maintain efficiencies: Same site/ content/

db

• New management: Keen to do MORE

• User data, stats analysis, content audit, workshops, games and mobile exercises, produced prototypes

• 4 week development

Process

Workshops

Wireframes

Prototypes

Launch

Set Resizing<meta name="viewport" content="width=device-width; initial- scale=1.0; maximum-scale=1.0;">

App/Home Icon<link rel="apple-touch-icon" href="icons/regular_icon.png"/> <link rel="apple-touch-icon" sizes="114x114" href="icons/ retina_icon.png"/>

Separate Mobile Site/Web AppJavascriptif((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://mobile.yoursitehere.com"; }

PHPif(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER ['HTTP_USER_AGENT'],'iPod')) {header('Location: http://mobile.yoursitehere.com'); exit();}

Remove Safari Address/Status Bars (top/bottom)<meta name="apple-mobile-web-app-capable" content="yes" />

Development

Improving UX

(for all)

Improving UX

(for all)

Sell(Tickets, Events,

Products)

Sell(Tickets, Events,

Products)

Communicate

(Brand Values)

Communicate

(Brand Values)

Events

(Developing + Engaging)

Events

(Developing + Engaging)

Analysis

http://www.ica.org.uk

Desktop

•Four column layout

•Full content experience

Tablet

•Four column layout, automatically adapts to two column layout for portrait

•Assets dynamically resized (e.g. images, calendar)

•Some content types replaced (e.g. footer)

Smartphone

•Single column layout

•Assets dynamically resized (e.g. nav)

•More content types removed (e.g. calendar, image carousel)

Results

•Mobile rate increased by 250% in 3 months

•Dwell time, number of pages visited and returning visitors, all increased (and faster than the non-mobile figures)

•Mobile bounce rate reduced by 5% (vs no change for the non-mobile figures)

•We know there’s more to do ...

Results

•Mobile rate increased by 400% in 12 months

•Dwell time, number of pages visited and returning visitors, all increased (and faster than the non-mobile figures)

•Mobile bounce rate reduced by 10% more than desktop (50% vs 40%)

•There’s always more to do ...

Open and Supported API

Adaptive versioning (e.g. dynamic resizing of

images)

HTML5 (No Flash -e.g. SYOS)

Other business tools ...

i.e. your ticketing system

“Will I have to redo our website?”

Honestly?

Chapter and what we’re up to

QR Codes

Chapter App

Chapter App

Chapter App

Chapter App

Chapter App

Has a high retention rate

Whatever mobile tool you use has to provide information/booking ... faster and easier

Reminders, social media sharing, push notifications

And what we’re up to next ... week

And what we’re up to next ... week

Resources

Test your site:http://www.responsinator.com/http://www.studiopress.com/responsive/http://codebomber.com/jquery/resizer/

See some nice examples of sites using media queries:http://mediaqueri.es/

Good reading that will help make friends with your web developer/ web agency:http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/http://mobile.smashingmagazine.com/http://cssgrid.net/