Set Up Media Queries to Style for Different Devices

To accomplish the different designs for different devices, you typically don’t change the content of the page. Rather, using Dreamweaver CS5 or CS5.5, you can use CSS3 media queries. Media queries “sniff” out the resolution of the device (in other words, detects it) on which the page is being viewed, then applies different styling depending on that resolution. Next, you will take the page that you have open and apply media queries to the page:

In the Multiscreen Preview
panel, click the Media Queries
button. The Media Queries
dialog box appears. As it
says at the top of the dialog
box: “You
(can) target your designs
for different devices by
specifying a different CSS
file for each device.”

There are two ways
you can approach media queries:

Set up a “site-wide” media
query file.

Set up a media queries for “this
document” only.

Setting up media queries
for “this document” only
will create a separate style
sheet for each device you
choose and attach each of
those to the open page only.
When the page is displayed,
depending on the resolution
of the device, a different
style sheet will be applied.
If you have a series of pages
to which you want to apply
the media queries, you can
select the “site-wide” option.
As you will see, this creates
a style sheet that is attached
to this first page in your
site. That style sheet contains
links to other style sheets.
The site-wide option means
that if you open another
page and click the Media
Queries button, it will automatically
attach the site-wide file.

NOTE

In Dreamweaver CS5, you will
not see the options associated
with the “site–wide” media
query file.

This opens the Specify Site-Wide
Media Query File dialog box
that asks you to either choose
an existing site-wide media
query file or to create a
new one. Because you haven’t
done this before, choose “Create
New File: from the menu.
Click the folder icon to
browse for a location to
put it, because Dreamweaver
will create one for you (see Figure
6).

Back in the Specify Site-Wide
Media Query File dialog box,
click OK. The file you created
should now be listed in the
Write Media Queries To: section.

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.

Click the Default Presets
button. This will include
three different style sheets
for three devices: phone,
tablet, and desktop. You
will see a listing of the
description and media query
for each style sheet about
to be created (see
Figure
8). Because you already
have a desktop style sheet
created and attached to the
document (that’s
the style sheet you created),
you can get rid of the desktop
media query.

Notice the Force Devices
to Report Actual Width selection.
This forces the devices to
report the actual screen
resolution so that the code
that Dreamweaver puts into
your page will work. Lots
of devices report a different
width (usually larger) so
that any web pages simply
scale (shrink) to fit. Leave
this option selected.

Select the Desktop media query
in the list and click the
minus sign (–) to remove
it (see Figure
9). The plus
(+) and minus (–) signs
allow you to add or subtract
style sheets (media queries)
for different devices.

Back in the Media Queries
dialog box, you will now
see in the media query list
that “phone.css” is
listed as the CSS file for
the Phone media query. With
the phone media query still
selected, you can also change
the description name and/or
the minimum and maximum width.
Suppose that you want this
styling to apply to a smartphone
like an iPhone 4 as well.
You would need to change
the Max Width to something
like 480 (which is what we
did) See Figure
12.

You’ve just told Dreamweaver
to create two more style
sheets for two different
types of devices: phones
and tablets.

Click OK in the Media Queries
dialog box to close it and
return to the Multiscreen
Preview panel.

See What Dreamweaver Has Created So Far

Notice that the styling hasn’t changed for any of the device viewports. That’s because the style sheet you used on the site when you first built the page is still linked. In the next steps, after you take a second to see what Dreamweaver has done for you so far, you will create styles for each device that override the main styles.

Close the Multiscreen panel,
and in the Document toolbar
click the sitewide.css link
in the Related Files toolbar
(located below the Code,
Split, and Design buttons, usually).
Notice the code in the sitewide.css
file. It has two links to
the two style sheets created,
using @import directives
(see Figure
14). It also has max-width and min-width attributes
where necessary.

Figure
14 The sitewide.css file
with links to the phone
and tablet CSS files.

Now, click the phone.css link
in the Related Files toolbar.
You should see the phone.css
style sheet. Notice how it
is blank except for, @charset “utf-8”; (see Figure
15). It seems fair to assume
when you hear that Dreamweaver
will create a style sheet for
different devices that it creates
the styles as well. That would
be pretty hard to do, given
the fact that everyone’s
site is different. Click the
Design View button.

NOTE

You may need to close and then
re-open the web page you have
open to see the links in the
Related Files toolbar.