CreatingResponsiveExperiencesTIM KADLECBDConf Focus:On Responsive, June 2012@tkadlec   timkadlec.com
Its cheap but degrading to reuse                       content and design across diverging                       media for...
Its not enough to simply modify the                       layout by moving stuff around on the                       scree...
OKI agree with that
But that’s not allRWD is...
Later that week...
http://bit.ly/KJ0j8y
....a one-size-fits-all solution delivers                       a subpar user experience.     Venture Beathttp://bit.ly/KT...
Well, duh
Again, that’s notall RWD is
http://bit.ly/LjaVxv
This is true
If someone says there’s only one true                       way of working and designing online,    Ethan Marcotte        ...
So far, so good...
“    Responsive design simply rearranges the    content of your site to fit on a mobile screen.    http://bit.ly/LjaVxv
Seriously, that’snot all RWD is!
Let’s take astep back
Responsivearchitecture
This isawesome
But it’s not enough
More than layout
We see the world through a rear-                   view mirror. We march backwardsMarshall McLuhan                   into ...
Pre-iPhonePost-iPhonehttp://bit.ly/A6AhV1
http://flic.kr/p/7S5qAB
http://flic.kr/p/3bqHYJ
http://flic.kr/p/anHsXT
http://flic.kr/p/a9GzWC
http://flic.kr/p/3eVaZ1
http://flic.kr/p/2ynHaS
These examples are just the initial,                       telltale signs of a huge new wave of                       chea...
http://flic.kr/p/y44Rv
http://flic.kr/p/2ynHaS
Responsiveexperiences
Smarter defaults
Typically, masking passwords                       doesnt even increase security,                       but it does cost y...
Hide
<input type=”text” /> http://flic.kr/p/6e7uqr
<input type=”email” /> http://flic.kr/p/6e7uqr
<input type=”url” /> http://flic.kr/p/6e7uqr
<input type=”tel” /> http://flic.kr/p/6e7uqr
/ht @lukew
Capabilities
http://bit.ly/nJSlwX
http://bit.ly/nJSlwX
http://flic.kr/p/6e7uqr
Battery statusContactsHTML Media CaptureMedia CaptureNetwork InformationSensorVibrationWeb IntentsCalendarMenuGeolocationNFC
<html><head>!   <meta name="viewport" content="width=device-width" /></head><body>!   <video id="myVid" width="300" height...
<html><head>!   <meta name="viewport" content="width=device-width" /></head><body>!   <video id="myVid" width="300" height...
<script>!   navigator.getUserMedia({video: true}, function(stream) {!   !    var video = document.getElementById("video");...
<script>!   navigator.getUserMedia({video: true}, function(stream) {!   !    var video = document.getElementById("video");...
<script>!       navigator.getUserMedia({video: true}, function(stream) {!       !   var video = document.getElementById("v...
<script>!       navigator.getUserMedia({video: true}, function(stream) {!       !   var video = document.getElementById("v...
Contextual experienceshttp://flic.kr/p/6e7uqr
Context is the key to movingfrom a web that responds todevices, to a web thatresponds to people
Do some research  http://flic.kr/p/6e7uqr
If nothing else, it would be wise for us                  all to remember that, while our                  information tec...
We need all the toolswe can gethttp://flic.kr/p/7MdW6A
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
Hug it out it out        Hug http://flic.kr/p/7cVEwZ
It is a bad carpenter who quarrels                       with his tools.   Mahatma Gandhihttp://bit.ly/Kzfy2m
Bad UA detectionis evil!
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) !== ...
if ($device->getCapability(has_cellular_radio) ===true) {!if ($device->getCapability(xhtml_make_phone_call_string) !== non...
<?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...
<?php if ($wireless) { ?>!   <p><a href="<?php echo $method; ?>+18005555555">1-800-555-5555</a></p><?php } else { ?>!   <p...
Use both!http://flic.kr/p/81vbku
http://flic.kr/p/5ox3ax
<body id="top" class="<?php echo $device->getCapability(pointing_method); ?>">hasTouch = ontouchstart in window ||        ...
<body id="top" class="<?php echo $device->getCapability(pointing_method); ?>">hasTouch = ontouchstart in window ||        ...
<body id="top" class="<?php echo $device->getCapability(pointing_method); ?>">hasTouch = ontouchstart in window ||        ...
http://flic.kr/p/6e7uqr
http://www.ubuntu.com/devices/android
http://tnw.co/K7Qq9O
http://bit.ly/KuHXaH
http://breakoutjs.com/
http://jsdo.it/controller
What’s holding smart devices back is                       our oh-so-human ability to                       misunderstand ...
http://flic.kr/p/6e7uqr
http://flic.kr/p/8wwtH4
thank you!TIM KADLECBDConf Focus:On Responsive, June 2012@tkadlec   timkadlec.com                responsiveenhancement.com
Creating Responsive Experiences
Creating Responsive Experiences
Creating Responsive Experiences
Creating Responsive Experiences
Creating Responsive Experiences
Creating Responsive Experiences
Creating Responsive Experiences
Creating Responsive Experiences
Creating Responsive Experiences
Upcoming SlideShare
Loading in …5
×

Creating Responsive Experiences

1,748 views

Published on

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

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

No Downloads
Views
Total views
1,748
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Creating Responsive Experiences

  1. 1. CreatingResponsiveExperiencesTIM KADLECBDConf Focus:On Responsive, June 2012@tkadlec timkadlec.com
  2. 2. Its cheap but degrading to reuse content and design across diverging media forms like print vs. online or Jakob Nielsen desktop vs. mobile.http://bit.ly/KTERAA
  3. 3. Its not enough to simply modify the layout by moving stuff around on the screen and enlarging or diminishing Jakob Nielsen particular design elements.http://bit.ly/KTERAA
  4. 4. OKI agree with that
  5. 5. But that’s not allRWD is...
  6. 6. Later that week...
  7. 7. http://bit.ly/KJ0j8y
  8. 8. ....a one-size-fits-all solution delivers a subpar user experience. Venture Beathttp://bit.ly/KTERAA
  9. 9. Well, duh
  10. 10. Again, that’s notall RWD is
  11. 11. http://bit.ly/LjaVxv
  12. 12. This is true
  13. 13. If someone says there’s only one true way of working and designing online, Ethan Marcotte look at them funny.http://bit.ly/Kzfy2m
  14. 14. So far, so good...
  15. 15. “ Responsive design simply rearranges the content of your site to fit on a mobile screen. http://bit.ly/LjaVxv
  16. 16. Seriously, that’snot all RWD is!
  17. 17. Let’s take astep back
  18. 18. Responsivearchitecture
  19. 19. This isawesome
  20. 20. But it’s not enough
  21. 21. More than layout
  22. 22. We see the world through a rear- view mirror. We march backwardsMarshall McLuhan into the future.
  23. 23. Pre-iPhonePost-iPhonehttp://bit.ly/A6AhV1
  24. 24. http://flic.kr/p/7S5qAB
  25. 25. http://flic.kr/p/3bqHYJ
  26. 26. http://flic.kr/p/anHsXT
  27. 27. http://flic.kr/p/a9GzWC
  28. 28. http://flic.kr/p/3eVaZ1
  29. 29. 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 Scott Jenson lives—a zombie apocalypse of electronics, if you will.http://bit.ly/giroPy
  31. 31. http://flic.kr/p/y44Rv
  32. 32. http://flic.kr/p/2ynHaS
  33. 33. Responsiveexperiences
  34. 34. Smarter defaults
  35. 35. Typically, masking passwords doesnt even increase security, but it does cost you business due Jakob Nielsen to login failureshttp://bit.ly/9X3LAG
  36. 36. Hide
  37. 37. <input type=”text” /> http://flic.kr/p/6e7uqr
  38. 38. <input type=”email” /> http://flic.kr/p/6e7uqr
  39. 39. <input type=”url” /> http://flic.kr/p/6e7uqr
  40. 40. <input type=”tel” /> http://flic.kr/p/6e7uqr
  41. 41. /ht @lukew
  42. 42. Capabilities
  43. 43. http://bit.ly/nJSlwX
  44. 44. http://bit.ly/nJSlwX
  45. 45. http://flic.kr/p/6e7uqr
  46. 46. Battery statusContactsHTML Media CaptureMedia CaptureNetwork InformationSensorVibrationWeb IntentsCalendarMenuGeolocationNFC
  47. 47. <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>
  48. 48. <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>
  49. 49. <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>
  50. 50. <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>
  51. 51. <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>
  52. 52. <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>
  53. 53. Contextual experienceshttp://flic.kr/p/6e7uqr
  54. 54. Context is the key to movingfrom a web that responds todevices, to a web thatresponds to people
  55. 55. Do some research http://flic.kr/p/6e7uqr
  56. 56. If nothing else, it would be wise for us all to remember that, while our information technology may be digital in nature, the human beingsAdam Greenfield interacting with it will always be infuriatingly and delightfully analog.
  57. 57. We need all the toolswe can gethttp://flic.kr/p/7MdW6A
  58. 58. UA detectionis evil!
  59. 59. Don’t blame the toolsfor the craftsmanhttp://flic.kr/p/7MdW6A
  60. 60. There are badRWD sites
  61. 61. There are badseparate sites
  62. 62. http://bit.ly/GH2nBe
  63. 63. http://flic.kr/p/6e7uqr
  64. 64. http://flic.kr/p/6e7uqr
  65. 65. Hug it out it out Hug http://flic.kr/p/7cVEwZ
  66. 66. It is a bad carpenter who quarrels with his tools. Mahatma Gandhihttp://bit.ly/Kzfy2m
  67. 67. Bad UA detectionis evil!
  68. 68. Don’t exclude. Enhance. http://flic.kr/p/6RtJPG
  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. 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;}
  71. 71. 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;}
  72. 72. 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;}
  73. 73. <?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 } ?>
  74. 74. <?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 } ?>
  75. 75. <?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 } ?>
  76. 76. <?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 } ?>
  77. 77. Use both!http://flic.kr/p/81vbku
  78. 78. http://flic.kr/p/5ox3ax
  79. 79. <body id="top" class="<?php echo $device->getCapability(pointing_method); ?>">hasTouch = ontouchstart in window || createTouch in document;
  80. 80. <body id="top" class="<?php echo $device->getCapability(pointing_method); ?>">hasTouch = ontouchstart in window || createTouch in document;
  81. 81. <body id="top" class="<?php echo $device->getCapability(pointing_method); ?>">hasTouch = ontouchstart in window || createTouch in document;
  82. 82. http://flic.kr/p/6e7uqr
  83. 83. http://www.ubuntu.com/devices/android
  84. 84. http://tnw.co/K7Qq9O
  85. 85. http://bit.ly/KuHXaH
  86. 86. http://breakoutjs.com/
  87. 87. http://jsdo.it/controller
  88. 88. What’s holding smart devices back is our oh-so-human ability to misunderstand their potential. Scott Jensonhttp://bit.ly/HS0Jvs
  89. 89. http://flic.kr/p/6e7uqr
  90. 90. http://flic.kr/p/8wwtH4
  91. 91. thank you!TIM KADLECBDConf Focus:On Responsive, June 2012@tkadlec timkadlec.com responsiveenhancement.com

×