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

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
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
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
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
200
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
0
400
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
690
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
190
AI情報に溺れながら、それでも頑張って泳ぐための思考法
Avatar for Iori67 yoriss67
0
120
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
1
620
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
450
地理院地図をもっと楽しく！れきちず新機能のご紹介
Avatar for Hajime Kato hjmkth
1
400
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
400
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
1
170
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
270
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
230

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
44
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
40
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
0
91
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
130
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
300
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
190
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k

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