Post on 08-May-2015
description
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
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.
http://bit.ly/KTERAA
OKI agree with that
But that’s not all RWD is...
Later that week...
Venture Beat
....a one-size-fits-all solution delivers a subpar user experience.
http://bit.ly/KTERAA
Well, duh
Again, that’s not all RWD is
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.
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
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
/ht @lukew
Capabilities
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>
Context is the key to moving from a web that responds to devices, to a web that responds to people
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
Mahatma Gandhi
It is a bad carpenter who quarrels with his tools.
http://bit.ly/Kzfy2m
Bad UA detectionis evil!
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 } ?>
<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://www.ubuntu.com/devices/android
Scott Jenson
What’s holding smart devices back is our oh-so-human ability to misunderstand their potential.
http://bit.ly/HS0Jvs
thank you!
BDConf Focus:On Responsive, June 2012
@tkadlec timkadlec.com
TIM KADLEC
responsiveenhancement.com