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)
@lucasalvini
5. one web to rule them alL
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
6. a new approach
before we start we need to unlearn something
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
7. 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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
8. a new approach
SO,
what’s our starting point if we have no canvas?
CONTENT
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
9. a new approach
WE have to build AROUND
CONTENT
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
10. a new approach
structured & prioritized
CONTENT
AND RELEVANT, POSSIBLY.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
11. a new approach
structured & prioritized
CONTENT
AND RELEVANT, possibly.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
12. 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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
13. a new approach structured CONTENT
<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>
SEMANTIC HTML WAI-ARIA ROLES
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
14. a new approach structured CONTENT
<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>
SEMANTIC HTML WAI-ARIA ROLES
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
15. a new approach
structured & prioritized
CONTENT
AND RELEVANT, possibly.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
16. a new approach prioritized CONTENT
The foundation
the order of information is the simplest possible layout
Ok, but what next?
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
17. institute du monde arabe
Photo: Rory Hyde
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
18. institute du monde arabe
Photo: Rory Hyde
responsive architectures measure actual
environmental conditions to enable buildings to adapt
their form, shape, color or character responsively.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
19. institute du monde arabe
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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
20. institute du monde arabe
Photo: Rory Hyde
RWD
FLUID GRIDS
Flexible images
media queries
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
21. institute du monde arabe
Photo: Rory Hyde
RWD
FLUID GRIDS
Flexible images
media queries
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
22. a new approach FLUID GRIDS
REMEMBER OUR foundation layout?
Every module of information can be
moved and resized as needed
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
23. 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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
24. 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
=%
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
25. institute du monde arabe
Photo: Rory Hyde
responsive web design
RWD
FLUID GRIDS
Flexible images
media queries
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
29. responsive web design FLEXIBLE IMAGES
THE “HIDING” solution
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
30. institute du monde arabe
Photo: Rory Hyde
responsive web design
RWD
FLUID GRIDS
Flexible images
media queries
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
31. responsive web design MEDIA QUERIES
media types
@media screen {...}
@media print {...}
@media handheld {...}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
32. responsive web design MEDIA QUERIES
media types + logics =media queries
@media screen and (exp) {...}
@media print and (exp) {...}
@media handheld and (exp) {...}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
33. responsive web design MEDIA QUERIES
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...)
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
34. responsive web design MEDIA QUERIES
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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
35. responsive web design MEDIA QUERIES
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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
36. responsive web design MEDIA QUERIES
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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
37. responsive web design MEDIA QUERIES
dissection of media queries
@media [not|only] type [and] (condition) {...}
operators
and @media screen and (min-width: 500px)
and (max-width: 800px) {...}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
38. responsive web design MEDIA QUERIES
dissection of media queries
@media [not|only] type [and] (condition) {...}
operators
and @media screen and (min-width: 500px)
and (max-width: 800px) {...}
@media screen and (min-width: 500px),
OR screen and (orientation: landscape) {...}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
39. responsive web design MEDIA QUERIES
dissection of media queries
@media [not|only] type [and] (condition) {...}
operators
and @media screen and (min-width: 500px)
and (max-width: 800px) {...}
@media screen and (min-width: 500px),
OR screen and (orientation: landscape) {...}
NOT @media not screen and (min-width: 500px) {...}
!!
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
40. responsive web design MEDIA QUERIES
BE CAREFUL, NOT negates the entire media querY
@media not screen and (min-width: 500px) {...}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
41. 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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
42. 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))) {...}
✓
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
43. responsive web design MEDIA QUERIES
dissection of media queries
@media [not|only] type [and] (condition) {...}
ONLY AND NOT Hide the media query from OLDER BROWSERS
PRO TIP: preventing them to uncontitionally apply styles
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
44. responsive web design MEDIA QUERIES
THE VIEWPORT ISSUE
device-width
VIEWPORT width
@media only screen and (max-device-width: 20em) {
#test {width:50%}
}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
45. responsive web design MEDIA QUERIES
THE VIEWPORT ISSUE
device-width
VIEWPORT width
@media only screen and (max-device-width: 20em) {
#test {width:50%}
}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
46. responsive web design MEDIA QUERIES
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%}
}
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
47. responsive web design MEDIA QUERIES
THE ABSENCE of a media query
is in fact, the first media query
Bryan Rieger, Rethinking the Mobile Web
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
48. responsive web design MEDIA QUERIES
EVOLVE USING THE INCREaSING SPACE to
rearrange content flow.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
49. responsive web design MEDIA QUERIES
EVEN MORE SPACE
makes room for
LARGER images and
deeper asides
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
50. responsive web design MEDIA QUERIES
to infinity and beyond!
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
51. responsive web design MEDIA QUERIES
BREAKPOINTS BASED on cONTENT, not on devices
embrace CASCADING, define only WHAT CHANGES
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
52. responsive web design
silver bullet or fool’s gold?
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
53. 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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
54. Photo: Niall & Elizabeth Dawson
progressive enhancement
An escalator can never break; Mitch hedberg
it can only become stairs.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
55. progressive enhancement
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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
56. progressive enhancement
ISSUES RAISED on RWD
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/
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
57. progressive enhancement
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 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/
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
58. progressive enhancement
ISSUES RAISED on RWD
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
❖ unnecessary downloads
❖ unpredictable css results
SOLUTION: the first media-query is the absence of media-queries
use ONLY to prevent older browsers to unconditionally load css
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
59. progressive enhancement
ISSUES RAISED on RWD
5. context of “mobile” ≠ context of “desktop”
❖ doesn’t respect tipical usage based on context
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
60. Photo: Michael Mandiberg
progressive enhancement
DESKTOP USE CASE
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
61. Photo: S. Diddy
progressive enhancement
MOBILE USE CASE
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
62. progressive enhancement
ISSUES RAISED on RWD
5. context of “mobile” ≠ context of “desktop”
❖ 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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
63. RWD + progressive enhancement
So, silver bullet or fool’s gold?
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
64. 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
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
65. RWD + progressive enhancement
it’s a gREAT OPPORTUNITY not to miss
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
67. 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/)
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
69. a new approach
structured & prioritized
CONTENT
AND RELEVANT, POSSIBLY.
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
70. a new approach RELEVANT CONTENT
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
71. a new approach relevant CONTENT
t
elevan
O
r
NTE NT
C
WTF?!
“MOBILE” “DESKTOP”
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
72. a new approach relevant CONTENT
UX
+
performances
“MOBILE” “DESKTOP”
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
73. a new approach relevant CONTENT
UX
+
performances
“MOBILE” “DESKTOP”
8 number of requests 208
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
74. a new approach relevant CONTENT
UX
+
performances
“MOBILE” “DESKTOP”
8 number of requests 208
30,2KB total page size 1.28Mb
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
75. a new approach relevant CONTENT
UX
+
performances
“MOBILE” “DESKTOP”
8 number of requests 208
30,2KB total page size 1.28Mb
1.82 PAGE LOAD TIME (seconds) 7.95
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
76. a new approach relevant CONTENT
xkcd.com/773
lucaSALVINI SEP29th2011 BACKTOTHEFRONT
77. THANK YOU
@lucasalvini
lucaSALVINI SEP29th2011 BACKTOTHEFRONT