$30 off During Our Annual Pro Sale. View Details »

Creating Responsive Experiences

Tim Kadlec
June 07, 2012
Design
7
730

Creating Responsive Experiences

Presented at BDConf :focus on Responsive in Minneapolis, MN on June 4, 2012

Tim Kadlec

June 07, 2012
Tweet

More Decks by Tim Kadlec

See All by Tim Kadlec
The State of Node.js Security, at Node.js Interactive 2017
tkadlec
1
210
JavaScript Exposed at Midwest JS
tkadlec
3
230
Focusing On What Matters, at Fluent, 2017
tkadlec
0
87
Once More, With Feeling at Code 2016 in Sydney
tkadlec
1
440
Once More, With Feeling
tkadlec
9
1.4k
Mobile Image Processing at London Web Perf Meetup, 2016
tkadlec
1
150
Better By Proxy at Velocity NY 2015
tkadlec
3
430
Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015
tkadlec
9
990
Reaching Everyone, Fast at From the Front, 2015
tkadlec
8
6.1k

Other Decks in Design

See All in Design
ARコンテンツの考え方 - クリエイターでなくても「おもしろい」ARコンテンツを制作したい！
1901drama
0
300
[UX/UI design] Target users and developmental psychology
shira0000000
1
180
メタバース プレゼン講座1. マインドセット編
yusuke_akita
0
120
Artistic_Arcane
solmetts
0
160
UXA2022 Day 1; Liz Adcock - Enterprise Service Design for Government: De-risking the design and delivery of digital services
uxaustralia
PRO
0
130
UXA2022 Day 1; Natasha Ballantyne - The life-changing potential of digital inclusion
uxaustralia
PRO
0
180
Lazer Robot Rabbits
leemwitz
0
120
プロダクトマネジメントと人間中心設計 - デザイナーからPMへのキャリアシフト -
hiromasa_yoshikawa
1
770
UXA2022 Day 2; Rich Brophy - Death to “best practice”: The journey to cohesive design practice at scale
uxaustralia
PRO
0
400
Vivliostyle.jsの先行実装から考えるCSS text-spacingプロパティ
terkel
0
550
Kubo
airinbudiman
0
240
We’re Not doing Design Systems Properly and That’s Okay
morganepeng
0
270

Featured

See All Featured
Design by the Numbers
sachag
271
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
780
Agile that works and the tools we love
rasmusluckow
320
19k
Producing Creativity
orderedlist
PRO
335
37k
The Art of Programming - Codeland 2020
erikaheidi
35
11k
GitHub's CSS Performance
jonrohan
1020
430k
Rails Girls Zürich Keynote
gr2m
87
12k
Debugging Ruby Performance
tmm1
67
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
4 Signs Your Business is Dying
shpigford
170
20k
No one is an island. Learnings from fostering a developers community.
thoeni
11
1.5k
How to Ace a Technical Interview
jacobian
269
21k

Transcript

  1. BDConf Focus:On Responsive, June 2012 @tkadlec timkadlec.com Creating Responsive Experiences

    TIM KADLEC
  2. None

  3. Jakob Nielsen It's cheap but degrading to reuse content and

    design across diverging media forms like print vs. online or desktop vs. mobile. http://bit.ly/KTERAA
  4. None

  5. Jakob Nielsen It's not enough to simply modify the layout

    by moving stuff around on the screen and enlarging or diminishing particular design elements. http://bit.ly/KTERAA

  6. OK I agree with that

  7. But that’s not all RWD is...

  8. Later that week...

  9. http://bit.ly/KJ0j8y

  10. None

  11. Venture Beat ....a one-size-fits-all solution delivers a subpar user experience.

    http://bit.ly/KTERAA

  12. Well, duh

  13. Again, that’s not all RWD is

  14. http://bit.ly/LjaVxv

  15. This is true

  16. Ethan Marcotte If someone says there’s only one true way

    of working and designing online, look at them funny. http://bit.ly/Kzfy2m

  17. So far, so good...

  18. “Responsive design simply rearranges the content of your site to

    fit on a mobile screen. http://bit.ly/LjaVxv
  19. None

  20. Seriously, that’s not all RWD is!

  21. Let’s take a step back

  22. Responsive architecture

  23. None

  24. This is awesome

  25. But it’s not enough

  26. More than layout

  27. Marshall McLuhan We see the world through a rear- view

    mirror. We march backwards into the future.

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

  29. http://flic.kr/p/7S5qAB

  30. http://flic.kr/p/3bqHYJ

  31. http://flic.kr/p/anHsXT

  32. http://flic.kr/p/a9GzWC

  33. http://flic.kr/p/3eVaZ1

  34. http://flic.kr/p/2ynHaS

  35. None

  36. Scott Jenson 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. http://bit.ly/giroPy

  37. http://flic.kr/p/y44Rv

  38. http://flic.kr/p/2ynHaS

  39. Responsive experiences

  40. Smarter defaults

  41. Jakob Nielsen Typically, masking passwords doesn't even increase security, but

    it does cost you business due to login failures http://bit.ly/9X3LAG
  42. None

  43. Hide

  44. http://flic.kr/p/6e7uqr <input type=”text” />

  45. http://flic.kr/p/6e7uqr <input type=”email” />

  46. http://flic.kr/p/6e7uqr <input type=”url” />

  47. http://flic.kr/p/6e7uqr <input type=”tel” />

  48. /ht @lukew

  49. Capabilities

  50. http://bit.ly/nJSlwX

  51. http://bit.ly/nJSlwX

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

  53. Battery status Contacts HTML Media Capture Media Capture Network Information

    Sensor Vibration Web Intents Calendar Menu Geolocation NFC

  54. <html> <head> ! <meta name="viewport" content="width=device- width" /> </head> <body>

    ! <video id="myVid" width="300" height="375" autoplay></video> ! <input id="camera" type="button" disabled="true" value="Take Photo"></input> ! <canvas id="still" width="300" height="375"></ canvas> </body> </html>

  55. <html> <head> ! <meta name="viewport" content="width=device- width" /> </head> <body>

    ! <video id="myVid" width="300" height="375" autoplay></video> ! <input id="camera" type="button" disabled="true" value="Take Photo"></input> ! <canvas id="still" width="300" height="375"></ canvas> </body> </html>

  56. <script> ! navigator.getUserMedia({video: true}, function (stream) { ! ! var

    video = document.getElementById("video"); ! ! var canvas = document.getElementById("still"); ! ! var button = document.getElementById("camera"); ! ! video.src = stream; ! ! button.disabled = false; ! ! button.onclick = function() { ! ! ! canvas.getContext("2d").drawImage(video, 0, 0); ! }; }, function(err) { alert("Oh snap! There was an error " + err)}); </script>

  57. <script> ! navigator.getUserMedia({video: true}, function (stream) { ! ! var

    video = document.getElementById("video"); ! ! var canvas = document.getElementById("still"); ! ! var button = document.getElementById("camera"); ! ! video.src = stream; ! ! button.disabled = false; ! ! button.onclick = function() { ! ! ! canvas.getContext("2d").drawImage(video, 0, 0); ! }; }, function(err) { alert("Oh snap! There was an error " + err)}); </script>

  58. <script> ! navigator.getUserMedia({video: true}, function (stream) { ! ! var

    video = document.getElementById("video"); ! ! var canvas = document.getElementById("still"); ! ! var button = document.getElementById("camera"); ! ! video.src = stream; ! ! button.disabled = false; ! ! button.onclick = function() { ! ! ! canvas.getContext("2d").drawImage(video, 0, 0); ! }; }, function(err) { alert("Oh snap! There was an error " + err)}); </script>

  59. <script> ! navigator.getUserMedia({video: true}, function (stream) { ! ! var

    video = document.getElementById("video"); ! ! var canvas = document.getElementById("still"); ! ! var button = document.getElementById("camera"); ! ! video.src = stream; ! ! button.disabled = false; ! ! button.onclick = function() { ! ! ! canvas.getContext("2d").drawImage(video, 0, 0); ! }; }, function(err) { alert("Oh snap! There was an error " + err)}); </script>
  60. None
  61. None

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

  63. Context is the key to moving from a web that

    responds to devices, to a web that responds to people

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

  65. Adam Greenfield 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.

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

  67. UA detection is evil!

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

  69. There are bad RWD sites

  70. There are bad separate sites

  71. http://bit.ly/GH2nBe

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

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

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

  75. Mahatma Gandhi It is a bad carpenter who quarrels with

    his tools. http://bit.ly/Kzfy2m

  76. Bad UA detection is evil!

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

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

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

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

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

  82. <?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 } ?>

  83. <?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 } ?>

  84. <?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 } ?>

  85. <?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 } ?>

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

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

  88. <body id="top" class="<?php echo $device- >getCapability('pointing_method'); ?>"> hasTouch = 'ontouchstart'

    in window || 'createTouch' in document;

  89. <body id="top" class="<?php echo $device- >getCapability('pointing_method'); ?>"> hasTouch = 'ontouchstart'

    in window || 'createTouch' in document;

  90. <body id="top" class="<?php echo $device- >getCapability('pointing_method'); ?>"> hasTouch = 'ontouchstart'

    in window || 'createTouch' in document;

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

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

  93. http://tnw.co/K7Qq9O

  94. http://bit.ly/KuHXaH

  95. http://breakoutjs.com/

  96. http://jsdo.it/controller

  97. Scott Jenson What’s holding smart devices back is our oh-so-human

    ability to misunderstand their potential. http://bit.ly/HS0Jvs

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

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

  100. thank you! BDConf Focus:On Responsive, June 2012 @tkadlec timkadlec.com TIM

    KADLEC responsiveenhancement.com