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
790
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
280
JavaScript Exposed at Midwest JS
tkadlec
3
270
Focusing On What Matters, at Fluent, 2017
tkadlec
0
120
Once More, With Feeling at Code 2016 in Sydney
tkadlec
1
600
Once More, With Feeling
tkadlec
9
1.6k
Mobile Image Processing at London Web Perf Meetup, 2016
tkadlec
1
170
Better By Proxy at Velocity NY 2015
tkadlec
3
590
Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015
tkadlec
9
1.1k
Reaching Everyone, Fast at From the Front, 2015
tkadlec
8
6.8k
Other Decks in Design
See All in Design
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
4.3k
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
1
290
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
5
920
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
1
130
Chatwork プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
520
Sociotechnical design for software and human systems
xinyao
2
560
TrollsTopia: Funtography- Part 1
kenijam
1
260
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
190
Another works Brand Guidelines
designdoor
0
100
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
1.3k
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
9k
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
220
Featured
See All Featured
Statistics for Hackers
jakevdp
792
220k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Web Components: a chance to create the future
zenorocha
307
41k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Embracing the Ebb and Flow
colly
81
4.3k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Unsuck your backbone
ammeep
666
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
The Language of Interfaces
destraynor
151
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Become a Pro
speakerdeck
PRO
15
4.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.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