SlideShare a Scribd company logo
1 of 77
Download to read offline
RESPONSIVE                 progressive
              design       &             enhancements
                                                f  




lucaSALVINI                SEP29th2011                   BACKTOTHEFRONT
THE WEB LANDSCAPE




lucaSALVINI           SEP29th2011   BACKTOTHEFRONT
THE WEB LANDSCAPE


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




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




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




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




lucaSALVINI                           SEP29th2011                                   BACKTOTHEFRONT
one web to rule them alL


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




lucaSALVINI                      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 fuckups
lucaSALVINI                       SEP29th2011               BACKTOTHEFRONT
a new approach


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

                           CONTENT

lucaSALVINI                       SEP29th2011                   BACKTOTHEFRONT
a new approach


                WE have to build AROUND
                  CONTENT


lucaSALVINI              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 HTML

lucaSALVINI                                   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 ROLES

lucaSALVINI                                   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 ROLES

lucaSALVINI                                   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 arabe
Photo: Rory Hyde




lucaSALVINI                SEP29th2011   BACKTOTHEFRONT
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
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
institute du monde arabe
Photo: Rory Hyde




                                              RWD
                                FLUID GRIDS
                           Flexible images
                             media queries




lucaSALVINI                              SEP29th2011   BACKTOTHEFRONT
institute du monde arabe
Photo: Rory Hyde




                                              RWD
                                FLUID GRIDS
                           Flexible images
                             media queries




lucaSALVINI                              SEP29th2011   BACKTOTHEFRONT
a new approach                              FLUID GRIDS




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




lucaSALVINI                   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 guide




lucaSALVINI               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 arabe
Photo: Rory Hyde



        responsive web design




                                              RWD
                                FLUID GRIDS
                           Flexible images
                             media queries




lucaSALVINI                              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.js



lucaSALVINI                   SEP29th2011                      BACKTOTHEFRONT
responsive web design               FLEXIBLE IMAGES

                   THE “HIDING” solution




lucaSALVINI               SEP29th2011                  BACKTOTHEFRONT
institute du monde arabe
Photo: Rory Hyde



        responsive web design




                                              RWD
                                FLUID GRIDS
                           Flexible images
                             media queries




lucaSALVINI                              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
                                   GRID

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
                                   GRID

lucaSALVINI                       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
                          GRID

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




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) {...}
                                                                        X


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) {...}
                                                                          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 styles




lucaSALVINI                                 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




              @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 Web




lucaSALVINI                               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 asides




lucaSALVINI            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 CHANGES

lucaSALVINI                            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 patterns




lucaSALVINI                                       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 available




lucaSALVINI                                                   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 css




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

          ❖   doesn’t respect tipical usage based on context




lucaSALVINI                                         SEP29th2011   BACKTOTHEFRONT
Photo: Michael Mandiberg




       progressive enhancement




 DESKTOP USE CASE




lucaSALVINI           SEP29th2011      BACKTOTHEFRONT
Photo: S. Diddy




       progressive enhancement




      MOBILE USE CASE




lucaSALVINI             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 proximity




lucaSALVINI                                          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 Calhoun




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




lucaSALVINI                  SEP29th2011             BACKTOTHEFRONT
Apx




lucaSALVINI    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 THING




lucaSALVINI        SEP29th2011   BACKTOTHEFRONT
a new approach


                 structured   &    prioritized



               CONTENT
                  AND RELEVANT, POSSIBLY.




lucaSALVINI               SEP29th2011            BACKTOTHEFRONT
a new approach                 RELEVANT CONTENT




lucaSALVINI             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      208

lucaSALVINI                    SEP29th2011                   BACKTOTHEFRONT
a new approach                           relevant CONTENT




                              UX
                               +
                         performances


              “MOBILE”                         “DESKTOP”
                  8       number of requests       208
               30,2KB       total page size      1.28Mb

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

lucaSALVINI                     SEP29th2011                       BACKTOTHEFRONT
a new approach                 relevant CONTENT




                                      xkcd.com/773




lucaSALVINI             SEP29th2011                  BACKTOTHEFRONT
THANK YOU

                 @lucasalvini




lucaSALVINI        SEP29th2011   BACKTOTHEFRONT

More Related Content

Recently uploaded

Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidiLivengood
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designKhushiGandhi15
 
spColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdfspColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdfChan Thorn
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfJon Freach
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Cloud99 Cloud
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Projectbuvanatest
 
And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)☕ 🥧 🚲 Martin Gude
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationJaime Brown
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headersekinlvnt
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosDuyDo100
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理cyebo
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationajroy0196
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Remy Rey De Barros
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfjeffreycarroll14
 
The Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to CatwalkThe Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to CatwalkWave PLM
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..GB Logo Design
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...JIT KUMAR GUPTA
 
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfCADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfDuyDo100
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...Amil baba
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxDoraemon495609
 

Recently uploaded (20)

Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
spColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdfspColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdf
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
The Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to CatwalkThe Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to Catwalk
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdfCADD 141 - BIRD Scooter - Cup Holder Photos.pdf
CADD 141 - BIRD Scooter - Cup Holder Photos.pdf
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Responsive Design and Progressive Enhancements for the Web (workshop)

  • 1. RESPONSIVE progressive design & enhancements f   lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  • 2. THE WEB LANDSCAPE lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  • 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. 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. 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
  • 26. responsive web design FLEXIBLE IMAGES ? lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  • 27. responsive web design FLEXIBLE IMAGES THE “SCALING” solution img { max-width:100%; } lucaSALVINI SEP29th2011 BACKTOTHEFRONT
  • 28. responsive web design FLEXIBLE IMAGES THE “SCALING” solution img { <!--[if lte IE 6]> } width:100%; + imgSizer.js 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
  • 66. Apx 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
  • 68. ONE MORE THING 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