Loading...

CSS Media Queries and their place in Responsive Web Design - http://bit.ly/dwdm_rwd

John Weis
@weisjohn

Senior Web Developer
Resource Interactive
resource.com

resource logo

series of tubes
A mobile future
It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change.

Responsive Web Design

Flexible Grids

Flexible Assets

Media Queries

Flexible Grids
  • target ÷ context = result
    • target the element to be sized
    context the parent element of target
    result relative unit in % or em
     
  • 
.container { width: 900px; }
.cell { width: 90px; }
			
			
.container { width: 90%; /* ~1000px */ }
.cell { width: 10%; /* 90px / 900px */ }
Flexible Assets
Where we've been...
  • <link rel="stylesheet" type="text/css"
	media="screen" href="base.css">
	
<link rel="stylesheet" type="text/css" 
	media="print" href="printers.css">
Media types
  • all
  • handheld
  • print
  • projection
  • screen
  • ( braille , embossed , tv , tty )
CSS Media Types
Where we've going...
	
<link rel="stylesheet" type="text/css" 
	media="all" href="old_site.css">

<link rel="stylesheet" type="text/css"
	media="only screen and (min-width:768px)"
	href="tablets.css">

<style>

  @media only screen and (max-width: 768px) {
    /* if a window is > 768px, these rules don't apply */
  }
  
  @media only screen and (-webkit-min-device-pixel-ratio:2) {
     
     /* vendor specifics already? */
  }
  
</style>
Breaking down the name
  • "A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. [...] By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself." - W3C
  • media type - inspects the display medium
  • +
  • query expression - inspects display features
CSS Media Queries
Media queries
  • width, device-width
  • height, device-height
  • aspect-ratio, device-aspect-ratio
  • orientation
  • (color, color-index, monochrome, scan, grid)
  • ("min-" and "max-" prefix on all features except orientation, monochrome, scan, grid)
CSS Media Queries

And now for an example

of just how bad a site can look

even if it's not that complicated

(excuse the fact that it's my site)

A normal website - desktop
iPad - portait
iPad - landscape
iPhone 4 - initial
iPhone 4 - rotated
iPhone 4 - zoomed?
Motorola Droid

Let's fix this.

Responsive Web Design

Flexible Grids

Flexible Assets

Media Queries

960 grid based
basic layout
let's make it flexible
  • target ÷ context = result
    • target the element to be sized
    context the parent element of target
    result relative unit usually in % or em
     
  • .container_16 { 
  width:  66.6667%; /* 960px / 1440px */ 
  padding: 3.1250%; /*  30px / 960px */
}

.grid_16 {
  width: 97.91667%;  /* 940px / 960px */
  margin: 1.04167%; /*  10px / 960px */
}
wow...
voilà
hmmm...
  • Because we didn't specify a width, Mobile Webkit renders the page at 980 pixels wide and scales out.
meta viewport
  • comma separated, property-value pairs:
    • width, height
    • initial-scale, minimum-scale, maximum-scale
    • user-scalable
  • fixes scaled-out render and the iOS Scaling Bug mentioned earlier, but it prevents the user from scaling :(
  • <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
getting better...
  • bring on the media queries, already!
writing our first media query!
  • 1. pick a media type + query
  • 2. choose selectors / write rules
    • kill the box-shadow
    • loose the excessive margins
    • smaller body text size might be nice
    • move the social media links
  • 3. profit
results
  • @media only screen and (max-width: 640px) {

  .container_16 {
    width:  93.7500%;   /* 600px / 640px */
    padding: 3.1250%;   /*  20px / 640px */	
    margin-top: 0px;
    box-shadow: none;	
  }
	
  .home section p {
    font-size: 22px;    /* could be relative */
  }
    
  header nav {
    margin-top: 44px;   /* not relative */
  }
	
}
before and after
other considerations
  • if starting from scratch, target "mobile first"
  • if the site exists, modifying for RWD is non-trivial
  • if your design already uses a grid system, it'll be easier
  • you'll need developers who are familiar with the codebase, not just a side team
  • you'll need clients who can be convinced that this is worth the investment
My Toolkit
questions?

John Weis
@weisjohn

Senior Web Developer
Resource Interactive
resource.com

resource logo