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
430
JavaScript Exposed at Midwest JS
tkadlec
3
290
Focusing On What Matters, at Fluent, 2017
tkadlec
0
150
Once More, With Feeling at Code 2016 in Sydney
tkadlec
1
690
Once More, With Feeling
tkadlec
9
1.7k
Mobile Image Processing at London Web Perf Meetup, 2016
tkadlec
1
220
Better By Proxy at Velocity NY 2015
tkadlec
3
690
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.3k
Other Decks in Design
See All in Design
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
270
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
580
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.7k
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
190
デザイナー向けフライル説明資料
toshiblues
0
170
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.9k
DESIGNEAST 2025 A-3
_kotobuki_
0
100
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
760
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
560
mento Design Team Portfolio
mento0fficial
1
900
minpaku-community-scrum-patterns
norinity1103
1
470
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
700
Featured
See All Featured
Making Projects Easy
brettharned
120
6.4k
GitHub's CSS Performance
jonrohan
1032
470k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
BBQ
matthewcrist
89
9.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Language of Interfaces
destraynor
162
25k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
The World Runs on Bad Software
bkeepers
PRO
72
11k
How to train your dragon (web standard)
notwaldorf
97
6.3k
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