Mobilism: A Closer Look at Media Queries

by Luke Wroblewski May 16, 2011

In his Meta Layout: A Closer Look at Media Queries presentation at Mobilism in Amsterdam, Netherlands Stephen Hay described CSS Media Queries in depth and outlined strategies for implementing them on Web sites. Here are my notes from his talk:

  • The server-side camp and the front-end camp for mobile Web feature detection need to come together. Neither offers a complete solution at this point.
  • Media queries allow us to do some feature detection in the browser without Javascript.

Media Queries

  • To use a media query, take a media type, add a feature, and apply a set of rules. Logical “ands” constrain a query. Use a comma to create an “or” for multiple features within a media query.
  • Using “only” hides the referenced CSS from older browsers so they don’t apply CSS rules that aren’t for them.
  • Media features include: width, height, device-width, device-height, device-aspect-ratio, orientation, color, resolution, scan, and grid.
  • What do you need for mobile? width, height, orientation, and aspect-ratio (which might not be used that much)
  • Pre-fixed features are also present. How many device pixels per CSS pixel? The device figures it our for you but there a few vendor-specific prefixes to query for it. Not sure why you need know on the Web.
  • Mozilla has a vendor-prefixed tag for determining if a device is touch-enabled. This is currently only supported in Firefox.

Applying Media Queries

  • Mobile Web browsers shrink pages down and allow people to zoom in/out of content. To optimize Web pages for mobile, we want to tell the browser to set the viewport. Set the meta viewport width to “device-width”. This tells you what you are working with. Use that in combination with width in media queries.
  • In most cases, you still want people to be able to zoom your mobile Web pages.
  • You can apply media queries to Web pages as blocks in CSS or relative links to CSS documents.
  • Browsers should really only load the CSS you need when a media query applies. Opera works like this but other mobile browsers currently do not.
  • Adapt.js is a lightweight Javascript file that determines which CSS file to load before the browser loads a page. This provides the solution you actually want with media queries.

Beyond Media Queries

  • If you have a flexible layout, you can get by with almost no media queries at all.
  • Layout is not design –it is only one component of design. Design is the art of putting form and content together.
  • We’ve gone from designing pages to components, to systems. Systems have lots of applications, which makes them more complicated to design. We need to think simply about designing systems.
  • Reference wireframing allows you to develop a layout strategy. You can build a simple diagram to set where components go in a layout.
  • A breakpoint graph is a timeline that defines the breakpoints where layout should be adapted. We don’t have to do anything until the first break-point. Just include fonts and colors applied to structured content. After the first-break point, load layout styles. Always be fluid in between the break-points.
  • Order-independent layout mechanisms are not here yet in CSS but coming. By default, source order determines the layout of elements on a page. The flexible box layout model allows you change layout without changing source order. Flexible box layout module is implemented in WebKit and Firefox but the spec has totally changed.
  • Grid module layout templates. CSS3 Grid layout: works like table layouts. You just have to change templates code to change entire layout. Spec came out recently.
  • Think in terms of design principles and systems. Think more proportionally about how things need to work in a page.