Mobile devices have a smaller screen, are generally touch oriented, and have different user experience expectations than a desktop computer.

To accommodate the smaller screen, we use responsive web design techniques. This means designing the application in such a way that it accommodates the screen size and other device attributes. The idea is crafting websites to provide an optimal viewing and interaction experience across a wide range of devices. The techniques include changing font sizes, rearranging elements on the screen, using collapsible elements that open when touched, and resizing images or videos to fit the available space. This is called responsive because the application responds to device characteristics by making these changes.

The primary technique is to use media queries in the stylesheet to detect device characteristics. Within sections controlled by media queries targeting a range of devices, the CSS declarations must match the targeted devices.

It may help to consult a concrete example. The Twenty Twelve theme for Wordpress has a fairly straightforward responsive design implementation. It's not built with any framework, so you can see clearly how the mechanism works, and the stylesheet is small enough to be easily digestible. Refer to its source code in the Wordpress repository at https://themes.svn.wordpress.org/twentytwelve/1.9/style.css.

The stylesheet starts with a number of resets, where the stylesheet overrides some typical browser style settings with clear defaults. Then, the bulk of the stylesheet defines styling for mobile devices. Toward the bottom of the stylesheet is a section labeled Media queries where, for certain sized screens, the styles defined for mobile devices are overridden to make sense for devices with larger screens.

It does this with the following two media queries:

@media screen and (min-width: 600px) {
  /* For screens above 600px width */}
@media screen and (min-width: 960px) {
  /* For screens above 960px width */}

In other words, the first segment of the stylesheet configures the page layout for all devices. Next, for any browser viewport at least 600px wide, reconfigure the page to display on the larger screen. Then, for any browser viewport at least 960px wide, reconfigure it again. The stylesheet has a final media query to cover print devices.

The pixel widths given earlier are what's called a breakpoint. Meaning, those threshold viewport widths are where the design changes itself around. You can see these breakpoints in action easily by going to any website with a responsive design, then resizing the browser window. Watch how the design jumps at certain sizes. Those are the breakpoints chosen by the author of that website.

There's a wide range of differing opinions about the best strategy to choose your breakpoints. Do you target specific devices or do you target more general characteristics? The Twenty Twelve theme did fairly well on mobile devices using only two media queries. At the other end of the scale, the CSS-Tricks blog posted an extensive list of specific media queries for every known device, which is available at https://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

We should at least target these device scenarios:

Enough with the theory, let's get back to our code.