The Future Of Responsive Design Standards

THE FUTURE OF
RESPONSIVE DESIGN
STANDARDS
Evolving the web to meet the needs of end users

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

Construction of a web site or app so
that it appears to have been purposely
built for whichever device it is being
viewed upon

CSS3 Media Queries
• Apply different CSS style rules based on aspects
of the browser, device or screen
• Using pre-defined media features

CSS3 @media Rule
@media screen and (min-width: 640px) { 
body { 
color: red; 
} 
} 
 
@media print and (orientation: landscape) { 
body { 
color: black; 
} 
}

RESPONSIVE FUTURE
Now
CSS3 Media Queries

RESPONSIVE FUTURE
Evolved Web Standards
Soon

RESPONSIVE FUTURE
Smarter Interfaces
Near Future

RESPONSIVE FUTURE
Beyond The Browser
End Goal

Evolved Web Standards
Soon
RESPONSIVE FUTURE
Smarter Interfaces
Near Future
Beyond The Browser
End Goal

<picture>
• Load alternative images based on media queries
at the designer’s discretion
• Display different images or crops as relevant

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

<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

Source: caniuse.com
~52% Browser Support

Media Queries
Scripting
Interaction
Display Quality
Environment

Scripting
<html class="no-js">
 
<html class="js">

Scripting
scripting: 
 
none 
enabled 
initial-only

scripting
enabled
none
initial-only

Scripting
@media (scripting: enabled) { 
.carousel-buttons { 
display: block; 
} 
} 
 
@media (scripting: none), 
@media (scripting: initial-only) { 
.carousel-buttons { 
display: none; 
} 
}

Input Devices
Input Device Hover State Accurate Selection
Mouse ✔ ✔
Touch ✘ ✘
Keyboard ✔ ✔
Pen / Stylus ✘ ✔
TV / Console Remote ✔ ✘

hover
Read more…
Read more… Read more…
hover none on-demand
Read more…

Hover
@media (hover: none) { 
.button { 
color: blue; 
text-decoration: underline; 
} 
} 
 
@media (hover: hover) { 
.button:hover { 
color: blue; 
text-decoration: underline; 
} 
}

pointer
Submit Submit
fine coarse

Pointer
@media (pointer: fine) { 
.button { 
padding: 5px; 
} 
} 
 
@media (pointer: coarse) { 
.button { 
padding: 25px; 
} 
}

Fast Refresh Rate Slower Refresh Rate

No Refresh RateFast Refresh Rate Slower Refresh Rate

nonenormal slow
update-frequency

update-frequency
normal
slow
none

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); 
} 
}

Light Level
@media (light-level: normal), 
@media (light-level: washed) { 
body { 
background: white; color: black; 
} 
} 
 
@media (light-level: dim) { 
body { 
background: black; color: gray; 
} 
}

SMARTER
INTERFACES
Near Future

Construction of a web site or app so
that it appears to have been purposely
built for the user

PAGE LAYOUT BASED
ON THE USER AND
THEIR ENVIRONMENT

Accelerometer
Barometer
Proximity
Gyroscope
Compass
Battery Life
Geolocation
Ambient Light
Microphone
Camera
Fingerprint
Device Sensors

Heart Rate
Sweat
Stress
Sleep
Breathing Rate
Calories In / Out
Barcode
Skin Temperature
Ambient
Temperature
Mood
Wearable Sensors

Clock
Time Zone
Calendar
Music Playing
Friends List
Web History
Purchase History
Frequent Locations
User Data

Device Sensors
Wearable Sensors
User Data
Future CSS?

Geographic Region
@media (country: us) { 
:not([data-country~=us]) { 
display: none; 
} 
} 
 
@media (country: au) { 
:not([data-country~=au]) { 
display: none; 
} 
}

Geographic Region
@media (continent: europe), 
@media (country: uk), 
@media (min-latitude: 52) {…}

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

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

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

Speed - Sprint
Shakespeare's
dramatic
genius is
especially to
be noted in the
art with which
he manages
his beginnings.
Macbeth

Speed & Activity
@media (activity: walk) { 
.text {font-size: 14px;} 
} 
 
@media (activity: jog) { 
} 
 
@media (min-speed: 5ms) { 
}

Sound Level
@media (sound-level: loud), 
@media (min-sound-level: 80db) { 
.video { 
display: none; 
} 
}

Network
Fast Connection Slow Connection

Network
@media (connection-speed: slow), 
@media (max-connection-speed: 0.5mbps) { 
.video { 
display: none; 
} 
}

SITE LAYOUT BASED ON
INPUTS FROM THE USER
AND THEIR ENVIRONMENT

• Temperature: 15°C
• Altitude: 3m above sea level
• Location: Forest of Dean, UK
• Activity: Sitting
• Mood: Calm

• Temperature: 5°C
• Altitude: 50m above sea level
• Location: Alps, Switzerland

• Activity: Running
• Speed: 5 m/s
• Heart rate: 125 bpm
• Next Meeting: In 20 minutes

Time: 2.35am
Sound level: 110 decibels
Location: Main Festival Tent
Activity: Dancing

Content, Data and
Services
Browser

Content, Data and
Services
Browser
Native
App

Content, Data and
Services
Native
App
? ? ?Browser

Content, Data and
Services
Native
App
? ? ?Browser Modality Components
W3C Multimodal Interaction

THE USER PICKS THE
BEST INTERFACE FOR
THEM

DIFFERENT INTERFACES
HAVE DIFFERENT
INPUTS AND OUTPUTS

Speech & Audio / VoiceXML
Dial-a-site

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.

Construction of a interface so that it
appears to have been purposely built
for the user

TOMORROW
3.05PM
Speaker Design Clinic
The Creative Hub

THE FUTURE OF
RESPONSIVE DESIGN
STANDARDS
Evolving the web to meet the needs of end users
Den Odell @denodell

The Future Of Responsive Design Standards

Recommended

Recommended

More Related Content

Similar to The Future Of Responsive Design Standards

Similar to The Future Of Responsive Design Standards (20)

Recently uploaded

Recently uploaded (20)

The Future Of Responsive Design Standards