SlideShare une entreprise Scribd logo
1  sur  51
MEDIA QUERIES
 Mobile Elixir or CSS Snake Oil?
      james williamson | lynda.com
Howdy y’all
  james williamson

                   | senior author


     man-about-town

   @jameswillweb on the Twitter
Let’s Take Your Temperature...
Global mobile internet usage | 2003
Global mobile internet usage | 2011
Why do designers fear the mobile web?




        Because we’ve only just now
            gotten this to work
...and now we have to deal with this




             (images not to scale)
Past options for developing for the mobile web

          Build a separate mobile site.


          Hire a developer to build an app for you.



          Pray.
Surely there must be another option


                      CSS
               MEDIA
               QUERIES
               R
                Reflows content automatically, with no
               cramping or bloating. Works overnight, a
                  soothing balm for your mobile ills




        Good for what ails you?
So, what’s a media query?

CSS Media Queries give us a way to
 control the application of styles
based on the presence or absence
    of specific media features
The concept isn’t exactly new...


link	
  rel="stylesheet"	
  href="desktop.css"	
  media="screen"


                                                    look familiar?
However, we can now apply a little logic...


      link	
  rel="stylesheet"	
  href="desktop.css"	
  
      media="screen	
  and	
  (min-­‐width:500px)"


                                       that narrows it down a bit.
Media Query syntax
  Media Queries are logical expressions, they are either
“true” or “false” depending upon how they are evaluated. If
   true, the styles are applied, if false, they are ignored.




       link	
  rel="stylesheet"	
  href="desktop.css"	
  
       media="screen	
  and	
  (min-­‐width:500px)"


  In this example, the styles would only be applied if the UA supported the
           screen media type, and the display was at least 500px
Media Query syntax

    link	
  rel="stylesheet"	
  href="desktop.css"	
  
media="[not	
  |	
  only	
  ]	
  screen	
  [and]	
  (expression)"




            The keywords “not”, “only”, and “and” can be
           used to filter results, while expressions can be
             used to check for specific media features
Media Query syntax
  Logical operator “and” constrains a query based on the
expression that follows it. There is no “or” operator, normal
               comma-separated lists serve as “or.”


       link	
  rel="stylesheet"	
  href="desktop.css"	
  
       media="screen	
  and	
  (min-­‐width:500px)"

 Styles are applied for screen devices that have a width of 500px or greater




   link	
  rel="stylesheet"	
  href="desktop.css"	
  
   media="screen	
  and	
  (min-­‐width:500px),	
  projection	
  and	
  (color)"



          Styles are applied for screen devices that have a width of
                 500px or greater, or color projection devices
Media Query syntax
Logical operator “not” negates the results of the media query
and applies the styles if the conditions are NOT met. It negates
   the entire expression, not just media type. Use carefully.




       link	
  rel="stylesheet"	
  href="desktop.css"	
  
       media="not	
  screen	
  and	
  (min-­‐width:500px)"



      Styles are applied if the device is not a screen device with a width
       above 499px. This also means that styles WOULD be applied for
       screen devices with widths below 500px and other media types.
Media Query syntax
Logical operator “only” serves to hide style sheets from
older or non-conforming user agents. Conforming user
          agents are instructed to ignore “only.”




    link	
  rel="stylesheet"	
  href="desktop.css"	
  
    media="only	
  screen	
  and	
  (min-­‐width:500px)"



 Would be ignored by non-conforming agents. Other user agents would
    apply the styles to screen devices with widths 500px and above.
Media Query syntax

Media Features
width                     color
height                    color-­‐index
device-­‐width            monochrome
device-­‐height           resolution
orientation               scan
aspect-­‐ratio            grid
device-­‐aspect-­‐ratio
Media Query syntax

Media Feature values

length     width:500px


keyword    orientation:	
  landscape	
  |	
  portrait

ratio      aspect-­‐ratio:	
  16/9

integer    color:8
Media Query syntax

Media Feature prefixes

In many cases, you can use the “min-” and “max-”
prefixes to set less-than or greater-than ranges
for your values


                   width
                   min-­‐width
                   max-­‐width
Media Query syntax

Be careful!

         width	
  !=	
  device-­‐width


   (Honestly, even device-width != device width, or as
           PPK said, “a pixel is not a pixel*”)




           *http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Enough syntax!
Let’s see it in action!




   Visit mediaqueri.es for a gallery of sites using media queries
Oh snap! That changes everything!

Except that it doesn’t.

We still need to talk about how media queries
work in the real world.
“Media queries are fools gold...”
                                           - Jason Grigsby*

So what’s his beef?


    Support for media queries isn’t that good




           *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
“Media queries are fools gold...”
                                           - Jason Grigsby*

So what’s his beef?


   Having browsers scale images is a bad idea




           *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
“Media queries are fools gold...”
                                          - Jason Grigsby*

So what’s his beef?


      Unnecessary resource downloading




          *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
“Media queries are fools gold...”
                                          - Jason Grigsby*

So what’s his beef?


    Hiding elements doesn’t lower overhead




          *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
“Media queries are fools gold...”
                                          - Jason Grigsby*

So what’s his beef?


    Media queries ignore the mobile context




          *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
Browser Support
Browser                     Layout Engine           MQ support
Firefox                     Gecko                      3.6+
Google	
  Chrome            WebKit                     10+
Safari                      WebKit                     3.2+
Opera                       Presto                     11+
Internet	
  Explorer        Trident                    9+
iOS	
  Safari               WebKit                     3.2
Opera	
  Mini               Presto                     5.0
Opera	
  Mobile             Presto                     10.0
Android	
  Browser	
        Android	
  WebKit	
        2.1
Nokia                       multiple                   s40
Blackberry	
  Browser       Mango/WebKit               4.7.1
Samsung                     Android	
  WebKit          ???
OpenWave                    ???
UC	
  Web                   proprietary
NetFront                    NetFront
Palm                        WebKit                     WebOS	
  1.4
Another big problem...it doesn’t just...work
  For mobile, media queries are typically used to check for screen
      size. They do not perform browser or device sniffing. The
   multitude of different screen sizes, resolutions, pixel densities,
    and default scaling preferences can cause serious problems
             with how media query-driven sites display.
Oh...so....I guess we can go now right?
                                     dang.




Not so fast. Media queries CAN work, and can be an important
part of your mobile development strategy... you just have to use
   them correctly, and combine them with other techniques
Let’s talk strategy




                Mobile First*
Popularized by Luke Wroblewski, it emphasizes
starting the design process with mobile in mind.



                            *http://www.lukew.com/presos/preso.asp?26
Mobile first media queries
In terms of media queries, mobile first means starting
with your mobile styles, and then enhancing designs
      for other screen sizes including desktop.
Now, about media query support...
             Respond.js from the Filament Group
                  https://github.com/scottjehl/Respond
                  (gzipped version is 1kb)



             css3-mediaqueries-js by Wouter van der Graaf
                  http://code.google.com/p/css3-mediaqueries-js/
                  (15kb uncompressed)



A mobile-first strategy makes using these libraries critical.
Now, let’s tame the viewport!


            CSS
     MEDIA
     QUERIES
                                                +   VIEWPORT
     R
      Reflows content automatically, with no
     cramping or bloating. Works overnight, a
        soothing balm for your mobile ills
                                                    Controls scaling and resolution with no
                                                      bloating, dizzyness, or unpleasant
                                                      aftertaste. A true joy for the home.




   = feel better by morning!
Meta Viewport tags

Meta viewport tags can be combined with media
queries to help ensure consistent experiences.



  <meta	
  name="viewport"	
  content="width=device-­‐width,	
  
  initial-­‐scale=1.0">


                                   what’s this all about then?
So what can meta viewport tags do?

    Meta Viewport properties

     width	
  =	
  [pixel	
  |	
  device-­‐width	
  ]
     height	
  =	
  [pixel	
  |	
  device-­‐height	
  ]



You can set width and height to explicit pixel values, or set
them to device width and height, which instruct the device
   to set the viewport width to the device screen width
So what can meta viewport tags do?

   Meta Viewport properties

    initial-­‐scale	
  =	
  0*	
  -­‐	
  10
    minimum-­‐scale	
  =	
  0*	
  -­‐	
  10
    maximum-­‐scale	
  =	
  0*	
  -­‐	
  10


These values allow you to control the initial scaling of the
page (to control whether your page is initially zoomed out
or not), and the minimum and maximum scaling allowed.


                                              * Android minimum is 0.01
So what can meta viewport tags do?

   Meta Viewport properties

    user-­‐scalable	
  =	
  [	
  yes	
  |	
  no	
  ]



Controls whether or not the user can change the scale of
  the page. If the value is set to no, any previously set
  minimum and maximum scaling values are ignored.
So what can meta viewport tags do?

     Meta Viewport properties

       target-­‐densitydpi	
  =	
  [	
  dpi_value	
  |	
  device-­‐dpi	
  
       |	
  high-­‐dpi	
  |	
  medium-­‐dpi	
  |	
  low-­‐dpi	
  ]	
  ]



Android Only: Allows you to target screen resolution. You can target a dpi
value (70 - 400), the device dpi (prevents default scaling), or you can target
one of three Android screen density categories. Content will then scale up
 or down if the resolution doesn’t match the target density. Essentially, it
     allows you to control how CSS pixels are scaled to device pixels.


     *For WebKit, you can use (-webkit-min-device-pixel-ratio: 2) to target higher density displays
Let’s look at that again...

    <meta	
  name="viewport"	
  content="width=device-­‐width,	
  
    initial-­‐scale=1.0">



This syntax tells the device to set the viewport width to the
actual device width to ensure the proper media query styles
      are used, and set the initial page scale to 100%.


  Never use media queries without a meta viewport tag.
                              Ever.
What about resource loading?

             OMG. I cannot believe
               I just ate all that!
The truth about media query loading...
      <link	
  rel="stylesheet"	
  href="desktop.css"	
  media="screen,	
  
      projection">


      <link	
  rel="stylesheet"	
  href="tablet.css"	
  media="all	
  and	
  
      (min-­‐width:	
  481px)	
  and	
  (max-­‐width:	
  768px)">


      <link	
  rel="stylesheet"	
  href="mobile.css"	
  media="all	
  and	
  
      (min-­‐width:	
  0px)	
  and	
  (max-­‐width:	
  480px)">




   This is very inefficient. All three CSS files will load,
regardless of which media styles are loaded. This creates
    additional HTTP requests with no added savings.
    Combine these files using inline @media syntax.
The truth about media query loading...
      #actionCall	
  {
      	
   display:	
  none;
      }




  This doesn’t help you either. If a widget or image is
present in the element, it is still downloaded, regardless
                   of the display property.
The truth about media query loading...
     @media	
  //mobile	
  {
     #actionCall	
  {
     	
   background:	
  none;
     	
  	
  }
     }
     @media	
  //desktop	
  {
     #actionCall	
  {
     	
   background:	
  url(big_ole_image.jpg);
     	
  	
  }
     }


   This is better. If the mobile property is set to no
background image, iOS does not download the desktop
 version. Sadly it seems that Android currently does.
How can we control resource loading?


     Modernizr 2 features both media query tests AND the
YepNope.js library. This allows you to combine feature detection,
    media query success, and conditional resource loading.



                          <BOOM>
                    http://www.modernizr.com/
How can we control resource loading?
Of course, if you prefer, you can roll your own. PPK reports in his
   own testing, document.documentElement.clientWidth and
  screen.width give the same results as the width and device-
      width media queries*. This means you could do this:


        if	
  (screen.width	
  >=	
  600)	
  {
        	
   //	
  load	
  resources
        }

        or
        if	
  (document.documentElement.clientWidth	
  >=	
  
        600)	
  {
        	
   //	
  load	
  resources
        }



                  *http://www.quirksmode.org/blog/archives/2010/08/combining_media.html
Media Query best practices
Design with mobile in mind first

Make the mobile styles your default styles and progress up

Use fluid layouts to deal with minor screen size differences

Combine CSS & JS files to reduce HTTP requests

Minimize and gzip compress your code

Use Data URL and CSS Sprites when you can

Don’t use external libraries unless you really need to

Consider using touch frameworks for interactivity
Looks like gold to me!



                       CSS
                MEDIA
                QUERIES
                R
                 Reflows content automatically, with no
                cramping or bloating. Works overnight, a
                   soothing balm for your mobile ills




(That? Oh, that’s just the halo of truth...)
So...where does that leave us?
Just like every other technique in your toolbox, media
queries simply add to your capabilities.


Are they right for every project? Of course not. Mobile
design is far more than simply designing for a smaller
screen.


However, given the right circumstances, media queries
allow you to optimize designs for the mobile environment
in a way that we weren’t able to do before.


Deciding when, and if, to use them is, after all, your job.
THANK YOU
james williamson | lynda.com
   jwilliamson@lynda.com
@jameswillweb on the Twitter
  www.simpleprimate.com

Contenu connexe

Tendances

Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipallanchao
 
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native codeJoakim Kemeny
 
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5Nathaniel Bagnell
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?yiibu
 
Mobile UI Design Patterns
Mobile UI Design PatternsMobile UI Design Patterns
Mobile UI Design Patternsdanhermes
 
Responsive Design: Let's get Responsive!
Responsive Design: Let's get Responsive!Responsive Design: Let's get Responsive!
Responsive Design: Let's get Responsive!Courtney Jordan
 
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetUsing Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetJoseph Labrecque
 
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Andreas Bovens
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical webyiibu
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCritical Mass
 
Product Based Virtual Worlds For College Recruiting
Product Based Virtual Worlds For College RecruitingProduct Based Virtual Worlds For College Recruiting
Product Based Virtual Worlds For College RecruitingAndrew Hughes
 
Web Design Trends For 2016
Web Design Trends For 2016Web Design Trends For 2016
Web Design Trends For 2016Pixel Crayons
 
Google Developer Day: State of Ajax
Google Developer Day: State of AjaxGoogle Developer Day: State of Ajax
Google Developer Day: State of Ajaxdion
 
Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Theresa Neil
 
Adaptive Designs Across Devices [UXIM 2015]
Adaptive Designs Across Devices [UXIM 2015]Adaptive Designs Across Devices [UXIM 2015]
Adaptive Designs Across Devices [UXIM 2015]Aaron Gustafson
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practicesmintersam
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trendsCool Sky
 

Tendances (19)

Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
 
Creating mobile apps without native code
Creating mobile apps without native codeCreating mobile apps without native code
Creating mobile apps without native code
 
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
Toronto HTML5 User Group Meet Up #2 – Application Development with HTML 5
 
The future of media queries?
The future of media queries?The future of media queries?
The future of media queries?
 
Mobile UI Design Patterns
Mobile UI Design PatternsMobile UI Design Patterns
Mobile UI Design Patterns
 
Responsive Design: Let's get Responsive!
Responsive Design: Let's get Responsive!Responsive Design: Let's get Responsive!
Responsive Design: Let's get Responsive!
 
Using Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component SetUsing Edge Animate to Create a Reusable Component Set
Using Edge Animate to Create a Reusable Component Set
 
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical web
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learn
 
Product Based Virtual Worlds For College Recruiting
Product Based Virtual Worlds For College RecruitingProduct Based Virtual Worlds For College Recruiting
Product Based Virtual Worlds For College Recruiting
 
Web Design Trends For 2016
Web Design Trends For 2016Web Design Trends For 2016
Web Design Trends For 2016
 
Google Developer Day: State of Ajax
Google Developer Day: State of AjaxGoogle Developer Day: State of Ajax
Google Developer Day: State of Ajax
 
Explaining Ajax
Explaining AjaxExplaining Ajax
Explaining Ajax
 
Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5
 
Accessible Responsive Web Design
Accessible Responsive Web DesignAccessible Responsive Web Design
Accessible Responsive Web Design
 
Adaptive Designs Across Devices [UXIM 2015]
Adaptive Designs Across Devices [UXIM 2015]Adaptive Designs Across Devices [UXIM 2015]
Adaptive Designs Across Devices [UXIM 2015]
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trends
 

En vedette

Neuro Web Design: What makes them click
Neuro Web Design: What makes them clickNeuro Web Design: What makes them click
Neuro Web Design: What makes them clickSusan Weinschenk
 
Designing for a Better User Experience
Designing for a Better User ExperienceDesigning for a Better User Experience
Designing for a Better User ExperienceBuiltByHQ
 
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Jasmine Vesque
 
Wireframes for WordPress
Wireframes for WordPressWireframes for WordPress
Wireframes for WordPressJohn Housholder
 
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingThe Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingGuy Kawasaki
 
An introduction to Usability
An introduction to UsabilityAn introduction to Usability
An introduction to UsabilityErlend Debast
 

En vedette (7)

Neuro Web Design: What makes them click
Neuro Web Design: What makes them clickNeuro Web Design: What makes them click
Neuro Web Design: What makes them click
 
Designing for a Better User Experience
Designing for a Better User ExperienceDesigning for a Better User Experience
Designing for a Better User Experience
 
Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)Typography in Web Design (WordCamp Toronto 2014)
Typography in Web Design (WordCamp Toronto 2014)
 
Wireframes for WordPress
Wireframes for WordPressWireframes for WordPress
Wireframes for WordPress
 
The Ultimate Guide to Font Pairing
The Ultimate Guide to Font PairingThe Ultimate Guide to Font Pairing
The Ultimate Guide to Font Pairing
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
An introduction to Usability
An introduction to UsabilityAn introduction to Usability
An introduction to Usability
 

Similaire à CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJason Harwig
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Kevin Bruce
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignZoe Gillenwater
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devicesjameswillweb
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJulia Vi
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Frédéric Harper
 
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Tom Hermans
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인Daum DNA
 
Responsive web design
Responsive web designResponsive web design
Responsive web designZeeshan Khan
 
Mobile and Responsive Design with Sass
Mobile and Responsive Design with SassMobile and Responsive Design with Sass
Mobile and Responsive Design with Sassnyccamp
 
Responsive design and retina displays
Responsive design and retina displaysResponsive design and retina displays
Responsive design and retina displaysEli McMakin
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. ToolboxWojtek Zając
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignChris Love
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Zoe Gillenwater
 
CSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experienceCSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experienceZoe Gillenwater
 

Similaire à CSS3 Media Queries: Mobile Elixir or CSS Snake Oil (20)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)Responsive Development (ZendCon 2012)
Responsive Development (ZendCon 2012)
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Mobile and Responsive Design with Sass
Mobile and Responsive Design with SassMobile and Responsive Design with Sass
Mobile and Responsive Design with Sass
 
Responsive design and retina displays
Responsive design and retina displaysResponsive design and retina displays
Responsive design and retina displays
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web Design
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
 
CSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experienceCSS3: Using media queries to improve the web site experience
CSS3: Using media queries to improve the web site experience
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

Plus de jameswillweb

Hooray Icon Fonts!
Hooray Icon Fonts!Hooray Icon Fonts!
Hooray Icon Fonts!jameswillweb
 
Is Flexbox the Future of Layout -bdconf
Is Flexbox the Future of Layout -bdconfIs Flexbox the Future of Layout -bdconf
Is Flexbox the Future of Layout -bdconfjameswillweb
 
Developing Modern Web Interfaces with Dreamweaver CC
Developing Modern Web Interfaces with Dreamweaver CCDeveloping Modern Web Interfaces with Dreamweaver CC
Developing Modern Web Interfaces with Dreamweaver CCjameswillweb
 
Designing Responsively with Dreamweaver
Designing Responsively with DreamweaverDesigning Responsively with Dreamweaver
Designing Responsively with Dreamweaverjameswillweb
 
Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?jameswillweb
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devicesjameswillweb
 

Plus de jameswillweb (6)

Hooray Icon Fonts!
Hooray Icon Fonts!Hooray Icon Fonts!
Hooray Icon Fonts!
 
Is Flexbox the Future of Layout -bdconf
Is Flexbox the Future of Layout -bdconfIs Flexbox the Future of Layout -bdconf
Is Flexbox the Future of Layout -bdconf
 
Developing Modern Web Interfaces with Dreamweaver CC
Developing Modern Web Interfaces with Dreamweaver CCDeveloping Modern Web Interfaces with Dreamweaver CC
Developing Modern Web Interfaces with Dreamweaver CC
 
Designing Responsively with Dreamweaver
Designing Responsively with DreamweaverDesigning Responsively with Dreamweaver
Designing Responsively with Dreamweaver
 
Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
 

Dernier

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...Daniel Zivkovic
 

Dernier (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
All in AI: LLM Landscape & RAG in 2024 with Mark Ryan (Google) & Jerry Liu (L...
 

CSS3 Media Queries: Mobile Elixir or CSS Snake Oil

  • 1. MEDIA QUERIES Mobile Elixir or CSS Snake Oil? james williamson | lynda.com
  • 2. Howdy y’all james williamson | senior author man-about-town @jameswillweb on the Twitter
  • 3. Let’s Take Your Temperature...
  • 4. Global mobile internet usage | 2003
  • 5. Global mobile internet usage | 2011
  • 6. Why do designers fear the mobile web? Because we’ve only just now gotten this to work
  • 7. ...and now we have to deal with this (images not to scale)
  • 8. Past options for developing for the mobile web Build a separate mobile site. Hire a developer to build an app for you. Pray.
  • 9. Surely there must be another option CSS MEDIA QUERIES R Reflows content automatically, with no cramping or bloating. Works overnight, a soothing balm for your mobile ills Good for what ails you?
  • 10. So, what’s a media query? CSS Media Queries give us a way to control the application of styles based on the presence or absence of specific media features
  • 11. The concept isn’t exactly new... link  rel="stylesheet"  href="desktop.css"  media="screen" look familiar?
  • 12. However, we can now apply a little logic... link  rel="stylesheet"  href="desktop.css"   media="screen  and  (min-­‐width:500px)" that narrows it down a bit.
  • 13. Media Query syntax Media Queries are logical expressions, they are either “true” or “false” depending upon how they are evaluated. If true, the styles are applied, if false, they are ignored. link  rel="stylesheet"  href="desktop.css"   media="screen  and  (min-­‐width:500px)" In this example, the styles would only be applied if the UA supported the screen media type, and the display was at least 500px
  • 14. Media Query syntax link  rel="stylesheet"  href="desktop.css"   media="[not  |  only  ]  screen  [and]  (expression)" The keywords “not”, “only”, and “and” can be used to filter results, while expressions can be used to check for specific media features
  • 15. Media Query syntax Logical operator “and” constrains a query based on the expression that follows it. There is no “or” operator, normal comma-separated lists serve as “or.” link  rel="stylesheet"  href="desktop.css"   media="screen  and  (min-­‐width:500px)" Styles are applied for screen devices that have a width of 500px or greater link  rel="stylesheet"  href="desktop.css"   media="screen  and  (min-­‐width:500px),  projection  and  (color)" Styles are applied for screen devices that have a width of 500px or greater, or color projection devices
  • 16. Media Query syntax Logical operator “not” negates the results of the media query and applies the styles if the conditions are NOT met. It negates the entire expression, not just media type. Use carefully. link  rel="stylesheet"  href="desktop.css"   media="not  screen  and  (min-­‐width:500px)" Styles are applied if the device is not a screen device with a width above 499px. This also means that styles WOULD be applied for screen devices with widths below 500px and other media types.
  • 17. Media Query syntax Logical operator “only” serves to hide style sheets from older or non-conforming user agents. Conforming user agents are instructed to ignore “only.” link  rel="stylesheet"  href="desktop.css"   media="only  screen  and  (min-­‐width:500px)" Would be ignored by non-conforming agents. Other user agents would apply the styles to screen devices with widths 500px and above.
  • 18. Media Query syntax Media Features width color height color-­‐index device-­‐width monochrome device-­‐height resolution orientation scan aspect-­‐ratio grid device-­‐aspect-­‐ratio
  • 19. Media Query syntax Media Feature values length width:500px keyword orientation:  landscape  |  portrait ratio aspect-­‐ratio:  16/9 integer color:8
  • 20. Media Query syntax Media Feature prefixes In many cases, you can use the “min-” and “max-” prefixes to set less-than or greater-than ranges for your values width min-­‐width max-­‐width
  • 21. Media Query syntax Be careful! width  !=  device-­‐width (Honestly, even device-width != device width, or as PPK said, “a pixel is not a pixel*”) *http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
  • 22. Enough syntax! Let’s see it in action! Visit mediaqueri.es for a gallery of sites using media queries
  • 23. Oh snap! That changes everything! Except that it doesn’t. We still need to talk about how media queries work in the real world.
  • 24. “Media queries are fools gold...” - Jason Grigsby* So what’s his beef? Support for media queries isn’t that good *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  • 25. “Media queries are fools gold...” - Jason Grigsby* So what’s his beef? Having browsers scale images is a bad idea *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  • 26. “Media queries are fools gold...” - Jason Grigsby* So what’s his beef? Unnecessary resource downloading *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  • 27. “Media queries are fools gold...” - Jason Grigsby* So what’s his beef? Hiding elements doesn’t lower overhead *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  • 28. “Media queries are fools gold...” - Jason Grigsby* So what’s his beef? Media queries ignore the mobile context *http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  • 29. Browser Support Browser Layout Engine MQ support Firefox Gecko 3.6+ Google  Chrome WebKit 10+ Safari WebKit 3.2+ Opera Presto 11+ Internet  Explorer Trident 9+ iOS  Safari WebKit 3.2 Opera  Mini Presto 5.0 Opera  Mobile Presto 10.0 Android  Browser   Android  WebKit   2.1 Nokia multiple s40 Blackberry  Browser Mango/WebKit 4.7.1 Samsung Android  WebKit ??? OpenWave ??? UC  Web proprietary NetFront NetFront Palm WebKit WebOS  1.4
  • 30. Another big problem...it doesn’t just...work For mobile, media queries are typically used to check for screen size. They do not perform browser or device sniffing. The multitude of different screen sizes, resolutions, pixel densities, and default scaling preferences can cause serious problems with how media query-driven sites display.
  • 31. Oh...so....I guess we can go now right? dang. Not so fast. Media queries CAN work, and can be an important part of your mobile development strategy... you just have to use them correctly, and combine them with other techniques
  • 32. Let’s talk strategy Mobile First* Popularized by Luke Wroblewski, it emphasizes starting the design process with mobile in mind. *http://www.lukew.com/presos/preso.asp?26
  • 33. Mobile first media queries In terms of media queries, mobile first means starting with your mobile styles, and then enhancing designs for other screen sizes including desktop.
  • 34. Now, about media query support... Respond.js from the Filament Group https://github.com/scottjehl/Respond (gzipped version is 1kb) css3-mediaqueries-js by Wouter van der Graaf http://code.google.com/p/css3-mediaqueries-js/ (15kb uncompressed) A mobile-first strategy makes using these libraries critical.
  • 35. Now, let’s tame the viewport! CSS MEDIA QUERIES + VIEWPORT R Reflows content automatically, with no cramping or bloating. Works overnight, a soothing balm for your mobile ills Controls scaling and resolution with no bloating, dizzyness, or unpleasant aftertaste. A true joy for the home. = feel better by morning!
  • 36. Meta Viewport tags Meta viewport tags can be combined with media queries to help ensure consistent experiences. <meta  name="viewport"  content="width=device-­‐width,   initial-­‐scale=1.0"> what’s this all about then?
  • 37. So what can meta viewport tags do? Meta Viewport properties width  =  [pixel  |  device-­‐width  ] height  =  [pixel  |  device-­‐height  ] You can set width and height to explicit pixel values, or set them to device width and height, which instruct the device to set the viewport width to the device screen width
  • 38. So what can meta viewport tags do? Meta Viewport properties initial-­‐scale  =  0*  -­‐  10 minimum-­‐scale  =  0*  -­‐  10 maximum-­‐scale  =  0*  -­‐  10 These values allow you to control the initial scaling of the page (to control whether your page is initially zoomed out or not), and the minimum and maximum scaling allowed. * Android minimum is 0.01
  • 39. So what can meta viewport tags do? Meta Viewport properties user-­‐scalable  =  [  yes  |  no  ] Controls whether or not the user can change the scale of the page. If the value is set to no, any previously set minimum and maximum scaling values are ignored.
  • 40. So what can meta viewport tags do? Meta Viewport properties target-­‐densitydpi  =  [  dpi_value  |  device-­‐dpi   |  high-­‐dpi  |  medium-­‐dpi  |  low-­‐dpi  ]  ] Android Only: Allows you to target screen resolution. You can target a dpi value (70 - 400), the device dpi (prevents default scaling), or you can target one of three Android screen density categories. Content will then scale up or down if the resolution doesn’t match the target density. Essentially, it allows you to control how CSS pixels are scaled to device pixels. *For WebKit, you can use (-webkit-min-device-pixel-ratio: 2) to target higher density displays
  • 41. Let’s look at that again... <meta  name="viewport"  content="width=device-­‐width,   initial-­‐scale=1.0"> This syntax tells the device to set the viewport width to the actual device width to ensure the proper media query styles are used, and set the initial page scale to 100%. Never use media queries without a meta viewport tag. Ever.
  • 42. What about resource loading? OMG. I cannot believe I just ate all that!
  • 43. The truth about media query loading... <link  rel="stylesheet"  href="desktop.css"  media="screen,   projection"> <link  rel="stylesheet"  href="tablet.css"  media="all  and   (min-­‐width:  481px)  and  (max-­‐width:  768px)"> <link  rel="stylesheet"  href="mobile.css"  media="all  and   (min-­‐width:  0px)  and  (max-­‐width:  480px)"> This is very inefficient. All three CSS files will load, regardless of which media styles are loaded. This creates additional HTTP requests with no added savings. Combine these files using inline @media syntax.
  • 44. The truth about media query loading... #actionCall  {   display:  none; } This doesn’t help you either. If a widget or image is present in the element, it is still downloaded, regardless of the display property.
  • 45. The truth about media query loading... @media  //mobile  { #actionCall  {   background:  none;    } } @media  //desktop  { #actionCall  {   background:  url(big_ole_image.jpg);    } } This is better. If the mobile property is set to no background image, iOS does not download the desktop version. Sadly it seems that Android currently does.
  • 46. How can we control resource loading? Modernizr 2 features both media query tests AND the YepNope.js library. This allows you to combine feature detection, media query success, and conditional resource loading. <BOOM> http://www.modernizr.com/
  • 47. How can we control resource loading? Of course, if you prefer, you can roll your own. PPK reports in his own testing, document.documentElement.clientWidth and screen.width give the same results as the width and device- width media queries*. This means you could do this: if  (screen.width  >=  600)  {   //  load  resources } or if  (document.documentElement.clientWidth  >=   600)  {   //  load  resources } *http://www.quirksmode.org/blog/archives/2010/08/combining_media.html
  • 48. Media Query best practices Design with mobile in mind first Make the mobile styles your default styles and progress up Use fluid layouts to deal with minor screen size differences Combine CSS & JS files to reduce HTTP requests Minimize and gzip compress your code Use Data URL and CSS Sprites when you can Don’t use external libraries unless you really need to Consider using touch frameworks for interactivity
  • 49. Looks like gold to me! CSS MEDIA QUERIES R Reflows content automatically, with no cramping or bloating. Works overnight, a soothing balm for your mobile ills (That? Oh, that’s just the halo of truth...)
  • 50. So...where does that leave us? Just like every other technique in your toolbox, media queries simply add to your capabilities. Are they right for every project? Of course not. Mobile design is far more than simply designing for a smaller screen. However, given the right circumstances, media queries allow you to optimize designs for the mobile environment in a way that we weren’t able to do before. Deciding when, and if, to use them is, after all, your job.
  • 51. THANK YOU james williamson | lynda.com jwilliamson@lynda.com @jameswillweb on the Twitter www.simpleprimate.com