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

Adaptive Input — Refresh PDX

Jason Grigsby
November 19, 2014

Adaptive Input — Refresh PDX

Presented at Refresh PDX on November 19, 2014

Jason Grigsby

November 19, 2014
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. Lines between device classes are blurring Model Type Size Size

    Display Resolution Resolution Viewport Viewport W H W H W H Samsung Galaxy Note 2 Phone 3.17” 5.95” 5.5” 720 1280 360 640 Motorola RAZR HD Phone 2.67” 5.19” 4.7” 720 1280 360 519 Motorola Atrix HD Phone 2.75” 5.26” 4.5” 720 1280 540 812 HTC Droid DNA Phone 2.78” 5.5” 5” 1080 1920 360 640 Nexus 7 Tablet 4.72” 7.81” 7” 800 1280 600 793 Kindle Fire Tablet 4.72” 7.44” 7” 600 1024 600 819 Kindle Fire HD Tablet 5.4” 7.6” 7” 800 1280 533 731
  2. 640 px 600 px 519 px 640 px 622 px

    533 px 812 px Which are phones and which are tablets?
  3. x 480 320 x 568 320 x 667 375 x

    736 414 x 768 1024 Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  4. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  5. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  6. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  7. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  8. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  9. 480 320 568 320 667 375 736 414 768 1024

    Even iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  10. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  11. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  12. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  13. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  14. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  15. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  16. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  17. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  18. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  19. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  20. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  21. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  22. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  23. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  24. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  25. 480 320 568 667 375 736 414 768 1024 Even

    iOS is now a continuum. The Magic 32 pixels iPad, iPad Mini, iPad Air iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus
  26. mobile desktop THE ART OF WEB DEVELOPMENT THE ART OF

    WEB DEVELOPMENT Web widgets THE ART OF WEB DEVELOPMENT THE ART OF WEB DEVELOPMENT Mobile widgets
  27. It’s not that we’re technically incapable, but adapting a phone

    UI to a tablet UI is not so dissimilar from trying to automatically adapt desktop UI to a phone. They are fundamentally different platforms with different usability considerations, and something that makes sense on phones may or may not belong on tablets. —Todd Anglin, Kendo UI http://www.kendoui.com/blogs/teamblog/posts/12-09-11/universal_mobile_apps_with_html5_and_kendo_ui.aspx
  28. And keyboard and mouse are what we envision work is.

    http://www.flickr.com/photos/royalsapien/2387707860
  29. = =

  30. We can no longer make assumptions about input based on

    screen size or form factor. And we probably never should have.
  31. Web Speech API Specification 19 October 2012 Editors: Glen Shires,

    Google Inc. Hans Wennborg, Google Inc. Please refer to the errata for this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups.
  32. Hans Wennborg, Google Inc. Please refer to the errata for

    this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult
  33. Hans Wennborg, Google Inc. Please refer to the errata for

    this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult Hans Wennborg, Google Inc. Please refer to the errata for this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult
  34. Hans Wennborg, Google Inc. Please refer to the errata for

    this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult Hans Wennborg, Google Inc. Please refer to the errata for this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult
  35. Hans Wennborg, Google Inc. Please refer to the errata for

    this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events
  36. Hans Wennborg, Google Inc. Please refer to the errata for

    this document, which may include some normative corrections. Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events 5.1.4 SpeechRecognitionError 5.1.5 SpeechRecognitionAlternative 5.1.6 SpeechRecognitionResult Copyright © 2012 the Contributors to the Web Speech API Specification, published by the Speech API Community Group under the W3C Community Final Specification Agreement (FSA). A human-readable summary is available. Abstract This specification defines a JavaScript API to enable web developers to incorporate speech recognition and synthesis into their web pages. It enables developers to use scripting to generate text-to-speech output and to use speech recognition as an input for forms, continuous dictation and control. The JavaScript API allows web pages to control activation and timing and to handle results and alternatives. Status of This Document This specification was published by the Speech API Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Final Specification Agreement (FSA) other conditions apply. Learn more about W3C Community and Business Groups. All feedback is welcome. Table of Contents 1 Conformance requirements 2 Introduction 3 Use Cases 4 Security and privacy considerations 5 API Description 5.1 The SpeechRecognition Interface 5.1.1 SpeechRecognition Attributes 5.1.2 SpeechRecognition Methods 5.1.3 SpeechRecognition Events
  37. Amazing, but too new to know what, if anything, this

    technology will mean for the web.
  38. Higher precision with mouse means smaller targets possible Hover state

    Less precise than mouse and requires larger touch targets Typing easier for many No hover state Typing often more difficult
  39. Higher precision with mouse means smaller targets possible Hover state

    Less precise than mouse and requires larger touch targets Typing easier for many No hover state Typing often more difficult Right clicking and “power” tools Single and multi-touch gestures
  40. Whatever you may think, it currently isn't possible to reliably

    detect whether or not the current device has a touchscreen, from within the browser. —Stu Cox, You Can’t Reliably Detect a Touch Screen http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
  41. Chrome has entertained idea of enabling touch by default. https://code.google.com/p/chromium/issues/detail?id=159527

    https://docs.google.com/a/cloudfour.com/presentation/d/1-n1qyzewpagREbzW2zm0wOalq33UhbtbSkWf9mEdly8/ edit#slide=id.gc2d80e5b_171
  42. After poking at this problem for a few weeks, my

    conclusion is: every desktop UI should be designed for touch now. When any desktop machine could have a touch interface, we have to proceed as if they all do. —Josh Clark http://globalmoxie.com/blog/desktop-touch-design.shtml
  43. What about those who won’t let go of their “power”

    interfaces? http://www.flickr.com/photos/ecos/4092571213/
  44. Th Dream Experience - … Uploaded 2 years ago More

    Of The Dream Exp… Uploaded 2 years ago The Dream Experience -… Uploaded 2 years ago The Dream Experience … Uploaded 2 years ago The Love King Breaks It… Uploaded 2 years ago War Paint for Trees From Lincoln Motor Company Join Log In Create Watch Upload Search s [ ] – VIDEOS Vimeo Couch Mode
  45. Couch Mode + See all Centric TV’s videos / Recently

    viewed / Related videos Th Dream Experience - … Uploaded 2 years ago More Of The Dream Exp… Uploaded 2 years ago The Dream Experience -… Uploaded 2 years ago The Dream Experience … Uploaded 2 years ago The Love King Breaks It… Uploaded 2 years ago PROMOTED War Paint for Trees From Lincoln Motor Company Join Log In Create Watch Upload Search s [ ] – VIDEOS Vimeo Couch Mode
  46. Couch Mode + See all Centric TV’s videos / Recently

    viewed / Related videos Th Dream Experience - … Uploaded 2 years ago More Of The Dream Exp… Uploaded 2 years ago The Dream Experience -… Uploaded 2 years ago The Dream Experience … Uploaded 2 years ago The Love King Breaks It… Uploaded 2 years ago PROMOTED War Paint for Trees From Lincoln Motor Company Join Log In Create Watch Upload Search s [ ] – VIDEOS Couch Mode + See all Centric TV’s videos / Recently viewed / Related videos Th Dream Experience - … Uploaded 2 years ago More Of The Dream Exp… Uploaded 2 years ago The Dream Experience -… Uploaded 2 years ago The Dream Experience … Uploaded 2 years ago The Love King Breaks It… Uploaded 2 years ago PROMOTED War Paint for Trees From Lincoln Motor Company Join Log In Create Watch Upload Search s [ ] – VIDEOS Vimeo Couch Mode
  47. The key benefit of this approach: You’re designing for user

    need not for a specific form factor or input.
  48. Graph from Chapter 1 of Adaptive Web Design by Aaron

    Gustafson http://easy-readers.net/books/ adaptive-web-design/
  49. Graph from Chapter 1 of Adaptive Web Design by Aaron

    Gustafson http://easy-readers.net/books/ adaptive-web-design/ Progressive enhancement contains a value judgment
  50. Learn how to let go of the illusions that comfort

    us. http://www.flickr.com/photos/garibaldi/303085857/
  51. This is the web as it should be. As it

    wants to be. The web in its natural state. http://www.flickr.com/photos/25062265@N06/6069101123
  52. Thank You! SLIDES: http://bit.ly/grigs-refreshpdx Special thanks to Flickr users for

    generously sharing their photos under creative commons license.