responsive design and progressive enhancements for the web (workshop)

lucaSALVINI BACKTOTHEFRONTSEP29th2011

&RESPONS IVE

d e s i g np r o g r e s s i v e

enhancementsf

THE WEB LANDSCAPE



Viewport diversitySIZE - DPI

INterface diversityKeyboard - mouse - touch

SPECS diversityprocessor - memory

CONNECtivity diversitymobile - adsl - broadband

THE WEB LANDSCAPE


?Viewport diversity

SIZE - DPI

INterface diversitymouse - touch - keyboard

SPECS diversityprocessor - memory

CONNECtivity diversitymobile - adsl - broadband

THE WEB LANDSCAPE


one web to rule them alL


before we start we need to unlearn something

a new approach


a new approach

We have no canvas

there’s no such thing as pixel perfect

we know nothing*

*assumption is the mother of all fuckups


a new approach

SO,what’s our starting point if we have no canvas?

CONTENT


a new approach

WE have to build AROUND

CONTENT

AND RELEVANT, POSSIBLY.


a new approach

CONTENTstructured prioritized&


a new approach


AND RELEVANT, possibly.


a new approach structured CONTENT

SEMANTIC HTML

<article><hgroup>

<h2>Emmett Brown committed</h2><h3>Crackpot Inventor Declared Legally Insane</h3>

</hgroup><time datetime="1983-05-23">May 23, 1983</time><address>

! <p>Rachel Tennant</p></address>!!<figure>

! <img src="i/art1.jpg" alt="Mr.Emmett Brown"/></figure><p>The facts regarding the situation remain the same, state the authorities. Details concerning the action have been given a preliminary investigation, but it is felt that only by a more detailed study will the true facts become known.</p>

</article>



SEMANTIC HTML WAI-ARIA ROLES

<article role=”article”><hgroup>





</article>

<article role=”article”><hgroup>





</article>



SEMANTIC HTML WAI-ARIA ROLES

<article role=”article” class=”hentry”><hgroup>

<h2 class=”entry-title”>Emmett Brown committed</h2><h3>Crackpot Inventor Declared Legally Insane</h3>

</hgroup><time class=”updated” datetime="1983-05-23">May 23, 1983</time><address class=”vcard”>

! <p class=”fn”>Rachel Tennant</p></address>!!<figure>

! <img src="i/art1.jpg" alt="Mr.Emmett Brown"/></figure><p class=”entry-content”>The facts regarding the situation remain the same, state the authorities. Details concerning the action have been given a preliminary investigation, but it is felt that only by a more detailed study will the true facts become known.</p>

</article>


a new approach


AND RELEVANT, possibly.


a new approach prioritized CONTENT

the order of information is the simplest possible layout

The foundation

Ok, but what next?


institute du monde arabePhoto: Rory Hyde

responsive architectures measure actual

environmental conditions to enable buildings to adapt

their form, shape, color or character responsively.



“Fluid grids, flexible images, and media queries are the

three technical ingredients for responsive web design”

ETHAN MARCOTTE

FLUID GRIDS Flexible images media queries



RWD


RWDFLUID GRIDS

Flexible images

media queries



a new approach

Every module of information can be

moved and resized as needed

REMEMBER OUR foundation layout?

FLUID GRIDS


a new approach

Every module of information can be

moved and resized as needed

REMEMBER OUR foundation layout?

FLUID GRIDS

The GRID IS our guide

FLUID gridrelative units


responsive web design FLUID GRIDS

fixed WIDTH grid

1000px

250px 250px 250px 250px 25% 25% 25% 25%

any width

absolute units

MATH is SIMPLECONTENT

CONTAINER= %


RWDFLUID GRIDS

Flexible images

media queries


responsive web design


responsive web design FLEXIBLE IMAGES

?



THE “SCALING” solution

img {max-width:100%;

}

THE “SCALING” solution

img {width:100%;

}+ imgSizer.js<!--[if lte IE 6]>



THE “HIDING” solution


RWDFLUID GRIDS

Flexible images

media queries




responsive web design MEDIA QUERIES

media types

@media screen @media print @media handheld

{...}{...}{...}



+ logicsmedia types


{...}{...}{...}

and (exp)and (exp)and (exp)

=media queries



+ logicsmedia types


{...}{...}{...}

and (exp)and (exp)and (exp)

=media queries

@media screen and (min-width: 500px) {...}

they work as feature detection

(if viewport width is at least 500 pixels...)



WHAT features can we detect?

WIDTHHEIGHTDEVICE-WIDTHDEVICE-HEIGHT

ASPECT-RATIODEVICE-ASPECT-RATIO

COLORCOLOR-INDEXMONOCHROME

RESOLUTIONORIENTATION

SCANGRID

[min/max][min/max][min/max][min/max]

[min/max][min/max]

[min/max][min/max]

[min/max]



WHAT features can we detect?

WIDTHHEIGHTDEVICE-WIDTHDEVICE-HEIGHT

ASPECT-RATIODEVICE-ASPECT-RATIO

COLORCOLOR-INDEXMONOCHROME

RESOLUTIONORIENTATION

SCANGRID

[min/max][min/max][min/max][min/max]

[min/max][min/max]

[min/max][min/max]

[min/max]

DEVICE-PIXEL-RATIODEVICE-PIXEL-RATIODEVICE-PIXEL-RATIODEVICE-PIXEL-RATIO

TOUCH-ENABLED

--moz-

-moz-

[min/max][min/max][min/max]

-webkit-

-o-



@media [not|only] type [and] (condition) {...}

dissection of media queries

operators

and @media screen and (min-width: 500px) and (max-width: 800px) {...}





operators


OR@media screen and (min-width: 500px), screen and (orientation: landscape) {...}





operators


OR@media screen and (min-width: 500px), screen and (orientation: landscape) {...}

NOT @media not screen and (min-width: 500px) {...} !!



BE CAREFUL, NOT negates the entire media querY

@media not screen and (min-width: 500px) {...}





So, it doesn’t evaluate like this

@media (not screen) and (min-width: 500px) {...} X





So, it doesn’t evaluate like this

@media (not screen) and (min-width: 500px) {...} X

But IT evaluates like this

@media (not (screen and (min-width: 500px))) {...} ✓





ONLY AND NOT Hide the media query from OLDER BROWSERS

preventing them to uncontitionally apply stylesPRO TIP:



THE VIEWPORT ISSUE

@media only screen and (max-device-width: 20em) { #test {width:50%}

}

VIEWPORT width

device-width



THE VIEWPORT ISSUE

@media only screen and (max-device-width: 20em) { #test {width:50%}

}

device-width

VIEWPORT width



THE VIEWPORT ISSUE

@media only screen and (max-width: 20em) { #test {width:50%}

}

<meta name=”viewport” content=”width=device-width, initial-scale=1” />

device-width

VIEWPORT width



THE ABSENCE of a media query

is in fact, the first media query

Bryan Rieger, Rethinking the Mobile Web



EVOLVE USING THE INCREaSING SPACE to

rearrange content flow.

MEDIA QUERIES



EVEN MORE SPACE

makes room for

LARGER images and

deeper asides

MEDIA QUERIES



to infinity and beyond!


BREAKPOINTS BASED on cONTENT, not on devices

embrace CASCADING, define only WHAT CHANGES




silver bullet or fool’s gold?



ISSUES RAISED on RWD

1. one (image) size doesn’t fit all

❖ unnecessary downloads on small viewports or bad quality on large ones

❖ real-time image resizing is cpu and memory intensive

2. non viewable assets are downloaded anyway (display: none is not download:none)

❖ unnecessary downloads

3. media-queries will not remove unnecessary code

❖ unnecessary downloads of code not suitable for “mobile”

4. media-queries are not supported by older devices


❖ unpredictable css results

5. context of “mobile” ≠ context of “desktop”

❖ RWD doesn’t respect contextual usage patterns

BACKTOTHEFRONT

progressive enhancement

lucaSALVINI SEP29th2011

An escalator can never break;

it can only become stairs.Mitch hedberg

Photo: Niall & Elizabeth Dawson



STRUCTURED CONTENT with linear layout

CSS: color and typography

SMALL inline IMAGES

big inline images

STATIC MAPS

JS DRIVEN MAP

SMALL CSS IMAGES

big CSS IMAGESPLUGIns, AUDIO &

VIDEO with FALLBACKS

RESPOND.js

CSS3

selectivizr.js

responsive layout

MODERNIZR.js

media queries available Javascript available


1. one (image) size does’t fit all

❖ unnecessary downloads on small viewports or bad quality on large ones

❖ real-time image resizing is cpu and memory intensive

start from small images and dinamically load bigger assets

http://adaptive-images.com/http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/http://www.craig-russell.co.uk/responsive-images-and-context-aware-image-sizing/http://csswizardry.com/2011/07/responsive-images-right-now/http://nicolasgallagher.com/responsive-images-using-css3/http://blog.keithclark.co.uk/responsive-images-using-cookies/


SOLUTION:

resources:


http://adaptive-images.com

http://adaptive-images.com

http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

http://www.craig-russell.co.uk/responsive-images-and-context-aware-image-sizing/

http://www.craig-russell.co.uk/responsive-images-and-context-aware-image-sizing/

http://csswizardry.com/2011/07/responsive-images-right-now/

http://csswizardry.com/2011/07/responsive-images-right-now/

http://nicolasgallagher.com/responsive-images-using-css3/

http://nicolasgallagher.com/responsive-images-using-css3/

http://blog.keithclark.co.uk/responsive-images-using-cookies/

http://blog.keithclark.co.uk/responsive-images-using-cookies/



2. non viewable assets are downloaded anyway (display: none is not download:none)


SOLUTION: start from the cleanest solution and progressive enhanceadding what MORE capable browsers can use.


if (matchMedia(‘only screen and (min-width: 30em)’).matches) {

// load more assets}

https://github.com/paulirish/matchMedia.js/




3. media-queries will not remove unnecessary code

❖ unnecessary downloads of code not suitable for SMALL VIEWPORTS


SOLUTION: use javascript & media-queries to add, not to remove it

4. media-queries are not supported by older devices


❖ unpredictable css results

the first media-query is the absence of media-queriesuse ONLY to prevent older browsers to unconditionally load css

SOLUTION:




❖ doesn’t respect tipical usage based on context



DESKTOP USE CASE

BACKTOTHEFRONTlucaSALVINI SEP29th2011


Photo: Michael Mandiberg

MOBILE USE CASE

BACKTOTHEFRONTlucaSALVINI SEP29th2011


Photo: S. Diddy



❖ don’t respect usage patterns

IF YOU REALLY need to, progressive enhance reacting to location, not screen width, and adapt content based to proximity


SOLUTION:



RWD + progressive enhancement

So, silver bullet or fool’s gold?



Maybe people resize windows,

maybe they don’t.

The point is a responsive site

means they no longer NEED to.

Scott Jehl, Filament Group

Photo: David Calhoun



it’s a gREAT OPPORTUNITY not to miss


Apx


TESTING

DESKTOP

test on every possible browser you can install

USe offsite browser testing services1

use “responsiveness” testing services2

MOBILENothing is like the real thing

Android simulator

ios simulator

opera mini simulator

1 CrossBrowserTesting (http://crossbrowsertesting.com/), Browsershots (http://browsershots.org/), Litmus (http://litmus.com/), Browsercam (http://www.browsercam.com/), etc...2 Resize My Browser (http://resizemybrowser.com/), ResponsivePx (http://responsivepx.com/), ScreenFly (http://quirktools.com/screenfly/), Responsive Design Testing (http://mattkersley.com/responsive/)

http://crossbrowsertesting.com

http://crossbrowsertesting.com

http://browsershots.org

http://browsershots.org

http://litmus.com

http://litmus.com

http://www.browsercam.com

http://www.browsercam.com

http://resizemybrowser.com

http://resizemybrowser.com

http://responsivepx.com

http://responsivepx.com

http://quirktools.com/screenfly/




http://mattkersley.com/responsive/

http://mattkersley.com/responsive/


ONE MORE THING

AND RELEVANT, POSSIBLY.


a new approach


RELEVANT CONTENT


a new approach


a new approach

“MOBILE” “DESKTOP”

CONTENT

relevant

WTF?!

relevant CONTENT


a new approach


UX

+

performances

relevant CONTENT


a new approach


UX

+

performances

number of requests8 208

relevant CONTENT


a new approach

UX

+

performances



total page size30,2KB 1.28Mb

relevant CONTENT


a new approach

UX

+

performances



total page size30,2KB 1.28Mb

PAGE LOAD TIME (seconds)1.82 7.95

relevant CONTENT


a new approach

xkcd.com/773

relevant CONTENT


THANK YOU

@lucasalvini