Creating Responsive Experiences

BDConf Focus:On Responsive, June 2012

@tkadlec timkadlec.com

CreatingResponsive Experiences

TIM KADLEC

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

http://flic.kr/p/6sbgQu


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.




OKI agree with that

But that’s not all RWD is...

Later that week...

http://bit.ly/KJ0j8y



Venture Beat

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




Well, duh

Again, that’s not all RWD is

http://bit.ly/LjaVxv



This is true

Ethan Marcotte

If someone says there’s only one true way of working and designing online, 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’s not all RWD is!

Let’s take astep back

Responsive architecture

This is awesome

But it’s not enough

More than layout

Marshall McLuhan

We see the world through a rear-view mirror. We march backwards into the future.

http://bit.ly/A6AhV1

Pre-iPhone

Post-iPhone

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


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



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



http://flic.kr/p/y44Rv

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



Responsiveexperiences

Smarter defaults

Jakob Nielsen

Typically, masking passwords doesn't even increase security, but it does cost you business due to login failures

http://bit.ly/9X3LAG



Hide


<input type=”text” />




<input type=”email” />




<input type=”url” />




<input type=”tel” />



/ht @lukew

Capabilities

http://bit.ly/nJSlwX



http://bit.ly/nJSlwX






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>


(stream) {








! };


+ err)});

</script>

<script>


(stream) {








! };


+ err)});

</script>

<script>


(stream) {








! };


+ err)});

</script>

Contextual experiences




Context is the key to moving from a web that responds to devices, to a web that responds to people

Do some research




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.

We need all the tools we can get

http://flic.kr/p/7MdW6A



UA detectionis evil!

Don’t blame the tools for the craftsman

http://flic.kr/p/7MdW6A



There are badRWD sites

There are badseparate sites

http://bit.ly/GH2nBe









Hug it out

http://flic.kr/p/7cVEwZ

Hug it out



Mahatma Gandhi

It is a bad carpenter who quarrels with his tools.

http://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;

}


'true') {






! } else {


! }

} else {


}


'true') {






! } else {


! }

} else {


}


'true') {

!if ($device->getCapability





! } else {


! }

} else {


}

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



+18005555555">1-800-555-5555</a></p>

<?php } else { ?>

! <p class="call">1-800-555-5555</p>

<?php } ?>



+18005555555">1-800-555-5555</a></p>

<?php } else { ?>

! <p class="call">1-800-555-5555</p>

<?php } ?>



+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;












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



http://tnw.co/K7Qq9O



http://bit.ly/KuHXaH



http://breakoutjs.com/



http://jsdo.it/controller



Scott Jenson

What’s holding smart devices back is our oh-so-human ability to misunderstand their potential.

http://bit.ly/HS0Jvs






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



thank you!

BDConf Focus:On Responsive, June 2012

@tkadlec timkadlec.com

TIM KADLEC

responsiveenhancement.com

Technology

Creating Responsive Experiences