Embracing the anywhere, everywhere web

Presented at WebVisions 2012 in Portland on May 17, 2012.

Transcript

2. http://bit.ly/J9REzG
3. http://flic.kr/p/6sbgQu
4. http://flic.kr/p/6sbgQu It is apparent to me that the possibilities of the aeroplane, which two or three years ago were thought to hold the solution to the [flying machine] problem, have been exhausted, and that we must turn elsewhere. Thomas Edison, 1895 “
5. http://flic.kr/p/bgenU
6. http://flic.kr/p/bgenU Television won't last because people will soon get tired of staring at a plywood box every night. Daryl Zanuck, movie producer, 20th Century Fox, 1946 “
7. http://flic.kr/p/6e7uqr We’re not good at predicting the future
8. We see the world through a rear- view mirror. We march backwards into the future. Marshall McLuhan “
9. http://bit.ly/A6AhV1 Pre-iPhone Post-iPhone
10. “Moving pictures” http://flic.kr/p/8j93Sm
11. http://flic.kr/p/g4F5j Reading out loud
12. http://flic.kr/p/5cZQTZ Radio with pictures
13. http://flic.kr/p/6vmzSp Print is full of constraints
14. http://flic.kr/p/anLpJ5 ...not shared by the web
15. http://www.lukew.com/ff/entry.asp?1506
16. http://www.lukew.com/ff/entry.asp?1506
17. http://www.lukew.com/ff/entry.asp?1506
18. http://www.lukew.com/ff/entry.asp?1506
19. http://www.lukew.com/ff/entry.asp?1506
20. Tablet sales http://buswk.co/fK2Q9e $49 billion by 2015
21. Source: http://bit.ly/KoRXS0 0 10 20 30 2011 2020 Global connected devices
22. Source: http://bit.ly/KoRXS0 0 10 20 30 2011 2020 Global connected devices Over 50% non-mobile
23. http://flic.kr/p/y44Rv iCow
24. http://flic.kr/p/8wwtH4
25. Different sizes http://flic.kr/p/7S5qAB
26. Different networks http://flic.kr/p/3bqHYJ
27. Different hardware http://flic.kr/p/anHsXT
28. Different support http://flic.kr/p/a9GzWC
29. Different input http://flic.kr/p/3eVaZ1
30. Different context http://flic.kr/p/2ynHaS
32. These examples are just the initial, telltale signs of a huge new wave of cheap devices about to invade our lives—a zombie apocalypse of electronics, if you will. Scott Jenson “ http://bit.ly/giroPy
33. http://flic.kr/p/6qi1eD Chaotic & confusing...
34. http://flic.kr/p/6tTRT1 ...but also awesome
38. http://flic.kr/p/3HE7Eq Just the start
39. Layout is not enough Rant #1
41. Responsive experiences
42. Constellation of experiences http://flic.kr/p/RJUvh
43. http://yhoo.it/rSflAg 59%
44. http://yhoo.it/rSflAg 34%
45. Contextual experiences http://flic.kr/p/6e7uqr
46. Context is the key to moving from a web that responds to devices, to a web that responds to people
47. Smarter defaults
48. Typically, masking passwords doesn't even increase security, but it does cost you business due to login failures Jakob Nielson “ http://bit.ly/9X3LAG
50. Hide
51. Capabilities
52. http://bit.ly/nJSlwX
53. http://bit.ly/nJSlwX
54. http://flic.kr/p/6e7uqr
55. Battery status Contacts HTML Media Capture Media Capture Network Information Sensor Vibration Web Intents Calendar Menu Geolocation NFC
56. Do some research http://flic.kr/p/6e7uqr
57. If nothing else, it would be wise for us all to remember that, while our information technology may be digital in nature, the human beings interacting with it will always be infuriatingly and delightfully analog. Adam Greenfield “ Everyware: The Dawning Age of Ubiquitous Computing
58. We need all the tools we can get http://flic.kr/p/7MdW6A
59. No more dogma Rant #2
60. UA detection is evil!
61. UA detection is evil!
62. Don’t blame the tools for the craftsman http://flic.kr/p/7MdW6A
63. There are bad RWD sites
64. There are bad separate sites
65. http://bit.ly/GH2nBe
66. http://flic.kr/p/6e7uqr
67. http://flic.kr/p/6e7uqr
68. http://flic.kr/p/6e7uqr
69. Hug it out http://flic.kr/p/7cVEwZ Hug it out
70. Use both! http://flic.kr/p/81vbku
71. Bad UA detection is evil!
72. Don’t exclude. http://flic.kr/p/6RtJPG
73. Don’t exclude.Enhance. http://flic.kr/p/6RtJPG
74. if ($device->getCapability('has_cellular_radio') === 'true') { ! if ($device->getCapability ('xhtml_make_phone_call_string') !== 'none') { ! ! $wireless = true; ! ! $method = $device->getCapability ('xhtml_make_phone_call_string'); ! } else { ! ! $wireless = false; ! } } else { ! $wireless = false; }
75. if ($device->getCapability('has_cellular_radio') === 'true') { ! if ($device->getCapability ('xhtml_make_phone_call_string') !== 'none') { ! ! $wireless = true; ! ! $method = $device->getCapability ('xhtml_make_phone_call_string'); ! } else { ! ! $wireless = false; ! } } else { ! $wireless = false; }
76. if ($device->getCapability('has_cellular_radio') === 'true') { ! if ($device->getCapability ('xhtml_make_phone_call_string') !== 'none') { ! ! $wireless = true; ! ! $method = $device->getCapability ('xhtml_make_phone_call_string'); ! } else { ! ! $wireless = false; ! } } else { ! $wireless = false; }
77. <?php if ($wireless) { ?> ! <p><a href="<?php echo $method; ?> +18005555555">1-800-555-5555</a></p> <?php } else { ?> ! <p class="call">1-800-555-5555</p> <?php } ?>
78. <?php if ($wireless) { ?> ! <p><a href="<?php echo $method; ?> +18005555555">1-800-555-5555</a></p> <?php } else { ?> ! <p class="call">1-800-555-5555</p> <?php } ?>
79. <?php if ($wireless) { ?> ! <p><a href="<?php echo $method; ?> +18005555555">1-800-555-5555</a></p> <?php } else { ?> ! <p class="call">1-800-555-5555</p> <?php } ?>
80. var width = window.innerWidth; //set a cookie <?php $featureWidth = $_COOKIE[‘featureWidth’]; ?>
81. http://flic.kr/p/5ox3ax
82. </rant>
83. http://www.ubuntu.com/devices/android
84. http://bit.ly/KuHXaH
85. http://breakoutjs.com/
86. http://jsdo.it/controller
87. http://jsdo.it/controller
88. Whatʼs holding smart devices back is our oh-so-human ability to misunderstand their potential. Scott Jenson “ http://bit.ly/HS0Jvs
89. http://flic.kr/p/6e7uqr Beware the rear-view mirror
90. http://flic.kr/p/8wwtH4
91. thank you! TIM KADLEC WebVisions, May 2012 @tkadlec timkadlec.com
92. http://flic.kr/p/6e7uqr responsiveenhancement.com