http://bit.ly/J9REzG
http://flic.kr/p/6sbgQu
“              It is apparent to me that the possibilities                of the aeroplane, which two or three            ...
http://flic.kr/p/bgenU
“              Television wont last because people                will soon get tired of staring at a                plywo...
We’re not good at                         predicting the futurehttp://flic.kr/p/6e7uqr
“   We see the world through a rear-    view mirror. We march    backwards into the future.    Marshall McLuhan
Pre-iPhone      Post-iPhonehttp://bit.ly/A6AhV1
“Moving pictures”http://flic.kr/p/8j93Sm
Reading out loudhttp://flic.kr/p/g4F5j
Radio with pictures               http://flic.kr/p/5cZQTZ
Print is full of constraints                       http://flic.kr/p/6vmzSp
...not shared by the web http://flic.kr/p/anLpJ5
http://www.lukew.com/ff/entry.asp?1506
http://www.lukew.com/ff/entry.asp?1506
http://www.lukew.com/ff/entry.asp?1506
http://www.lukew.com/ff/entry.asp?1506
http://www.lukew.com/ff/entry.asp?1506
Tablet sales$49 billion by 2015                      http://buswk.co/fK2Q9e
Global connected devices302010   0                               2011          2020Source: http://bit.ly/KoRXS0
Global connected devices3020       Over 50% non-mobile10   0                               2011          2020Source: http:...
iCow http://flic.kr/p/y44Rv
http://flic.kr/p/8wwtH4
Different sizes          http://flic.kr/p/7S5qAB
Different networks                     http://flic.kr/p/3bqHYJ
Different hardwarehttp://flic.kr/p/anHsXT
Different supporthttp://flic.kr/p/a9GzWC
Different inputhttp://flic.kr/p/3eVaZ1
Different context             http://flic.kr/p/2ynHaS
“   These examples are just the initial,    telltale signs of a huge new wave of    cheap devices about to invade our    l...
Chaotic & confusing... http://flic.kr/p/6qi1eD
...but also awesomehttp://flic.kr/p/6tTRT1
Just the starthttp://flic.kr/p/3HE7Eq
Rant #1Layout is not enough
Responsive experiences
Constellation of experienceshttp://flic.kr/p/RJUvh
59%http://yhoo.it/rSflAg
34%http://yhoo.it/rSflAg
Contextual experienceshttp://flic.kr/p/6e7uqr
Context is the key to movingfrom a web that responds todevices, to a web thatresponds to people
Smarter defaults
“    Typically, masking passwords     doesnt even increase security,     but it does cost you business     due to login fa...
Hide
Capabilities
http://bit.ly/nJSlwX
http://bit.ly/nJSlwX
http://flic.kr/p/6e7uqr
Battery statusContactsHTML Media CaptureMedia CaptureNetwork InformationSensorVibrationWeb IntentsCalendarMenuGeolocationNFC
Do some research  http://flic.kr/p/6e7uqr
“   If nothing else, it would be wise    for us all to remember that, while    our information technology may    be digita...
We need all the toolswe can gethttp://flic.kr/p/7MdW6A
Rant #2No more dogma
UA detectionis evil!
UA detectionis evil!
Don’t blame the toolsfor the craftsmanhttp://flic.kr/p/7MdW6A
There are badRWD sites
There are badseparate sites
http://bit.ly/GH2nBe
http://flic.kr/p/6e7uqr
http://flic.kr/p/6e7uqr
http://flic.kr/p/6e7uqr
Hug it out                         Hug it outhttp://flic.kr/p/7cVEwZ
Use both!http://flic.kr/p/81vbku
Bad UA detectionis evil!
Don’t exclude.  http://flic.kr/p/6RtJPG
Don’t exclude. Enhance.  http://flic.kr/p/6RtJPG
if ($device->getCapability(has_cellular_radio) ===true) {!   if ($device->getCapability(xhtml_make_phone_call_string) !== ...
if ($device->getCapability(has_cellular_radio) ===true) {!   if ($device->getCapability(xhtml_make_phone_call_string) !== ...
if ($device->getCapability(has_cellular_radio) ===true) {!   if ($device->getCapability(xhtml_make_phone_call_string) !== ...
<?php if ($wireless) { ?>!   <p><a href="<?php echo $method; ?>+18005555555">1-800-555-5555</a></p><?php } else { ?>!   <p...
<?php if ($wireless) { ?>!   <p><a href="<?php echo $method; ?>+18005555555">1-800-555-5555</a></p><?php } else { ?>!   <p...
<?php if ($wireless) { ?>!   <p><a href="<?php echo $method; ?>+18005555555">1-800-555-5555</a></p><?php } else { ?>!   <p...
var width = window.innerWidth;//set a cookie<?php$featureWidth = $_COOKIE[‘featureWidth’];?>
http://flic.kr/p/5ox3ax
</rant>
http://www.ubuntu.com/devices/android
http://bit.ly/KuHXaH
http://breakoutjs.com/
http://jsdo.it/controller
http://jsdo.it/controller
“   Whatʼs holding smart devices    back is our oh-so-human ability    to misunderstand their potential.    Scott Jenson  ...
Beware the rear-view mirrorhttp://flic.kr/p/6e7uqr
http://flic.kr/p/8wwtH4
thank you!TIM KADLECWebVisions, May 2012@tkadlec   timkadlec.com
responsiveenhancement.comhttp://flic.kr/p/6e7uqr
Embracing the anywhere, everywhere web
Embracing the anywhere, everywhere web
Embracing the anywhere, everywhere web
Embracing the anywhere, everywhere web
Embracing the anywhere, everywhere web
Embracing the anywhere, everywhere web
Embracing the anywhere, everywhere web
Upcoming SlideShare
Loading in...5
×

Embracing the anywhere, everywhere web

4,057

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,057
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
45
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Embracing the anywhere, everywhere web

  1. 1. http://bit.ly/J9REzG
  2. 2. http://flic.kr/p/6sbgQu
  3. 3. “ 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, 1895http://flic.kr/p/6sbgQu
  4. 4. http://flic.kr/p/bgenU
  5. 5. “ Television wont last because people will soon get tired of staring at a plywood box every night. Daryl Zanuck, movie producer, 20th Century Fox, 1946http://flic.kr/p/bgenU
  6. 6. We’re not good at predicting the futurehttp://flic.kr/p/6e7uqr
  7. 7. “ We see the world through a rear- view mirror. We march backwards into the future. Marshall McLuhan
  8. 8. Pre-iPhone Post-iPhonehttp://bit.ly/A6AhV1
  9. 9. “Moving pictures”http://flic.kr/p/8j93Sm
  10. 10. Reading out loudhttp://flic.kr/p/g4F5j
  11. 11. Radio with pictures http://flic.kr/p/5cZQTZ
  12. 12. Print is full of constraints http://flic.kr/p/6vmzSp
  13. 13. ...not shared by the web http://flic.kr/p/anLpJ5
  14. 14. http://www.lukew.com/ff/entry.asp?1506
  15. 15. http://www.lukew.com/ff/entry.asp?1506
  16. 16. http://www.lukew.com/ff/entry.asp?1506
  17. 17. http://www.lukew.com/ff/entry.asp?1506
  18. 18. http://www.lukew.com/ff/entry.asp?1506
  19. 19. Tablet sales$49 billion by 2015 http://buswk.co/fK2Q9e
  20. 20. Global connected devices302010 0 2011 2020Source: http://bit.ly/KoRXS0
  21. 21. Global connected devices3020 Over 50% non-mobile10 0 2011 2020Source: http://bit.ly/KoRXS0
  22. 22. iCow http://flic.kr/p/y44Rv
  23. 23. http://flic.kr/p/8wwtH4
  24. 24. Different sizes http://flic.kr/p/7S5qAB
  25. 25. Different networks http://flic.kr/p/3bqHYJ
  26. 26. Different hardwarehttp://flic.kr/p/anHsXT
  27. 27. Different supporthttp://flic.kr/p/a9GzWC
  28. 28. Different inputhttp://flic.kr/p/3eVaZ1
  29. 29. Different context http://flic.kr/p/2ynHaS
  30. 30. “ 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
  31. 31. Chaotic & confusing... http://flic.kr/p/6qi1eD
  32. 32. ...but also awesomehttp://flic.kr/p/6tTRT1
  33. 33. Just the starthttp://flic.kr/p/3HE7Eq
  34. 34. Rant #1Layout is not enough
  35. 35. Responsive experiences
  36. 36. Constellation of experienceshttp://flic.kr/p/RJUvh
  37. 37. 59%http://yhoo.it/rSflAg
  38. 38. 34%http://yhoo.it/rSflAg
  39. 39. Contextual experienceshttp://flic.kr/p/6e7uqr
  40. 40. Context is the key to movingfrom a web that responds todevices, to a web thatresponds to people
  41. 41. Smarter defaults
  42. 42. “ Typically, masking passwords doesnt even increase security, but it does cost you business due to login failures Jakob Nielson http://bit.ly/9X3LAG
  43. 43. Hide
  44. 44. Capabilities
  45. 45. http://bit.ly/nJSlwX
  46. 46. http://bit.ly/nJSlwX
  47. 47. http://flic.kr/p/6e7uqr
  48. 48. Battery statusContactsHTML Media CaptureMedia CaptureNetwork InformationSensorVibrationWeb IntentsCalendarMenuGeolocationNFC
  49. 49. Do some research http://flic.kr/p/6e7uqr
  50. 50. “ 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
  51. 51. We need all the toolswe can gethttp://flic.kr/p/7MdW6A
  52. 52. Rant #2No more dogma
  53. 53. UA detectionis evil!
  54. 54. UA detectionis evil!
  55. 55. Don’t blame the toolsfor the craftsmanhttp://flic.kr/p/7MdW6A
  56. 56. There are badRWD sites
  57. 57. There are badseparate sites
  58. 58. http://bit.ly/GH2nBe
  59. 59. http://flic.kr/p/6e7uqr
  60. 60. http://flic.kr/p/6e7uqr
  61. 61. http://flic.kr/p/6e7uqr
  62. 62. Hug it out Hug it outhttp://flic.kr/p/7cVEwZ
  63. 63. Use both!http://flic.kr/p/81vbku
  64. 64. Bad UA detectionis evil!
  65. 65. Don’t exclude. http://flic.kr/p/6RtJPG
  66. 66. Don’t exclude. Enhance. http://flic.kr/p/6RtJPG
  67. 67. 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;}
  68. 68. 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;}
  69. 69. 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;}
  70. 70. <?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 } ?>
  71. 71. <?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 } ?>
  72. 72. <?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 } ?>
  73. 73. var width = window.innerWidth;//set a cookie<?php$featureWidth = $_COOKIE[‘featureWidth’];?>
  74. 74. http://flic.kr/p/5ox3ax
  75. 75. </rant>
  76. 76. http://www.ubuntu.com/devices/android
  77. 77. http://bit.ly/KuHXaH
  78. 78. http://breakoutjs.com/
  79. 79. http://jsdo.it/controller
  80. 80. http://jsdo.it/controller
  81. 81. “ Whatʼs holding smart devices back is our oh-so-human ability to misunderstand their potential. Scott Jenson http://bit.ly/HS0Jvs
  82. 82. Beware the rear-view mirrorhttp://flic.kr/p/6e7uqr
  83. 83. http://flic.kr/p/8wwtH4
  84. 84. thank you!TIM KADLECWebVisions, May 2012@tkadlec timkadlec.com
  85. 85. responsiveenhancement.comhttp://flic.kr/p/6e7uqr
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×