• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Creating Responsive Experiences
 

Creating Responsive Experiences

on

  • 1,348 views

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

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

Statistics

Views

Total Views
1,348
Views on SlideShare
1,336
Embed Views
12

Actions

Likes
3
Downloads
6
Comments
0

3 Embeds 12

http://us-w1.rockmelt.com 9
http://bottlenose.com 2
http://tweetedtimes.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Creating Responsive Experiences Creating Responsive Experiences Presentation Transcript

    • CreatingResponsiveExperiencesTIM KADLECBDConf Focus:On Responsive, June 2012@tkadlec timkadlec.com
    • 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
    • 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
    • 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/KTERAA
    • 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 look at them funny.http://bit.ly/Kzfy2m
    • 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 the future.
    • 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 cheap devices about to invade our Scott Jenson lives—a zombie apocalypse of electronics, if you will.http://bit.ly/giroPy
    • http://flic.kr/p/y44Rv
    • http://flic.kr/p/2ynHaS
    • Responsiveexperiences
    • Smarter defaults
    • Typically, masking passwords doesnt even increase security, but it does cost you business due Jakob Nielsen to login failureshttp://bit.ly/9X3LAG
    • 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="375"autoplay></video>! <input id="camera" type="button" disabled="true"value="Take Photo"></input>! <canvas id="still" width="300" height="375"></canvas></body></html>
    • <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>
    • <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>
    • <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>
    • <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>
    • <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>
    • 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 technology may be digital in nature, the human beingsAdam Greenfield interacting with it will always be infuriatingly and delightfully analog.
    • 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) !== none) {! ! $wireless = true;! ! $method = $device->getCapability(xhtml_make_phone_call_string);! } else {! ! $wireless = false;! }} else {! $wireless = false;}
    • 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;}
    • 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;}
    • 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;}
    • <?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 } ?>
    • <?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 } ?>
    • <?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 } ?>
    • <?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 } ?>
    • 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 || createTouch in document;
    • <body id="top" class="<?php echo $device->getCapability(pointing_method); ?>">hasTouch = ontouchstart in window || createTouch in document;
    • <body id="top" class="<?php echo $device->getCapability(pointing_method); ?>">hasTouch = ontouchstart in window || createTouch in document;
    • 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 their potential. Scott Jensonhttp://bit.ly/HS0Jvs
    • http://flic.kr/p/6e7uqr
    • http://flic.kr/p/8wwtH4
    • thank you!TIM KADLECBDConf Focus:On Responsive, June 2012@tkadlec timkadlec.com responsiveenhancement.com