HTML5 and CSS3 in Dreamweaver CS5.5 – Part 3: Using CSS media queries to target different screen resolutions

This is Part 3 of a three-part tutorial series exploring the HTML5 and CSS3 features in Dreamweaver CS5.5. In Parts 1 and 2, you built and styled a web page for a fictional restaurant, Citrus Café, using HTML5 structural elements and CSS3 properties, including rounded corners, and text and box shadows. In this final part, you'll optimize the page for display in devices at smaller resolutions, using CSS media queries and a site-wide media queries file.

CSS media queries let you target style rules for different devices by specifying conditions, such as the maximum and minimum screen width. You need only one version of the HTML markup; the main styles are in a style sheet that's served to all devices; those with smaller screen resolutions get different styles that override some properties.

To follow this tutorial, you should have completed Parts 1 and 2. Alternatively, download citrus_pt3_start.zip and extract the files to your computer's hard disk. Create a site called Citrus Cafe, and set the citrus folder as the local site folder.

At the end of Part 2, you had styled the home page of the Citrus Cafe website for optimal display in a desktop computer (see Figure 1).

The desktop design is 840 pixels wide, which is too big for tablet devices and those still using a small resolution on their desktops. To optimize the display for tablet devices, the width needs to be reduced to 700 pixels. That means changing the width of most elements, but many styles can be inherited from the existing style sheet.

Instead of displaying the three pods alongside each other, the first two pods will be made wider, and the "News" pod will stretch the full width underneath them. The pods that contain images can be stretched without destroying the balance, because part of the images is currently hidden by the overflow property. After being optimized, the lower half of the page will look like Figure 2.

For mobile phones, the widths need to be reduced even further. Phones come in a bewildering range of resolutions, but for this tutorial, I have chosen to use 320 pixels, which is used by the iPhone and many Android smartphones. The menu needs to be tighter, the large background image for the restaurant's mission statement goes, and the pods are stacked vertically (see Figure 3).

When attaching a style sheet to a web page, you can use the media attribute to specify which type of device your styles should be applied to. Many designers use the media attribute to serve a separate print style sheet like this:

CSS media queries, which are part of CSS3, take this a step further by allowing you to specify other conditions, such as availability of color, orientation (landscape or portrait), aspect ratio, width, and height.

Setting conditions in media queries

CSS media queries have been supported since Safari 3, Firefox 3.5, and Opera 7. They're also supported in Google Chrome, and Internet Explorer 9 finally caught up with the rest of the bunch. However, you still need to cater for older browsers. As long as your main style sheet is served without using media queries, the page will be styled in all browsers. You can then use media queries to target devices with smaller screen resolutions confident in the knowledge that visitors using a modern browser will see an optimized display.

The basic syntax for setting conditions is to specify the media type and set the condition in parentheses like this:

You can add more than one condition like this:

Alternatively, you can use media queries with CSS @import rules like this:

Dreamweaver CS5.5 uses the @import syntax, whereas Dreamweaver CS5 embeds the media query in the <link> tag. Another difference is that Dreamweaver CS5.5 adds the keyword only before the media type. This is designed to prevent potential problems with older browsers.

It doesn't matter whether you use <link> or @import. Both produce the same result. However, unlike @import, <link> tags cannot be used inside a style sheet. Dreamweaver CS5.5 takes advantage of this distinction to import multiple style sheets into what it calls a site-wide media queries file.

Note: The full media query specification is on the W3C site. It's not a long document, so is easy to read.

Creating a site-wide media queries file in Dreamweaver CS5.5

Instead of linking each style sheet individually to every page, you link only the site-wide media queries file, which imports the rest of the styles. The following instructions are quite long, but once you have learned how to do it, creating a site-wide media queries file should take only a couple of minutes.

Note: The Media Queries dialog box in Dreamweaver CS5 (11.0.3 version) doesn’t support the creation of a site-wide media queries file. You need to create the file manually. Alternatively, attach the individual style sheets to each page, as described in the next section, "Attaching style sheets with media queries in Dreamweaver CS5."

1. With index.html open in the Document window, open the Media Queries dialog box using one of the following methods:

   • Select Modify > Media Queries.
   • Click the down arrow on the right of the Multiscreen button, and select Media Queries.
   • In the Multiscreen panel, click the Media Queries button.
2. In the Write media queries to section at the top of the Media Queries dialog box, click Specify.
3. In the Specify Site-wide Media Query File dialog box, select Create new file from the CSS File pop-up menu, and click the folder icon to the right of the text input field. This opens the Save File As dialog box.
4. Navigate to the css folder, type citrus_mq.css in the File name field, and click Save.
5. The location of the new file should now be listed in Specify Site-wide Media Query File dialog box (see Figure 4).

6. Click OK. The new file is now listed in the Media Queries dialog box as the Site-wide media queries file. Select the radio button alongside to confirm that you want to use it (see Figure 5).

7. Verify that the "Force devices to report actual width" check box is selected.
8. In the bottom half of the Media Queries dialog box, click the Default Presets button. This creates a list of three suggested settings for style sheets to be served using media queries (see Figure 6).

9. You now need to specify the names of the style sheets for each setting. With Phone selected, make sure the CSS File pop-up menu is set to "Create new file," and click the folder icon to the right of the input field.

10. Navigate to the css folder, and type phone.css in the File name field, and click Save.

    Note: Don't worry that citrus_mq.css isn’t listed in the css folder. Dreamweaver doesn't create the new style sheets until you close the Media Queries dialog box.

11. Select Tablet, and create a new style sheet called tablet.css in the same way as you did for Phone.
12. Select Desktop. The style sheet already exists, so set the CSS File pop-up menu to "Use existing file" before clicking the folder icon, and selecting desktop.css.
13. Verify that the settings in the Media Queries dialog box look like Figure 7 before clicking OK.

14. Inspect the <head> of index.html in Code view. Dreamweaver has inserted a <meta> tag and linked the site-wide media queries file, citrus_mq.css (see Figure 8).

    The viewport <meta> tag instructs mobile devices to use the actual width of the screen (device-width) when applying media queries. Without this tag, most modern mobile devices ignore media queries and scale the desktop version to fit within the screen, making text difficult to read without rescaling.

15. The desktop style sheet is included in the site-wide media queries file, so you need to remove it from the <head> of index.html. Delete the desktop.css <link> tag (shown on line 7 in Figure 8).
16. Select File > Save All Related Files. Don't worry if index.html becomes unstyled. It probably means that Design view is less than 769 pixels wide. The media queries are now being applied to Design view, and there are no style rules in phone.css or tablet.css.
17. Select citrus_mq.css in the Related Files toolbar to inspect the code (see Figure 9).

18. The styles in desktop.css need to apply to all browsers, even those that don’t understand media queries. Also, the rules in phone.css and tablet.css need to override the basic rules in desktop.css. So, you need to move the @import rule for desktop.css to the top of the page and remove the media query (see Figure 10).

19. Save citrus_mq.css. When you click in Design view, the page should be styled again.

Doing all this to style just one page might seem excessive, but the advantage of creating a site-wide media queries file becomes clear in a site with many pages. The next time you open the Media Queries dialog box, the site-wide media queries file is already selected. All that you need to do is click OK. Dreamweaver automatically attaches the file and inserts the viewport <meta> tag. What’s more, if you want to make changes to the media queries, you need to edit only the site-wide media queries file rather than making the same changes in every page.

Dreamweaver adds the site-wide media queries file to your site definition. If you want to change or delete the file, select Site > Manage Sites and edit the site definition. The site-wide media queries file is in Advanced Settings > Local Info.

The next section is for people using Dreamweaver CS5 (11.0.3). Skip to "Optimizing the styles for tablet devices."

Attaching style sheets with media queries in Dreamweaver CS5

The Multiscreen Preview panel in Dreamweaver CS5 (11.0.3) automates the creation of media queries based on widths. All you need to do is to specify the minimum and maximum widths you want to target.

1. Create two blank style sheets called phone.css and tablet.css in the css folder.

   Note: There's an option to create new style sheets in the Multiscreen Preview panel, but it's easier to create them first.

2. Close the style sheets, and make sure index.html is the active document before clicking the Multiscreen button (see Figure 11) in the Document toolbar. Alternatively, select Window > Multiscreen Preview.

3. There's only one set of styles defined at the moment, so all three viewports in the Multiscreen Preview panel display the design optimized for desktops, which is clearly too big for mobile phones and tablet devices.
4. Click the Media Queries button at the top right of the panel to open the Media Queries dialog box.

   You can change the maximum width for the phone and tablet devices by editing the values in the text boxes, but for this tutorial, leave them at the default values of 320 for Small (Phone) and 768 for Medium (Tablet).

5. Select Use existing CSS file for the first two options, and click the folder icon alongside the text box to select phone.css and tablet.css respectively.
6. Set the option for Large (Desktop) to Do not target large screens.

   The settings in the Media Queries dialog box should look like Figure 12. Click OK.

7. Dreamweaver links the new style sheets to index.html, and builds the media queries. Check in Code view to make sure that phone.css and tablet.css have been attached below desktop.css, as shown in Figure 6.

8. To ensure that mobile devices respect the media queries, add the following <meta> tag above the links to the three style sheets:

9. Save index.html.

Until older browsers disappear from the scene, it's best to serve everyone a standard style sheet, and target only the smaller resolutions with media queries. Since everyone gets desktop.css, the other style sheets need to override only those rules that are different. When media queries become universally supported, you will be able to serve a separate style sheet to each type of device.

If you have a dual monitor setup, you can move the Multiscreen Preview panel to your secondary monitor while continuing to work in the Document window on your main monitor. However, even with a dual monitor setup, I find that I usually minimize the Multiscreen Preview panel, and work exclusively in Split view. This is because Design view and Live view are responsive to media queries, applying the styles in the appropriate style sheet depending on the width of the Design view section of the Document window.

1. Move the Multiscreen Preview panel to your secondary monitor or minimize the panel by clicking the double arrows at the top right.
2. Select tablet.css in the Related Files toolbar, and add the following style rule to it:

This overrides the rule the determines the width of the page content.

3. In Dreamweaver CS5.5, open the Window Sizes menu by selecting View > Window Sizes or using one of the other methods described in Part 1 of this tutorial series, and select 768 X 1024 Tablet to resize the Document window viewport.

   In Dreamweaver CS5 (11.0.3), you need to resize the Design view section of the Document window manually until Dreamweaver reflects the narrower width in the layout. 

   The two versions of Dreamweaver behave differently when your resize the Document window. Dreamweaver CS5.5 spawns a horizontal scrollbar, whereas in Dreamweaver CS5, the last menu item drops down to the next level, as does the "News" pod, and the background image to the mission statement protrudes beyond the right edge of the page. Regardless of which version you're using, the objective is the same—to make the layout fit within the narrower viewport.

4. The  images folder contains a medium size version of the logo. Create a new style rule in tablet.css to use the smaller image, and adjust the height of the logo as shown in the following snippet.

   Note: To avoid lengthy descriptions, I'll just show the style rules. If you prefer to use the New CSS Styles and CSS Rule Definition dialog boxes, please do so. Make sure the New CSS Styles dialog box saves the new styles in tablet.css. However, you'll probably find that code hints make working directly in Code view much quicker.

5. Press F5 to refresh Design view. The logo is now more compact, but you need to move the menu higher to compensate.

   Change the top padding on the <nav> element to 110px:

6. To get a more accurate view of the changes you're making to the layout, activate Live view.

   The menu items need to be reduced in width to fit the 700px container, but they also need to harmonize with the background image for the mission statement, which is 669px wide.

   The current styles add 10px of padding to each side, plus a 1px border. Reducing the width of the links in the menu to 114px produces an overall width for the menu of 680px. The font size needs to be slightly smaller, too. Add the following rules:

7. Press F5 to refresh Live view. The top of the page should now look like Figure 14.

8. The maincontent <div> needs to be the same width as the container. You can also remove the top and bottom padding to make it more compact, but you need a small left margin to balance the content with the menu, which is slightly wider than the mission statement and pods below. The revised rule looks like this:

9. Next, fix the mission statement. The background image is smaller (669 x 242), so the width, height, and right padding need to be changed. The font also needs to be smaller. The revised style block looks like this:
   

10. The two pods with images can now be expanded to display the full width of each image (302px). To balance the layout, the "Events" pod needs an extra margin on the left. Give the "Events" <section> an ID, and add the following definitions to tablet.css:

11. The "News" pod is still the same width as the other two, but pushed down below. You need to make it the same width as the other two combined, and add some space between them. The style definition looks like this:

12. Finally, add a small left margin to the footer paragraphs to move them in from the edge:

13. Save tablet.css, and compare the two layouts in the Multiscreen Preview panel (see Figure 15).

The subtle changes allow you to convey the same design concept without cramping the content. The design for mobile phones is still too wide. You'll tackle that next.

The process for restyling the page for mobile phones is very similar. The key to success is making sure that the underlying HTML structure follows a logical linear progression. You can then present the content in a single column, removing unnecessary background images or replacing them with smaller versions. You can set the display property to none to hide certain parts of the page. Although it's beyond the scope of this tutorial, you could also use JavaScript to reveal hidden sections when the user taps on a trigger element.

1. Select phone.css in the Related Files toolbar.
2. The images folder contains a smaller version of the logo. Because the styles in phone.css will be served only to devices with a maximum width of 320px, the width of the container needs to be set to 100%, and the logo centered in case it's viewed on an even smaller screen.

   Add the following style rules to phone.css:

3. In Dreamweaver CS5.5, open the Window Sizes menu, and select 320 x 480 Smart Phone. In Dreamweaver CS5 (11.0.3), resize Design view manually until it's about 320 pixels wide.
   
4. Activate Live view, if necessary, and press F5 to refresh the layout. The page looks a terrible jumble (see Figure 16).

5. The menu buttons are the wrong size and too far down. Add the following style definitions:

The size of the font is increased to make it easier to read on a mobile screen. The width of the links is set to 97%, and the list items are no longer floated, The rule that animated the menu buttons on hover is also neutralized by setting margin-top to zero. Hover is meaningless on touch screens, but some mobile phones, such as BlackBerry, have mouse pointers. Animating the buttons when they're stacked vertically causes them to overlap and is likely to be distracting.

6. Because the height of the logo has been set to auto and the menu items are no longer floated, you need to remove the top margin from the maincontent <div>. At the same time, remove the padding to give the content more space. The mission statement's background image also needs to go, and the text needs to be much smaller. The revised rules look like this:

The width and height also need to be declared to override the values in desktop.css.

7. The remaining style rules set the pods to full width, and nudge the footer items away from the edges.

8. Save phone.css, and compare the three layouts in the Multiscreen Preview panel (see Figure 17).

10. If you don't want to display the images in the pods for the mobile phone layout, amend the last section of styles like this:

This removes the padding from the bottom of the pods and the margin from the bottom of the pod headings. The images are hidden by setting the display property of the podContent class to none . That also hides the contents of the "News" pod, so you need to add an extra rule to set to block the display property of the podContent class that's a descendent of the #news ID.

Figure 18 shows the result.

There you have it: three unified layouts from a single HTML page through the addition of two short style sheets for tablet devices and mobile phones.

Where to go from here

After years of seeming to go nowhere, HTML5 and CSS3 are rapidly becoming a reality, changing the way websites are delivered to an increasingly wide range of devices. There's still a considerable way to go before browsers offer full support for these new technologies, but the enhanced Dreamweaver CS5.5 features mean you can start using them in your websites right now. The only significant barrier to adopting HTML5 is the failure of Internet Explorer 6 through 8 to apply CSS to the new structural elements. However, you can overcome this by using Remy Sharp's JavaScript file, which weighs only 2 KB, or by making sure you apply styles only to HTML 4.01/XHTML 1.0 elements.

Browsers that don't understand CSS3 properties simply ignore them, so using them does no harm. And when users upgrade to a more modern browser, they benefit immediately from the enhancements to your pages. When using CSS media queries, put your main styles in a style sheet that isn't linked via a media query. Otherwise, your site will be unstyled in the large proportion of browsers that don't understand media queries.

You might find the following resources useful in pursuing your exploration of HTML5 and CSS3:

• HTML5 Doctor
• CSS3.info
• Standardista: CSS3, JavaScript, and HTML5 Explained
• HTML5 specification
• CSS3 roadmap
• CSS3 media queries specification