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
800
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
310
JavaScript Exposed at Midwest JS
tkadlec
3
270
Focusing On What Matters, at Fluent, 2017
tkadlec
0
130
Once More, With Feeling at Code 2016 in Sydney
tkadlec
1
630
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
630
Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015
tkadlec
9
1.2k
Reaching Everyone, Fast at From the Front, 2015
tkadlec
8
6.9k
Other Decks in Design
See All in Design
Commune_Brand_Guideline_JA
commune
1
160
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
290
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
700
Night Shift concept 9/15/2024
cpineda57
0
740
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.1k
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
280
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
48k
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
290
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
390
Haruki_Konaka_Portforio.pdf
haruki556
0
640
portfolio
amitnk
1
130
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.2k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
103
6.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
630
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Embracing the Ebb and Flow
colly
84
4.5k
A Philosophy of Restraint
colly
203
16k
How to Ace a Technical Interview
jacobian
276
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.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