Embracing the anywhere, everywhere web

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

Transcript

1. View Slide

2. http://bit.ly/J9REzG
   

   View Slide

3. http://flic.kr/p/6sbgQu
   

   View Slide

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
   “
   

   View Slide

5. http://flic.kr/p/bgenU
   

   View Slide

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
   “
   

   View Slide

7. http://flic.kr/p/6e7uqr
   We’re not good at
   predicting the future
   

   View Slide

8. We see the world through a rear-
   view mirror. We march
   backwards into the future.
   Marshall McLuhan
   “
   

   View Slide

9. http://bit.ly/A6AhV1
   Pre-iPhone
   Post-iPhone
   

   View Slide

10. “Moving pictures”
    http://flic.kr/p/8j93Sm
    

    View Slide

11. http://flic.kr/p/g4F5j
    Reading out loud
    

    View Slide

12. http://flic.kr/p/5cZQTZ
    Radio with pictures
    

    View Slide

13. http://flic.kr/p/6vmzSp
    Print is full of constraints
    

    View Slide

14. http://flic.kr/p/anLpJ5
    ...not shared by the web
    

    View Slide

15. http://www.lukew.com/ff/entry.asp?1506
    

    View Slide

16. http://www.lukew.com/ff/entry.asp?1506
    

    View Slide

17. http://www.lukew.com/ff/entry.asp?1506
    

    View Slide

18. http://www.lukew.com/ff/entry.asp?1506
    

    View Slide

19. http://www.lukew.com/ff/entry.asp?1506
    

    View Slide

20. Tablet sales
    http://buswk.co/fK2Q9e
    $49 billion by 2015
    

    View Slide

21. Source: http://bit.ly/KoRXS0
    0
    10
    20
    30
    2011 2020
    Global connected devices
    

    View Slide

22. Source: http://bit.ly/KoRXS0
    0
    10
    20
    30
    2011 2020
    Global connected devices
    Over 50% non-mobile
    

    View Slide

23. http://flic.kr/p/y44Rv
    iCow
    

    View Slide

24. http://flic.kr/p/8wwtH4
    

    View Slide

25. Different sizes
    http://flic.kr/p/7S5qAB
    

    View Slide

26. Different networks
    http://flic.kr/p/3bqHYJ
    

    View Slide

27. Different hardware
    http://flic.kr/p/anHsXT
    

    View Slide

28. Different support
    http://flic.kr/p/a9GzWC
    

    View Slide

29. Different input
    http://flic.kr/p/3eVaZ1
    

    View Slide

30. Different context
    http://flic.kr/p/2ynHaS
    

    View Slide

31. View Slide

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
    

    View Slide

33. http://flic.kr/p/6qi1eD
    Chaotic & confusing...
    

    View Slide

34. http://flic.kr/p/6tTRT1
    ...but also awesome
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. http://flic.kr/p/3HE7Eq
    Just the start
    

    View Slide

39. Layout is not enough
    Rant #1
    

    View Slide

40. View Slide

41. Responsive experiences
    

    View Slide

42. Constellation of experiences
    http://flic.kr/p/RJUvh
    

    View Slide

43. http://yhoo.it/rSflAg
    59%
    

    View Slide

44. http://yhoo.it/rSflAg
    34%
    

    View Slide

45. Contextual experiences
    http://flic.kr/p/6e7uqr
    

    View Slide

46. Context is the key to moving
    from a web that responds to
    devices, to a web that
    responds to people
    

    View Slide

47. Smarter defaults
    

    View Slide

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
    

    View Slide

49. View Slide

50. Hide
    

    View Slide

51. Capabilities
    

    View Slide

52. http://bit.ly/nJSlwX
    

    View Slide

53. http://bit.ly/nJSlwX
    

    View Slide

54. http://flic.kr/p/6e7uqr
    

    View Slide

55. Battery status
    Contacts
    HTML Media Capture
    Media Capture
    Network Information
    Sensor
    Vibration
    Web Intents
    Calendar
    Menu
    Geolocation
    NFC
    

    View Slide

56. Do some research
    http://flic.kr/p/6e7uqr
    

    View Slide

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
    

    View Slide

58. We need all the tools
    we can get
    http://flic.kr/p/7MdW6A
    

    View Slide

59. No more dogma
    Rant #2
    

    View Slide

60. UA detection
    is evil!
    

    View Slide

61. UA detection
    is evil!
    

    View Slide

62. Don’t blame the tools
    for the craftsman
    http://flic.kr/p/7MdW6A
    

    View Slide

63. There are bad
    RWD sites
    

    View Slide

64. There are bad
    separate sites
    

    View Slide

65. http://bit.ly/GH2nBe
    

    View Slide

66. http://flic.kr/p/6e7uqr
    

    View Slide

67. http://flic.kr/p/6e7uqr
    

    View Slide

68. http://flic.kr/p/6e7uqr
    

    View Slide

69. Hug it out
    http://flic.kr/p/7cVEwZ
    Hug it out
    

    View Slide

70. Use both!
    http://flic.kr/p/81vbku
    

    View Slide

71. Bad UA detection
    is evil!
    

    View Slide

72. Don’t exclude.
    http://flic.kr/p/6RtJPG
    

    View Slide

73. Don’t exclude.Enhance.
    http://flic.kr/p/6RtJPG
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

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;
    }
    

    View Slide

77. 
    ! 1-800-555-5555
    
    ! 1-800-555-5555
    
    

    View Slide

78. 
    ! 1-800-555-5555
    
    ! 1-800-555-5555
    
    

    View Slide

79. 
    ! 1-800-555-5555
    
    ! 1-800-555-5555
    
    

    View Slide

80. var width = window.innerWidth;
    //set a cookie
    $featureWidth = $_COOKIE[‘featureWidth’];
    ?>
    

    View Slide

81. http://flic.kr/p/5ox3ax
    

    View Slide

82. 
    

    View Slide

83. http://www.ubuntu.com/devices/android
    

    View Slide

84. http://bit.ly/KuHXaH
    

    View Slide

85. http://breakoutjs.com/
    

    View Slide

86. http://jsdo.it/controller
    

    View Slide

87. http://jsdo.it/controller
    

    View Slide

88. Whatʼs holding smart devices
    back is our oh-so-human ability
    to misunderstand their potential.
    Scott Jenson
    “
    http://bit.ly/HS0Jvs
    

    View Slide

89. http://flic.kr/p/6e7uqr
    Beware the rear-view mirror
    

    View Slide

90. http://flic.kr/p/8wwtH4
    

    View Slide

91. thank you!
    TIM KADLEC
    WebVisions, May 2012
    @tkadlec timkadlec.com
    

    View Slide

92. http://flic.kr/p/6e7uqr
    responsiveenhancement.com
    

    View Slide