Jonas Päckos Mobile           @pekkosexperiences
This is not                                                                    the WebSlide Credit: http://www.slideshare....
Web         This is the Web      Web                                           Web                  Web   Web            W...
Smart Phones pass               PC vs. Smartphone Shipments                         PC Sales                              ...
Thank You, Steve
the smartphone                                                                                                            ...
brings touch, gestures                                                                                                    ...
native apps and                                                                                                           ...
whither feature phones,                                                                                  and the further r...
blackberry                                                    kindle                                                      ...
the bleeding edge...                                                                                         +            ...
On the go                                      Limited bandwidth                                   One-thumbed and one-eye...
84% at home80% during miscellaneous times during the day74% waiting in lines64% at workSource: http://blog.compete.com/201...
mobile is also used                                                                 to time-shift 59% 59%                 ...
...and       34%     34%                                                           follow up                              ...
67%                                                  23%                                                  16%             ...
Twitter 55%        Facebook 33%        http://www.slideshare.net/HanWang3/69309864-kpcbinternettrends2011Photo Credit: htt...
10% of visitors on mobile devices
steep increase since last year
Are we offering anythingmobile yet?
https://twitter.com/#!/lukew/status/126110249760460800
Location Based ServicesPhoto Credit: http://blog.affiliatewindow.com/wp-content/uploads/2011/11/M-Commerce-The-Complete-Pic...
Quick Response CodePhoto Credit: http://www.flickr.com/photos/waynesutton/5094463490/
ARAugmented Reality
ARAugmented Reality
Near Field CommunicationPhoto Credit: http://www.flickr.com/photos/georgo10/3286708793/
http://twitter.com/#!/jamespearce/status/44882337254744064
App or Web?
App•   Access address book, SMS,    camera, audio input and other    sensors•   Location detection, Device    orientation•...
Web•   Location detection, Device    orientation•   Harder to get on users home    screen•   Web don’t require users to   ...
http://twitter.com/#!/bryanrieger/statuses/26479742726
Native appsincrease web useon mobile devices
Links don’t open apps, they go to web pages
App or Web?
App or Web?
App and Web!
NativeHybrid AppsWeb
Hybrid AppDownloaded from app store     Stored on device  Launched like an app
Hybrid App     Same capabilities as native apps(almost) Indistinguishable from a native app
Hybrid AppHTML, CSS, Javascript     frameworks    jQuery Mobile    Sencha TouchTitanium Appcelerator      Phone Gap
•§
Hybrid App       Reuse code between different platformsLoad pages from your website, or implement the entire              ...
Web AppWeb apps are similiar to mobile web sites, but is tailor-            made for the mobile platformMobile-device-cent...
http://twitter.com/#!/stephenhay/status/23350345962889216
Mobile experience
‘‘                Desktop computers and mobile devices are so                different that the only way to offer a great ...
http://twitter.com/#!/wilto/statuses/63284673723375616
‘‘                Desktop computers and mobile devices are so                different that the only way to offer a great ...
Device
84% at home80% during miscellaneous times during the day74% waiting in lines64% at workSource: http://blog.compete.com/201...
Context
http://twitter.com/#!/nstop/status/124561806671888384
http://www.guardian.co.uk/help/insideguardian/2010/nov/04/new-guardian-mobile-website
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?...
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?...
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?...
...and       34%     34%                                                           follow up                              ...
People get upset when they can’t access the same information across multiple                devices
People get upset when they can’t access the same information across multiple                devices    Don’t dumb it down ...
FocusPhoto Credit: http://www.flickr.com/photos/hussain_quantum/2087578696
1024 x 768   320 x 480
‘‘                Losing 80% of your screen space forces you to                focus. You need to make sure that what stay...
http://twitter.com/#!/stephenhay/status/32906711018766339
Focushttp://imgs.xkcd.com/comics/university_website.png
Bullshit Bullshit            BullshitContent
‘‘                If you design mobile first, you create agreement on                what matters most. You can then apply...
Mobile first
Explore / Play                                                   Lookup / Find                                            ...
Mobilebehaviors
Content   overnavigation
Content   overnavigation
Content   overnavigation
Content   overnavigation
Content   overnavigation
Content   overnavigationDead end!
Content   overnavigation
Content   overnavigation
Content   overnavigation
Fixedmenu
Embracethe input
Embracethe input
Embracethe input
Do websites need to look exactly the   same in every     browser?  http://dowebsitesneedtolookexactlythesameineverybrowser...
Do websites need to  be experiencedexactly the same in  every browser? http://dowebsitesneedtobeexperiencedexactlythesamei...
Do websites need to  be experiencedexactly the same on   every device?
OneWeb
‘‘              One Web means making, as far as is reasonable, the              same information and services available to...
Photo Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/
Fluid gridsPhoto Credit: http://www.flickr.com/photos/londonannie/4904832807/lightbox/
Fluid grids                                   Flexible imagesPhoto Credit: http://www.flickr.com/photos/londonannie/4904832...
No, not Browser SniffingPhoto Credit: http://www.flickr.com/photos/timdorr/2096272747/
Fluid grids                                   Flexible images                                         Media queriesPhoto C...
http://mediaqueri.es/
http://mediaqueri.es/
http://mediaqueri.es/
http://mediaqueri.es/
http://mediaqueri.es/
http://mediaqueri.es/
http://mediaqueri.es/
http://mediaqueri.es/
http://mediaqueri.es/
Mobile FirstResponsive Web    Design
Strategy
StrategyStructured Content First Mobile Experience FirstProgressive Enhancement
StrategyStructured Content First      Mobile FirstProgressive Enhancement
StrategyStructured Content First      Mobile FirstProgressive Enhancement
StructuredContent First
MOBILE           WEBSITE     WEB       MOBILE                                  APPS  SOCIAL                               ...
MOBILE             WEBSITE    WEB       MOBILE                                   APPS    SOCIAL                           ...
Mobile First
ProgressiveEnhancement
Content is both available to  and usable by anyonePhoto Credit: http://www.flickr.com/photos/clagnut/315554083
Solid HTML markupPhoto Credit: http://www.flickr.com/photos/clagnut/315554083
Basic CSS to every browserPhoto Credit: http://www.flickr.com/photos/clagnut/315554083
Advanced CSS to capable    browsers and devicesPhoto Credit: http://www.flickr.com/photos/clagnut/315554083
Media queries@media screen and (min-device-width: 480px)    and (orientation: landscape) {    ...}
Modernizr            — testing for capabilities.box {    background-color: rgb(127,127,127);}.borderradius .box {    borde...
Vendor prefixes.box {    background-color: rgb(127,127,127);}.borderradius .box {    -moz-border-radius: 6px; /* Mozilla *...
LESS – LESS CSS code.rounded-corners (@radius: 5px) {    -moz-border-radius: @radius;    -webkit-border-radius: @radius;  ...
LESS – generated CSS#header {    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    -o-border-radius: 5px;    -ms-...
Add Javascript     unobtrusively to enhance       the user experiencePhoto Credit: http://www.flickr.com/photos/clagnut/315...
“Basic”Slide Credit: http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf
Slide Credit: http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf
Slide Credit: http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdf
Does all this sound                      easy?Photo Credit: http://www.flickr.com/photos/chelsea_nj/4223680604
http://twitter.com/#!/fling/status/50320128524550144
Challenges?             Mobile First RWD may require a redesign                      Large technical challenges           ...
http://mobilewebbestpractices.com/   http://futurefriend.ly/                Resources
Thank You.             Jonas Päckos             Twitter: @pekkos             http://about.me/pekkos
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Mobile experiences
Upcoming SlideShare
Loading in …5
×

Mobile experiences

2,007 views
1,947 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
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,007
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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

×