A web developers perspective for going mobile for a non-technical audience

1. Going Mobile: A Web Developers Perspective
Tuesday, 10 July 2012

2. Going Mobile: A Web Developers Perspective
Solutions + Examples
Tuesday, 10 July 2012

3. Going Mobile: A Web Developers Perspective
Solutions + Examples
Mobile web
Websites that are mobile friendly
Typically the same website as
what you see via your desktop,
it’s responsive and adapts to the
users device
Tuesday, 10 July 2012

4. Going Mobile: A Web Developers Perspective
Solutions + Examples
Mobile web Native app
Websites that are mobile friendly Other end of the spectrum -
Typically the same website as platform specific, downloaded via
what you see via your desktop, store (Apple App Store/ Android
it’s responsive and adapts to the Marketplace). A completely
users device different experience for the user
Tuesday, 10 July 2012

5. Going Mobile: A Web Developers Perspective
Solutions + Examples
Mobile web Web app Native app
Websites that are mobile friendly Mobile web as an app - in looks if Other end of the spectrum -
Typically the same website as nothing else tho this is changing. platform specific, downloaded via
what you see via your desktop, Accessed via the browser. No store (Apple App Store/ Android
it’s responsive and adapts to the app store download, tho initial Marketplace). A completely
users device visit can take time. different experience for the user
Tuesday, 10 July 2012

6. Going Mobile: A Web Developers Perspective
Solutions + Examples
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 store, means all device store (Apple App Store/ Android
it’s responsive and adapts to the app store download, tho initial features (e.g. camera) available. Marketplace). A completely
users device visit can take time. Web delivers ‘live content’ different experience for the user
Tuesday, 10 July 2012

7. Richness of Device Approval Costs Audience
Speed
experience Access Process (Dev + Ongoing) Reach
Tuesday, 10 July 2012

8. Richness of Device Approval Costs Audience
Speed
experience Access Process (Dev + Ongoing) Reach
Native High Full Very Fast Mandatory Expensive Low
Tuesday, 10 July 2012

9. Richness of Device Approval Costs Audience
Speed
experience Access Process (Dev + Ongoing) Reach
Native High Full Very Fast Mandatory Expensive Low
Native speed as Low
Hybrid Medium Full Moderdate Medium
necessary overhead
Tuesday, 10 July 2012

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

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

12. Which solution?
Solutions
• Native app
• Hybrid app
• Web app
• Mobile web
Tuesday, 10 July 2012

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

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

15. 5%
Tuesday, 10 July 2012

16. Process
Identify: Business goals
Understand: Users, offering
Get buy in
Analyse + Workshop it
Build it
Launch, measure, test, refine
Tuesday, 10 July 2012

17. Process
• Extend reach: Increase mobile audience
Identify: Business goals • Maintain efficiencies: Same site/ content/ db
Understand: Users, offering
Get buy in
Analyse + Workshop it
Build it
Launch, measure, test, refine
Tuesday, 10 July 2012

18. 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
Analyse + Workshop it
Build it
Launch, measure, test, refine
Tuesday, 10 July 2012

19. 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
Analyse + Workshop it
Build it
Launch, measure, test, refine
Tuesday, 10 July 2012

20. 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,
Analyse + Workshop it produced prototypes
Build it
Launch, measure, test, refine
Tuesday, 10 July 2012

21. 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,
Analyse + Workshop it produced prototypes
Build it • 4 week development
Launch, measure, test, refine
Tuesday, 10 July 2012

22. 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,
Analyse + Workshop it produced prototypes
Build it • 4 week development
Launch, measure, test, refine • Went live Dec 2011, refined and further improved over 2-3 weeks
Tuesday, 10 July 2012

23. Tuesday, 10 July 2012

24. Sell
(Tickets,
Events,
Products)
Improving Events
UX
(Developing +
(for all) Engaging)
AnalysisCommunicate
(Brand
Values)
Tuesday, 10 July 2012

25. Sell
(Tickets,
Events,
Products)
Improving Events
UX
(Developing +
(for all) Engaging)
AnalysisCommunicate
(Brand
Values)
Tuesday, 10 July 2012

26. Sell
(Tickets,
Events,
Products)
Improving Events
UX
(Developing +
(for all) Engaging)
AnalysisCommunicate
(Brand
Values)
Friends of the Earth
Workshop Session
"Develop cohesion and direction towards potential ‘mobile web’ solutions"
Workshops
Tuesday, 10 July 2012

27. Sell
(Tickets,
Events,
Products)
Improving Events
UX
(Developing +
(for all) Engaging)
AnalysisCommunicate
(Brand
Values)
Workshops
Tuesday, 10 July 2012

28. Sell
(Tickets,
Events,
Products)
Improving Events
UX
(Developing +
(for all) Engaging)
Place Homepage - Mobile (Portrait)
AnalysisCommunicate
(Brand
Values)
Prototypes
Workshops
Wireframes
Tuesday, 10 July 2012

29. Sell
(Tickets,
Events,
Products)
Improving Events
UX
(Developing +
(for all) Engaging)
AnalysisCommunicate
(Brand
Values)
Prototypes
Workshops
Wireframes
Tuesday, 10 July 2012

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

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

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

33. ica.org.uk
Case Study
iOS Additions
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 App
Javascript
if((navigator.userAgent.match(/iPhone/i)) ||
(navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1)
window.location = "http://mobile.yoursitehere.com";
}
PHP
if(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" />
http://www.ica.org.uk
Tuesday, 10 July 2012

34. g.uk
Desktop
• Four column layout
• Full content experience
Tuesday, 10 July 2012

35. g.uk ica.org.uk ica.
Desktop Tablet
• Four column layout • Four column layout, automatically adapts to two
column layout for portrait
• Full content experience
• Assets dynamically resized (e.g. images, calendar)
• Some content types replaced (e.g. footer)
Tuesday, 10 July 2012

36. g.uk ica.org.uk ica.
Desktop Tablet Smartphone
• Four column layout • Four column layout, automatically adapts to two • Single column layout
column 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)
Tuesday, 10 July 2012

37. Tuesday, 10 July 2012

38. Results Mobile Nov ’11 - Feb ’12
• Mobile rate increased by 250% in 3 months 12
• Dwell time, number of pages visited and
returning visitors, all increased (and faster than 9
the non-mobile figures)
• Mobile bounce rate reduced by 5% (vs no
change for the non-mobile figures) 6
• We know there’s more to do ...
3
0
Nov Dec Jan Feb
Tuesday, 10 July 2012

39. “Will I have to redo our website?”
Tuesday, 10 July 2012

40. “Will I have to redo our website?”
Honestly?
Tuesday, 10 July 2012

41. Why important?
Tuesday, 10 July 2012

42. Why important?
This is not
the web
Tuesday, 10 July 2012

43. This is the web ...
Why important?
This is not
the web
Tuesday, 10 July 2012

44. This is the web ...
Why important?
This is not
the web
This will be the web ...
Tuesday, 10 July 2012

45. 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/
Tuesday, 10 July 2012