Responsive CSS

What exactly is responsive CSS?

Like most buzzwords in our industry, it has multiple evolving definitions.

Here's mine:

Attempting to provide users what they need in a way that is approriate for the medium through which they are consuming your content.

It's responsive because a given collection of content/code responds to (behaves differently depending on) the medium your user is using.

Let's look at some practical ways to do that in CSS.

With max-width, width, and margin

Consider this prototypical web page example.

With Media Queries

Media queries became a W3C recommendation in June 2012 and are what sparked the hype around responsive web design.

They let developers define CSS rules that will only apply when certain conditions are met.

See this simple media query example.

Note that media queries do not affect the specificity of the selectors they contain.

A common use case is detecting screen width in your media queries, changing layout for different devices.

There are other useful media queries:

@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Detecting screen resolution to provide high-DPI
   * images for retina screens or high-quality prints.
   */
}
    

@media print {
  /* Print-specific CSS for doing things like removing
   * background colors, making content full-width, etc.
   */
}
    

Other Considerations for Responsive CSS

Performance

Smaller devices are more constrained in just about every way relative to desktop browsers.

Check out resources like Google PageSpeed Tools.

Also, Chrome's DevTools has really nice device emulation features.

Mobile First

Mobile first is an approach to designing web pages, where the mobile visitor's experience is designed first, followed by working toward the full desktop site.

It helps facilitate design decisions that focus on the most important pieces of content and functionality.

There is a book from the A Book Apart series called Mobile First by Luke Wroblewski.