tma going mobile
DESCRIPTION
A bit of background as to the growth and how we use mobile plus a web developers perspective for going mobile for a non-technical audience. Primarily for an arts/ cultural and ticketing audience.TRANSCRIPT
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
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/