Responsive Web Design

• Develop a Windows 8 app in 30 days

It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today’s needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea is to approach the issue the other way around: use flexible and fluid layouts that adapt to almost any screen.

Core Concepts

Three key technical features are the heart of responsive Web design:

• Media queries and media query listeners
• A flexible grid-based layout that uses relative sizing
• Flexible images and media, through dynamic resizing or CSS

Truly responsive Web design requires all three features to be implemented.

The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive Web design.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.

Media Queries

Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:

1.	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
2.	<link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" />

That was it! Luckily, the W3C improved media queries in CSS3, moving them a big step forward.

Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.

There are three ways to implement media queries:

Use the @import rule to import style rules from other style sheets:

1.  @import
url(style600min.css) screen and (min-width: 600px);

Put media queries directly in the style sheet, as shown in Figure 1. This is the most common approach.

#nav
    {
        float: right;
    }
        #nav ul
        {
            list-style: none;
        }
    @media screen and (min-width: 400px) and (orientation: portrait)
        {
                #nav li
                {
                    float: right;
                    margin: 0 0 0 .5em;
                    border:1px solid #000000;
                }
        }
    @media screen and (min-width: 800px)
        {
            #nav
            {
                width: 200px;
            }
               #nav li
                {
                    float: left;
                    margin: 0 0 0 .5em;
                    border: none;               
                }
        }</

Include a query in a linked style sheet’s media attribute:

1.  <link rel="stylesheet" type="text/css" media="screen and
(max-device-width: 800px)" href="style800.css" />

Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten.

The following images present an example of a responsive Web design approach that uses media queries. Figure 2 and Figure 3 both show a desktop using Internet Explorer 9 in two different resolutions. Figure 4 shows the same responsive site on a Windows Phone, also with Internet Explorer 9.

If you’re looking for some great examples of responsive Web design that take full advantage of media queries, the http://mediaqueri.es/ enthusiast site can be addictive, as Figure 5 shows.

Media Query Listeners

Taking media queries a step further, the CSS Object Model (CSSOM) working group at the W3C also created media query listeners, which provide an API for responding to media query changes. Instead of having to poll for changes or load several versions of a resource, you can use the API, for example, to download images only of a particular size when a media query match is triggered.

Today, Firefox and the Internet Explorer 10 Platform Preview implement media query listeners; you can see the demo "CSS3 Media Queries & Media Query Listeners” on the IE Test Drive.

A Word about the Viewport

When testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen.

So do you think there isn’t a way of getting the real resolution? Actually there is, in the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:

<meta name="viewport" content="width=device-width">

Other viewport settings include maximum-zoom and initial-scale.

Flexible Grids

A flexible grid-based layout is one of the cornerstones of responsive design. The term "grid” is used rather freely and doesn’t imply a requirement to implement any of the available grid frameworks. What it means here is using CSS for positioning and for laying out margins and spacing, and for implementing various Web layout types in a new way. Layouts and text sizes are typically expressed in pixels. Designers love pixels. Photoshop loves pixels. But a pixel can be one dot on one device and eight dots on another. So how do you approach responsive Web design if everything is pixel-based? You might not like the answer: You stop using pixel-based layouts and start using percentages or the em for sizing.

By basing text sizes, widths and margins on percentages or on the em, a unit of measurement based on a font’s point size, you can turn a fixed size into a relative size. This means you’ll need to do a little math to achieve a flexible grid and text size system. But the formula for calculating the em is very simple:

target ÷ context = result

Let’s say the normal context for the body font size is 16 pixels. If the designer specifies that the H1 should be 24 pixels, you can calculate the following:

24 ÷ 16 = 1.5

This results in the following CSS style:

h1{
        font-size: 1.5em;
  }
}</

Always take the context into account. Continuing with the previous example, if you have an element inside the H1 that needs to be 12 pixels, you use the current H1 as the context. The context is now 24 pixels, so the context calculation for "H1 a” is:

12 ÷ 24 = 0.5

And the CSS style is:

h1 a{
        font-size: 0.5em;
    }</

You can also use percentages. The calculation algorithm is the same; you just end up with percentages.

Flexible grids use this approach. You can find several frameworks to help you craft your grid, such as Fluid Grid System or Fluid 960 Grid System (a fluid version of 960 Grid System). Moreover, several groups within the W3C have submitted new specs for better flexible grids, with some useful results.

CSS3 Grid Layout

The CSS3 Grid Layout (also known as Grid Alignment or, simply, the Grid), brings a typical grid system to CSS, similar to what XAML or Silverlight developers may be familiar with. At the time of this writing, the spec is an "Editor’s Draft.” It allows for defining regions in a layout, with columns and rows, spanning, spacing, padding, grid templates and more, enforcing full separation of concerns between HTML elements and CSS. Unlike HTML tables that are content, the Grid allows for placing HTML primitives into grid regions separate from actual content.

Combining the CSS3 Grid with media queries creates a powerful solution for building fluid, responsive applications.

How does the Grid work? You start by setting the display block to ‘grid’. (You need to use CSS vendor prefixes because this is not yet a CSS3 recommendation. Right now, only Internet Explorer 10 Platform Preview supports the spec, so you’ll see the CSS vendor prefix -ms- used here.) Let’s look at three examples of how you can set up different views depending on screen size. Media queries are used to apply different grid styles depending on the screen width.

In the first example, the HTML for defining the content consists of one header and three different blocks of text (see Figure 6).

1.	<div id="mygrid">
2.	        <header id="myheader">
3.	                <h1>Hello world</h1>
4.	        </header>
5.	        <div id="block1">
6.	                <h2>Lorem Ipsum section 1</h2>
7.	                <p>
8.	                      Phasellus venenatis sem vel velit tincidunt tincidunt.
9.	                        Curabitur gravida, ante sit amet [... ...]
10.	                </p>
11.	        </div>
12.	        <div id="block2">
13.	                <h2>Lorem Ipsum section 2</h2>
14.	                <p>
15.	                Nam tempus justo eu massa ultrices eget imperdiet ligula placerat.
16.	                Suspendisse [... ...].
17.	                </p>
18.	        </div>
19.	                <div id="block3">
20.	                <h2>Lorem Ipsum section 3</h2>
21.	                <ul>
22.	                      <li>Curabitur ultrices tristique purus, sed pellentesque
23.	                            magna scelerisque ut.</li>
24.	                        <li>[... ...] </li>
25.	                </ul>
26.	        </div>
27.	</div>

You start by laying out the blocks of content under each other so that the content fits smartphones (see Figure 7). You can add background colors as shown in Figure 8 to make it clearer that you’re working with grid items.

@media only screen and (max-width : 480px) {
    #mygrid {
        display: -ms-grid;
        margin: 3px;
        -ms-grid-columns: 100%; /*one column taking full width */
        -ms-grid-rows: 70px auto auto auto; /*4 rows */
    }
    #myheader {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
    }
    #block1 {
            -ms-grid-row: 2; /*place into row 2 / column 1*/
            -ms-grid-column: 1;
    }
    #block2 {
            -ms-grid-row: 3;
            -ms-grid-column: 1;
    }
    #block3 {
            -ms-grid-row: 4;
            -ms-grid-column: 1;
    }
}

In the second example, a media query applies styles defined for screen sizes greater than 481 pixels—anything wider than a typical smartphone. You can use the Grid to define two columns and move the blocks into desired positions (see Figure 9). The results are shown in Figure 10.

@media only screen and (min-width : 481px) {
/*make two columns and move block 3 next to 1 — just because we can*/
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 10px 1fr 10px 1fr 10px; /*10px columns to spacing in between*/
        -ms-grid-rows: 100px 1fr 1fr; /*100px row and two rows each taking 1 fraction
                                          of available space*/
        margin: 5px;
    }
    #myheader {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
            -ms-grid-column-span: 5;
            background-color: #EEB215;
    }
    #block1 {
            -ms-grid-row: 2;
            -ms-grid-column: 2;
            background-color: #B2B0B0;
    }
    #block2 {
       -ms-grid-row: 3;
       -ms-grid-column: 2;
       background-color: #726E6E;
    }
    #block3 {
       -ms-grid-row: 2; /*block 3 can go into row 2*/
       -ms-grid-column: 4;
       background-color: #515050;
    }
}

The third grid sample displays on screen widths greater than 1220 pixels. You define a grid with a wide header that spans multiple columns and then define three columns, each occupying one fraction of the available space, with a few 10-pixel columns in between (see Figure 11). The results are shown in Figure 12.

@media only screen and (min-width: 1220px) {
    #mygrid {
        display: -ms-grid;
        -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
        -ms-grid-rows: 100px 1fr;
        margin: 5px;
    }
    #myheader {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
            -ms-grid-column-span: 5;
            background-color: #EEB215;
    }
    #block1 {
            -ms-grid-row: 2;
            -ms-grid-column: 1;
            background-color: #B2B0B0;
    }
    #block2 {
            -ms-grid-row: 2;
            -ms-grid-column: 3;
            background-color: #726E6E;
            }
    #block3 {
            -ms-grid-row: 2;
            -ms-grid-column: 5;
            background-color: #515050;
    }
}

The Grid specification is a welcome addition for implementing responsive web designs.

Two other new CSS specifications are also worth mentioning: the Flexible Box Layout Module (Flexbox) and The Multi-column Layout Module. Both show a great deal of promise for designing responsive Web sites.

Flexbox, currently a working draft at the W3C, adds support for four new layout modes: block, inline, table, and positioned. It enables you to lay out complex pages with relative position and constant size, even when screen sizes change.

The multi-column layout module is currently a candidate recommendation at the W3C. This solution is for content that you need to lay out in columns and that flow from one column into the next. You can view an interactive example of multi-column layout in this lab.

Flexible Images and Media

The final aspect of responsive Web design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property.

Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size.

img, object {
     max-width: 100%;
}

An alternative to scaling images is cropping them with CSS. For example, applying overflow:hidden allows you to crop images dynamically so that they fit into their containers as the containers resize to fit a new screen environment.

Having several options to scale and crop images in CSS might not be enough. Do you really need to take up all of a visitor’s mobile bandwidth because you don’t have a smaller version of an image? To better serve users, flexible images might mean using an alternative image—or even no image at all. Folks in the Web design community are coming up with solutions based on JavaScript and cookies, and you can expect more of this as responsive Web design evolves and becomes the basis for many quality Web sites.

Legacy Browsers

What about older browsers that don’t support media queries? What about Internet Explorer before version 8, which has issues with scaling images? Solutions in the form of polyfills can help. Here are some useful examples.

• css3-mediaqueries.js by Wouter van der Graaf: code.google.com/p/css3-mediaqueries-js/
• Response.js: github.com/scottjehl/Respond
• Fluid images: unstoppablerobotninja.com/entry/fluid-images/

In Closing

Jumping on the responsive Web design wagon isn’t something to take lightly. Take into account what you need to achieve, and consider whether catering to a specific version of a desktop or mobile device makes the most sense.

Responsive Web design is in its early stages. Web designers will continue to offer different opinions and recommend directions related to whether to build for mobile first, how to fit these decisions into the design process, whether to slice up the comps into all the different screen sizes, and so forth. And as more and more screen sizes and form factors arrive, the conversation will continue.

HTML and CSS standards are evolving to help Web designers deal with these issues. It’s clear that some form of responsive Web design will be used to meet the challenges, and it’s equally clear that standards will continue to evolve as better ways of handling the changing world of devices and browsers are discovered.

Here are some additional resources:

• Responsive Web Design
• Responsive Web Design Techniques, Tools and Design Strategies
• Hardboiled CSS3 Media Queries
• Golden Grid System
• A Brief Look at Grid-Based Layouts in Web Design