Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile experiences

2,243 views

Published on

A talk I gave in november 2011 for our internal Web Developer Network at EVRY.

Inspirational slides, tweets and flickr photos are credited with links to the sources. Thanks!

Published in: Technology, Design
  • Be the first to comment

Mobile experiences

  1. 1. Jonas Päckos Mobile @pekkosexperiences
  2. 2. This is not the WebSlide Credit: http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
  3. 3. Web This is the Web Web Web Web Web Web Web Web Text Web WebWeb Web
  4. 4. Smart Phones pass PC vs. Smartphone Shipments PC Sales Smartphones passed PC shipments in Q42010 700 Global Shipments in MM SMARTPHONES 600 500 PCS 400 Q42010 2012E 300 200 100 0 2005 2006 2007 2008 2009 2010E 2011E 2012E 2013E Source: http://www.smartonline.com/smarton-products/smarton-mobile/smartphones-pass-pc- Source: http://bit.ly/gIqKm9 Source: http://bit.ly/g5ktGq 10 sales-for-the-first-time-in-history/Slide Credit: http://www.lukew.com/dmwe.pdf
  5. 5. Thank You, Steve
  6. 6. the smartphone era begins... original the iPhone 2007Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server
  7. 7. brings touch, gestures and the real web... web touch iPhone 3G iPhone 2007 2008Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server
  8. 8. native apps and the rise of Android... android apps iPhone 3GS iPhone 3G 2007 2008 2009Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server
  9. 9. whither feature phones, and the further rise of Android... htc g-five samsung web os iPhone 4 iPhone 3G 3GS 2007 2008 2009 2010Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server
  10. 10. blackberry kindle devices go mainstream nook with great expectations... htc LG samsung motorola iPhone 5... 3G 3GS 4 2008 2009 2010 2011Slide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server
  11. 11. the bleeding edge... + ish via ChinaopportunitySlide Credit: http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server
  12. 12. On the go Limited bandwidth One-thumbed and one-eyedPhoto Credit: http://www.flickr.com/photos/junglearctic/5978794556/
  13. 13. 84% at home80% during miscellaneous times during the day74% waiting in lines64% at workSource: http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/Photo Credit: http://www.flickr.com/photos/laughingsquid/3033724807/
  14. 14. mobile is also used to time-shift 59% 59% ...and%follow%up% ...and follow up sometimes visit sometimes a website on on%a%PC on the PC visit a site their mobile on mobile phone Time Shift Source: YahooSource: http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html
  15. 15. ...and 34% 34% follow up and follow-up visit a a web site visit site on on a on mobile the PC a PC on mobile phone Time Shift Source: YahooSource: http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html
  16. 16. 67% 23% 16% 9%Source: http://www.gstatic.com/ads/research/en/2011_TheMobileMovement.pdf
  17. 17. Twitter 55% Facebook 33% http://www.slideshare.net/HanWang3/69309864-kpcbinternettrends2011Photo Credit: http://www.flickr.com/photos/mika/4198063912/
  18. 18. 10% of visitors on mobile devices
  19. 19. steep increase since last year
  20. 20. Are we offering anythingmobile yet?
  21. 21. https://twitter.com/#!/lukew/status/126110249760460800
  22. 22. Location Based ServicesPhoto Credit: http://blog.affiliatewindow.com/wp-content/uploads/2011/11/M-Commerce-The-Complete-Picture2.pdf
  23. 23. Quick Response CodePhoto Credit: http://www.flickr.com/photos/waynesutton/5094463490/
  24. 24. ARAugmented Reality
  25. 25. ARAugmented Reality
  26. 26. Near Field CommunicationPhoto Credit: http://www.flickr.com/photos/georgo10/3286708793/
  27. 27. http://twitter.com/#!/jamespearce/status/44882337254744064
  28. 28. App or Web?
  29. 29. App• Access address book, SMS, camera, audio input and other sensors• Location detection, Device orientation• Run processes in background• Monetize on app stores and in- app purchases
  30. 30. Web• Location detection, Device orientation• Harder to get on users home screen• Web don’t require users to download updates
  31. 31. http://twitter.com/#!/bryanrieger/statuses/26479742726
  32. 32. Native appsincrease web useon mobile devices
  33. 33. Links don’t open apps, they go to web pages
  34. 34. App or Web?
  35. 35. App or Web?
  36. 36. App and Web!
  37. 37. NativeHybrid AppsWeb
  38. 38. Hybrid AppDownloaded from app store Stored on device Launched like an app
  39. 39. Hybrid App Same capabilities as native apps(almost) Indistinguishable from a native app
  40. 40. Hybrid AppHTML, CSS, Javascript frameworks jQuery Mobile Sencha TouchTitanium Appcelerator Phone Gap
  41. 41. •§
  42. 42. Hybrid App Reuse code between different platformsLoad pages from your website, or implement the entire UI in HTML
  43. 43. Web AppWeb apps are similiar to mobile web sites, but is tailor- made for the mobile platformMobile-device-centric interfaces with bigger hit areas, optimised for touch
  44. 44. http://twitter.com/#!/stephenhay/status/23350345962889216
  45. 45. Mobile experience
  46. 46. ‘‘ Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create two separate designs — typically with fewer features for mobile. — Jakob Nielsenhttp://www.useit.com/alertbox/mobile-redesign.html
  47. 47. http://twitter.com/#!/wilto/statuses/63284673723375616
  48. 48. ‘‘ Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create two separate designs — typically with fewer features for mobile. — Jakob Nielsenhttp://www.useit.com/alertbox/mobile-redesign.html
  49. 49. Device
  50. 50. 84% at home80% during miscellaneous times during the day74% waiting in lines64% at workSource: http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/Photo Credit: http://www.flickr.com/photos/laughingsquid/3033724807/
  51. 51. Context
  52. 52. http://twitter.com/#!/nstop/status/124561806671888384
  53. 53. http://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website
  54. 54. i love it! nice and clean look, easy to navigate and easy to read. well done! but... can you put a bit more news on there?http://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website
  55. 55. i love it! nice and clean look, easy to navigate and easy to read. well done! but... can you put a bit more news on there?...that "Sorry, this article isnt yet available on the mobile site"message was bloody annoying. Ended up having to install a browserthat spoofs the user agent and renders the full desktop sitehttp://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website
  56. 56. i love it! nice and clean look, easy to navigate and easy to read. well done! but... can you put a bit more news on there?...that "Sorry, this article isnt yet available on the mobile site"message was bloody annoying. Ended up having to install a browserthat spoofs the user agent and renders the full desktop siteThere should be a text only version of the site for those of us whodont like the busyness of the main site and are never going towatch the videoshttp://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website
  57. 57. ...and 34% 34% follow up and follow-up visit a a web site visit site on on a on mobile the PC a PC on mobile phone Time Shift Source: YahooSource: http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html
  58. 58. People get upset when they can’t access the same information across multiple devices
  59. 59. People get upset when they can’t access the same information across multiple devices Don’t dumb it down for mobile
  60. 60. FocusPhoto Credit: http://www.flickr.com/photos/hussain_quantum/2087578696
  61. 61. 1024 x 768 320 x 480
  62. 62. ‘‘ Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features for your customers and your business. There simply isn’t room for any interface debris or content of questionable value. You need to know what matters most. — Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?1117
  63. 63. http://twitter.com/#!/stephenhay/status/32906711018766339
  64. 64. Focushttp://imgs.xkcd.com/comics/university_website.png
  65. 65. Bullshit Bullshit BullshitContent
  66. 66. ‘‘ If you design mobile first, you create agreement on what matters most. You can then apply the same rationale to the desktop/laptop version of the Web site. We agreed that this was the most important set of features and content for our customers and business -why should that change with more screen space? — Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?1117
  67. 67. Mobile first
  68. 68. Explore / Play Lookup / Find Edit / CreateCheckin / Status Mobile behaviorsPhoto Credit: http://www.flickr.com/photos/carbonnyc/5140154965
  69. 69. Mobilebehaviors
  70. 70. Content overnavigation
  71. 71. Content overnavigation
  72. 72. Content overnavigation
  73. 73. Content overnavigation
  74. 74. Content overnavigation
  75. 75. Content overnavigationDead end!
  76. 76. Content overnavigation
  77. 77. Content overnavigation
  78. 78. Content overnavigation
  79. 79. Fixedmenu
  80. 80. Embracethe input
  81. 81. Embracethe input
  82. 82. Embracethe input
  83. 83. Do websites need to look exactly the same in every browser? http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  84. 84. Do websites need to be experiencedexactly the same in every browser? http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/
  85. 85. Do websites need to be experiencedexactly the same on every device?
  86. 86. OneWeb
  87. 87. ‘‘ One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices. — W3Chttp://www.w3.org/TR/mobile-bp/#OneWeb
  88. 88. Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/
  89. 89. Fluid gridsPhoto Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/
  90. 90. Fluid grids Flexible imagesPhoto Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/
  91. 91. No, not Browser SniffingPhoto Credit: http://www.flickr.com/photos/timdorr/2096272747/
  92. 92. Fluid grids Flexible images Media queriesPhoto Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/
  93. 93. http://mediaqueri.es/
  94. 94. http://mediaqueri.es/
  95. 95. http://mediaqueri.es/
  96. 96. http://mediaqueri.es/
  97. 97. http://mediaqueri.es/
  98. 98. http://mediaqueri.es/
  99. 99. http://mediaqueri.es/
  100. 100. http://mediaqueri.es/
  101. 101. http://mediaqueri.es/
  102. 102. Mobile FirstResponsive Web Design
  103. 103. Strategy
  104. 104. StrategyStructured Content First Mobile Experience FirstProgressive Enhancement
  105. 105. StrategyStructured Content First Mobile FirstProgressive Enhancement
  106. 106. StrategyStructured Content First Mobile FirstProgressive Enhancement
  107. 107. StructuredContent First
  108. 108. MOBILE WEBSITE WEB MOBILE APPS SOCIAL TABLET MEDIA APPS CONTENTMICROSITES PRINT BLOGS EMAIL INTRANET
  109. 109. MOBILE WEBSITE WEB MOBILE APPS SOCIAL TABLET MEDIA APPSProperly structured content CONTENT is portable to future platforms MICROSITES PRINT BLOGS EMAIL INTRANET
  110. 110. Mobile First
  111. 111. ProgressiveEnhancement
  112. 112. Content is both available to and usable by anyonePhoto Credit: http://www.flickr.com/photos/clagnut/315554083
  113. 113. Solid HTML markupPhoto Credit: http://www.flickr.com/photos/clagnut/315554083
  114. 114. Basic CSS to every browserPhoto Credit: http://www.flickr.com/photos/clagnut/315554083
  115. 115. Advanced CSS to capable browsers and devicesPhoto Credit: http://www.flickr.com/photos/clagnut/315554083
  116. 116. Media queries@media screen and (min-device-width: 480px) and (orientation: landscape) { ...}
  117. 117. Modernizr — testing for capabilities.box { background-color: rgb(127,127,127);}.borderradius .box { border-radius: 6px;}
  118. 118. Vendor prefixes.box { background-color: rgb(127,127,127);}.borderradius .box { -moz-border-radius: 6px; /* Mozilla */ -webkit-border-radius: 6px; /* Webkit */ -o-border-radius: 6px; /* Opera */ -ms-border-radius: 6px; /* IE */ border-radius: 6px;}
  119. 119. LESS – LESS CSS code.rounded-corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; -o-border-radius: @radius; -ms-border-radius: @radius; border-radius: @radius;}#header { .rounded-corners;}#footer { .rounded-corners(10px);}
  120. 120. LESS – generated CSS#header { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;}#footer { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}
  121. 121. Add Javascript unobtrusively to enhance the user experiencePhoto Credit: http://www.flickr.com/photos/clagnut/315554083
  122. 122. “Basic”Slide Credit: http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf
  123. 123. Slide Credit: http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf
  124. 124. Slide Credit: http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf
  125. 125. Does all this sound easy?Photo Credit: http://www.flickr.com/photos/chelsea_nj/4223680604
  126. 126. http://twitter.com/#!/fling/status/50320128524550144
  127. 127. Challenges? Mobile First RWD may require a redesign Large technical challenges Javascript libraries are just beginning to evolve Waiting for the ground-breaking redesigns The technique is still youngPhoto Credit: http://www.flickr.com/photos/chelsea_nj/4223680604
  128. 128. http://mobilewebbestpractices.com/ http://futurefriend.ly/ Resources
  129. 129. Thank You. Jonas Päckos Twitter: @pekkos http://about.me/pekkos

×