Your SlideShare is downloading. ×
AMA Mobile Pop-up
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AMA Mobile Pop-up

419
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
419
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Going Mobile: A Web Developers PerspectiveTuesday, 10 July 2012
  • 2. Going Mobile: A Web Developers Perspective Solutions + ExamplesTuesday, 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 deviceTuesday, 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 userTuesday, 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 userTuesday, 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 userTuesday, 10 July 2012
  • 7. Richness of Device Approval Costs Audience Speed experience Access Process (Dev + Ongoing) ReachTuesday, 10 July 2012
  • 8. Richness of Device Approval Costs Audience Speed experience Access Process (Dev + Ongoing) Reach Native High Full Very Fast Mandatory Expensive LowTuesday, 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 overheadTuesday, 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 MediumTuesday, 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 WebTuesday, 10 July 2012
  • 12. Which solution? Solutions • Native app • Hybrid app • Web app • Mobile webTuesday, 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 deliverTuesday, 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 webTuesday, 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, refineTuesday, 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, refineTuesday, 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, refineTuesday, 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, refineTuesday, 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, refineTuesday, 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, refineTuesday, 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 weeksTuesday, 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" WorkshopsTuesday, 10 July 2012
  • 27. Sell (Tickets, Events, Products) Improving Events UX (Developing + (for all) Engaging) AnalysisCommunicate (Brand Values) WorkshopsTuesday, 10 July 2012
  • 28. Sell (Tickets, Events, Products) Improving Events UX (Developing + (for all) Engaging) Place Homepage - Mobile (Portrait) AnalysisCommunicate (Brand Values) Prototypes Workshops WireframesTuesday, 10 July 2012
  • 29. Sell (Tickets, Events, Products) Improving Events UX (Developing + (for all) Engaging) AnalysisCommunicate (Brand Values) Prototypes Workshops WireframesTuesday, 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 WireframesTuesday, 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 WireframesTuesday, 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 WireframesTuesday, 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.ukTuesday, 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 FebTuesday, 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 webTuesday, 10 July 2012
  • 43. This is the web ... Why important? This is not the webTuesday, 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

×