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
780
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
260
JavaScript Exposed at Midwest JS
tkadlec
3
260
Focusing On What Matters, at Fluent, 2017
tkadlec
0
110
Once More, With Feeling at Code 2016 in Sydney
tkadlec
1
570
Once More, With Feeling
tkadlec
9
1.6k
Mobile Image Processing at London Web Perf Meetup, 2016
tkadlec
1
160
Better By Proxy at Velocity NY 2015
tkadlec
3
570
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.7k
Other Decks in Design
See All in Design
生成AIのデザイン活用
asakohs
0
120
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
230
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
100
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
470
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
200
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
350
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
240
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
160
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
330
1人歩きする営業資料作成
yutoshukuya
2
180
Wishing Star Comic
torije
2
1.3k
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
720
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1357
200k
Unsuck your backbone
ammeep
664
57k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
Designing for humans not robots
tammielis
247
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
In The Pink: A Labor of Love
frogandcode
138
21k
How STYLIGHT went responsive
nonsquared
92
4.9k
Designing for Performance
lara
601
67k
Producing Creativity
orderedlist
PRO
338
39k
GraphQLとの向き合い方2022年版
quramy
33
13k
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