Adobe Creative Cloud

December 4, 2015 /Dreamweaver Interface /

Develop a Responsive Design with the Visual Media Queries Bar

Learn how to use the Visual Media Queries bar to create pages that will look great on every device

What do I need?

vmqb_project_files.zip

The implementation of responsive design in standard website development is accepted practice today. The tools for designing responsive website have improved dramatically over the last several years. Adobe Dreamweaver led the charge, introducing Fluid Grid Layouts, then Bootstrap and Starter Templates to serve as guides for creating responsive pages. Regardless of the tools you use or the approach you take, you must first understand media queries, the backbone of responsive design.

Media queries is a set of CSS rules used to creaate responsive websites by designating maximum and minimum page widths for different devices or media types used to view web pages.  You can add media queries to your existing style sheets by adding @media rules to a style sheet in Code view or by adding @media rules in CSS Designer. Another option is to create and link separate style sheets to your pages, one for each defined size.

The Visual Media Queries bar is a green toolbar that appears by default under the Document toolbar in all workspace layouts. It is a visual tool that represents the media sizes defined in a website style sheet. You use it to check your page designs as they appear in different media sizes as you fine-tune the page layouts.

mediaqueries 1

Note: To hide the Visual Media Queries bar, select the Hide Visual Media Queries bar button  lines  on the Document toolbar. Select the button again to show the Visual Media Queries Bar.

Step 1 of 6

Create a website and open a page

Download the vmqb_project_files file, then extract the files.

Create a new website in Dreamweaver named Visual Media Queries Bar tutorial with the vmqb_project_files folder set as the local site folder.

mediaqueries 2

Select Advanced Settings, then browse to select the assets folder as the Default Images folder.

mediaqueries 3

Select Save, then select Done to close the Site Setup dialog box.

Open the file costa_rica.html from your vmqb_project_files folder, then change to Live view if necessary. I created this page using the Dreamweaver starter template “Blog post”.

Step 2 of 6

View the Visual Media Queries bar components

There are three rows in the Visual Media Queries Bar. The first row displays media queries with only maximum widths specified. The media queries in this row have a green background. The maximum values for the breakpoints appear at the right end of the media query. A breakpoint is a specified value where a page will “break” or readjust its contents to conform to a wider or narrower width. For example, a page with two columns may reduce to only one column when viewed on a device with a width narrower than the breakpoint width value.

When you hover over a media query, the green background fills with slashes and a tooltip displays the breakpoint(s). When you select a media query, it turns a darker green, as shown in the figure below. The page width snaps to the boundary set by the selected media query, also shown in the figure below.

mediaqueries 4

The second row in the Visual Media Queries Bar displays any media queries with both minimum and maximum values specified. The media queries in this row have a blue background. The minimum and maximum values for the breakpoints appear at the opposite ends of a media query. In the figure below, there are two media queries with both minimum and maximum values. The selected media query shown below has a minimum value of 992 pixels and a maximum value of 1199 pixels.

mediaqueries 5

The last row in the Visual Media Queries Bar displays media queries with only minimum values specified. The media queries in this row have a purple background. The values for the breakpoints appear at the left end of the media query.

mediaqueries 6

Note: If you right-click a media query on the Visual Media Queries Bar, then select Go to Code, a popup will appear with the name of the style sheet, line number, and properties for the selected media query.

mediaqueries 7

Select the line of code, then Code View (or the code window in Split View) will open with the corresponding code for that media query selected.

Step 3 of 6

Preview a page with the Visual Media Queries bar

The Scrubber is a tool used with the Visual Media Queries bar. It appears at the right edge of an open page unless the page fills the full width of the document window. Use the Scrubber to adjust an open page’s width. Slowly drag (scrub) the scrubber to the right or left to see how the page “breaks” or repositions the content as it adjusts to a new screen width between breakpoints, as shown below. The dimensions of the page display under the ruler to show the position of the Scrubber as it moves.

mediaqueries 8

Now we will use the Visual Media Queries bar and the Scrubber to view the costa_rica page with two different media queries.

Select the first media query on the Visual Media Queries bar and notice how the page content resizes to fit the specified page width, using the maximum width of 480 pixels.

mediaqueries 9

Select the second media query on the Visual Media Queries bar and notice how the page content resizes to fit the new page width, using the maximum width of 769 pixels.

mediaqueries 10

Next, we will use the Scrubber to change the page width in the Document window. Using the Scrubber to change the page width allows you to keep an eye on the ruler to evaluate how you might want to modify the existing media queries or add a new breakpoint. Watch the ruler as you drag across the screen, keeping an eye on individual page elements to see how they adapt as the width changes.

Select the first media query on the Visual Media Queries Bar, then drag the Scrubber to the right.

mediaqueries 11

Notice how the menu bar moves from below the image up to the right of the image as it crosses the 480-pixel breakpoint. A vertical line from the ruler to the media query tracks the position of the edge of the page and the page dimensions appear under the vertical line.

mediaqueries 12

Experiment with the scrubber by moving it both to the left and to the right.

Double click the text Double click to fit width on the right side of the Document window.

mediaqueries 13

The page resizes to fit the full Document window. (Your screen size will vary according to the width of your Dreamweaver program window.)

Note: You can also double click anywhere in the grey area to resize the page to fill the Document window.

mediaqueries 14

 

Step 4 of 6

View code for media queries

The code for media queries resides in a stylesheet. It can be in a separate stylesheet, or part of a single stylesheet in a website. In the website you have open, there is one stylesheet: blogPostStyle.css.  This stylesheet contains both the styles used to format all content regardless of device size or type of media used to view it and the media queries. The styles used to format the page content regardless of screen size are in the first three hundred or so lines of code. The rest of the code is for the media queries, beginning with the styles used for a page in tablet view and ending with the styles used for a page in mobile view.

As you hover over the beginning of a line of code, small triangles appear. These triangles indicate blocks of code. If you select a downward pointing triangle , you will collapse that block of code. A triangle pointing sideways indicates a collapsed block of code. If you select a triangle pointing sideways, you will expand that block of code.

A collapsed block of code also has a mediaqueries 15symbol after the first line of collapsed code, another indicator of a collapsed block of code. Unlike the sideways triangle, this symbol is visible when you are not hovering over a line of code. You can also tell by the gap in line numbers. Collapsed code is not visible until expanded.

mediaqueries 16

Take a few minutes to practice expanding and collapsing blocks of code.

Another way of looking at media query selectors is with CSS Designer. When you select a line of code in Code View, that selector appears highlighted in the Selectors pane in CSS Designer. The Sources pane shows the name of the active stylesheet, blogpostStyles.css. The @Media pane shows the media queries associated with that line of code. In the figure below, the #mainContent selector applies to both media queries. It is part of the first media query, and continues to apply to the second media query since there is no min-width property specified. Notice the green bars in front of the media queries. They are color-coded to match the bar colors on the Visual Media Queries bar.

Note: You can make changes to selector properties, add selectors, and delete selectors both in Code View and in CSS Designer.

mediaqueries 17

Open CSS Designer and float it next to the page open in Code view.

Select a selector in Code view, then view that selector’s properties in CSS Designer.

Note: Select the All button mediaqueries 18 and Show Set Properties button mediaqueries 19   in the CSS Designer toolbar if you do not see the selected rule’s properties listed.

Step 5 of 6

Modify media queries

It is quite easy to modify a breakpoint in a media query. One way is to change the @media rule min-width or max-width values in either Code View or in in the CSS Designer Properties pane. Another way is to drag a resizing handle in the Visual Media Queries bar to visually modify a breakpoint. The resizing handles are white rectangles on the end of a media query with either a min-width or max-width value. There are two resizing handles on media queries with both a min-width and max-width value, one on each end.

mediaqueries 20

Select the first media query, drag the resizing handle to the left, then drop it at about 462 px. You will see a message that appears telling you that you updated the media query.

mediaqueries 21

Select the media query again, then notice that the marker on the ruler has moved to the new breakpoint setting.

mediaqueries 22

Open CSS Designer, select blogPostStyle.css if necessary, then notice that the max-width now shows 462 px for the mobile media query max-width.

mediaqueries 23

Save your work.

Step 6 of 6

Add and delete media queries

To add a media query, drag the scrubber to the position on the ruler where you want to add a media query, then select the Add Media Query button mediaqueries 24 on the ruler. A dialog box will open with options to add the values for the min-width, max-width, and source where you want to store the new media query. The location on the ruler will initially fill one of the width values when it opens. Use the drop-down menu to add new values.

mediaqueries 25

To delete a media query, right-click the media query you want to delete, then choose Delete.

Select the second media query (max-width of 769 px) on the Visual Media Queries Bar, then select the Add Media Query button.

Select the width drop-down menu, then select min-max. Change the min-width to 770, then change the max-width to 991.

Use the source drop-down menu to change the source to blogPostStyle.css, then select OK.

mediaqueries 26

The new media query now appears on the Visual Media Queries Bar with a blue background, since it has both min-width and max-width values. Your next steps would be to add new properties and values to your current styles to control the placement of your page content when viewed with these dimensions.

mediaqueries 27

To see how easy it is to delete a media query, right-click the new media query, select Delete, select the media query listed, then select OK to close the warning dialog box. Notice that the line number for the selected media query appears along with the @media properties and values.

mediaqueries 28

Note: To undo a delete, use [Control] [Z] (Win) or [Command] [Z] (Mac).

Save your work.

Summary

This tutorial introduced Visual Media Queries bar. You explored the way media queries are displayed by type of media query – those having min-width properties, those with max-width properties, and those with both min-width and max-width properties.

Next, you learned how to view page content with the Visual Media Queries Bar and with the Scrubber. You then explored the @media selectors in Code View and used CSS Designer to view the selector properties and values in the Properties pane.

Next, you used the media query resizing handles to modify breakpoints. Last, you learned to add a new media query and delete an existing media query.

Dreamweaver Interface