Making the Web Work on Mobile

Presentation given at Mobile Marketing Live, London, October 4th 2013

Transcript

1. Making the Web work on Mobile Mobile Marketing Live Ronan Cremin, CTO dotMobi @xbs Friday 4 October 13
2. Friday 4 October 13
3. Friday 4 October 13
4. Where is mobile web today? Friday 4 October 13
5. #mml PC, 1995 Friday 4 October 13
6. #mml PC, 2000 Friday 4 October 13
7. #mml PC, 2005 Friday 4 October 13
8. #mml PC, 2013 Friday 4 October 13
9. #mml PC, 2013 1024 x 768 keyboard mouse Friday 4 October 13
10. #mml 1024 x 768 + keyboard + mouse = A4 of the web Friday 4 October 13
11. #mml PC: computing capability, physical interface richness 1990 year capability 2007 Friday 4 October 13
12. #mml PC: computing capability, physical interface richness 1990 year RAM capability 2007 Friday 4 October 13
13. #mml PC: computing capability, physical interface richness 1990 year RAM MIPS capability 2007 Friday 4 October 13
14. #mml PC: computing capability, physical interface richness 1990 year RAM MIPS screen size capability 2007 Friday 4 October 13
15. #mml PC: computing capability, physical interface richness 1990 year RAM MIPS screen size capability 2007 screen resolution Friday 4 October 13
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. #mml Web evolution engendered by device diversity 1990 2007 2013 2000 Friday 4 October 13
18. #mml Web evolution engendered by device diversity 1990 2007 2013 2000 dark ages of the web— web is monoculture Friday 4 October 13
19. #mml Web evolution engendered by device diversity 1990 2007 2013 2000 dark ages of the web— web is monoculture age of enlightenment — web diversity Friday 4 October 13
20. 2002 mind the gap portable capable Friday 4 October 13
21. 2013 Friday 4 October 13
22. 2013 Friday 4 October 13
23. 2013 Friday 4 October 13
24. 2013 Friday 4 October 13
25. 2013 Friday 4 October 13
26. 2013 Friday 4 October 13
27. 2013 Friday 4 October 13
28. 2013 Friday 4 October 13
29. 2013 mobile = spectrum of device types Friday 4 October 13
30. 2013 mobile = spectrum of device types Friday 4 October 13
31. New devices drive exponential reach mainframe workstation PC netbook mobile Friday 4 October 13
32. And increased availability workstation PC mobile 24:00 0:00 9:00 17:00 Friday 4 October 13
33. Making the web work on mobile 3 principles for success Friday 4 October 13
34. 1. The mobile web is truly global Friday 4 October 13
35. WWW Friday 4 October 13
36. WWW western world web Friday 4 October 13
37. WWW western world web Friday 4 October 13
38. WWW western world web wealthy wonders web Friday 4 October 13
39. WWW western world web wealthy wonders web Friday 4 October 13
40. WWW world wide web western world web wealthy wonders web Friday 4 October 13
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. 2. The mobile web—a new medium Friday 4 October 13
43. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 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. 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. 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. 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. #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. Friday 4 October 13
61. Friday 4 October 13
62. Friday 4 October 13
63. portion of north ceiling portion of south wall corner pendentive portion of east wall corner pendentive spandrel spandrel Friday 4 October 13
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. 3. Embrace the devices One size does not fit all Friday 4 October 13
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. 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. 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. 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. 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. amazon.com Friday 4 October 13
72. google.com Friday 4 October 13
73. tripadvisor.com Friday 4 October 13
74. Walmart Friday 4 October 13
75. Wrap up Friday 4 October 13
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. 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. 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. 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. 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. http://deviceatlas.com/ resources/whitepapers http://deviceatlas.com/ Ronan Cremin rcremin@afilias.info @xbs http://gomobi.info/ Friday 4 October 13