Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Creating Responsive Experiences

Avatar for Tim Kadlec Tim Kadlec
June 07, 2012
Design
7
870

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
440
JavaScript Exposed at Midwest JS
Avatar for Tim Kadlec tkadlec
3
300
Focusing On What Matters, at Fluent, 2017
Avatar for Tim Kadlec tkadlec
0
150
Once More, With Feeling at Code 2016 in Sydney
Avatar for Tim Kadlec tkadlec
1
690
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
690
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
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
130
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1k
Treasure_Hunting
Avatar for Sol Metts solmetts
0
120
Installing and Running decksh/pdfdeck
Avatar for Anthony Starks ajstarks
1
900
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
180
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
0
190
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
0
370
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
410
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
150
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
170
【MIXI MEETUP！ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ！生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
Avatar for MIXI DESIGN mixi_design
PRO
0
170
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
1.3k

Featured

See All Featured
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
310
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
69
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
2
250
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
28
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
22
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.1k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.7k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
300

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