Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating Responsive Experiences

Tim Kadlec
June 07, 2012
Design
7
820

Creating Responsive Experiences

Presented at BDConf :focus on Responsive in Minneapolis, MN on June 4, 2012

Tim Kadlec

June 07, 2012
Tweet

More Decks by Tim Kadlec

See All by Tim Kadlec
The State of Node.js Security, at Node.js Interactive 2017
tkadlec
1
340
JavaScript Exposed at Midwest JS
tkadlec
3
280
Focusing On What Matters, at Fluent, 2017
tkadlec
0
130
Once More, With Feeling at Code 2016 in Sydney
tkadlec
1
650
Once More, With Feeling
tkadlec
9
1.6k
Mobile Image Processing at London Web Perf Meetup, 2016
tkadlec
1
190
Better By Proxy at Velocity NY 2015
tkadlec
3
650
Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015
tkadlec
9
1.2k
Reaching Everyone, Fast at From the Front, 2015
tkadlec
8
7k

Other Decks in Design

See All in Design
Tableau曲線表現講座(2024.11.21)
cielo1985
0
260
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは？
atsushihomma
0
360
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
200
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.5k
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
250
20241019-CUD友の会「困った！を解決するデザイン改訂版」交流会
majimasachi
0
330
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
290
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
890
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
280
LayerX DesignersDeck
layerx
PRO
0
2.7k

Featured

See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Faster Mobile Websites
deanohume
306
31k
Writing Fast Ruby
sferik
628
61k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
RailsConf 2023
tenderlove
29
1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k

Transcript

  1. BDConf Focus:On Responsive, June 2012 @tkadlec timkadlec.com Creating Responsive Experiences

    TIM KADLEC
  2. None

  3. 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
  4. None

  5. 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

  6. OK I agree with that

  7. But that’s not all RWD is...

  8. Later that week...

  9. http://bit.ly/KJ0j8y

  10. None

  11. Venture Beat ....a one-size-fits-all solution delivers a subpar user experience.

    http://bit.ly/KTERAA

  12. Well, duh

  13. Again, that’s not all RWD is

  14. http://bit.ly/LjaVxv

  15. This is true

  16. Ethan Marcotte If someone says there’s only one true way

    of working and designing online, look at them funny. http://bit.ly/Kzfy2m

  17. So far, so good...

  18. “Responsive design simply rearranges the content of your site to

    fit on a mobile screen. http://bit.ly/LjaVxv
  19. None

  20. Seriously, that’s not all RWD is!

  21. Let’s take a step back

  22. Responsive architecture

  23. None

  24. This is awesome

  25. But it’s not enough

  26. More than layout

  27. Marshall McLuhan We see the world through a rear- view

    mirror. We march backwards into the future.

  28. http://bit.ly/A6AhV1 Pre-iPhone Post-iPhone

  29. http://flic.kr/p/7S5qAB

  30. http://flic.kr/p/3bqHYJ

  31. http://flic.kr/p/anHsXT

  32. http://flic.kr/p/a9GzWC

  33. http://flic.kr/p/3eVaZ1

  34. http://flic.kr/p/2ynHaS

  35. None

  36. 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

  37. http://flic.kr/p/y44Rv

  38. http://flic.kr/p/2ynHaS

  39. Responsive experiences

  40. Smarter defaults

  41. Jakob Nielsen Typically, masking passwords doesn't even increase security, but

    it does cost you business due to login failures http://bit.ly/9X3LAG
  42. None

  43. Hide

  44. http://flic.kr/p/6e7uqr <input type=”text” />

  45. http://flic.kr/p/6e7uqr <input type=”email” />

  46. http://flic.kr/p/6e7uqr <input type=”url” />

  47. http://flic.kr/p/6e7uqr <input type=”tel” />

  48. /ht @lukew

  49. Capabilities

  50. http://bit.ly/nJSlwX

  51. http://bit.ly/nJSlwX

  52. http://flic.kr/p/6e7uqr

  53. Battery status Contacts HTML Media Capture Media Capture Network Information

    Sensor Vibration Web Intents Calendar Menu Geolocation NFC

  54. <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>

  55. <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>

  56. <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>

  57. <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>

  58. <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>

  59. <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>
  60. None
  61. None

  62. Contextual experiences http://flic.kr/p/6e7uqr

  63. Context is the key to moving from a web that

    responds to devices, to a web that responds to people

  64. Do some research http://flic.kr/p/6e7uqr

  65. 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.

  66. We need all the tools we can get http://flic.kr/p/7MdW6A

  67. UA detection is evil!

  68. Don’t blame the tools for the craftsman http://flic.kr/p/7MdW6A

  69. There are bad RWD sites

  70. There are bad separate sites

  71. http://bit.ly/GH2nBe

  72. http://flic.kr/p/6e7uqr

  73. http://flic.kr/p/6e7uqr

  74. Hug it out http://flic.kr/p/7cVEwZ Hug it out

  75. Mahatma Gandhi It is a bad carpenter who quarrels with

    his tools. http://bit.ly/Kzfy2m

  76. Bad UA detection is evil!

  77. Don’t exclude.Enhance. http://flic.kr/p/6RtJPG

  78. 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; }

  79. 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; }

  80. 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; }

  81. 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; }

  82. <?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 } ?>

  83. <?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 } ?>

  84. <?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 } ?>

  85. <?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 } ?>

  86. Use both! http://flic.kr/p/81vbku

  87. http://flic.kr/p/5ox3ax

  88. <body id="top" class="<?php echo $device- >getCapability('pointing_method'); ?>"> hasTouch = 'ontouchstart'

    in window || 'createTouch' in document;

  89. <body id="top" class="<?php echo $device- >getCapability('pointing_method'); ?>"> hasTouch = 'ontouchstart'

    in window || 'createTouch' in document;

  90. <body id="top" class="<?php echo $device- >getCapability('pointing_method'); ?>"> hasTouch = 'ontouchstart'

    in window || 'createTouch' in document;

  91. http://flic.kr/p/6e7uqr

  92. http://www.ubuntu.com/devices/android

  93. http://tnw.co/K7Qq9O

  94. http://bit.ly/KuHXaH

  95. http://breakoutjs.com/

  96. http://jsdo.it/controller

  97. Scott Jenson What’s holding smart devices back is our oh-so-human

    ability to misunderstand their potential. http://bit.ly/HS0Jvs

  98. http://flic.kr/p/6e7uqr

  99. http://flic.kr/p/8wwtH4

  100. thank you! BDConf Focus:On Responsive, June 2012 @tkadlec timkadlec.com TIM

    KADLEC responsiveenhancement.com