The Future Of Responsive Design Standards (Den Odell)

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

Source: caniuse.com

~52% Browser Support

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