Ronan cremin dot mobi - mml 2013

588 views

Published on

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
588
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ronan cremin dot mobi - mml 2013

  1. 1. Making the Web work on Mobile Mobile Marketing Live Ronan Cremin, CTO dotMobi @xbs Friday 4 October 13
  2. 2. Friday 4 October 13
  3. 3. Friday 4 October 13
  4. 4. Where is mobile web today? Friday 4 October 13
  5. 5. #mml PC, 1995 Friday 4 October 13
  6. 6. #mml PC, 2000 Friday 4 October 13
  7. 7. #mml PC, 2005 Friday 4 October 13
  8. 8. #mml PC, 2013 Friday 4 October 13
  9. 9. #mml PC, 2013 1024 x 768 keyboard mouse Friday 4 October 13
  10. 10. #mml 1024 x 768 + keyboard + mouse = A4 of the web Friday 4 October 13
  11. 11. #mml PC: computing capability, physical interface richness 1990 year capability 2007 Friday 4 October 13
  12. 12. #mml PC: computing capability, physical interface richness 1990 year RAM capability 2007 Friday 4 October 13
  13. 13. #mml PC: computing capability, physical interface richness 1990 year RAM MIPS capability 2007 Friday 4 October 13
  14. 14. #mml PC: computing capability, physical interface richness 1990 year RAM MIPS screen size capability 2007 Friday 4 October 13
  15. 15. #mml PC: computing capability, physical interface richness 1990 year RAM MIPS screen size capability 2007 screen resolution Friday 4 October 13
  16. 16. #mml PC: computing capability, physical interface richness 1990 year RAM MIPS screen size capability 2007 screen resolution richness of interface Friday 4 October 13
  17. 17. #mml Web evolution engendered by device diversity 1990 2007 20132000 Friday 4 October 13
  18. 18. #mml Web evolution engendered by device diversity 1990 2007 20132000 dark ages of the web— web is monoculture Friday 4 October 13
  19. 19. #mml Web evolution engendered by device diversity 1990 2007 20132000 dark ages of the web— web is monoculture age of enlightenment — web diversity Friday 4 October 13
  20. 20. 2002 mind the gap portable capable Friday 4 October 13
  21. 21. 2013 Friday 4 October 13
  22. 22. 2013 Friday 4 October 13
  23. 23. 2013 Friday 4 October 13
  24. 24. 2013 Friday 4 October 13
  25. 25. 2013 Friday 4 October 13
  26. 26. 2013 Friday 4 October 13
  27. 27. 2013 Friday 4 October 13
  28. 28. 2013 Friday 4 October 13
  29. 29. 2013 mobile = spectrum of device types Friday 4 October 13
  30. 30. 2013 mobile = spectrum of device types Friday 4 October 13
  31. 31. New devices drive exponential reach mainframe workstation PC netbook mobile Friday 4 October 13
  32. 32. And increased availability workstation PC mobile 24:000:00 9:00 17:00 Friday 4 October 13
  33. 33. Making the web work on mobile 3 principles for success Friday 4 October 13
  34. 34. 1. The mobile web is truly global Friday 4 October 13
  35. 35. WWW Friday 4 October 13
  36. 36. WWWwestern world web Friday 4 October 13
  37. 37. WWWwestern world web Friday 4 October 13
  38. 38. WWWwestern world web wealthy wonders web Friday 4 October 13
  39. 39. WWWwestern world web wealthy wonders web Friday 4 October 13
  40. 40. WWW world wide web western world web wealthy wonders web Friday 4 October 13
  41. 41. It’s for everyone, everywhere • This means: • myriad device types • differing connectivity • different costs • different contexts & use cases • different languages • It’s not just for the west, on our devices, with our bandwidth • Use Responsible Web Design Friday 4 October 13
  42. 42. 2. The mobile web—a new medium Friday 4 October 13
  43. 43. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  44. 44. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  45. 45. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  46. 46. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  47. 47. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  48. 48. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  49. 49. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  50. 50. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  51. 51. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods Friday 4 October 13
  52. 52. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods 106x Friday 4 October 13
  53. 53. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods 106x Friday 4 October 13
  54. 54. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods 106x Friday 4 October 13
  55. 55. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TVMobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m Contexts, interfaces, input methods defies easy classification 106x Friday 4 October 13
  56. 56. Web on mobile, new medium • Mobile web uses HTTP, HTML, CSS and JavaScript, just like the web we know • But it is effectively a new medium, and should be treated as such • This new medium runs on a vast array of devices, sizes shapes • New interfaces: touch, accelerometers, cameras, gyroscope, compass • New contexts: outdoors, on the move, supine 176 x 220 to 800 x 1280 0.3m Friday 4 October 13
  57. 57. New medium example: television • The first television shows were people simply reading books, vaudeville shows • 20 years later: the first “TV- native” programming emerged • Soap operas • Sitcoms • 50 years later: reality TV Friday 4 October 13
  58. 58. New medium example: desktop web • Many early websites mimicked print • images & image maps used in place of web-native content • 15+ years before the first “web- native” ideas were invented • sites that had no real precedent • things that were “inherently web” could’t really have been done with previous media • Facebook, Google maps • We’re still getting used to the idea that there isn’t really a “fold” on the web—scrolling is effortless Friday 4 October 13
  59. 59. #mml History of adapting to new media • Content creators struggle to understand new media • Initial uses mimic those of previous media • New medium capabilities remain misunderstood and under-utilized • Experiences “native” to the new media emerge slowly— decades • Retro-fitting old content to new media stifles innovation • So what about the new web? Friday 4 October 13
  60. 60. Friday 4 October 13
  61. 61. Friday 4 October 13
  62. 62. Friday 4 October 13
  63. 63. portion of north ceiling portion of south wall corner pendentive portion of east wall corner pendentive spandrel spandrel Friday 4 October 13
  64. 64. Good experiences are native, not converted • Key lesson from previous media: • Good experiences are native to the medium • Good experiences acknowledge and harness their container • Retro-fitting doesn’t work—let’s not force-fit our desktop web to the new devices • Let’s not wait 20 years to work out how to use newly diverse web Friday 4 October 13
  65. 65. 3. Embrace the devices One size does not fit all Friday 4 October 13
  66. 66. The device is the canvas • In this renaissance of the web, the device is the canvas—from feature phone to TV • But the canvas isn’t fixed— this is no longer a valid assumption for the artist • The paint is still HTML, CSS and JavaScript, the protocol is still HTTP ..but the techniques have to change Friday 4 October 13
  67. 67. Know your canvas—device awareness • The new web is defined by the devices that constitute it • Embracing the device in question is best way to ensure a good experience • Craft experiences to suit the context & device: • Be aware of its features, harness them • Know its limitations, work around them • How can we achieve this? Friday 4 October 13
  68. 68. Know your canvas—device awareness • The new web is defined by the devices that constitute it • Embracing the device in question is best way to ensure a good experience • Craft experiences to suit the context & device: • Be aware of its features, harness them • Know its limitations, work around them • How can we achieve this? ☒ makes calls ☐ big screen ☐ touch screen ☐ makes calls ☒ big screen ☒ touch screen ☐ makes calls ☒ big screen ☐ touch screen Friday 4 October 13
  69. 69. Leverage device capabilities • Know the device • device type: mobile | desktop | tablet | TV | e-reader | set-top box • hardware features: camera | screen colour depth • model, vendor, operating system, version • Tailor the experience Friday 4 October 13
  70. 70. Leverage device capabilities • Know the device • device type: mobile | desktop | tablet | TV | e-reader | set-top box • hardware features: camera | screen colour depth • model, vendor, operating system, version • Tailor the experience mobile device? has camera? supports touch? Friday 4 October 13
  71. 71. amazon.com Friday 4 October 13
  72. 72. google.com Friday 4 October 13
  73. 73. tripadvisor.com Friday 4 October 13
  74. 74. Walmart Friday 4 October 13
  75. 75. Wrap up Friday 4 October 13
  76. 76. A web renaissance • There are macro-level changes happening on the web, a web renaissance is beginning • New devices are finally enabling the web to reach its full potential and audience • The new capabilities effectively engender a new medium • Every indication that this diversity will increase over time —phones & tablets are just the beginning • The web experience in this new landscape is becoming a differentiating factor for brands Friday 4 October 13
  77. 77. Design for the new medium • It’s a world wide web, not a local one • Design for different devices, connectivity, use cases • Use Responsible Web Design • Mobile web isn’t a shrunken web • It can do more, but you have to design for it • Don’t limit yourself to desktop web thinking • Embrace the devices • Each has unique features— know them & avail of them! Friday 4 October 13
  78. 78. Design for the new medium • It’s a world wide web, not a local one • Design for different devices, connectivity, use cases • Use Responsible Web Design • Mobile web isn’t a shrunken web • It can do more, but you have to design for it • Don’t limit yourself to desktop web thinking • Embrace the devices • Each has unique features— know them & avail of them! Friday 4 October 13
  79. 79. Design for the new medium • It’s a world wide web, not a local one • Design for different devices, connectivity, use cases • Use Responsible Web Design • Mobile web isn’t a shrunken web • It can do more, but you have to design for it • Don’t limit yourself to desktop web thinking • Embrace the devices • Each has unique features— know them & avail of them! Friday 4 October 13
  80. 80. Design for the new medium • It’s a world wide web, not a local one • Design for different devices, connectivity, use cases • Use Responsible Web Design • Mobile web isn’t a shrunken web • It can do more, but you have to design for it • Don’t limit yourself to desktop web thinking • Embrace the devices • Each has unique features— know them & avail of them! Friday 4 October 13
  81. 81. http://deviceatlas.com/ resources/whitepapers http://deviceatlas.com/ Ronan Cremin rcremin@afilias.info @xbs http://gomobi.info/ Friday 4 October 13

×