14. Designing for Mobile Devices

1. Open news_finished.html in Design view. Select Live view.

2. Choose 768 x 1024 Tablet from the Screen Size pop-up menu at the bottom of the document window.

Note how the Tablet Size Resolution Switcher appears selected at the bottom of the document window. The document window resizes to 768 pixels by 1024 pixels. The content changes and adapts to the new dimensions. A new header image is visible, and the text and headings resize to fit the available space.

3. Click the Tablet Size () Resolution Switcher to return to the original screen dimensions.

4. Drag the divider at the right edge of the document window to the left.

Note how the display in the Screen Size pop-up menu changes to show you the current height and width of the Design view window.

5. Resize the document window from full size down to approximately 300 pixels in width. Observe how the page reformats interactively as it resizes to desktop, tablet, and phone dimensions.

Note how the design and appearance of page components change based on the size of the window.

6. Preview the page in a browser.

7. Resize the browser window from full size down to approximately 300 pixels in width. Observe how the browser window mimics the display in Dreamweaver.

The browser display mimics the same behaviors you witnessed in Dreamweaver.

8. Close the browser. Close news_finished.html.

This exercise has demonstrated some of the ways you can adapt your web design to the environment of smart phones and other mobile devices.

Today, the chances that some or all your visitors are using a smart phone or tablet to access your site are increasing exponentially day by day. Two basic tools—media type and media query—help you adapt your site and content to this changing landscape; they enable browsers to sense what type of device is accessing the webpage and then load the appropriate style sheet, if one exists.

In all, CSS2 included ten individually defined media types.

In Lesson 5, you created the overall design of the website as it should appear on a standard desktop computer display based on the screen media type. Then, you learned how to adapt the existing screen styles to build an alternate style sheet for use with print applications using the print media type property.

While the media type property works fine for screen and print, it never really caught on with browsers used on cell phones and other mobile devices. Part of the problem is the sheer variety of devices in all shapes and sizes. Add to this smorgasbord equally diverse hardware and software capabilities and you’ve produced a nightmare environment for the modern web designer. But all is not lost.

How your site deals with smart phones and mobile devices will depend on whether you’re adapting an existing site or developing a new one from scratch. For an existing site, you will first have to create a basic method of treating the underlying design of the site’s main components. Then, you’ll have to work through each page one at a time to assess existing components individually—like images and tables—that do not inherently adapt to the specific environment.

For new websites, the typical approach is to build in the adaptability as you create the overall design, and then build each page to achieve maximum flexibility. In either case, to truly support a mobile design some site components may need to be replaced, left out of the final design altogether, or swapped out live by JavaScript or by the media query itself.

Since the GreenStart site has already been completed, we’ll opt for the first method. In Dreamweaver CC, you can proceed in a few ways. You can create the style sheets first and then attach them through a media query; you can create the media query first, then create style sheets later; or you can build the design as you go, live within Dreamweaver. To help demonstrate how media queries work, in this exercise, we’ll build the styles interactively.

1. Open news.html in Design view.

This page is typical of most of the content in the GreenStart site. You should start working with a page that represents the majority of your website content. When you complete the basic design, you’ll then have to adapt content that doesn’t work well in a mobile environment, such as tables, web video, and animation.

To see how the page reacts (or doesn’t) to a mobile environment, you can simply adjust the width of the Dreamweaver document window. The program is configured to respond using media queries to changes in the document window dimensions. In other words, what you see happening in Design view should be what happens on an actual device using the same dimensions.

2. Drag the edge of the document window to the left to make it narrower.

Dreamweaver also offers a built-in feature that can adapt the document window to precise dimensions.

3. Click the Tablet Size (768 x 1024) () Resolution Switcher.

The window is resized to 768 pixels by 1024 pixels. The window dimensions are displayed interactively by the Screen Size pop-up menu. Watch as the dimensions change based on your selections.

4. Click the Mobile Size (468 x 800) () Resolution Switcher.

The window is resized to 468 pixels by 800 pixels. As the window gets smaller, the only thing changing on the screen are the dimensions displayed at the bottom.

Since the GreenStart page is designed to use a fixed width, the changes to the document window have no effect on the design. Instead of adapting to the smaller window, the document merely displays a scroll bar you can use to view the obscured content.

The display within Dreamweaver may not give you an accurate depiction of what will happen on a mobile device. On an actual cell phone or tablet, the resulting display depends on the manufacturer of the device or the software you are using. Sometimes the device will scale a page down to fit, displaying a miniature version of it, or you may see it as shown in Dreamweaver: full size with a scroll bar. In either case, the experience is suboptimal. A better option would be to develop a style sheet that could adapt the content more equitably to the new environment, making it easier to read and access. Luckily, this is easy to do in Dreamweaver CC.

Once you know the size, you then adjust the display within Dreamweaver to match it. Besides the three media preset options, Dreamweaver also offers several other optional dimensions and the ability to set your own sizes.

1. From the Screen Sizes pop-up menu, choose 320 x 480 Smart Phone.

The document is now displayed in a window 320 pixels by 480 pixels. This is the standard dimension of an iPhone oriented vertically. To create a custom media query, you need to access the @Media pane in the CSS Designer. You can add a media query to an existing style sheet or create a whole new style sheet for each device or category, such as phone, tablet, and desktop. For our purposes, we’ll just add the media query to our existing screen-based style sheet.

2. In the Sources pane, select mygreen_styles.css.

3. In the @Media pane, click the Add Media Query () icon.

The Define Media Query dialog box enables you to build the query interactively. The first query you’re going to build will style smart phones 480 pixels wide and smaller.

4. Click to open the first pop-up Conditions menu.

This menu provides a list of conditions—such as media-type or minimum or maximum width—that need to be met before the query can be applied.

5. Open the second pop-up menu.

This menu provides a list of options for each condition. For example, if media is selected in the first menu, the second menu supplies the valid media-types that can be used, such as screen, handheld, print, and so on. When you choose an option from either menu, it is added to the query statement, which is displayed at the bottom of the dialog box in the Code window. After you click OK, the media query notation will then be added to one of two places. If you choose to create separate linked style sheets, the media query will be added to the <head> section of the webpage. If you choose to add the media-queries to an existing style sheet, the media query will be inserted within the style sheet itself.

As you can see, Dreamweaver has already created the first condition: media screen, which means the style sheet will apply only to devices and browsers that conform to “screen” media types. Next, you specify the width of the device.

6. Move the cursor to the right of the second condition menu.

A plus sign icon appears enabling you to add a new condition.

7. Click the Add Condition () icon.

A new set of condition pop-up menus appears. Note the word AND is added after the first condition. This indicates that both the first and second condition must be met before the query will be applied.

8. Select max-width from the first menu.

A text field appears where you can enter the maximum width supported by this query.

9. Enter 480px.

If you intend to create a separate media query for smaller devices, you could also enter the minimum width for this query. Instead, we’ll just use this query to format all devices 480 pixels wide and smaller.

10. Click OK.

The query statement screen and (max-width:480px) now appears in the @Media pane, which reflects the markup added to the actual style sheet.

11. In the Referenced Files list at the top of the document, select mygreen_styles.css.

The document window splits, showing the contents of the style sheet on the left side.

12. Scroll to the bottom of the style sheet and examine the media query statement.

The text @media screen and (max-width:480px){ } appears at the bottom of the style sheet. For each media query, the applicable rules must be added within the braces { } at the end of the query. When creating CSS rules to style smart phones, be sure to select the appropriate media query first; otherwise the rule will apply to the page in general. In the next exercise, you’ll learn how to add CSS rules to your media query.

Before we can make the needed changes, the first step is to identify the rules controlling the basic structure of the page, such as the header, footer, sidebar, and main content areas. In some cases, you will have to create new rules, but more frequently you’ll need to reset rules applied by the main style sheet. You can identify these rules with the CSS Designer and techniques you’ve used throughout the book.

1. In news.html, insert the cursor in the Green News heading. Examine the rules displayed in the CSS Designer Selectors pane and the tag selectors along the bottom of the document.

The CSS Designer displays the rules responsible for formatting the heading. The tag selectors reveal the underlying HTML structure. The <h1> element is contained within <article.content>, which appears within an editable region controlled by the default site template. The remaining tag selectors for the main components of the page are actually dimmed, indicating that they are locked and uneditable. You can confirm that the top of the pages is undeditable by simply positioning the cursor over the header, or the horizontal or vertical menus, where you will see the locked () icon.

Although Dreamweaver restricts you from editing the HTML, you can still create and edit any CSS rules using any of the template-based site pages by just using Code view. But, working initially in the site template to build and troubleshoot your mobile styling will be faster and easier.

2. Open mygreen_temp.dwt from the Template folder in Split view. Select 320 x 480 Smart Phone from the Sizes pop-up.

The template appears in the document window resized to 320 pixels by 480 pixels. In the template all the boilerplate content is unlocked; you’ll be able to insert the cursor in the document <header> and select any element within the layout.

3. Insert the cursor in the <header#top> element. Examine the list of selectors displayed in the CSS Designer. Note the specifications displayed for each rule, especially any that apply width, height, and positioning commands.

4. Repeat this process with the horizontal menu, vertical menu, main content, and footer sections of the page.

As you build a site and add pages, you should be growing more familiar with the basic structure and the CSS rules contributing to the overall design, and especially the main components. Using the CSS Designer or the Code Navigator, identifying the rules that format these components is a simple matter, which include but are not limited to:

• .container

• header

• #logo

• .top-nav

• .sidebar1

• nav li a:link, nav li a:visited

• .content

• footer

Part of the trick to creating style sheets that work for multiple environments is deciding how you want to display text and graphics on screens of different sizes, as well as deciding which elements you want to display and which you want to hide. For example, the current page features a multicolumn design that would be hard to view and use on the small screen of a cell phone. One option is to simply linearize the layout by removing the float properties from the main elements and adjusting the width to fit, to make one single long column instead of two.

Let’s start with the width of the entire page and then work down to the subcomponents that make up the page. By now you should know that the width of the page overall is set by the .container rule.

5. In the Sources pane, select mygreen_styles.css.

In the @Media pane, select screen and (max-width:480px).

In the Selectors pane, click the Add Selector () icon.

The .container selector appears in the CSS Designer. It’s also added to the style sheet within the media query notation.

6. Press Enter/Return to complete the selector name. In the Properties pane, create the following specification: width: 100%

By using a percentage-based measurement, the page will scale automatically to fit devices 480 pixels and smaller, allowing it to adapt to multiple devices with a single media query.

The .container rule also formats the faux column on the template. Since the phone design will feature only one column, you won’t need the background-image, and you can turn it off.

7. Add the following property to the .container rule: background-image: none

When the new rule is completed, it will apply immediately to the page and its components. You may have noticed that the .container rule you just created is a duplicate of one already in the main style sheet. Normally, if you inserted an identical rule into the style sheet you’d have to worry about conflicts with existing styling, or other unintended consequences. But, the media query precludes such conflicts. The new styles will be employed only when the browser or device meets the criteria established by the query. But keeping the rules all in one sheet pays some side benefit: You can still use inheritance when styles remain the same between devices. This means you don’t have to provide an entire style sheet each time, only the rules needed for the specific device or browser.

After the width was changed, you may have noticed that the placeholders for the headings and text appearing in <article.content> dropped down below the content displayed in <sidebar1>. The new rule has reset the size of the page to 100 percent of the screen width. Without a predefined width of 950 pixels, there’s no room for the <article> element or its content so it moves down the page until it can find space to display.

The next component to deal with is the butterfly logo. It’s too big to use on a small screen, so let’s hide it.

8. Select the butterfly image. Select the <div#logo> tag selector.

9. If necessary, select screen and (max-width:480px) in the @Media pane.

10. Create a new #logo selector with the following specification: display: none

The <div#logo> vanishes from the layout. Next, let’s load a different background image in the <header> element.

11. In the mobile media query, create a new header selector. Add the following properties:

Click here to view code image

background-image: banner-phone.jpg
height: 90px

The new background image takes up much less space than the normal image.

1. Insert the cursor in the About Us link.

You can see by the CSS Designer display what rules format the horizontal menu. The most important is: .top-nav.

2. Create a new .top-nav selector in the mobile media query. Add the following properties:

text-align: center
padding-top: 5 px
padding-right: 0 px
padding-bottom: 5 px
padding-left: 0 px

The next major component we have to adapt is the vertical menu. The menu is part of <div.sidebar1>. To make the menu work in this environment, you’ll have to adjust both the sidebar and the menu itself. When making an element wider, always start with the parent element.

3. In the mobile media query, create a new .sidebar1 selector.

4. Add the following properties:

width: 100%
float: none

You may notice that the sidebar expands to fit the screen but the menu has a width specification of its own and has remained at the original size.

5. Insert the cursor into any links within the vertical menu. Examine the CSS Designer display to identify the rule controlling the width of the menu.

The nav li a:link, nav li a:visited rule applies a fixed width of 180 pixels.

6. Add a new nav li a:link, nav li a:visited rule with the following properties:

width: 100%
text-align: center
padding-top: 5 px
padding-right: 0 px
padding-bottom: 5 px
padding-left: 0 px

The text is centered and the menu now adapts nicely to the smaller screen size. The remainder of the sidebar holds a picture and caption that aren’t essential and can be hidden. This content is contained in an <aside> element.

7. Add a new aside rule with a display: none property.

The image placeholder and the caption disappear. Don’t be confused by this CSS-based sleight of hand; although the element doesn’t appear on the screen, the code is still downloaded to the phone. Substituting background graphics and hiding content are only two methods of dealing with the smaller screens of smart phones and tablets. Some developers don’t agree with these methods.

They believe downloading pages and content built for desktop computers unfairly burdens the bandwidth and storage capabilities of these devices. Many think that a better way is to build a companion or duplicate website optimized for these devices. Such mobile-optimized sites contain only content designed specifically for smaller screens. See the sidebar “Mobile-ready vs. mobile-optimized” for more information on these two concepts.

1. Insert the cursor in <div.content> and identify the applicable rules in the style sheet.

2. Add a new .content rule with the following properties:

width: 100%
float: none

The text and headings are designed to be viewed on a full-sized screen. They look too big on the small screen.

3. Add the following rules and properties:

Click here to view code image

.content h1 { font-size: 150%; padding-left:10px; }
.content section h2 { font-size: 130%; padding-left:10px; }
.content section h3 { font-size: 110%; padding-left:10px; }
.content section p { padding-left:10px; }

Fonts and colors are still being inherited from the main style sheet, but these rules will maximize the amount of text that can appear in the main content section without wasting space on the cell phone. Also we can adjust the content of the <footer> element.

4. Add the following rule and properties to the media query:

footer { font-size: 80%; padding-left:10px; }

The basic design of the media query is complete.

5. Save all files. Update child pages, if necessary.

All the changes have been made to the external CSS mygreen_styles.css file and not to the template. So, the Update Pages dialog box should not appear when you save the files after creating the media query. But allowing Dreamweaver to update child pages when prompted is a good practice in case you missed some essential change made to the template.

You’re ready to test the new media query now.

1. Click the Desktop Size (1000w) () Resolution Switcher.

The document window changes to 1000 pixels wide. The media query is no longer in effect, and the page returns to the original design. No trace of any changes you made should be visible.

2. Click the Tablet Size (768 x 1024) () Resolution Switcher.

The document window changes to 768 pixels by 1024 pixels. Since the page is larger than 480 pixels, the media query has not kicked in.

3. Click the Mobile Size (468 x 800) () Resolution Switcher.

The document window changes to 468 pixels by 800 pixels. This display invokes the media query, and the page components resize and reformat as specified. To see how your media query works on smaller screens, you’ll have to use some manual intervention.

4. Click the Mobile Size (468 x 800) icon again.

Clicking the icon a second time turns off the Mobile Size screen preview mode. The document window resizes to the full dimensions of the program interface, allowing you to manually resize the window.

5. Drag the divider at the right edge of the document window to the left to make it narrower. Watch the screen size pop-up menu display; it displays the current size of the Design view window. Keep dragging the divider until the width becomes narrower than 480 pixels.

When the screen size reaches 480 pixels, the preview of the page switches to the design applied by the media query, which controls the basic design for all screens 480 pixels wide and smaller.

6. Drag the divider to the right to make the window wider than 480 pixels.

As soon as the screen hits a width of 481 pixels, the display reverts back to the default style sheet specifications.

The basic design and formatting of all main page components are controlled by the media query. But, to see web fonts and other types of dynamic functionality, you’ll have to switch to Live view.

7. Click the Live view button, and repeat steps 5 and 6 to test the media query. Test the interactivity of the vertical and horizontal menus while the page is displayed at 480 pixels or less. Look for any inconsistencies in the behaviors or formatting of all components and placeholders.

Background images and web fonts appear and display properly. The page resizes and reformats as before. The menus react as they do at normal size.

Congratulations, you’ve completed your first media query. Unfortunately, you’re not finished. Once the basic layout has been adapted to the new media, you will need to test each page of the site to determine if any page components or content also need to be modified by specific CSS rules.

For example, pictures and tables are especially problematic in adapting websites to mobile environments. Normally, pictures and tables have fixed widths and heights designed to display in a desktop browser. Fixed dimensions don’t automatically scale or adapt to changes in the viewport. Obviously, specifying fixed sizes won’t work for multiple environments, but what’s the alternative?

Essentially, he advocates not applying fixed dimensions to images, but setting their width based on the relationship of the image to its containing element. That way if the containing element is set to adapt to different devices, so will the images. The main downside to this method is that it requires some math.

1. Close the template. Save any changes and update child pages.

2. If necessary, switch to or open news.html. Switch to Design view and display the page at full size in the document window.

3. In the article.content element, select the first image (city.jpg) and note its current dimensions: 200 pixels by 335 pixels.

4. In the Property inspector, select the dimensions and delete them.

Don’t worry, Dreamweaver and all the modern browsers can determine the actual size of the image and display it properly even without the dimensions supplied by the code.

5. Select the image and note the names and order of the tag selectors.

The image was inserted in a <p> element, which is part of <section> appearing within <article.content>. To apply a responsive attribute to the image, you first have to determine which, if any, of these parent elements has a formatted width.

6. Examine the CSS rules to determine the width of the nearest parent containing the image. Start with the <p> element and then work to the left toward <body>.

No width is applied to <p> or <section>. The element <article.content> has a width of 770 pixels. Now for the math part.

7. Divide the width of the image by the width of the parent element:

200 ÷ 770 = .25974026

The result is the width of the image as it relates to the width of the parent element at full size. Because you are specifying the width of the image as a percentage, the browser can automatically scale the image properly each time the container adapts to a new media. One way to apply this new dimension is via an inline CSS style.

8. If necessary, select the city.jpg image in Design view. Switch to Code view.

The image element is selected in Code view.

9. Locate the opening <img> tag for the image, and insert the cursor after the last attribute.

10. Press the spacebar to insert a new space, and type style="width:25.974026%"

By using the entire fraction, you are enforcing the relationship with the most accuracy. Don’t worry, the browser can handle the math.

11. Switch back to Design view. If necessary, click in the Design view window to refresh the display.

The display may appear odd in Design view, but don’t worry, it will appear correctly in Live view and, more importantly, in your browser.

12. Select Live view.

The image displays at the correct width now; the height will resolve itself automatically. Since most elements don’t have a specific height, there’s no easy way to create this dimension—and luckily, there’s no need to.

13. Choose 320 x 480 Smart Phone from the Screen Size pop-up menu.

The image scales down to approximately 25 percent of the new window, and the best thing is that the new setting will work at any dimension you support with a media query.

14. Switch off Live view. Select the next image in the layout (farmersmarket.png) and observe its dimensions: 300 x 300. Delete both settings.

15. Divide the image width by the container width, as before:

300 ÷ 770 = .38961039

16. Switch to Code view, and insert the following code within the image reference:

style="width:38.961039%"

The image resizes.

17. Repeat steps 14 through 16 with the recycling.jpg image.

18. Save all files.

The news page is complete and fully responsive, but this is only the start. You’ll have to go through the entire site and adapt all the images using the same method. After addressing the images, you also have to adapt other page components, like tables, videos, animation, and even interactive elements, like the jQuery Accordion.

1. Open travel.html in Design view. Display the page at full size.

The page contains an Edge Animate banner ad, a web video, and a table. All the components were designed for a desktop environment.

2. Choose 320 x 480 Smart Phone from the Screen Size pop-up menu.

The document window resizes to the selected dimensions.

3. Select Live view. Observe each of the page elements to see how they appear in the document window.

None of the components adapts to the smaller screen. The animation and video play normally but the visitor would miss most of the content because of the window size.

Although you could create an animation that would scale responsively to fit the screen, you’d have to do it in Edge Animate itself. Nothing can be done inside Dreamweaver to adapt this animation without a lot of unnecessary work. If you can’t get a new responsive animation to replace, the best thing to do is to hide the animation altogether.

4. Shut off Live view and select the <object#EdgeID> tag selector.

The document window remains at the dimensions 320 pixels by 480 pixels.

5. In the Sources pane, select mygreen_styles.css. In the @Media pane, select screen and (max-width:480px).

6. Create a .content #Edge rule with the property: display: none

The animation disappears from the document window.

7. Choose Full Size from the Screen Size pop-up menu.

The animation appears in the full-size layout. The media query will hide the animation on the smaller screen but display it properly on a desktop computer.

The next item to deal with is the HTML5 video component. In most cases, you can deal with a video the same way you adapt images.

8. Select the video placeholder in the layout. Observe the dimensions of the video element.

If you divide the video width (300 pixels) by the width of <article.content>, the result is .54948052.

9. Delete the width and height specifications for the <video> element, and add the following attribute: style="width: 51.948052%"

10. Save all files.

11. Select Live view and test the video in a full-size window and a window sized at 320 pixels by 480 pixels.

The video scales to fit both windows and plays as normal. Scaling is only one method of dealing with video. Designers are still experimenting and developing new ways of using or hiding video and animation in responsive ways. For some more ideas on how to work with video, check out these links:

• http://tinyurl.com/fluid-video-1

• http://tinyurl.com/fluid-video-2

• http://tinyurl.com/fluid-video-3

The last component you need to deal with is the table.

The table features five rows and two columns. In the second column, four rows are merged into one cell to accommodate an image advertising the GreenStart Eco-Tour of Paris. In Lesson 10, you created nifty interactive rollover effects for each of the links to swap the advertisement for a specific image of the four stops on the tour. The image is 250 pixels wide, and the table has a formatted width of 700 pixels. Scaling the table by itself won’t reproduce the same effect on a smartphone that we see on a larger display, and the rollover effects won’t work properly on touch screens anyway, since there’s no mouse to roll over the link. In cases like this, you need to be ready to ditch a design element to produce a more effective experience for the mobile user.

1. If necessary open travel.html in Design view. Click the Mobile Size 480 x 800 () Resolution Switcher.

2. Scroll down below the video element and insert the cursor in the table.

Select the <table> tag selector.

First, you should deal with the overall width of the element. To assist in the job of controlling table styling, assign either an ID or class attribute to each table. An ID allows you to target tables individually, whereas with class attributes you can control several tables at once.

3. Insert the cursor in the ID field of the Property inspector. Enter travel, and press Enter/Return.

The tag selector is now <table#travel>.

4. In the screen and (max-width:480px) media query, create a #travel rule.

5. Add the property: width: 90%

Now we’ll deal with the second column containing the image. Since we don’t need the rollover effects on a mobile device, just hiding the column completely will be best.

6. In the screen and (max-width:480px) media query, create a .hide rule.

Creating a rule with a generic name like this will allow you to use it anytime to hide components within the media query and elsewhere.

7. Add the property display: none

8. Select the image in the right column of the table. Select the <td> tag selector.

9. In the Property inspector, choose hide from the Class menu.

The tag selector displays <td.hide>, but the image still displays in Design view. In this case, to see the final effect you will have to view the page in Live view.

10. Save all files. Select Live view. Observe the content of the entire page.

The second column in the table and the image disappear. The table displays now in a single column of text.

You have learned how to adapt or hide various types of HTML content for responsive designs, such as images, video, animation, and tables. The jQuery Accordion is the only component remaining yet to be adapted.

1. Open tips.html in Design view. Choose 320 x 480 Smart Phone from the Screen Size pop-up menu.

The jQuery Accordion itself has no problems adapting to the smaller document size, but the size of the text seems a bit large, and the text in the bulleted list is indented too far.

2. Select mygreen_styles.css in the Sources pane. Select screen and (max-width:480px) in the @Media pane. Create a new rule: .content Accordion1

3. Add the property: font-size: 80%

The text within the tabs and content panes scales to 80 percent of its original size.

4. Create a new rule.content Accordion1 ul with the following properties:

padding-left: 15px
padding-right: 15px

The bulleted list within the Accordion expands to fill the content pane more effectively.

5. Save all files

The basic design and major content elements have been adapted to the new media query. Depending on how much detail you want to delve into, there are other aspects of the design you can address. Some suggestions include removing excessive margins and paddings, reducing the size of text and headings, changing the color of all the text to black (or another legible color), and so on. When you’re finished, be sure to save all the related files and use the Screen Size interface to test the new style sheet in all appropriate screen dimensions.

The first step is to set up the design interface for the tablet design.

1. If necessary, open news.html.

2. Click the Tablet Size (768 x 1024) () Resolution Switcher.

The screen resizes to show the default size of the first-generation iPad.

3. In the Sources pane, select mygreen_styles.css. In the @Media pane, click the Add Media Query () icon.

The Define Media Query dialog box opens with the screen condition already selected.

4. Click the Add Condition () icon.

A new line appears below the media: screen condition.

5. Select min-width from the first condition pop-up menu.

6. Enter 481 px.

This entry will allow the tablet media query to format devices larger than 480 pixels.

7. Click the Add Condition () icon.

A third condition is added to the media query.

8. Select max-width from the first menu.

A text field appears where you can enter the maximum width supported by this query.

9. Enter 768 px. Click OK.

Next, establishing the width of the tablet design is a good idea, because everything else flows from it. As with the base design, let’s use a fixed width. It is not an ideal decision to use a fixed width, but few devices fall between these dimensions. This media query is really intended as a catch-all style sheet to format tablet devices held in portrait mode, although it will work for any device supporting resolutions between 481 and 768 pixels.

10. Create a new .container rule with the property: width: 750px

11. Create a new .content rule with the property: width: 570 px

12. Create a new header rule with the following properties:

background-image: banner-tablet.jpg
height: 90 px

13. Save all files. Test the new style sheet in Live view and your favorite browsers as described earlier.

That’s it. The portrait version of the tablet style sheet is finished. Since we didn’t have to modify <div.sidebar1>, feel free to tweak the design of the tablet style sheet as much as you want. When you rotate the tablet into landscape mode, the standard desktop style sheet will kick in. Since there is no predefined style sheet for screens wider than 768 pixels, the device should use the default style sheet and merely scale the page down to fit the screen. The landscape screens should be able to support the default styles, but feel free to create and adapt custom media queries for as many resolutions as you think necessary.

Edge Inspect is designed to mirror the screen display of your laptop or desktop browser via Bluetooth on a variety of mobile devices. Just download Edge Inspect to your computer and install the app. Additionally, a free companion app is available for most smart phones and tablets and must be installed on each device before you begin. Then, check out how your mobile web design responds on an actual phone or tablet without having to upload any files to the Internet.

All you need to do is launch Adobe Edge Inspect and the Google Chrome browser on your desktop or laptop computer. Then launch Edge Inspect on one or more mobile devices, and sync them all to your computer by Bluetooth using the Chrome plug-in. Switch to Dreamweaver and open the file you want to test. Choose File > Preview in Browser, and choose Google Chrome from the list. Activate the Inspect browser () plug-in and the next thing you’ll see is the sample page mirrored on all your mobile devices.

Once your mobile devices are synced to your computer, they will mirror the browser display and load any pertinent CSS styling. If you rotate the device to change the width, the appropriate media query will kick in and alter the display as specified.

Congratulations, you successfully developed a mobile-enabled website design. Although it’s hard to imagine what amazing new features may appear, Dreamweaver clearly continues to be at the forefront of web development. With support for media queries and other responsive techniques, the program continues to innovate.

• Adobe: http://tinyurl.com/adobe-media-queries

• W3C Consortium: http://tinyurl.com/w3c-media-queries

• Smashing Magazine: http://tinyurl.com/media-queries-smashing

2. How do media queries target a specific device or screen size?

3. What can you do with the screen resolution switchers?

4. Do you have to worry about CSS inheritance when using media queries?

5. What happens to the webpage display if you rotate the device?

6. What function does Edge Inspect perform?

2. Media queries include a logical expression that instructs the browser what style sheet to load, based on screen and device characteristics.

3. You can instantly switch the Dreamweaver document window to mobile, tablet, and desktop display sizes to test specific media queries.

4. Yes. If all style sheets are not controlled by media queries, styles may be inherited.

5. Media queries are a live function that will load the appropriate styles, based on a constant interrogation of the browser and device.

6. Edge Inspect is a new Creative Cloud app that allows you to instantly test mobile style sheets by linking your desktop computer to various mobile devices via Bluetooth.