Den Odell
Connect on LinkedIn Connect on GitHub

Responsive Design PrinciplesReproduced from TECH.review, 2013

“Responsive design is made possible by browser support for CSS3 Media Queries”

A “Responsive” web page or site is one that adapts its visual layout to suit the characteristics of the device used to view it, most often by the screen’s aspect-ratio and/or resolution. The same page, with the same URL, viewed on both a mobile or desktop device would appear to the end user to have been designed to display best on that device, with font sizes and imagery scaled appropriately so the user doesn’t need to zoom or scroll around the page unnecessarily.

In this article, I will explain the three principles of Responsive design - media queries, breakpoints, and mobile-first development.

This type of Responsive layout is made possible by the support of CSS3 Media Queries technology in web browsers – currently supported in over 85% of browsers in use around the world, the only notable exception being Microsoft’s Internet Explorer version 8 and below. Device characteristic detection, which feeds these media queries creating the desired layout, is handled within the browser itself and relies on no server-side component. Layouts typically scale to the full width of the browser’s viewport, with breakpoints (the widths at which the layout needs to change) defined at specific screen widths so the page layout is grouped into small, medium, and large variants, typically corresponding to mobile-, tablet- and desktop-sized devices.

I’ve heard of ‘Adaptive’ design – what’s that?

Adaptive design is the process of using server-side technology to render alternative content and styling to a web page based on device type. A relevant stylesheet and/or markup can be sent to the browsing device dependent on its device characteristics, established by comparing its user agent string against a database (most commonly, WURFL) of known features for that device.

The most important difference between Adaptive and Responsive design is that characteristic detection is handled on the server-side in the former technique, and within the browser in the latter.

Why should I adopt Responsive design?

There are a number of benefits to adopting the Responsive design practice, which benefit both end users and developers.

End-users prefer Responsive layouts because:

Web developers prefer constructing Responsive layouts because:

It’s time to adopt Responsive design… mobile-first

I recommend all web pages and sites to be designed and built with Responsive layouts. This should be achieved in the majority of cases without relying on the server to generate alternative markup based on device type. There is still a place for server-side code in certain circumstances, for example to generate appropriately sized images for display based on the browser or device screen size. By utilising client-side code to adapt the site’s layout based on characteristics of the browser, any changes made by the user to the browser dimensions or other characteristics are reflected immediately in the site’s layout – something not possible with the server-side adaptive technique.

Developers should work mobile-first, building the styles for the smallest screen size breakpoint first (usually for mobile devices, hence the name) and adding the extra styles for other breakpoints using CSS3 Media Queries. This focus on mobile reflects the huge growth in this area and the impending time at which more users will browse on mobile than on desktop. This approach has the added side-effect of giving mobile users with older devices, e.g. Blackberry, an appropriate mobile view of the page, despite them not supporting CSS Media Queries.

How do I do it? The Technical Notes for your Development Team

CSS3 Media Queries allow us to write code to create Responsive websites, whose page design adjusts based on characteristics of the device used to view it. Using this technique, we’re able to adjust any CSS property based on screen width, height, pixel density, etc. While it’s possible to provide almost limitless differences in design based on every possible characteristic, in reality we tend to adjust the page based around three different screen widths, and also pixel density – with the latter only really relevant for serving different background image files.

These three screen width ‘breakpoints’ split the design into ‘narrow’, ‘wide’, and ‘full’ layouts. While it might be tempting to describe these in terms of ‘smartphone’, ‘tablet’, and ‘desktop’, with a plethora of new devices released every year, we prefer to stick to non-device-specific terms. Between each breakpoint, the design should scale to fill the width of the browser, so that no matter what screen sized device is being used to browse the page, the page always looks as if it has been designed appropriately for that device.

The default CSS styles written for a site should be those for the ‘narrow’ size (i.e. ‘mobile-first’) and these should be written at the top of the CSS file, with any styles to be applied to the ‘wide’ or ‘full’ layouts to be added via CSS3 Media Queries. This means that any device incapable of comprehending Media Queries – most likely older-feature phones and smartphones – will be provided an appropriate experience.

The elephant in the room is OldIE (i.e. IE8 and below), which do not support Media Queries; we want to give these users the ‘full’ experience. In this case there are a couple of solutions, the best of which is the approach detailed here by Jake Archibald, providing you are using Sass to author your stylesheet files (which is preferred). Alternatively, a single additional CSS file could be produced for IE containing the styles from the ‘full’ Media Query, ideally produced dynamically based on code in the existing CSS file. Other solutions include Respond.JS, though it only patches support for a couple of Media Query types (thankfully, the most common ones) and its performance is not ideal.

Here’s an example CSS file structure showing some basic styles applied to an element using the mobile-first approach:

/* 'narrow' and default styles go first */
body {
    width: 100%;
}

.canvas {
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #000;
    width: 100%;
}

/* Style rules to apply to screen sizes wider than 480px, overriding those set previously */
@media only screen and (min-width: 481px) {
    .canvas {
        width: 480px;
    }
}

/* Style rules to apply to screen sizes wider than 468px, overriding those set previously */
@media only screen and (min-width: 769px) {
    .canvas {
        width: 768px;
    }
}

Now I’ve covered the three principles behind the Responsive design technique – media queries, breakpoints, and mobile-first development – it’s time to dip your toes further into the waters of Responsive design. The following articles should help you do this: