Responsive Design and Progressive Enhancements for the Web (workshop)

RESPONSIVE progressive
design & enhancements
f  

lucaSALVINI SEP29th2011 BACKTOTHEFRONT

THE WEB LANDSCAPE


THE WEB LANDSCAPE

Viewport diversity INterface diversity
SIZE - DPI Keyboard - mouse - touch

SPECS diversity CONNECtivity diversity
processor - memory mobile - adsl - broadband


THE WEB LANDSCAPE
Viewport diversity INterface diversity
SIZE - DPI mouse - touch - keyboard

SPECS diversity
processor - memory
? CONNECtivity diversity
mobile - adsl - broadband


one web to rule them alL


a new approach
before we start we need to unlearn something


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


a new approach

structured & prioritized

CONTENT
AND RELEVANT, POSSIBLY.


a new approach

structured & prioritized

CONTENT
AND RELEVANT, possibly.


a new approach structured CONTENT

<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



<article role=”article”>
<hgroup>
<h2>Emmett Brown committed</h2>
</hgroup>
<time datetime="1983-05-23">May 23, 1983</time>
<address>
! <p>Rachel Tennant</p>
</address>!!
<figure>
</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” class=”hentry”>
<hgroup>
<h2 class=”entry-title”>Emmett Brown committed</h2>
</hgroup>
<time class=”updated” datetime="1983-05-23">May 23, 1983</time>
<address class=”vcard”>
! <p class=”fn”>Rachel Tennant</p>
</address>!!
<figure>
</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>

SEMANTIC HTML WAI-ARIA ROLES


a new approach prioritized CONTENT

The foundation
the order of information is the simplest possible layout

Ok, but what next?


institute du monde arabe
Photo: Rory Hyde


Photo: Rory Hyde

responsive architectures measure actual
environmental conditions to enable buildings to adapt
their form, shape, color or character responsively.


Photo: Rory Hyde

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

RWD
FLUID GRIDS Flexible
three technical ingredients for responsive web design”
ETHAN MARCOTTE


Photo: Rory Hyde

RWD
FLUID GRIDS
Flexible images
media queries


a new approach FLUID GRIDS

REMEMBER OUR foundation layout?
Every module of information can be
moved and resized as needed


a new approach FLUID GRIDS

REMEMBER OUR foundation layout?
Every module of information can be
moved and resized as needed
The GRID IS our guide


responsive web design FLUID GRIDS

fixed WIDTH grid FLUID grid
absolute units relative units

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

1000px any width

CONTENT
MATH is SIMPLE CONTAINER
=%


Photo: Rory Hyde

responsive web design

RWD
FLUID GRIDS
Flexible images
media queries


responsive web design FLEXIBLE IMAGES

?



THE “SCALING” solution

img {
max-width:100%;
}


THE “SCALING” solution

img {
<!--[if lte IE 6]>
}
width:100%; + imgSizer.js


THE “HIDING” solution


responsive web design MEDIA QUERIES

media types

@media screen {...}
@media print {...}
@media handheld {...}



media types + logics =media queries

@media screen and (exp) {...}
@media print and (exp) {...}
@media handheld and (exp) {...}



media types + logics =media queries

@media screen and (exp) {...}
@media print and (exp) {...}
@media handheld and (exp) {...}

they work as feature detection
@media screen and (min-width: 500px) {...}

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



WHAT features can we detect?
[min/max] WIDTH
[min/max] HEIGHT
[min/max] DEVICE-WIDTH
[min/max] DEVICE-HEIGHT

[min/max] ASPECT-RATIO
[min/max] DEVICE-ASPECT-RATIO

[min/max] COLOR
[min/max] COLOR-INDEX
MONOCHROME

[min/max] RESOLUTION
ORIENTATION

SCAN
GRID



WHAT features can we detect?
[min/max] WIDTH -webkit- [min/max] DEVICE-PIXEL-RATIO
[min/max] HEIGHT [min/max] --moz- DEVICE-PIXEL-RATIO
[min/max] DEVICE-WIDTH -o- [min/max] DEVICE-PIXEL-RATIO
[min/max] DEVICE-HEIGHT DEVICE-PIXEL-RATIO

[min/max] ASPECT-RATIO -moz- TOUCH-ENABLED
[min/max] DEVICE-ASPECT-RATIO

[min/max] COLOR
[min/max] COLOR-INDEX
MONOCHROME

[min/max] RESOLUTION
ORIENTATION

SCAN
GRID



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

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




operators

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




operators

@media screen and (min-width: 500px),
OR 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
PRO TIP: preventing them to uncontitionally apply styles



THE VIEWPORT ISSUE

device-width

VIEWPORT width

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



THE VIEWPORT ISSUE

device-width

VIEWPORT width

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

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



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.



EVEN MORE SPACE
makes room for
LARGER images and
deeper asides



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


Photo: Niall & Elizabeth Dawson

progressive enhancement

An escalator can never break; Mitch hedberg
it can only become stairs.



big CSS IMAGES big inline images JS DRIVEN MAP selectivizr.js MODERNIZR.js RESPOND.js
PLUGIns, AUDIO &
VIDEO with
SMALL CSS SMALL inline FALLBACKS responsive
STATIC MAPS CSS3
IMAGES IMAGES layout

CSS: color and typography

STRUCTURED CONTENT with linear layout

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

SOLUTION: start from small images and dinamically load bigger assets

resources:
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/


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


SOLUTION: start from the cleanest solution and progressive enhance
adding 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

SOLUTION: the first media-query is the absence of media-queries
use ONLY to prevent older browsers to unconditionally load css



❖ doesn’t respect tipical usage based on context


Photo: Michael Mandiberg


DESKTOP USE CASE


Photo: S. Diddy


MOBILE USE CASE



❖ don’t respect usage patterns

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


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


Apx


TESTING
DESKTOP
test on every possible browser you can install
USe offsite browser testing services1
use “responsiveness” testing services2

MOBILE
Nothing 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/)


ONE MORE THING


a new approach RELEVANT CONTENT


a new approach relevant CONTENT

t
elevan

O
r

NTE NT
C

WTF?!
“MOBILE” “DESKTOP”



UX
+
performances




UX
+
performances

8 number of requests 208



UX
+
performances

30,2KB total page size 1.28Mb



UX
+
performances

30,2KB total page size 1.28Mb
1.82 PAGE LOAD TIME (seconds) 7.95



xkcd.com/773


THANK YOU

@lucasalvini


Responsive Design and Progressive Enhancements for the Web (workshop)

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Responsive Design and Progressive Enhancements for the Web (workshop)