Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Embracing the anywhere, everywhere web

Embracing the anywhere, everywhere web

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

Tim Kadlec

May 21, 2012
Tweet

More Decks by Tim Kadlec

Other Decks in Design

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