Responsive Design and Progressive Enhancements for the Web (workshop)

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

THE WEB LANDSCAPElucaSALVINI SEP29th2011 BACKTOTHEFRONT

THE WEB LANDSCAPE Viewport diversity INterface diversity SIZE - DPI Keyboard - mouse - touch SPECS diversity CONNECtivity diversity processor - memory mobile - adsl - broadbandlucaSALVINI SEP29th2011 BACKTOTHEFRONT

THE WEB LANDSCAPE Viewport diversity INterface diversity SIZE - DPI mouse - touch - keyboard SPECS diversity processor - memory ? CONNECtivity diversity mobile - adsl - broadbandlucaSALVINI SEP29th2011 BACKTOTHEFRONT

one web to rule them alLlucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach before we start we need to unlearn somethinglucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach We have no canvas there’s no such thing as pixel perfect we know nothing* *assumption is the mother of all fuckupslucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach SO, what’s our starting point if we have no canvas? CONTENTlucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach WE have to build AROUND CONTENTlucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach structured & prioritized CONTENT AND RELEVANT, POSSIBLY.lucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach structured & prioritized CONTENT AND RELEVANT, possibly.lucaSALVINI SEP29th2011 BACKTOTHEFRONT

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 HTMLlucaSALVINI SEP29th2011 BACKTOTHEFRONT

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 ROLESlucaSALVINI SEP29th2011 BACKTOTHEFRONT

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 ROLESlucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach structured & prioritized CONTENT AND RELEVANT, possibly.lucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach prioritized CONTENT The foundation the order of information is the simplest possible layout Ok, but what next?lucaSALVINI SEP29th2011 BACKTOTHEFRONT

institute du monde arabePhoto: Rory HydelucaSALVINI SEP29th2011 BACKTOTHEFRONT

institute du monde arabePhoto: Rory Hyde responsive architectures measure actual environmental conditions to enable buildings to adapt their form, shape, color or character responsively.lucaSALVINI SEP29th2011 BACKTOTHEFRONT

institute du monde arabePhoto: Rory Hyde “Fluid grids, flexible images, and media queries are the RWD FLUID GRIDS Flexible three technical ingredients for responsive web design” ETHAN MARCOTTElucaSALVINI SEP29th2011 BACKTOTHEFRONT

institute du monde arabePhoto: Rory Hyde RWD FLUID GRIDS Flexible images media querieslucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach FLUID GRIDS REMEMBER OUR foundation layout? Every module of information can be moved and resized as neededlucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach FLUID GRIDS REMEMBER OUR foundation layout? Every module of information can be moved and resized as needed The GRID IS our guidelucaSALVINI SEP29th2011 BACKTOTHEFRONT

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

institute du monde arabePhoto: Rory Hyde responsive web design RWD FLUID GRIDS Flexible images media querieslucaSALVINI SEP29th2011 BACKTOTHEFRONT

responsive web design FLEXIBLE IMAGES ?lucaSALVINI SEP29th2011 BACKTOTHEFRONT

responsive web design FLEXIBLE IMAGES THE “SCALING” solution img { max-width:100%; }lucaSALVINI SEP29th2011 BACKTOTHEFRONT

responsive web design FLEXIBLE IMAGES THE “SCALING” solution img { <!--[if lte IE 6]> } width:100%; + imgSizer.jslucaSALVINI SEP29th2011 BACKTOTHEFRONT

responsive web design FLEXIBLE IMAGES THE “HIDING” solutionlucaSALVINI SEP29th2011 BACKTOTHEFRONT

institute du monde arabePhoto: Rory Hyde responsive web design RWD FLUID GRIDS Flexible images media querieslucaSALVINI SEP29th2011 BACKTOTHEFRONT

responsive web design MEDIA QUERIES media types @media screen {...} @media print {...} @media handheld {...}lucaSALVINI SEP29th2011 BACKTOTHEFRONT

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

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

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 GRIDlucaSALVINI SEP29th2011 BACKTOTHEFRONT

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 GRIDlucaSALVINI SEP29th2011 BACKTOTHEFRONT

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

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

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

responsive web design MEDIA QUERIES BE CAREFUL, NOT negates the entire media querY @media not screen and (min-width: 500px) {...}lucaSALVINI SEP29th2011 BACKTOTHEFRONT

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) {...} XlucaSALVINI SEP29th2011 BACKTOTHEFRONT

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

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 styleslucaSALVINI SEP29th2011 BACKTOTHEFRONT

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

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

responsive web design MEDIA QUERIES THE ABSENCE of a media query is in fact, the first media query Bryan Rieger, Rethinking the Mobile WeblucaSALVINI SEP29th2011 BACKTOTHEFRONT

responsive web design MEDIA QUERIES EVOLVE USING THE INCREaSING SPACE to rearrange content flow.lucaSALVINI SEP29th2011 BACKTOTHEFRONT

responsive web design MEDIA QUERIES EVEN MORE SPACE makes room for LARGER images and deeper asideslucaSALVINI SEP29th2011 BACKTOTHEFRONT

responsive web design MEDIA QUERIES to infinity and beyond!lucaSALVINI SEP29th2011 BACKTOTHEFRONT

responsive web design MEDIA QUERIES BREAKPOINTS BASED on cONTENT, not on devices embrace CASCADING, define only WHAT CHANGESlucaSALVINI SEP29th2011 BACKTOTHEFRONT

responsive web design silver bullet or fool’s gold?lucaSALVINI SEP29th2011 BACKTOTHEFRONT

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 patternslucaSALVINI SEP29th2011 BACKTOTHEFRONT

Photo: Niall & Elizabeth Dawson progressive enhancement An escalator can never break; Mitch hedberg it can only become stairs.lucaSALVINI SEP29th2011 BACKTOTHEFRONT

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 availablelucaSALVINI SEP29th2011 BACKTOTHEFRONT

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

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

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 csslucaSALVINI SEP29th2011 BACKTOTHEFRONT

progressive enhancement ISSUES RAISED on RWD 5. context of “mobile” ≠ context of “desktop” ❖ doesn’t respect tipical usage based on contextlucaSALVINI SEP29th2011 BACKTOTHEFRONT

Photo: Michael Mandiberg progressive enhancement DESKTOP USE CASElucaSALVINI SEP29th2011 BACKTOTHEFRONT

Photo: S. Diddy progressive enhancement MOBILE USE CASElucaSALVINI SEP29th2011 BACKTOTHEFRONT

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 proximitylucaSALVINI SEP29th2011 BACKTOTHEFRONT

RWD + progressive enhancement So, silver bullet or fool’s gold?lucaSALVINI SEP29th2011 BACKTOTHEFRONT

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 CalhounlucaSALVINI SEP29th2011 BACKTOTHEFRONT

RWD + progressive enhancement it’s a gREAT OPPORTUNITY not to misslucaSALVINI SEP29th2011 BACKTOTHEFRONT

ApxlucaSALVINI SEP29th2011 BACKTOTHEFRONT

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

ONE MORE THINGlucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach structured & prioritized CONTENT AND RELEVANT, POSSIBLY.lucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach RELEVANT CONTENTlucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach relevant CONTENT t elevan O r NTE NT C WTF?! “MOBILE” “DESKTOP”lucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach relevant CONTENT UX + performances “MOBILE” “DESKTOP”lucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach relevant CONTENT UX + performances “MOBILE” “DESKTOP” 8 number of requests 208lucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach relevant CONTENT UX + performances “MOBILE” “DESKTOP” 8 number of requests 208 30,2KB total page size 1.28MblucaSALVINI SEP29th2011 BACKTOTHEFRONT

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.95lucaSALVINI SEP29th2011 BACKTOTHEFRONT

a new approach relevant CONTENT xkcd.com/773lucaSALVINI SEP29th2011 BACKTOTHEFRONT

THANK YOU @lucasalvinilucaSALVINI SEP29th2011 BACKTOTHEFRONT

http://a0.twimg.com	34
http://a0.twimg.com	34
http://www.linkedin.com	27
http://monicams.com	26
http://paper.li	17
http://blog.monicams.com	7
http://us-w1.rockmelt.com	4
http://trunk.ly	2

Responsive Design and Progressive Enhancements for the Web (workshop)

by Luca Salvini on Oct 02, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 151

Statistics

Responsive Design and Progressive Enhancements for the Web (workshop) — Presentation Transcript