The Future Of Responsive Design Standards (Den Odell)
•
4 likes•1,132 views
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015 The ultimate goal of responsive design is to provide a site that adapts to any user regardless of their browser, device, or abilities. In addition to existing web standards, we currently rely on JavaScript and server-side techniques to enable a more responsive experience. Den will explore how web standards can evolve to better adapt to our users’ needs and environments.
Recommended
Recommended
More Related Content
Similar to The Future Of Responsive Design Standards (Den Odell)
Similar to The Future Of Responsive Design Standards (Den Odell) (20)
More from Future Insights
More from Future Insights (20)
Recently uploaded
Recently uploaded (20)
The Future Of Responsive Design Standards (Den Odell)
- 1. THE FUTURE OF RESPONSIVE DESIGN STANDARDS Evolving the web to meet the needs of end users
- 2. DEN ODELL Head of Web Development, AKQA @denodell this print for content only—size & color not accurate spine = 0.844" 440 page count BOOKS FOR PROFESSIONALS BY PROFESSIONALS® Pro JavaScript RIA Techniques: Best Practices, Performance, and Presentation Dear Reader, Many people are familiar with rich Internet applications (RIAs), those web sites that blur the line between desktop software and the web browser. Applications like webmail clients, photo editors, and social networking sites cross this boundary. They feature intuitive, user-friendly interfaces, without the need for page refreshes or other interruptions to the end user’s experience. It is widely regarded that this type of web site will continue to grow in popularity. I wrote this book to help web developers with some existing JavaScript skills suc- cessfully create their own professional, visually rich, dynamic, and performance- tuned RIAs. And following the guidelines in this book, you’ll be safe in the knowledge that your code is built according to best practices, adhering to web standards and accessibility guidelines. In this book, I will show you how best to build a solid, maintainable foundation of HTML, CSS, and JavaScript code for your RIAs, together with the Ajax techniques needed to provide the dynamic communication between the browser and web server behind the scenes. I will describe the performance limitations you may run into when building your web applications and how best to overcome these. And I’ll give you some tips for making your user interfaces feel more responsive, even when you can’t get around the performance limitations. You also will learn how to improve your RIA user interfaces by adding typo- graphical headings using custom fonts, multimedia playback components, customized form controls, and dynamic charting capabilities. Additionally, I will demonstrate how to continue running your web applications when the connection to the server is broken, how to use Ajax to read hidden data stored within binary files, and how to ensure the highest level of accessibility within your JavaScript web applications. Den Odell US $44.99 Shelve in Web Development User level: Intermediate–Advanced OdellProJavaScriptRIATechniques THE EXPERT’S VOICE® IN WEB DEVELOPMENT Pro JavaScript RIA Techniques Best Practices, Performance, and Presentation CYAN MAGENTA YELLOW BLACK PANTONE 123 C Den Odell Companion eBook Available www.apress.com SOURCE CODE ONLINE Companion eBook See last page for details on $10 eBook version Turn your JavaScript knowledge into beautiful, dynamic, and performance-tuned rich Internet applications ISBN 978-1-4302-1934-7 9 781430 219347 5 4 4 9 9 RELATEDTITLES
- 4. Construction of a web site or app so that it appears to have been purposely built for whichever device it is being viewed upon
- 7. CSS3 Media Queries • Apply different CSS style rules based on aspects of the browser, device or screen • Using pre-defined media features
- 8. CSS3 @media Rule @media screen and (min-width: 640px) { body { color: red; } } @media print and (orientation: landscape) { body { color: black; } }
- 10. RESPONSIVE FUTURE Now CSS3 Media Queries
- 11. RESPONSIVE FUTURE Evolved Web Standards Soon
- 12. RESPONSIVE FUTURE Smarter Interfaces Near Future
- 13. RESPONSIVE FUTURE Beyond The Browser End Goal
- 14. Evolved Web Standards Soon RESPONSIVE FUTURE Smarter Interfaces Near Future Beyond The Browser End Goal
- 16. HTML 5 CSS Level 3
- 17. HTML 5.1 CSS Level 4
- 18. HTML 5.1
- 19. <picture> • Load alternative images based on media queries at the designer’s discretion • Display different images or crops as relevant
- 21. <picture> <source src="sherlock-tall.jpg" media="(orientation: portrait)"> <source src="sherlock-wide.jpg" media="(orientation: landscape)"> <img src="sherlock.jpg" alt=""> </picture> <picture>
- 22. srcset • New attribute for <img> and <source> • Represents the same image at different resolutions or sizes • Browser decides which image is most appropriate to load
- 24. <img src="sherlock.jpg" alt="" srcset="sherlock-2x.jpg 2x, sherlock-3x.jpg 3x"> <img src="sherlock.jpg" alt="" srcset="sherlock-wide.jpg 1000w"> srcset
- 25. Source: caniuse.com ~52% Browser Support
- 26. HTML 5.1
- 27. CSS Level 4
- 29. SCRIPTING
- 33. Scripting @media (scripting: enabled) { .carousel-buttons { display: block; } } @media (scripting: none), @media (scripting: initial-only) { .carousel-buttons { display: none; } }
- 34. INTERACTION
- 35. Input Devices Input Device Hover State Accurate Selection Mouse ✔ ✔ Touch ✘ ✘ Keyboard ✔ ✔ Pen / Stylus ✘ ✔ TV / Console Remote ✔ ✘
- 36. hover Read more… Read more… Read more… hover none on-demand Read more…
- 37. Hover @media (hover: none) { .button { color: blue; text-decoration: underline; } } @media (hover: hover) { .button:hover { color: blue; text-decoration: underline; } }
- 39. Pointer @media (pointer: fine) { .button { padding: 5px; } } @media (pointer: coarse) { .button { padding: 25px; } }
- 40. DISPLAY QUALITY
- 42. Fast Refresh Rate Slower Refresh Rate
- 43. No Refresh RateFast Refresh Rate Slower Refresh Rate
- 46. Update Frequency @media (update-frequency: normal) { .image { background: url(sherlock-anim.gif); } } @media (update-frequency: none), @media (update-frequency: slow) { .image { background: url(sherlock.jpg); } }
- 47. ENVIRONMENT
- 51. Light Level @media (light-level: normal), @media (light-level: washed) { body { background: white; color: black; } } @media (light-level: dim) { body { background: black; color: gray; } }
- 53. HTML 5.1 CSS Level 4
- 56. Construction of a web site or app so that it appears to have been purposely built for whichever device it is being viewed upon
- 57. Construction of a web site or app so that it appears to have been purposely built for the user
- 58. PAGE LAYOUT BASED ON THE USER AND THEIR ENVIRONMENT
- 60. Heart Rate Sweat Stress Sleep Breathing Rate Calories In / Out Barcode Skin Temperature Ambient Temperature Mood Wearable Sensors
- 61. Clock Time Zone Calendar Music Playing Friends List Web History Purchase History Frequent Locations User Data
- 62. Device Sensors Wearable Sensors User Data Future CSS?
- 66. Geographic Region @media (country: us) { :not([data-country~=us]) { display: none; } } @media (country: au) { :not([data-country~=au]) { display: none; } }
- 67. Geographic Region @media (continent: europe), @media (country: uk), @media (min-latitude: 52) {…}
- 68. SPEED & ACTIVITY
- 69. Speed - Stationary Shakespeare's dramatic genius is especially to be noted in the art with which he manages his beginnings. The first scene of Macbeth strikes the keynote of the play. The desert place, the wild storm, the appearance of the witches, "the wayward rhythm" of their songs, all help to prepare us for a drama in which a human soul succumbs to the supernatural suggestions of evil and ranges itself along with the witches on the devil's side. We hear of a battle that is even now being fought, we hear of the trysting- place of the witches at the conclusion of the fray, and last of all we hear the name of the man they are planning to meet. No sooner has the name "Macbeth" been uttered than the calls of the attendant spirits are Macbeth
- 70. Speed - Walk Shakespeare's dramatic genius is especially to be noted in the art with which he manages his beginnings. The first scene of Macbeth strikes the keynote of the play. The desert place, the wild storm, the appearance of the witches, "the wayward rhythm" of their songs, all help to prepare us for a drama in which a human soul succumbs to the supernatural suggestions of evil and ranges itself Macbeth
- 71. Speed - Jog Shakespeare's dramatic genius is especially to be noted in the art with which he manages his beginnings. The first scene of Macbeth strikes the keynote of the play. The desert Macbeth
- 72. Speed - Sprint Shakespeare's dramatic genius is especially to be noted in the art with which he manages his beginnings. Macbeth
- 73. Speed & Activity @media (activity: walk) { .text {font-size: 14px;} } @media (activity: jog) { .text {font-size: 18px;} } @media (min-speed: 5ms) { .text {font-size: 22px;} }
- 74. SOUND LEVEL
- 75. Sound Level
- 76. Sound Level
- 77. Sound Level @media (sound-level: loud), @media (min-sound-level: 80db) { .video { display: none; } }
- 78. NETWORK
- 79. Network Fast Connection Slow Connection
- 80. Network @media (connection-speed: slow), @media (max-connection-speed: 0.5mbps) { .video { display: none; } }
- 81. SITE LAYOUT BASED ON INPUTS FROM THE USER AND THEIR ENVIRONMENT
- 82. • Temperature: 15°C • Altitude: 3m above sea level • Location: Forest of Dean, UK • Activity: Sitting • Mood: Calm
- 83. • Temperature: 5°C • Altitude: 50m above sea level • Location: Alps, Switzerland
- 84. • Activity: Running • Speed: 5 m/s • Heart rate: 125 bpm • Next Meeting: In 20 minutes
- 85. Time: 2.35am Sound level: 110 decibels Location: Main Festival Tent Activity: Dancing
- 90. Content, Data and Services Native App ? ? ?Browser
- 91. Content, Data and Services Native App ? ? ?Browser Modality Components W3C Multimodal Interaction
- 92. THE USER PICKS THE BEST INTERFACE FOR THEM
- 93. DIFFERENT INTERFACES HAVE DIFFERENT INPUTS AND OUTPUTS
- 94. Speech & Audio / VoiceXML
- 95. Speech & Audio / VoiceXML Dial-a-site
- 98. What are you looking for - concert, conference, or cinema tickets? Cinema Tickets Which film would you like to buy tickets for? The Avengers And where would you like to see it? The Odeon Great. We’ve now booked 2 tickets to see The Avengers at The Odeon.
- 99. Braille
- 100. Sign Language
- 101. Handwriting / InkML
- 102. Mood / EmotionML
- 103. THE USER PICKS THE BEST INTERFACE FOR THEM
- 106. RESPONSIVE FUTURE Now CSS3 Media Queries
- 107. Evolved Web Standards Soon RESPONSIVE FUTURE Smarter Interfaces Near Future Beyond The Browser End Goal
- 108. Construction of a web site or app so that it appears to have been purposely built for whichever device it is being viewed upon
- 109. Construction of a interface so that it appears to have been purposely built for the user
- 110. TOMORROW 3.05PM Speaker Design Clinic The Creative Hub
- 111. THE FUTURE OF RESPONSIVE DESIGN STANDARDS Evolving the web to meet the needs of end users Den Odell @denodell