Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RESPONSIVE                 progressive
              design       &             enhancements
                             ...
THE WEB LANDSCAPE




lucaSALVINI           SEP29th2011   BACKTOTHEFRONT
THE WEB LANDSCAPE


              Viewport diversity                    INterface diversity
                      SIZE - D...
THE WEB LANDSCAPE
              Viewport diversity                     INterface diversity
                      SIZE - DP...
one web to rule them alL


lucaSALVINI             SEP29th2011   BACKTOTHEFRONT
a new approach
              before we start we need to unlearn something




lucaSALVINI                      SEP29th2011...
a new approach

      We have no canvas
      there’s no such thing as pixel perfect
      we know nothing*




          ...
a new approach


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

   ...
a new approach


                WE have to build AROUND
                  CONTENT


lucaSALVINI              SEP29th2011 ...
a new approach


                 structured   &    prioritized



               CONTENT
                  AND RELEVANT, ...
a new approach


                 structured   &    prioritized



               CONTENT
                  AND RELEVANT, ...
a new approach                                            structured CONTENT


              <article>
                <hg...
a new approach                                            structured CONTENT


              <article role=”article”>
    ...
a new approach                                            structured CONTENT


              <article role=”article” class...
a new approach


                 structured   &    prioritized



               CONTENT
                  AND RELEVANT, ...
a new approach                          prioritized CONTENT




              The foundation
              the order of in...
institute du monde arabe
Photo: Rory Hyde




lucaSALVINI                SEP29th2011   BACKTOTHEFRONT
institute du monde arabe
Photo: Rory Hyde




                    responsive architectures measure actual
                ...
institute du monde arabe
Photo: Rory Hyde




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

            ...
institute du monde arabe
Photo: Rory Hyde




                                              RWD
                          ...
institute du monde arabe
Photo: Rory Hyde




                                              RWD
                          ...
a new approach                              FLUID GRIDS




              REMEMBER OUR foundation layout?
              Ev...
a new approach                            FLUID GRIDS




                 REMEMBER OUR foundation layout?
               ...
responsive web design                                                              FLUID GRIDS


                 fixed WI...
institute du monde arabe
Photo: Rory Hyde



        responsive web design




                                           ...
responsive web design         FLEXIBLE IMAGES




                                     ?


lucaSALVINI            SEP29th2...
responsive web design                FLEXIBLE IMAGES

                   THE “SCALING” solution




                   img...
responsive web design                       FLEXIBLE IMAGES

                      THE “SCALING” solution




            ...
responsive web design               FLEXIBLE IMAGES

                   THE “HIDING” solution




lucaSALVINI             ...
institute du monde arabe
Photo: Rory Hyde



        responsive web design




                                           ...
responsive web design                   MEDIA QUERIES




                           media types


               @media s...
responsive web design                           MEDIA QUERIES




              media types + logics =media queries


    ...
responsive web design                                     MEDIA QUERIES


              media types + logics =media querie...
responsive web design                          MEDIA QUERIES

                 WHAT features can we detect?
              ...
responsive web design                          MEDIA QUERIES

                 WHAT features can we detect?
              ...
responsive web design                                                            MEDIA QUERIES

                          ...
responsive web design                                            MEDIA QUERIES




                               dissecti...
responsive web design                                             MEDIA QUERIES



                               dissecti...
responsive web design                                             MEDIA QUERIES


                               dissectio...
responsive web design                                   MEDIA QUERIES




                  BE CAREFUL, NOT negates the en...
responsive web design                                     MEDIA QUERIES



                  BE CAREFUL, NOT negates the e...
responsive web design                                       MEDIA QUERIES


                  BE CAREFUL, NOT negates the ...
responsive web design                                              MEDIA QUERIES



                                dissec...
responsive web design                                      MEDIA QUERIES

                                      THE VIEWPO...
responsive web design                                      MEDIA QUERIES

                                      THE VIEWPO...
responsive web design                                            MEDIA QUERIES

                                      THE ...
responsive web design                            MEDIA QUERIES




              THE ABSENCE of a media query
            ...
responsive web design                   MEDIA QUERIES




                    EVOLVE USING THE INCREaSING SPACE to
       ...
responsive web design              MEDIA QUERIES




                                     EVEN MORE SPACE
                ...
responsive web design              MEDIA QUERIES




                                     to infinity and beyond!




luca...
responsive web design                                 MEDIA QUERIES


              BREAKPOINTS BASED on cONTENT, not on d...
responsive web design
               silver bullet or fool’s gold?




lucaSALVINI                SEP29th2011         BACK...
responsive web design
              ISSUES RAISED on RWD
       1. one (image) size doesn’t fit all
           ❖ unnecessa...
Photo: Niall & Elizabeth Dawson




       progressive enhancement



              An escalator can never break;         ...
progressive enhancement


     big CSS IMAGES   big inline images   JS DRIVEN MAP                       selectivizr.js    ...
progressive enhancement
       ISSUES RAISED on RWD
       1. one (image) size does’t fit all
          ❖   unnecessary do...
progressive enhancement
       ISSUES RAISED on RWD
       2. non viewable assets are downloaded anyway (display: none is ...
progressive enhancement
       ISSUES RAISED on RWD
       3. media-queries will not remove unnecessary code

          ❖ ...
progressive enhancement
       ISSUES RAISED on RWD
       5. context of “mobile” ≠ context of “desktop”

          ❖   do...
Photo: Michael Mandiberg




       progressive enhancement




 DESKTOP USE CASE




lucaSALVINI           SEP29th2011   ...
Photo: S. Diddy




       progressive enhancement




      MOBILE USE CASE




lucaSALVINI             SEP29th2011   BAC...
progressive enhancement
       ISSUES RAISED on RWD
       5. context of “mobile” ≠ context of “desktop”

          ❖   do...
RWD + progressive enhancement
              So, silver bullet or fool’s gold?




lucaSALVINI                 SEP29th2011 ...
RWD + progressive enhancement


                                        Maybe people resize windows,
                     ...
RWD + progressive enhancement
              it’s a gREAT OPPORTUNITY not to miss




lucaSALVINI                  SEP29th2...
Apx




lucaSALVINI    SEP29th2011   BACKTOTHEFRONT
TESTING
                     DESKTOP
                     test on every possible browser you can install
                 ...
ONE MORE THING




lucaSALVINI        SEP29th2011   BACKTOTHEFRONT
a new approach


                 structured   &    prioritized



               CONTENT
                  AND RELEVANT, ...
a new approach                 RELEVANT CONTENT




lucaSALVINI             SEP29th2011                BACKTOTHEFRONT
a new approach                        relevant CONTENT




                                     t
                        ...
a new approach                      relevant CONTENT




                              UX
                               +...
a new approach                           relevant CONTENT




                              UX
                           ...
a new approach                           relevant CONTENT




                              UX
                           ...
a new approach                                relevant CONTENT




                              UX
                      ...
a new approach                 relevant CONTENT




                                      xkcd.com/773




lucaSALVINI    ...
THANK YOU

                 @lucasalvini




lucaSALVINI        SEP29th2011   BACKTOTHEFRONT
Upcoming SlideShare
Loading in …5
×

of

Responsive Design and Progressive Enhancements for the Web (workshop) Slide 1 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 2 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 3 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 4 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 5 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 6 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 7 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 8 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 9 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 10 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 11 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 12 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 13 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 14 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 15 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 16 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 17 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 18 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 19 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 20 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 21 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 22 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 23 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 24 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 25 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 26 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 27 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 28 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 29 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 30 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 31 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 32 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 33 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 34 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 35 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 36 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 37 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 38 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 39 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 40 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 41 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 42 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 43 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 44 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 45 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 46 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 47 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 48 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 49 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 50 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 51 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 52 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 53 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 54 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 55 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 56 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 57 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 58 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 59 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 60 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 61 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 62 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 63 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 64 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 65 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 66 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 67 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 68 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 69 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 70 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 71 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 72 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 73 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 74 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 75 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 76 Responsive Design and Progressive Enhancements for the Web (workshop) Slide 77
Upcoming SlideShare
Design Responsivo - MobCamp 2014
Next
Download to read offline and view in fullscreen.

38 Likes

Share

Download to read offline

Responsive Design and Progressive Enhancements for the Web (workshop)

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Responsive Design and Progressive Enhancements for the Web (workshop)

  1. 1. RESPONSIVE progressive design & enhancements f   lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  2. 2. THE WEB LANDSCAPE lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  3. 3. THE WEB LANDSCAPE Viewport diversity INterface diversity SIZE - DPI Keyboard - mouse - touch SPECS diversity CONNECtivity diversity processor - memory mobile - adsl - broadband lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  4. 4. THE WEB LANDSCAPE Viewport diversity INterface diversity SIZE - DPI mouse - touch - keyboard SPECS diversity processor - memory ? CONNECtivity diversity mobile - adsl - broadband lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  5. 5. one web to rule them alL lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  6. 6. a new approach before we start we need to unlearn something lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  7. 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. 8. a new approach SO, what’s our starting point if we have no canvas? CONTENT lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  9. 9. a new approach WE have to build AROUND CONTENT lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  10. 10. a new approach structured & prioritized CONTENT AND RELEVANT, POSSIBLY. lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  11. 11. a new approach structured & prioritized CONTENT AND RELEVANT, possibly. lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  12. 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. 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. 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. 15. a new approach structured & prioritized CONTENT AND RELEVANT, possibly. lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  16. 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. 17. institute du monde arabe Photo: Rory Hyde lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  18. 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. 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. 20. institute du monde arabe Photo: Rory Hyde RWD FLUID GRIDS Flexible images media queries lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  21. 21. institute du monde arabe Photo: Rory Hyde RWD FLUID GRIDS Flexible images media queries lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  22. 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. 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. 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. 25. institute du monde arabe Photo: Rory Hyde responsive web design RWD FLUID GRIDS Flexible images media queries lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  26. 26. responsive web design FLEXIBLE IMAGES ? lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  27. 27. responsive web design FLEXIBLE IMAGES THE “SCALING” solution img { max-width:100%; } lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  28. 28. responsive web design FLEXIBLE IMAGES THE “SCALING” solution img { <!--[if lte IE 6]> } width:100%; + imgSizer.js lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  29. 29. responsive web design FLEXIBLE IMAGES THE “HIDING” solution lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  30. 30. institute du monde arabe Photo: Rory Hyde responsive web design RWD FLUID GRIDS Flexible images media queries lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  31. 31. responsive web design MEDIA QUERIES media types @media screen {...} @media print {...} @media handheld {...} lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  32. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 48. responsive web design MEDIA QUERIES EVOLVE USING THE INCREaSING SPACE to rearrange content flow. lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  49. 49. responsive web design MEDIA QUERIES EVEN MORE SPACE makes room for LARGER images and deeper asides lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  50. 50. responsive web design MEDIA QUERIES to infinity and beyond! lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  51. 51. responsive web design MEDIA QUERIES BREAKPOINTS BASED on cONTENT, not on devices embrace CASCADING, define only WHAT CHANGES lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  52. 52. responsive web design silver bullet or fool’s gold? lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  53. 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. 54. Photo: Niall & Elizabeth Dawson progressive enhancement An escalator can never break; Mitch hedberg it can only become stairs. lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  55. 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. 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. 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. 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. 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. 60. Photo: Michael Mandiberg progressive enhancement DESKTOP USE CASE lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  61. 61. Photo: S. Diddy progressive enhancement MOBILE USE CASE lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  62. 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. 63. RWD + progressive enhancement So, silver bullet or fool’s gold? lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  64. 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. 65. RWD + progressive enhancement it’s a gREAT OPPORTUNITY not to miss lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  66. 66. Apx lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  67. 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
  68. 68. ONE MORE THING lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  69. 69. a new approach structured & prioritized CONTENT AND RELEVANT, POSSIBLY. lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  70. 70. a new approach RELEVANT CONTENT lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  71. 71. a new approach relevant CONTENT t elevan O r NTE NT C WTF?! “MOBILE” “DESKTOP” lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  72. 72. a new approach relevant CONTENT UX + performances “MOBILE” “DESKTOP” lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  73. 73. a new approach relevant CONTENT UX + performances “MOBILE” “DESKTOP” 8 number of requests 208 lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  74. 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. 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. 76. a new approach relevant CONTENT xkcd.com/773 lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  77. 77. THANK YOU @lucasalvini lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  • AkiraAvinash

    Sep. 2, 2015
  • annataws

    Jan. 15, 2014
  • RachelNicotina

    Jul. 28, 2013
  • SunheeKim1

    Apr. 29, 2013
  • luisfelipe0910

    Apr. 6, 2013
  • pigtwo

    Apr. 1, 2013
  • electrovio

    Mar. 22, 2013
  • scottmullins

    Feb. 17, 2013
  • kennybchow

    Feb. 9, 2013
  • AntonioLaScala

    Sep. 17, 2012
  • jonbusby1

    Sep. 4, 2012
  • leolohmann

    Sep. 3, 2012
  • porametb

    Aug. 7, 2012
  • lenyaking

    Jul. 18, 2012
  • TeroTielinen

    Jun. 14, 2012
  • aarifnazir

    Apr. 24, 2012
  • Copyman

    Apr. 19, 2012
  • xalee

    Mar. 21, 2012
  • jessicafrater

    Feb. 27, 2012
  • horacio.soares

    Feb. 16, 2012

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

Views

Total views

13,805

On Slideshare

0

From embeds

0

Number of embeds

253

Actions

Downloads

331

Shares

0

Comments

0

Likes

38

×