Download to read offline
Uploaded byTim Kadlec
Creating Responsive Experiences
The document discusses responsive web design and the need to create responsive experiences rather than just responsive layouts. It highlights how responsive design has evolved from simply modifying layouts for different screens to incorporating device capabilities and context to create smarter, more tailored experiences. New techniques like native device APIs allow richer, more engaging interactions. The key is moving beyond layout to designing experiences that respond to users and their unique contexts rather than just their devices.
More Related Content
![[wcatx] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/wcatx-adaptive-images-130518143751-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[refreshpitt] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv10-130609110047-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[parisweb] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv15v2-131014003217-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[rwdsummit] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv18-1-140325201134-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[funka] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-images-funkav5-150415072902-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[CSSDevConf] Adaptive Images in Responsive Web Design 2014](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-images-cssdevconf-141013185313-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[HEWEBAR 2012] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/hewebar-2012-adaptive-images-in-rwd-120729151800-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Creating Responsive Experiences
Creating Responsive Experiences
- 1. Creating Responsive Experiences TIM KADLEC BDConf Focus:OnResponsive, June 2012 @tkadlec timkadlec.com
- 3. It's cheap butdegrading 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 enoughto 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 withthat
- 7. But that’s notall RWD is...
- 8.
- 9.
- 11. ....a one-size-fits-all solutiondelivers a subpar user experience. Venture Beat http://bit.ly/KTERAA
- 12.
- 13. Again, that’s not allRWD is
- 14.
- 15.
- 16. If someone saysthere’s only one true way of working and designing online, Ethan Marcotte look at them funny. http://bit.ly/Kzfy2m
- 17. So far, sogood...
- 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 allRWD is!
- 21.
- 22.
- 24.
- 25. But it’s notenough
- 26.
- 27. We see theworld through a rear- view mirror. We march backwards Marshall McLuhan into the future.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 36. These examples arejust 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
- 37.
- 38.
- 39.
- 40.
- 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.
- 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.
- 49.
- 50.
- 51.
- 52.
- 53. Battery status Contacts HTML MediaCapture 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>
- 62.
- 63. Context is thekey 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 allthe tools we can get http://flic.kr/p/7MdW6A
- 67.
- 68. Don’t blame thetools for the craftsman http://flic.kr/p/7MdW6A
- 69. There are bad RWDsites
- 70.
- 71.
- 72.
- 73.
- 74. Hug it outit out Hug http://flic.kr/p/7cVEwZ
- 75. It is abad carpenter who quarrels with his tools. Mahatma Gandhi http://bit.ly/Kzfy2m
- 76. Bad UA detection isevil!
- 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.
- 87.
- 88. <body id="top" class="<?phpecho $device- >getCapability('pointing_method'); ?>"> hasTouch = 'ontouchstart' in window || 'createTouch' in document;
- 89. <body id="top" class="<?phpecho $device- >getCapability('pointing_method'); ?>"> hasTouch = 'ontouchstart' in window || 'createTouch' in document;
- 90. <body id="top" class="<?phpecho $device- >getCapability('pointing_method'); ?>"> hasTouch = 'ontouchstart' in window || 'createTouch' in document;
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97. What’s holding smartdevices back is our oh-so-human ability to misunderstand their potential. Scott Jenson http://bit.ly/HS0Jvs
- 98.
- 99.
- 100. thank you! TIM KADLEC BDConfFocus:On Responsive, June 2012 @tkadlec timkadlec.com responsiveenhancement.com