Introduction to media queries – Part 2: Building a responsive design

In this second part of this two-part tutorial series, you'll put into practice the theory you learned in Part 1, Using media queries, to deliver different styles to mobile phones, tablets, and desktop computers. You'll learn how to apply basic styles to a sample page and then how to use media queries to override them with styles optimized for different screen widths. Older browsers, including Internet Explorer (IE) 6–8, don't support media queries, so the basic styles need to be attached to the page in the normal way. You also need to add a special <meta> tag to prevent modern mobile devices from rescaling the page and ignoring the media queries. These instructions are not specific to Dreamweaver. The HTML markup and CSS styles can be edited in any text editor.

When using media queries to create a responsive design suitable for a range of different screen sizes, the designer faces a major decision. Which should come first—the desktop design or the mobile one? Because mobile web development has been somewhat of a niche activity until recently, I suspect that most projects begin with the desktop design, and adapting it for mobile comes as an afterthought. However, the advice from many experts is to design for mobile first. By doing so, you ensure that all essential content is accessible to mobile users. You can then use progressive enhancement to improve the presentation on tablets and desktops.

The design for the sample page in this tutorial is adapted from my book Adobe Dreamweaver CS5.5 Studio Techniques: Designing and Developing for Mobile with jQuery, HTML5, and CSS3 (Adobe Press). In the book, the process begins with the desktop design and adapts it for mobile. In this tutorial, I'm taking the opposite approach, designing for mobile phones first and adapting the styles for tablets and desktops.

Of course, it's not always practicable to approach a project this way. The desktop version might already exist. You can see a practical example of adapting a desktop design for mobile devices in my three-part series on HTML5 and CSS3 in Dreamweaver CS5.5.

To keep things simple, the sample files contain a single web page. I won't describe every detail of the style rules, but will concentrate on explaining features that relate to the use of media queries and displaying the page on different size devices.

1. If you haven't already done so, download the example files for this tutorial and unzip them to your desktop or other convenient location.
2. Open dining.html in a browser and resize the browser viewport to approximately 320 pixels wide. Alternatively, use Live view in Dreamweaver CS5.5 and select View > Window Size > 320 x 480 Smart Phone. The page should look like Figure 1.

3. Resize the browser viewport to approximately 480 pixels wide. The page should look like Figure 2. The design still consists of a single column, but the image of the plate of sashimi is larger, and the column still fills most of the width of the browser. This is because the styles use a flexible design.

4. Resize the browser to a typical desktop size, such as 1280 x 800. As Figure 3 shows, the design looks a bit odd, but it hasn't lost its unity. With just a few tweaks, it can be adapted to a two-column layout more suited to the larger screen.

5. Open dining.html in Dreamweaver or your HTML editor, and switch to Code view. The first lines of the HTML markup look like this:

6. Insert a new line immediately before the <title> tag, and add the following code:

Adding the viewport <meta> tag with these settings ensures that smartphones and tablets respect the width settings in media queries. Setting initial-scale to 1 also ensures that the iPhone, iPad, and iPod touch apply width settings correctly in landscape orientation.

Note: The style sheet, basic.css, is attached to the page without a media query. This means that the styles will be applied by all visual browsers, even if they don't understand media queries.

7. Scroll down to the first paragraph in the page. Note that the image has a defined width, but not a height:

The height has also been omitted from the image in the fifth paragraph. Omitting the height allows you to scale down the images on a smaller screen without distortion.

The style sheet, basic.css, is attached without a media query, so the styles will be applied by all browsers. Later, you'll override some styles by adding dedicated style sheets for tablet devices and desktops. But first, let's take a look at the main features of the basic styles.

Open basic.css. The first style rule looks like this:

This is straightforward. It zeroes the margin and padding on the <body> of the page, and sets the colors for the background and font. It also defines the basic fonts to be used in the page, and sets font-size to 100%. When designing for mobile devices, it's recommended to use percentages for fonts. Setting the base size to 100% ensures that other percentages are correctly interpreted. With this setting, most browsers display text at 16px.

The next style rule controls the wrapper <div>, which encloses all the page content. It looks like this:

This sets the width of the wrapper to 100%, but sets the maximum to 980 pixels. The horizontal margins are set to auto. As a result, the page fills the full width of phones and tablets, but becomes a centered, fixed-width design on screens wider than 980 pixels.

The background image is 480 pixels wide, but the CSS3 background-size property has been set to contain. This scales the background image to the largest size needed for both its width and height to fit inside the element without distortion. In effect, it shrinks the image when the viewport is less than 480 pixels wide. On a bigger screen, it expands the image, potentially resulting in pixilation, but a larger version will be served to tablets and desktops using media queries.

The next style rule ( #header h1 ) sets the font size to 225%, which is the equivalent of 36 pixels. The text is centered, but an extra 40 pixels of padding is added to the left to move it away from the Chinese characters on the left of the background image.

The next style rule of interest is for the floatleft and floatright classes, which are applied to the inline images. It looks like this:

Setting the width of an image in CSS overrides the width in the HTML markup. As a result, on small screens, the images are rescaled to 95% of the width of their parent element. In the sample page, both inline images are 400 pixels wide, so the max-width property prevents them from being displayed larger than their original size. Obviously, if your design has images that are different sizes, you would need to create extra classes to handle them. The images will be floated on larger screens, but the basic rules set the display property to block and the horizontal margins to auto—in effect, centering the images in the page.

The style rules for the navigation menu give the nav unordered list a fixed width and height. Using a fixed width makes it possible to center the menu by setting the horizontal margins to auto. The height is needed to push the following content down the page, because the individual menu items are floated left. There are five items in the menu, so the final one is centered by the following rule:

This uses the CSS3 :last-child pseudo-class to add a left margin to the final menu item. The value was calculated by halving the total width of each menu item including horizontal padding and margins (152 pixels).

A single-column layout will be maintained for tablets with a screen width ranging from 481 to 768 pixels (the upper limit is the width of an iPad in portrait mode). However, the navigation menu needs to be resized, and the inline images can be floated left and right so that the text flows around them. A background image will also be added to the sake <div> at the bottom of the page.

1. Create a new style sheet called tablet.css in the styles folder.
2. Attach the new style sheet to dining.html using a media query that sets the minimum width to 481px and the maximum to 768px. The <link> tag for the new style sheet needs to come after the existing one because the new styles will override those in basic.css. The two style sheets should be attached like this:

3. Add the following style block to tablet.css:

This sets the maximum width of the wrapper <div> to 700px and substitutes a bigger version of the background image, which is also 700 pixels wide. There's no need to repeat the values inherited from basic.css, so the wrapper still fills the full width of the screen if it's smaller than 700 pixels. If it's wider, the inherited horizontal margins ensure that the <div> is centered.

4. The size and position of the main heading needs to be adjusted. So, add the following styles:

5. Dealing with the navigation menu requires a two-pronged approach. On a large tablet, such as an iPad, all five menu items can be displayed in a single row. But on a smaller screen, you still need to split the menu into two rows. You'll deal with smaller screens later. First, add the following styles for the navigation menu:

This sets the menu width to 660px and reduces the height. There are five menu items, so this creates 132 pixels of space for each one (120 pixels plus 1 pixel of horizontal margin and 5 pixels of horizontal padding on each side). The style in basic.css added a wide left margin to the final menu item to center it. This is no longer necessary, so the :last-child pseudo-class resets the left margin to the same as the other menu items.

6. The next set of rules deals with the inline images:

The floatleft and floatright classes float the images in the relevant direction and add margins to separate them from the text. The left margin in floatleft is set to zero to keep the image flush with the text. Similarly, the right margin in floatright is set to zero. The final style block adds a drop shadow to the images, using the box-shadow property with the RGBa color format. The first three comma-separated values passed to rgba() set the color (black), and the final value specifies the alpha transparency at 30%.

7. Add a background image to the sake <div> at the bottom of the page with the following rules:

The background-position property has two values, the first of which sets the horizontal position of the image 440 pixels from the left of the <div>. The paragraphs inside the <div> are set to a width of 400 pixels, leaving room for the background image to the side, as Figure 4 shows.

Dealing with smaller tablet screens

The navigation menu is 660 pixels wide, so you need separate rules for tablets with smaller screens. Rather than create another style sheet, it's more efficient to wrap the additional rules in an @media block and media query within tablet.css. The @media block also needs to make some adjustments to the the styles governing the inline images and font sizes.

1. At the bottom of tablet.css, add the following @media block and media query:

All the rules that go inside this @media block are applied only to screens between 481 and 680 pixels wide. The first rule uses a slightly smaller font size for the page's main heading and reduces the top padding.

2. Next, add the rules for the navigation menu. They must go inside the @media block as indicated by the comment in the preceding step.

This set of rules changes the width and height of the navigation menu to accommodate two rows of menu items—three in the top row, and two in the bottom one. Giving the items a bottom margin of 2 pixels separates the rows. Because there are fewer items in the second row, the :nth-child() pseudo-class targets the fourth item and gives it a 66-pixel left margin to center the last two items, as shown in Figure 5.

This set of rules changes the width and height of the navigation menu to accommodate two rows of menu items—three in the top row, and two in the bottom one. Giving the items a bottom margin of 2 pixels separates the rows. Because there are fewer items in the second row, the :nth-child() pseudo-class targets the fourth item and gives it a 66-pixel left margin to center the last two items, as shown in Figure 5.

Note: If you're not familiar with the :nth-child() pseudo-class, you can learn about it and other advanced CSS3 selectors in Getting to know your CSS selectors—Part 2.

3. The styles in tablet.css float the inline images to the left or right; but on a narrower screen, you still want them to be centered because there's not enough room for text to flow around them. Add the following style definition inside the @media block:

This overrides the earlier rule in tablet.css that floats the images. However, the width, max-width, and display properties are inherited from basic.css. As a result, inline images are centered in the same way as for the mobile phone layout.

4. The narrower layout also requires a minor adjustment to the styles for the sake <div>. Add the following rules inside the @media block to reposition the background image and resize the paragraphs accordingly:

The completed @media block looks like this:

Adding a cosmetic touch for larger tablets

The styles in tablet.css set the maximum width of the wrapper <div> to 700 pixels. But the media query that attaches the style sheet to the page applies the styles to screens up to 768 pixels wide. To add a subtle design touch for bigger screens, create the following @media block at the bottom of tablet.css:

This adds a border to the left and right sides of the wrapper <div>.

Creating the styles for the desktop version involves the same process as for tablets. You need to attach a style sheet with a media query targeted at screens wider than 768 pixels, and to override rules in basic.css. You don't need to worry about the styles in tablet.css because browsers that understand media queries will ignore them if the screen is wider than 768 pixels—and browsers that don't understand media queries will ignore tablet.css whatever the screen size.

Because IE 6–8 don't understand media queries, you need to attach the desktop styles to the page twice—once with a media query and the second time with an IE conditional comment.

1. Create a new style sheet called desktop.css in the styles folder.
2. Attach desktop.css to dining.html twice: first with a media query setting min-width to 769px, and then wrapped in an IE conditional comment. The new style sheet needs to be attached after the <link> to basic.css. Otherwise, the styles won't be applied correctly. You should now have the following <link> tags in the <head> of the page:

Although you're attaching desktop.css to the page twice, it will be downloaded only once. The IE conditional comment will be ignored by all browsers except IE 6–8.

3. Add the following rules to desktop.css to style the wrapper <div> and main header:

The desktop layout uses a fixed-width design 980 pixels wide. These rules substitute a larger background image and increase the size of the main heading. The border properties are the same as used in the last @media block in tablet.css, but they need to be repeated here for larger screens to apply them.

4. All five menu items of the navigation menu fit easily in one row. The new style rules simply increase the width of the menu items and override properties in basic.css:

The :last-child pseudo-class removes the large left margin on the final menu item in the same way as in tablet.css.

5. The wider screen makes it possible to convert the page into a two-column layout by floating the content-medium class left and adding a wide left margin to the aside class like this:

As the comment indicates, the display property of the floated column is set to inline. This fixes a bug in IE 6 and 7, which doubles the margin of an element if you float it to the same side as the margin. Fortunately, this has no effect on other browsers.

6. To float the inline images, you need to add the same rules as in tablet.css:

7. The rules for the images in tablet.css added a drop shadow, but on the larger screen the drop shadow also looks good on the main content and sidebar. So, you can use a grouping selector to apply the same properties to all of them like this:

I could have added this style rule to basic.css to add a drop shadow to these elements on all devices. However, in my tests, drop shadows don't always look good on mobile screens.

8. Finally, you need to change the background image for the sake <div>. Because the <div> has been converted into a sidebar, the image used for tablet.css is no longer appropriate. Add the following style block to desktop.css:

This positions a different image at the bottom of the sidebar and adds a large amount of bottom padding to make room for it.

With these changes, the page should now look like Figure 6 in a desktop browser.

Although media queries are an effective way of serving the same HTML markup to different devices with styles suited to their screen width, you need to bear in mind that browsers normally download all stylesheets even if the screen width falls outside the range specified by a media query. This is so that the browser can respond immediately if the dimensions of the viewport are changed. Research by Greg Rewis reveals that, bizarrely, this happens even if there's no way the styles could be applied. For example, an iPad will download a style sheet even if the maximum width is set to 700 pixels.

Because of this, you might want to consider combining all the style rules in a single style sheet and wrapping those intended for specific screen widths in @media blocks like this:

You can see this approach in action in dining-combined.html and combined.css in the sample files. The page displays in exactly the same way in phones, tablets, and desktops. You still need to attach desktop.css in an IE conditional comment for IE6–8.

Combining the style rules in a single file reduces the number of server requests, so should result in a marginally faster experience on a mobile device. The downside is that it results in a much longer style sheet, which can be more difficult to maintain.

This two-part tutorial series has covered the theory and practice of responsive web design with media queries, which allow you to serve styles optimized for different devices depending on their characteristics. Media queries are supported by all modern browsers and mobile devices. They're not supported by IE 6–8, but you can easily get around this limitation by creating basic styles that are used by all browsers, and using media queries to serve specific styles to more modern browsers. You can also use an IE conditional comment to attach a dedicated style sheet for older version of IE.

You should find the following resources helpful in learning more about media queries and designing for mobile:

• Greg Rewis: CSS3 Media Queries? Download Answers
• Ethan Marcotte: Responsive Web Design
• Scott Jehl: Responsive Images: Experimenting with Context-Aware Image Sizing
  
• Scott Jehl: Responsive Images (files for an updated version of the preceding technique)
• Chris Converse: Customizable starter design for multiscreen development
• Media Queries (a collection of sites using media queries)
• W3C: Mobile Best Practices 1.0
• W3C: Mobile Web Application Best Practices