The Future Of Responsive Design Standards
-
Upload
den-odell -
Category
Technology
-
view
747 -
download
0
Transcript of The Future Of Responsive Design Standards
THE FUTURE OF RESPONSIVE DESIGN
STANDARDS
Evolving the web to meet the needs of end users
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
RESPONSIVE WEB DESIGN
Construction of a web site or app so
that it appears to have been purposely
built for whichever device it is being
viewed upon
http://formula1.com
CSS3 MEDIA QUERIES
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; } }
ACCESSIBLE USER INTERFACE
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
EVOLVED WEB STANDARDS
Soon
HTML 5 CSS Level 3
HTML 5.1 CSS Level 4
HTML 5.1
<picture>
• Load alternative images based on media queries
at the designer’s discretion
• Display different images or crops as relevant
Released Dec 2011
<picture>
<picture> <source src="sherlock-tall.jpg" media="(orientation: portrait)"> <source src="sherlock-wide.jpg" media="(orientation: landscape)"> <img src="sherlock.jpg" alt=""> </picture>
<picture>
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
Original
2x 3x
srcset
<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
HTML 5.1
CSS Level 4
Media Queries
Scripting
Interaction
Display Quality
Environment
SCRIPTING
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; } }
INTERACTION
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; } }
DISPLAY QUALITY
Fast Refresh Rate
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); } }
ENVIRONMENT
light-level
normal
washeddim
Light Level
@media (light-level: normal), @media (light-level: washed) { body { background: white; color: black; } } @media (light-level: dim) { body { background: black; color: gray; } }
Media Queries
Scripting
Interaction
Display Quality
Environment
HTML 5.1 CSS Level 4
EVOLVED WEB STANDARDS
Soon
SMARTER INTERFACES
Near Future
Construction of a web site or app so
that it appears to have been purposely
built for whichever device it is being
viewed upon
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
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 & ACTIVITY
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) { .text {font-size: 18px;} } @media (min-speed: 5ms) { .text {font-size: 22px;} }
SOUND LEVEL
Sound Level
Sound Level
Sound Level
@media (sound-level: loud), @media (min-sound-level: 80db) { .video { display: none; } }
NETWORK
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
SMARTER INTERFACES
Near Future
BEYOND THE BROWSER
End Goal
Content, Data and Services
Browser
Content, Data and Services
BrowserNative
App
Content, Data and Services
Native App
? ? ?Browser
Content, Data and Services
Native App
? ? ?BrowserModality Components
W3C Multimodal Interaction
THE USER PICKS THE BEST INTERFACE FOR
THEM
DIFFERENT INTERFACES HAVE DIFFERENT
INPUTS AND OUTPUTS
Speech & Audio / VoiceXML
Speech & Audio / VoiceXML
Dial-a-site
http://ticketmaster.co.uk
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.
Braille
Sign Language
Handwriting / InkML
Mood / EmotionML
THE USER PICKS THE BEST INTERFACE FOR
THEM
ACCESSIBLE USER INTERFACE
BEYOND THE BROWSER
End Goal
RESPONSIVE FUTURE
Now
CSS3 Media Queries
Evolved Web Standards
Soon
RESPONSIVE FUTURE
Smarter Interfaces
Near Future
Beyond The Browser
End Goal
Construction of a web site or app so
that it appears to have been purposely
built for whichever device it is being
viewed upon
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