Here are some links to get you started in learning more about CSS3 media queries and responsive web design:

Transcription

1 of 8 The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web By: Sheri German In the last installment of the HTML5 CSS Starter Page series, we completed the Stringendo Studios site. But wait! Not so fast. We only finished the desktop Stringendo Studios site. In this tutorial, we'll begin the process of optimizing Stringendo for mobile devices by using Dreamweaver's CSS Media Queries dialog box and the Multiscreen Preview panel. The Evolution of Browsing Habits In the not so distance past, most people browsed the web on a desktop or laptop computer. Recently, however, browsing the web has expanded to include a multitude of devices. Desktop computers, netbooks, tablets, smart phones, widescreen TVs, and even some gaming devices all come with browsing software. Experts predict that mobile browsing will outpace its desktop counterpart in the next few years. Clearly it is no longer enough to to design a site with one specification in mind. Because of the challenge of designing for multiple screen widths and resolutions, it has become necessary to develop technology to address the problem. The web has had to become responsive to the proliferating variety of browsing devices. A designer named Ethan Marcotte found an analogy in the emergence of "responsive architecture" that designs space for how people use it. He similarly came up with the term responsive web design to describe the practice of using fluid grids, flexible images, and CSS3 media queries to adapt a web page for different browsing experiences. What is a CSS3 Media Query You may have created print style sheets to optimize a layout for when a user printed out the page. If so, you will remember that you added a media type to the style sheet link: media=" print" Media Queries takes this concept one step further. Not only do you specify the media type, but you also create a query based on media features and their values. For example, if you wanted to target screen-based devices such as the iphone that have a maximum width of 480, you could write a media query such as screen and (max-width: 480px) Tip: The most commonly used media feature is width. Others include color, orientation (portrait and landscape), and resolution. You can find a list of media features at Sitepoint ( /css/mediaqueries). Here are some links to get you started in learning more about CSS3 media queries and responsive web design:

2 2 of 8 ( ( /responsive-web-design/) ( Ways to Add Media Queries to Style Sheets As with CSS rules that can be coded inline, embedded within a document, or served within an external style sheet, there are multiple ways to add media queries to web pages: Add directive right to the main style sheet after any styles you need to overwrite to optimize for a particular media. The following rule, written for a smart phone, would remove the float from the sidebar1 div so that it sits in its own space rather than next to the content screen and (max-width: 480px) {.sidebar1 { float: none; } } Use a standard link to a style sheet that is only used if a device matches certain criteria. The following example would match a device that is screen media and has a maximum width of 480: <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="phone.css" /> You can also import a media-based style sheet. Dreamweaver's Media Query dialog box has a radio button to let you link a main style sheet and then import the style sheets for each device into it. You will do an exercise with this dialog box later in the url("phone.css")only screen and (max-width: url("tablet.css") only screen and (min-width:481px) and (max-width:768px); Browser Support There is a chart that lists browser support of CSS3 Media Queries at caniuse.com ( /#search=media queries). Except for early versions of Internet Explorer, support is quite good: Internet Explorer 9 (but not earlier versions) Firefox 6 and up Safari 2 and up, including the critical ios for iphone and ipad Opera 10.6 and up Chrome 10 and up Tip: There is a script at Google Code called css3-mediaqueries.js that makes older browsers such as IE 5+, Firefox 1+ and Safari 2 apply CSS3 Media Queries. (

3 of 8 Now that you have a basic understanding of how media queries work, you're going to do a series of exercises that will help you get to know the Media Queries dialog box and Multiscreen Preview panel. Before you begin, be sure to download the support files at the bottom of any page of this tutorial. Define a site in Dreamweaver, and point to the start folder as the local site folder. (Just to make things even more interesting, there is now a custom font added to the site. Please see my article about adding custom fonts ( if you would like to learn how to safely use fonts other than the old standbys such as Verdana, Georgia, and Arial.) The Multiscreen Preview Panel Dreamweaver has a visual interface that makes it easy to create and view the effects of media queries. In this section you'll use the Multiscreen Preview Panel to see how the Stringendo site looks on various devices. Later you'll use the Media Queries dialog box to set up the queries and style sheets that you'll use to write tablet and phone specific style sheets in later projects. Open main.dwt. from the Templates folder. Click the arrow next to the Multiscreen button at the top of the Document Window. Select Multiscreen Preview. Image 1: The Multiscreen menu Look at the layout in the previews for various screen sizes. You'll see that the phone and tablet views are not really optimized for those screen sizes. Unless the OS of these devices scales the layout, the visitor will have to scroll sideways.

4 4 of 8 Image 2: Viewing the layout in standard phone, tablet, and desktop sizes The Media Queries Dialog Box Now you'll use the Media Queries dialog box to quickly develop media queries for smart phones and tablets. Click the Media Queries button at the right top-side of the Multiscreen Preview window. The Media Queries dialog box opens.

5 Image 3: The Media Queries dialog box 4. Under Write media queries to select the radio button for Site-wide media queries file. Click the Specify button. The Specify Site-wide Media Query File dialog box opens. Tip: Dreamweaver "remembers" the site-wide file for a defined site until you delete it in the Site setup dialog box. If you need to start over with specifying a site-wide document, go to Site>Manage Sites. Click the Edit button in the Manage Sites dialog box. Click the arrow to the left of Advanced Settings to expand its subcategories. Select Local Info, and then delete the style sheet from the Site-wide Media Query file field. 5 of 8 Image 4: You can use an existing file or create a new one in the "Specify Site-Wide Media Query"dialog

6 6 of box Select Create new file from the CSS file dropdown menu. Click the folder icon to the right of the file field. Navigate for the css folder in your site. Name the new file stringendo_mq.css. Click Save. Click OK to exit the dialog box. Back in the Media Queries dialog box, make sure that the checkbox to Force devices to report actual width is selected. This will ensure that devices such as the iphone and the ipad that scale a site to fit their screen sizes actually report their true sizes and conform to the widths in the media queries. Click the Default Presets button. Dreamweaver adds basic queries for phone, tablet, and desktop. The Smart Phone Media Query We're going to modify the phone query width to target smart phones such as the iphone. Select the phone preset. Change its Max Width to 480. Image 5: Select the Phone preset and change its Max Width Under Properties, from the CSS File dropdown menu, select Create new file. Click the folder icon to the right of the field. Browse for the css folder of the site. Name the new file phone.css. Click the Save button. The Tablet Media Query We're going to modify the min width of the tablet query so that it starts where the smart phone max width left off. Select the tablet preset. Change its Min Width to 48

7 7 of 8 Image 6: Adjusting the Min Width of the Tablet preset Under Properties, from the CSS File dropdown menu, select Create new file. Click the folder icon to the right of the field. Browse for the css folder of the site. Name the new file tablet.css. Click the Save button. Removing the Desktop Preset We're going to remove the desktop preset. Instead, we'll continue to use styles.css as the default style sheet within a standard link in the head of the document. Browsers that don't support media queries will understand it and still style the pages for traditional computers. Returning to the Media Queries dialog box, select the Desktop preset. Click the minus button to remove it. We're going to use the styles.css file as the starting point. It is already linked in the head of the document. As long as the tablet and phone CSS documents

8 8 of 8 come after it in the source code, they'll follow all its styles first. We only need to modify a few styles to optimize the layout. Image 7: Deleting the media query for desktop Click OK to exit the Media Queries dialog box. Go to Code View and view the link to the new style sheet in the head of the document. Select File>Save to save the template. Let Dreamweaver update the site pages. Conclusion You've now done the prep work towards creating device specific style sheets. You have CSS Media Queries that designate the minimum and maximum widths at which device style sheets kick in. You have empty style sheets for phone and tablet devices. The next step is to populate those style sheets with rules that will optimize the layout for those devices. Be sure to join me next time as we create the tablet and phone style sheets for the Stringendo Studios web site. Keywords CSS3 Media Queries, Multiscreen Preview, tablets, smart phones, mobile web, idevices All content CommunityMX All rights reserved.