responsive design and progressive enhancements for the web (workshop)
DESCRIPTION
Smartphones, tablets, gaming consoles, ebook readers and internet fridges are becoming our main tools to browse the web and yet websites are strictly made for a desktop consumption. We need to develop a device agnostic approach and fully embrace the flexibility of the web with semantic coding and progressive enhancements. From The Front, Back To The Front (Cesena, Sept 29th, 2011) @lucasalviniTRANSCRIPT
![Page 1: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/1.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
&RESPONS IVE
d e s i g np r o g r e s s i v e
enhancementsf
![Page 2: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/2.jpg)
THE WEB LANDSCAPE
lucaSALVINI BACKTOTHEFRONTSEP29th2011
![Page 3: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/3.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
Viewport diversitySIZE - DPI
INterface diversityKeyboard - mouse - touch
SPECS diversityprocessor - memory
CONNECtivity diversitymobile - adsl - broadband
THE WEB LANDSCAPE
![Page 4: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/4.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
?Viewport diversity
SIZE - DPI
INterface diversitymouse - touch - keyboard
SPECS diversityprocessor - memory
CONNECtivity diversitymobile - adsl - broadband
THE WEB LANDSCAPE
![Page 5: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/5.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
one web to rule them alL
![Page 6: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/6.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
before we start we need to unlearn something
a new approach
![Page 7: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/7.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
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
![Page 8: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/8.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
SO,what’s our starting point if we have no canvas?
CONTENT
![Page 9: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/9.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
WE have to build AROUND
CONTENT
![Page 10: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/10.jpg)
AND RELEVANT, POSSIBLY.
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
CONTENTstructured prioritized&
![Page 11: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/11.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
CONTENTstructured prioritized&
AND RELEVANT, possibly.
![Page 12: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/12.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
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>
![Page 13: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/13.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach structured CONTENT
SEMANTIC HTML WAI-ARIA ROLES
<article role=”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>
<article role=”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>
![Page 14: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/14.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach structured CONTENT
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>
![Page 15: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/15.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
CONTENTstructured prioritized&
AND RELEVANT, possibly.
![Page 16: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/16.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach prioritized CONTENT
the order of information is the simplest possible layout
The foundation
Ok, but what next?
![Page 17: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/17.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
institute du monde arabePhoto: Rory Hyde
![Page 18: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/18.jpg)
responsive architectures measure actual
environmental conditions to enable buildings to adapt
their form, shape, color or character responsively.
lucaSALVINI BACKTOTHEFRONTSEP29th2011
institute du monde arabePhoto: Rory Hyde
![Page 19: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/19.jpg)
“Fluid grids, flexible images, and media queries are the
three technical ingredients for responsive web design”
ETHAN MARCOTTE
FLUID GRIDS Flexible images media queries
lucaSALVINI BACKTOTHEFRONTSEP29th2011
institute du monde arabePhoto: Rory Hyde
RWD
![Page 20: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/20.jpg)
institute du monde arabePhoto: Rory Hyde
RWDFLUID GRIDS
Flexible images
media queries
lucaSALVINI BACKTOTHEFRONTSEP29th2011
![Page 21: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/21.jpg)
institute du monde arabePhoto: Rory Hyde
RWDFLUID GRIDS
Flexible images
media queries
lucaSALVINI BACKTOTHEFRONTSEP29th2011
![Page 22: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/22.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
Every module of information can be
moved and resized as needed
REMEMBER OUR foundation layout?
FLUID GRIDS
![Page 23: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/23.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
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
![Page 24: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/24.jpg)
FLUID gridrelative units
lucaSALVINI BACKTOTHEFRONTSEP29th2011
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= %
![Page 25: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/25.jpg)
institute du monde arabePhoto: Rory Hyde
RWDFLUID GRIDS
Flexible images
media queries
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design
![Page 26: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/26.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design FLEXIBLE IMAGES
?
![Page 27: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/27.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design FLEXIBLE IMAGES
THE “SCALING” solution
img {max-width:100%;
}
![Page 28: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/28.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design FLEXIBLE IMAGES
THE “SCALING” solution
img {width:100%;
}+ imgSizer.js<!--[if lte IE 6]>
![Page 29: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/29.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design FLEXIBLE IMAGES
THE “HIDING” solution
![Page 30: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/30.jpg)
institute du monde arabePhoto: Rory Hyde
RWDFLUID GRIDS
Flexible images
media queries
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design
![Page 31: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/31.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
media types
@media screen @media print @media handheld
{...}{...}{...}
![Page 32: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/32.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
+ logicsmedia types
@media screen @media print @media handheld
{...}{...}{...}
and (exp)and (exp)and (exp)
=media queries
![Page 33: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/33.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
+ logicsmedia types
@media screen @media print @media handheld
{...}{...}{...}
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...)
![Page 34: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/34.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
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]
![Page 35: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/35.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
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]
![Page 36: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/36.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
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-
![Page 37: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/37.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
@media [not|only] type [and] (condition) {...}
dissection of media queries
operators
and @media screen and (min-width: 500px) and (max-width: 800px) {...}
![Page 38: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/38.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
@media [not|only] type [and] (condition) {...}
dissection of media queries
operators
and @media screen and (min-width: 500px) and (max-width: 800px) {...}
OR@media screen and (min-width: 500px), screen and (orientation: landscape) {...}
![Page 39: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/39.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
@media [not|only] type [and] (condition) {...}
dissection of media queries
operators
and @media screen and (min-width: 500px) and (max-width: 800px) {...}
OR@media screen and (min-width: 500px), screen and (orientation: landscape) {...}
NOT @media not screen and (min-width: 500px) {...} !!
![Page 40: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/40.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
BE CAREFUL, NOT negates the entire media querY
@media not screen and (min-width: 500px) {...}
![Page 41: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/41.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
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
![Page 42: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/42.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
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
But IT evaluates like this
@media (not (screen and (min-width: 500px))) {...} ✓
![Page 43: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/43.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
@media [not|only] type [and] (condition) {...}
dissection of media queries
ONLY AND NOT Hide the media query from OLDER BROWSERS
preventing them to uncontitionally apply stylesPRO TIP:
![Page 44: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/44.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
THE VIEWPORT ISSUE
@media only screen and (max-device-width: 20em) { #test {width:50%}
}
VIEWPORT width
device-width
![Page 45: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/45.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
THE VIEWPORT ISSUE
@media only screen and (max-device-width: 20em) { #test {width:50%}
}
device-width
VIEWPORT width
![Page 46: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/46.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
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
![Page 47: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/47.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
THE ABSENCE of a media query
is in fact, the first media query
Bryan Rieger, Rethinking the Mobile Web
![Page 48: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/48.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design
EVOLVE USING THE INCREaSING SPACE to
rearrange content flow.
MEDIA QUERIES
![Page 49: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/49.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design
EVEN MORE SPACE
makes room for
LARGER images and
deeper asides
MEDIA QUERIES
![Page 50: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/50.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design MEDIA QUERIES
to infinity and beyond!
![Page 51: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/51.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
BREAKPOINTS BASED on cONTENT, not on devices
embrace CASCADING, define only WHAT CHANGES
responsive web design MEDIA QUERIES
![Page 52: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/52.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design
silver bullet or fool’s gold?
![Page 53: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/53.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
responsive web design
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
❖ unnecessary downloads
❖ unpredictable css results
5. context of “mobile” ≠ context of “desktop”
❖ RWD doesn’t respect contextual usage patterns
![Page 54: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/54.jpg)
BACKTOTHEFRONT
progressive enhancement
lucaSALVINI SEP29th2011
An escalator can never break;
it can only become stairs.Mitch hedberg
Photo: Niall & Elizabeth Dawson
![Page 55: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/55.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
progressive enhancement
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
![Page 56: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/56.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
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/
progressive enhancement
SOLUTION:
resources:
ISSUES RAISED on RWD
![Page 57: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/57.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
ISSUES RAISED on RWD
2. non viewable assets are downloaded anyway (display: none is not download:none)
❖ unnecessary downloads
SOLUTION: start from the cleanest solution and progressive enhanceadding what MORE capable browsers can use.
progressive enhancement
if (matchMedia(‘only screen and (min-width: 30em)’).matches) {
// load more assets}
https://github.com/paulirish/matchMedia.js/
![Page 58: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/58.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
3. media-queries will not remove unnecessary code
❖ unnecessary downloads of code not suitable for SMALL VIEWPORTS
progressive enhancement
SOLUTION: use javascript & media-queries to add, not to remove it
4. media-queries are not supported by older devices
❖ unnecessary downloads
❖ unpredictable css results
the first media-query is the absence of media-queriesuse ONLY to prevent older browsers to unconditionally load css
SOLUTION:
ISSUES RAISED on RWD
![Page 59: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/59.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
5. context of “mobile” ≠ context of “desktop”
❖ doesn’t respect tipical usage based on context
progressive enhancement
ISSUES RAISED on RWD
![Page 60: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/60.jpg)
DESKTOP USE CASE
BACKTOTHEFRONTlucaSALVINI SEP29th2011
progressive enhancement
Photo: Michael Mandiberg
![Page 61: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/61.jpg)
MOBILE USE CASE
BACKTOTHEFRONTlucaSALVINI SEP29th2011
progressive enhancement
Photo: S. Diddy
![Page 62: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/62.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
5. context of “mobile” ≠ context of “desktop”
❖ don’t respect usage patterns
IF YOU REALLY need to, progressive enhance reacting to location, not screen width, and adapt content based to proximity
progressive enhancement
SOLUTION:
ISSUES RAISED on RWD
![Page 63: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/63.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
RWD + progressive enhancement
So, silver bullet or fool’s gold?
![Page 64: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/64.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
RWD + progressive enhancement
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
![Page 65: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/65.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
RWD + progressive enhancement
it’s a gREAT OPPORTUNITY not to miss
![Page 66: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/66.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
Apx
![Page 67: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/67.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
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/)
![Page 68: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/68.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
ONE MORE THING
![Page 69: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/69.jpg)
AND RELEVANT, POSSIBLY.
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
CONTENTstructured prioritized&
![Page 70: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/70.jpg)
RELEVANT CONTENT
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
![Page 71: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/71.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
“MOBILE” “DESKTOP”
CONTENT
relevant
WTF?!
relevant CONTENT
![Page 72: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/72.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
“MOBILE” “DESKTOP”
UX
+
performances
relevant CONTENT
![Page 73: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/73.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
“MOBILE” “DESKTOP”
UX
+
performances
number of requests8 208
relevant CONTENT
![Page 74: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/74.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
UX
+
performances
“MOBILE” “DESKTOP”
number of requests8 208
total page size30,2KB 1.28Mb
relevant CONTENT
![Page 75: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/75.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
UX
+
performances
“MOBILE” “DESKTOP”
number of requests8 208
total page size30,2KB 1.28Mb
PAGE LOAD TIME (seconds)1.82 7.95
relevant CONTENT
![Page 76: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/76.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
a new approach
xkcd.com/773
relevant CONTENT
![Page 77: Responsive Design and Progressive Enhancements for the Web (workshop)](https://reader034.vdocuments.site/reader034/viewer/2022052522/554d2001b4c905ab268b4850/html5/thumbnails/77.jpg)
lucaSALVINI BACKTOTHEFRONTSEP29th2011
THANK YOU
@lucasalvini