the future of responsive design standards
TRANSCRIPT
![Page 1: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/1.jpg)
THE FUTURE OF RESPONSIVE DESIGN
STANDARDS
Evolving the web to meet the needs of end users
![Page 2: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/2.jpg)
DEN ODELLHead 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 PresentationDear 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
OdellPro JavaScript RIA Techniques
THE EXPERT’S VOICE® IN WEB DEVELOPMENT
ProJavaScript RIA TechniquesBest Practices, Performance, and Presentation
CYAN MAGENTA
YELLOW BLACK PANTONE 123 C
Den Odell
Companion eBook Available
www.apress.comSOURCE 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
54499
RELA
TED
TITL
ES
![Page 3: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/3.jpg)
RESPONSIVE WEB DESIGN
![Page 4: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/4.jpg)
Construction of a web site or app so
that it appears to have been purposely
built for whichever device it is being
viewed upon
![Page 5: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/5.jpg)
http://formula1.com
![Page 6: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/6.jpg)
CSS3 MEDIA QUERIES
![Page 7: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/7.jpg)
CSS3 Media Queries
• Apply different CSS style rules based on aspects
of the browser, device or screen
• Using pre-defined media features
![Page 8: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/8.jpg)
CSS3 @media Rule
@media screen and (min-width: 640px) { body { color: red; } } @media print and (orientation: landscape) { body { color: black; } }
![Page 9: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/9.jpg)
ACCESSIBLE USER INTERFACE
![Page 10: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/10.jpg)
RESPONSIVE FUTURE
Now
CSS3 Media Queries
![Page 11: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/11.jpg)
RESPONSIVE FUTURE
Evolved Web Standards
Soon
![Page 12: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/12.jpg)
RESPONSIVE FUTURE
Smarter Interfaces
Near Future
![Page 13: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/13.jpg)
RESPONSIVE FUTURE
Beyond The Browser
End Goal
![Page 14: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/14.jpg)
Evolved Web Standards
Soon
RESPONSIVE FUTURE
Smarter Interfaces
Near Future
Beyond The Browser
End Goal
![Page 15: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/15.jpg)
EVOLVED WEB STANDARDS
Soon
![Page 16: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/16.jpg)
HTML 5 CSS Level 3
![Page 17: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/17.jpg)
HTML 5.1 CSS Level 4
![Page 18: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/18.jpg)
HTML 5.1
![Page 19: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/19.jpg)
<picture>
• Load alternative images based on media queries
at the designer’s discretion
• Display different images or crops as relevant
![Page 20: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/20.jpg)
Released Dec 2011
<picture>
![Page 21: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/21.jpg)
<picture> <source src="sherlock-tall.jpg" media="(orientation: portrait)"> <source src="sherlock-wide.jpg" media="(orientation: landscape)"> <img src="sherlock.jpg" alt=""> </picture>
<picture>
![Page 22: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/22.jpg)
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
![Page 23: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/23.jpg)
Original
2x 3x
srcset
![Page 24: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/24.jpg)
<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
![Page 26: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/26.jpg)
HTML 5.1
![Page 27: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/27.jpg)
CSS Level 4
![Page 28: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/28.jpg)
Media Queries
Scripting
Interaction
Display Quality
Environment
![Page 29: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/29.jpg)
SCRIPTING
![Page 30: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/30.jpg)
Scripting
<html class="no-js">
<html class="js">
![Page 31: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/31.jpg)
Scripting
scripting:
none enabled
initial-only
![Page 32: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/32.jpg)
scripting
enabled none initial-only
![Page 33: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/33.jpg)
Scripting
@media (scripting: enabled) { .carousel-buttons { display: block; } } @media (scripting: none), @media (scripting: initial-only) { .carousel-buttons { display: none; } }
![Page 34: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/34.jpg)
INTERACTION
![Page 35: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/35.jpg)
Input Devices
Input Device Hover State Accurate Selection
Mouse ✔ ✔
Touch ✘ ✘
Keyboard ✔ ✔
Pen / Stylus ✘ ✔
TV / Console Remote ✔ ✘
![Page 36: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/36.jpg)
hover
Read more…Read more… Read more…
hover none on-demand
Read more…
![Page 37: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/37.jpg)
Hover@media (hover: none) { .button { color: blue; text-decoration: underline; } } @media (hover: hover) { .button:hover { color: blue; text-decoration: underline; } }
![Page 38: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/38.jpg)
pointer
Submit Submit
fine coarse
![Page 39: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/39.jpg)
Pointer
@media (pointer: fine) { .button { padding: 5px; } } @media (pointer: coarse) { .button { padding: 25px; } }
![Page 40: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/40.jpg)
DISPLAY QUALITY
![Page 41: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/41.jpg)
Fast Refresh Rate
![Page 42: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/42.jpg)
Fast Refresh Rate Slower Refresh Rate
![Page 43: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/43.jpg)
No Refresh RateFast Refresh Rate Slower Refresh Rate
![Page 44: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/44.jpg)
nonenormal slow
update-frequency
![Page 45: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/45.jpg)
update-frequency
normal slow none
![Page 46: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/46.jpg)
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); } }
![Page 47: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/47.jpg)
ENVIRONMENT
![Page 48: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/48.jpg)
![Page 49: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/49.jpg)
![Page 50: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/50.jpg)
light-level
normal
washeddim
![Page 51: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/51.jpg)
Light Level
@media (light-level: normal), @media (light-level: washed) { body { background: white; color: black; } } @media (light-level: dim) { body { background: black; color: gray; } }
![Page 52: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/52.jpg)
Media Queries
Scripting
Interaction
Display Quality
Environment
![Page 53: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/53.jpg)
HTML 5.1 CSS Level 4
![Page 54: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/54.jpg)
EVOLVED WEB STANDARDS
Soon
![Page 55: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/55.jpg)
SMARTER INTERFACES
Near Future
![Page 56: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/56.jpg)
Construction of a web site or app so
that it appears to have been purposely
built for whichever device it is being
viewed upon
![Page 57: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/57.jpg)
Construction of a web site or app so
that it appears to have been purposely
built for the user
![Page 58: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/58.jpg)
PAGE LAYOUT BASED ON THE USER AND
THEIR ENVIRONMENT
![Page 59: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/59.jpg)
Accelerometer
Barometer
Proximity
Gyroscope
Compass
Battery Life
Geolocation
Ambient Light
Microphone
Camera
Fingerprint
Device Sensors
![Page 60: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/60.jpg)
Heart Rate
Sweat
Stress
Sleep
Breathing Rate
Calories In / Out
Barcode
Skin Temperature
Ambient
Temperature
Mood
Wearable Sensors
![Page 61: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/61.jpg)
Clock
Time Zone
Calendar
Music Playing
Friends List
Web History
Purchase History
Frequent Locations
User Data
![Page 62: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/62.jpg)
Device Sensors
Wearable Sensors
User Data
Future CSS?
![Page 63: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/63.jpg)
GEOGRAPHIC REGION
![Page 64: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/64.jpg)
![Page 65: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/65.jpg)
![Page 66: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/66.jpg)
Geographic Region
@media (country: us) { :not([data-country~=us]) { display: none; } } @media (country: au) { :not([data-country~=au]) { display: none; } }
![Page 67: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/67.jpg)
Geographic Region
@media (continent: europe), @media (country: uk), @media (min-latitude: 52) {…}
![Page 68: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/68.jpg)
SPEED & ACTIVITY
![Page 69: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/69.jpg)
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
![Page 70: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/70.jpg)
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
![Page 71: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/71.jpg)
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
![Page 72: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/72.jpg)
Speed - Sprint
Shakespeare's
dramatic
genius is
especially to
be noted in the
art with which
he manages
his beginnings.
Macbeth
![Page 73: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/73.jpg)
Speed & Activity
@media (activity: walk) { .text {font-size: 14px;} } @media (activity: jog) { .text {font-size: 18px;} } @media (min-speed: 5ms) { .text {font-size: 22px;} }
![Page 74: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/74.jpg)
SOUND LEVEL
![Page 75: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/75.jpg)
Sound Level
![Page 76: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/76.jpg)
Sound Level
![Page 77: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/77.jpg)
Sound Level
@media (sound-level: loud), @media (min-sound-level: 80db) { .video { display: none; } }
![Page 78: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/78.jpg)
NETWORK
![Page 79: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/79.jpg)
Network
Fast Connection Slow Connection
![Page 80: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/80.jpg)
Network
@media (connection-speed: slow), @media (max-connection-speed: 0.5mbps) { .video { display: none; } }
![Page 81: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/81.jpg)
SITE LAYOUT BASED ON INPUTS FROM THE USER
AND THEIR ENVIRONMENT
![Page 82: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/82.jpg)
• Temperature: 15°C
• Altitude: 3m above sea level
• Location: Forest of Dean, UK
• Activity: Sitting
• Mood: Calm
![Page 83: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/83.jpg)
• Temperature: 5°C
• Altitude: 50m above sea level
• Location: Alps, Switzerland
![Page 84: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/84.jpg)
• Activity: Running
• Speed: 5 m/s
• Heart rate: 125 bpm
• Next Meeting: In 20 minutes
![Page 85: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/85.jpg)
Time: 2.35am
Sound level: 110 decibels
Location: Main Festival Tent
Activity: Dancing
![Page 86: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/86.jpg)
SMARTER INTERFACES
Near Future
![Page 87: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/87.jpg)
BEYOND THE BROWSER
End Goal
![Page 88: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/88.jpg)
Content, Data and Services
Browser
![Page 89: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/89.jpg)
Content, Data and Services
BrowserNative
App
![Page 90: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/90.jpg)
Content, Data and Services
Native App
? ? ?Browser
![Page 91: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/91.jpg)
Content, Data and Services
Native App
? ? ?BrowserModality Components
W3C Multimodal Interaction
![Page 92: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/92.jpg)
THE USER PICKS THE BEST INTERFACE FOR
THEM
![Page 93: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/93.jpg)
DIFFERENT INTERFACES HAVE DIFFERENT
INPUTS AND OUTPUTS
![Page 94: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/94.jpg)
Speech & Audio / VoiceXML
![Page 95: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/95.jpg)
Speech & Audio / VoiceXML
Dial-a-site
![Page 96: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/96.jpg)
http://ticketmaster.co.uk
![Page 97: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/97.jpg)
![Page 98: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/98.jpg)
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.
![Page 99: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/99.jpg)
Braille
![Page 100: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/100.jpg)
Sign Language
![Page 101: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/101.jpg)
Handwriting / InkML
![Page 102: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/102.jpg)
Mood / EmotionML
![Page 103: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/103.jpg)
THE USER PICKS THE BEST INTERFACE FOR
THEM
![Page 104: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/104.jpg)
ACCESSIBLE USER INTERFACE
![Page 105: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/105.jpg)
BEYOND THE BROWSER
End Goal
![Page 106: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/106.jpg)
RESPONSIVE FUTURE
Now
CSS3 Media Queries
![Page 107: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/107.jpg)
Evolved Web Standards
Soon
RESPONSIVE FUTURE
Smarter Interfaces
Near Future
Beyond The Browser
End Goal
![Page 108: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/108.jpg)
Construction of a web site or app so
that it appears to have been purposely
built for whichever device it is being
viewed upon
![Page 109: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/109.jpg)
Construction of a interface so that it
appears to have been purposely built
for the user
![Page 110: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/110.jpg)
TOMORROW 3.05PM
Speaker Design Clinic
The Creative Hub
![Page 111: The Future Of Responsive Design Standards](https://reader038.vdocuments.us/reader038/viewer/2022110122/55a68e221a28abb97d8b47b8/html5/thumbnails/111.jpg)
THE FUTURE OF RESPONSIVE DESIGN
STANDARDS
Evolving the web to meet the needs of end users
Den Odell @denodell