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.

1. Going mobile
Carol Jones/ Chapter
Brian Healy/ Tincan

2. Annual Sales Volume
(in millions)
In 2012 the
number of
smartphones sold
will exceed the
number of PCs
sold
Estimate

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

4. Smartphone
demographics
by age and
income

5. So what do people do on
mobile ...

6. ...they consume content

7. They listen to music, use social media
AND
they shop

8. 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

9. So the big question:
How can we convert all this
mobile usage into tickets
sales?

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

11. Solutions + Examples: A Web Developers Perspective
Mobile web Web app Hybrid app Native app
Websites that are mobile friendly Mobile web as an app - in looks if Combines Native + Web. Native Other end of the spectrum -
Typically the same website as nothing else tho this is changing. app provides shell, downloaded via platform specific, downloaded via
what you see via your desktop, Accessed via the browser. No app app store, means all device features store (Apple App Store/ Android
it’s responsive and adapts to the store download, tho initial visit (e.g. camera) available. Web Marketplace). A completely
users device can take time. delivers ‘live content’ different experience for the user

12. Richness of Approval Costs Audience
Device Access Speed
experience Process (Dev + Ongoing) Reach
Native High Full Very Fast Mandatory Expensive Low
Native speed as Medium
Hybrid Medium Full Low overhead Moderdate
necessary
Web App Medium Partial Fast None Moderate Medium
Mobile
Low Low Fast None Best High
Web

13. Which solution? Strategic questions
Solutions Questions ...
•Business needs/ user goals
•Native app
•Your audience
•Hybrid app •Your content
•Web app •Experience you want to
•Mobile web deliver

14. Strategic questions Which solution?
Questions ... Solutions
•Business needs/ user goals
•Native app
•Your audience
•Your content
•Hybrid app
•Experience you want to •Web app
deliver •Mobile web

15. 5%

16. Process
• Extend reach: Increase mobile audience
Identify: Business goals • Maintain efficiencies: Same site/ content/ db
• Users: 20-35 yrs; high rates mobile usage
Understand: Users, offering • No obvious reason why audience not using the site on mobile
Get buy in • New management: Keen to do MORE
• User data, stats analysis, content audit, workshops, games and mobile exercises, produced
Analyse + Workshop it prototypes
Build it • 4 week development
Launch, measure, test, refine • Went live Dec 2011, refined and further improved over 2-3 weeks

17. Set Resizing
<meta name="viewport"
content="width=device-width;
initial- scale=1.0; maximum-
Sell scale=1.0;">
Sell
(Tickets,
(Tickets,
Events,
Events,
Products) App/Home Icon
Products)
<link rel="apple-touch-icon"
href="icons/regular_icon.png"/>
<link rel="apple-touch-icon"
sizes="114x114" href="icons/
retina_icon.png"/>
Improving
Improving Events
Events
UX
UX
(Developing
(Developing Separate Mobile Site/Web App
(for all) ++Engaging)
(for all) Engaging) Javascript
Launch if((navigator.userAgent.match(/i
Phone/i)) ||
(navigator.userAgent.match(/iPod
/i))) {
Analysis Communica
Communica if
te
te (document.cookie.indexOf("iphone
(Brand _redirect=false") == -1)
(Brand window.location = "
Values)
Values)
http://mobile.yoursitehere.com";
}
PHP
if(strstr($_SERVER['HTTP_USER_AG
ENT'],'iPhone') ||
Development
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" />
Prototypes
Workshops
Wireframes

18. http://www.ica.org.uk

19. Desktop Tablet
Smartphone
•Four column layout •Four column layout, automatically adapts to two column
•Single column layout
layout for portrait
•Full content experience •Assets dynamically
•Assets dynamically resized (e.g. images, calendar)
resized (e.g. nav)
•Some content types replaced (e.g. footer)
•More content types
removed (e.g. calendar,
image carousel)

20. 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 ...

21. 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 ...

22. Other business tools ...
i.e. your ticketing system
Open and Supported API
Adaptive versioning (e.g.
dynamic resizing of images)
HTML5 (No Flash -e.g. SYOS)

23. “Will I have to redo our website?”
Honestly?

24. Chapter and what we’re up to

25. QR Codes

26. Chapter App

27. Chapter App

28. Chapter App

29. Chapter App

30. Chapter App

31. Has a high retention rate
Whatever mobile tool you use
has to provide
information/booking ... faster
and easier
Reminders, social media sharing,
push notifications

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

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

34. Resources
Test your site:
http://www.responsinator.com/
http://www.studiopress.com/responsive/
http://codebomber.com/jquery/resizer/
See some nice examples of s
ites 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/