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?
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.
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.
Select Advanced Settings, then browse to select the assets folder as the Default Images folder.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 symbol 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.
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.
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.
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.
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.
Select the media query again, then notice that the marker on the ruler has moved to the new breakpoint setting.
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.
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 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.
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.
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.
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.
Note: To undo a delete, use [Control] [Z] (Win) or [Command] [Z] (Mac).
Save your work.
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.