It's obvious, well at least to me, that the future of the web is headed towards responsive web design. One major piece of technology needed for responsive web design to function is CSS media queries. The ability to specify a stylesheet to be used in a specific media type was introduced in CSS2. In CSS3, media queries were introduced to extend that functionality, allowing for conditions such as minimum screen width and minimum screen height. Media queries make possible the adaptive layouts used in responsive web design.

Before responsive web design, fluid layouts were used to accommodate different screen sizes by sizing elements using percentages; however, this did not allow for rearranging of items on a webpage. Media queries allow us to change the layout of a page depending upon the size and resolution of the screen on which the web page is being viewed.

Resolution Breakpoints

One of the main goals of responsive web design is to ensure that your website is designed to be device-agnostic, meaning that the website is designed to behave properly on specific resolutions rather than specific devices (no more mobile-only websites!). Since we are now designing and coding for resolutions, a set of “breakpoints” need to be identified. Breakpoints define the resolution thresholds at which elements on the webpage will change layout.

The most common breakpoints are:

  • 320px (typical smartphone screen sizes, iPhone portrait orientation)
  • 480px (iPhone landscape orientation, small tablets portrait orientation)
  • 768px (iPad portrait orientation)
  • 1024px (iPad landscape orientation, minimum desktop/laptop computer screens)

A common responsive website is usually presented in a one-column layout until the screen reaches 768px, where a second column is introduced. At 1024px, the website will typically display the “full” desktop view.

Media Query Syntax

Media Query Syntax

Browser Differences

The use of media queries is a huge step in the web design world. But there are some disadvantages. One is that older browsers, mainly Internet Explorer 8 and below, do not support media queries. Luckily, Scott Jehl has created a polyfill called Respond that addresses this problem for us. Respond is a JavaScript file that runs in browsers that do not natively support media queries. It searches for media queries and then works its magic to render the page properly. A huge benefit of Respond is that it is incredibly lightweight and easy to implement. At Systems Alliance we’ve used this polyfill for all of our responsive projects; however, there are a couple of other solutions to this problem that may better fit your needs.

Gotchas

One thing to keep in mind is that the resolution breakpoint that you specify does not include the pixel width of the scrollbar in your browser. This may cause unexpected results. If your desktop site content is designed to fit 1024px and you view it on an iPad, the scrollbar will make your website render in the next breakpoint down from 1024px.

Another thing to keep in mind is that if you place any inline media queries directly onto your page, those declarations will not render in browsers that are backed by the Respond polyfill. This is a limitation of older browsers. To work around this, all media query declarations should be placed within an external file. Similarly, IE development tools won’t work as expected on pages that have been reformatted using the Respond polyfill. Again, this is another limitation of the browsers.

The world of web design is constantly changing. It’s difficult to keep track of all the emerging technologies and methods that industry experts introduce daily. The use of media queries is definitely one of those emerging technologies that you should familiarize yourself with. For more information on media queries and responsive web design, check out our upcoming webinar, Responsive Web Design: Building Your Site for the Optimal Mobile Experience.