Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creating Responsive Experiences
Search
Tim Kadlec
June 07, 2012
Design
7
850
Creating Responsive Experiences
Presented at BDConf :focus on Responsive in Minneapolis, MN on June 4, 2012
Tim Kadlec
June 07, 2012
Tweet
Share
More Decks by Tim Kadlec
See All by Tim Kadlec
The State of Node.js Security, at Node.js Interactive 2017
tkadlec
1
400
JavaScript Exposed at Midwest JS
tkadlec
3
290
Focusing On What Matters, at Fluent, 2017
tkadlec
0
140
Once More, With Feeling at Code 2016 in Sydney
tkadlec
1
680
Once More, With Feeling
tkadlec
9
1.7k
Mobile Image Processing at London Web Perf Meetup, 2016
tkadlec
1
210
Better By Proxy at Velocity NY 2015
tkadlec
3
670
Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015
tkadlec
9
1.2k
Reaching Everyone, Fast at From the Front, 2015
tkadlec
8
7.2k
Other Decks in Design
See All in Design
AI時代に淘汰されないデザインのしごと
akinen
0
120
Social Anxiety
ksmith2024
0
230
Les petites aventures de CSS, saison 2025
goetter
3
4k
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.6k
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.5k
問いの変遷
iflection
0
130
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
540
PF_濵村ひろみ_202503
maru_design78
0
170
AI動画生成ガチャ紹介
piyo7
1
100
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
120
portfolio_YumiYasuda
yum0418
0
270
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
43
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
480
Scaling GitHub
holman
459
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
920
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Transcript
BDConf Focus:On Responsive, June 2012 @tkadlec timkadlec.com Creating Responsive Experiences
TIM KADLEC
None
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
None
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
OK I agree with that
But that’s not all RWD is...
Later that week...
http://bit.ly/KJ0j8y
None
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
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
None
Seriously, that’s not all RWD is!
Let’s take a step back
Responsive architecture
None
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/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
None
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
Responsive experiences
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
None
Hide
http://flic.kr/p/6e7uqr <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” />
/ht @lukew
Capabilities
http://bit.ly/nJSlwX
http://bit.ly/nJSlwX
http://flic.kr/p/6e7uqr
Battery status Contacts HTML Media Capture Media Capture Network Information
Sensor Vibration Web Intents Calendar Menu Geolocation NFC
<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>
None
None
Contextual experiences http://flic.kr/p/6e7uqr
Context is the key to moving from a web that
responds to devices, to a web that responds to people
Do some research http://flic.kr/p/6e7uqr
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 detection is evil!
Don’t blame the tools for the craftsman http://flic.kr/p/7MdW6A
There are bad RWD sites
There are bad separate sites
http://bit.ly/GH2nBe
http://flic.kr/p/6e7uqr
http://flic.kr/p/6e7uqr
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 detection is 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
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/6e7uqr
http://flic.kr/p/8wwtH4
thank you! BDConf Focus:On Responsive, June 2012 @tkadlec timkadlec.com TIM
KADLEC responsiveenhancement.com