WRA 210 – SS2014

RWD1 : CSS Media Queries

Responsive Web Design…
Means that a web site works
optimally well for users
regardless of the device they
are using.
The core of RWD is a media
query, a request for the
resolution of the users’
viewport.
Responsive?
In 2012, PC sales
were lower than the
previous year,
something that hasn’t
happened since 2001.
Why? Tablets.
Phones.
http://mashable.com/2012/12/11/
responsive-web-design/
Think of a viewport as the virtual canvas on which your
CSS will render. With different devices, screens can be as
small as 2” or as large as 48”…and their resolution may
vary too.

But those are screens. A viewport is under your control. It

lets you set pixel values in “CSS pixels” regardless of the
device pixels. At 100% zoom, device pixels = CSS pixels.
No big deal. As users zoom in with a gesture on a mobile
device, less CSS pixels fit in the viewport, but the layout
does not reflow.

Viewport?
<link rel="stylesheet" media="screen and (min-width:320px)
and (max-width:480px)" href="css/mobile.css" />

Viewport! Viewport!

The standard:
http://www.w3.org/TR/css3-mediaqueries/

External Media Query

Where would a rule like this come in handy?

@media screen{
Body {background: #ff0000;}
}

@media print {
Body {background: #fff;}
}

More Than One Style Sheet?

#logo { background: url(images/logo.png); width: 600px; border:
1px #ccc solid; }

@media only screen and (max-device-width: 480px) {

#logo { background: url(images/logo_mobile.png); width: 440px;
}
}
Adjust logo for
small viewport
Resize the screen to see it working:
http://www.htmlgoodies.com/imagesvr_ce/3028/mq_demo.html

Adjusting for a Mobile Device

• There are many sites for testing responsive designs. I like
this one:

http://www.responsinator.com/

Try out your favorite site

Using the viewport options on Responsinator…make a list
of what would need to change – and how – to make your
portfolio site wireframes ideally responsive.

Planning RWD :: Users?

• Why do I need to know about media calls if I can just use
a responsive theme in a CMS?
• Have a look: http://responsinator.com/?url=billhd.com
• If I don’t know how to change them, I’m stuck with the
“responses” I am given by the theme designer…

Responsive Themes?