Creating Responsive Experiences
•
2 likes•1,124 views
Presented at BDConf :focus on Responsive in Minneapolis, MN on June 4, 2012
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Creating Responsive Experiences
Similar to Creating Responsive Experiences (20)
Recently uploaded
Recently uploaded (20)
Creating Responsive Experiences
- 1. Creating Responsive Experiences TIM KADLEC BDConf Focus:On Responsive, June 2012 @tkadlec timkadlec.com
- 3. It's 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
- 5. It's 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
- 6. OK I agree with that
- 7. But that’s not all RWD is...
- 11. ....a one-size-fits-all solution delivers a subpar user experience. Venture Beat http://bit.ly/KTERAA
- 12. Well, duh
- 13. Again, that’s not all RWD is
- 15. This is true
- 16. If someone says there’s only one true way of working and designing online, Ethan Marcotte 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
- 20. Seriously, that’s not all RWD is!
- 21. Let’s take a step back
- 24. This is awesome
- 25. But it’s not enough
- 26. More than layout
- 27. We see the world through a rear- view mirror. We march backwards Marshall McLuhan into the future.
- 36. 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
- 40. Smarter defaults
- 41. Typically, masking passwords doesn't even increase security, but it does cost you business due Jakob Nielsen to login failures http://bit.ly/9X3LAG
- 43. Hide
- 44. <input type=”text” /> http://flic.kr/p/6e7uqr
- 45. <input type=”email” /> http://flic.kr/p/6e7uqr
- 46. <input type=”url” /> http://flic.kr/p/6e7uqr
- 47. <input type=”tel” /> http://flic.kr/p/6e7uqr
- 48. /ht @lukew
- 49. Capabilities
- 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>
- 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. 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 Adam Greenfield interacting with it will always be infuriatingly and delightfully analog.
- 66. We need all the tools we can get http://flic.kr/p/7MdW6A
- 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
- 74. Hug it out it out Hug http://flic.kr/p/7cVEwZ
- 75. It is a bad carpenter who quarrels with his tools. Mahatma Gandhi 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 } ?>
- 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;
- 97. What’s holding smart devices back is our oh-so-human ability to misunderstand their potential. Scott Jenson http://bit.ly/HS0Jvs
- 100. thank you! TIM KADLEC BDConf Focus:On Responsive, June 2012 @tkadlec timkadlec.com responsiveenhancement.com