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

Creating Responsive Experiences

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Tim Kadlec Tim Kadlec
June 07, 2012
Design
7
880

Creating Responsive Experiences

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

Avatar for Tim Kadlec

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
Avatar for Tim Kadlec tkadlec
1
480
JavaScript Exposed at Midwest JS
Avatar for Tim Kadlec tkadlec
3
310
Focusing On What Matters, at Fluent, 2017
Avatar for Tim Kadlec tkadlec
0
160
Once More, With Feeling at Code 2016 in Sydney
Avatar for Tim Kadlec tkadlec
1
700
Once More, With Feeling
Avatar for Tim Kadlec tkadlec
9
1.7k
Mobile Image Processing at London Web Perf Meetup, 2016
Avatar for Tim Kadlec tkadlec
1
230
Better By Proxy at Velocity NY 2015
Avatar for Tim Kadlec tkadlec
3
700
Getting Started with Performance Budgets at HighEdWeb Technical Academy, 2015
Avatar for Tim Kadlec tkadlec
9
1.2k
Reaching Everyone, Fast at From the Front, 2015
Avatar for Tim Kadlec tkadlec
8
7.4k

Other Decks in Design

See All in Design
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
790
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
190
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
3
1.3k
Diverse Design Team Deck
Avatar for Diverse diverse
0
530
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
Avatar for ふわり fuwarisprit
3
2.1k
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
5
800
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
230
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
120
DMMデザイナーの “AI活用の現在と未来”
Avatar for TakumaS takumasaito
1
430
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
600
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
140

Featured

See All Featured
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.2k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
97

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