Hi, I'm Nick Pettit.

Responsive web design is a dramatically different approach

to designing web sites that uses a concept called fluid grids

in combination with CSS3 media queries

to create layouts that work across multiple screen resolutions.

That's a lot of stuff, so we're going to break this down

and take things 1 step at a time.

In this master class, we're going to create all the low fidelity

and high fidelity mockups that we'll need to

eventually build a full project.

[? Music ?]

[Mockups for Responsive Design with Nick Pettit]

Here we have our finished responsive web design project.

This project is advertising an HTML5 geolocation app

that was built in a previous master class,

and there's a lot going on on this page, despite its simplistic look.

If we go ahead and resize this page,

you can see that we're using fluid grids

to resize all of the individual elements,

and we're also using CSS3 media queries

to completely change the layout once we get down to small sizes.

So, we have our very large 27-inch monitor desktop layout,

and when we get down to a smaller size,

this might be better for, say, an iPad or any other tablet device

or a laptop.

And then it will change 1 more time

once we get down to this mobile size.

And if we scroll down the page here, you can see that we have

all the same elements,

just in a little bit different arrangement.

Now let's go ahead and take a look at the code.

Here we have our project, and we have our HTML here,

which is pretty standard stuff.

We are using some HTML5 video, as you saw

at the larger screen sizes

here in the center of the page.

And we also have several columns here, which we'll be talking about

in just a little bit, so let's go ahead

and look at the structure of this project.

We have, of course, a CSS directory.

And in the CSS directory, we have application.css,

which is sort of our main CSS document

which defines all of our reset styles and

lots of other stuff on the page, our fluid grids,

CSS3, and so on.

We also have a responsive web design

CSS document, which uses media queries

to reset the layout when it gets down to smaller sizes.

And we also have an Internet Explorer 9 style sheet,

which just makes a few small corrections,

an Internet Explorer 8 style sheet, which will actually help

Internet Explorer 8 and 7 display this web site a little bit better.

And finally, we have a Windows Mobile 7 style sheet,

which we'll get into much later on.

Now let's take a look at our images directory.

We have a few static screen shots of the application,

which are used at the smaller mobile sizes.

We have a few icons here, which we saw used

down towards the bottom of the site

and a few other images that we'll be talking about later.

And then finally, we have a videos folder

that contains all of the different codecs we need

for our HTML5 videos.

Now, before we actually get started building this project,

I should mention that it's going to work on a huge

variety of devices.

I'm just showing it in Google Chrome here for the sake of simplicity,

but this site will also work in Firefox,

Opera, Internet Explorer 7, 8 and 9,

and it will also work in a wide variety of mobile devices.

So, without further ado, let's go ahead and get started.

For a very long time, the Web has been compared

to print media.

Many designers, myself included,

felt the need to perfectly lay out a web page with all the elements

placed in pixel perfect positions.

For print media, this works great because typically

you'll know the exact size of the page that you're printing on,

the type of paper, ink, and printer that you're using, and so on.

All the elements are known, so it's easy to go for

a very rigid design.

However, the Web is a very different beast.

Screens can be all different resolutions,

and browser windows can be all different sizes,

and so there's no guarantee our pages

are going to be displayed a certain way.

For the past decade and then some,

we as a community have been pretty shielded from this problem.

When people really started thinking seriously about web design,

most screens were just around 800 by 600,

and then over the years, the resolution increased very slowly

to about 1014 by 768, and so on.

As you may have noticed, there's been a recent explosion

in hardware.

Screens are getting smaller and more mobile,

and at the same time, they're getting larger with higher and higher resolutions.

And then of course, there's everything in between with netbooks,

tablets, and your average desktop computer.

So, at every point along the spectrum of screen resolutions

our fixed-width designs were either getting squeezed

on to a mobile device or stretched across a giant desktop display.

The traditional solution to this problem is to create

a separate mobile site, and over the past few years,

that's often meant a site designed specifically for the iPhone.

Things have changed in a short period of time,

and now not only are there a multitude of

other mobile phone platforms that have excellent web browsers,

there are also tablets, so what is a web designer to do?

Make a site for every phone and every tablet?

Well, obviously, there has to be a better solution.

In March of 2009, Ethan Marcotte wrote an article

for "A List Apart" outlining a concept he calls "fluid grids."

The idea is to create a layout where all the elements

are based on carefully calculated percentage widths.

Fluid grids have not been tremendously popular

over the past several years, so Ethan's idea shook up

the web community a bit.

However, as we'll discover,

fluid grids are actually pretty cool.

The calculations create unusual looking numbers,

but they're actually pretty simple to understand.

You take the pixel value of the element that you want to be fluid

and then divide it by its parent element,

or in other words, you take the target element

divided by the context.

This will give you a percentage value

that you can then apply to your target element.

Using this method for all your page elements,

it's possible to create designs

that scale proportionally when resized.

Ethan built upon this idea with another

"A List Apart" article he wrote in May of 2010.

This next article was called "Responsive Web Design."

And it changed the way that many people think about designing web sites

for multiple screen resolutions.

Responsive web design is the usage of fluid grids

in combination with media queries.

The media queries allow you to detect

when the page is greater than, less than or equal to

a specific width.

With this information, you can then modify your CSS

and make changes that are appropriate

for a particular width.

For example, when your site is squeezed down to a mobile browser,

you might need to remove elements, rearrange elements,

change font sizes, swap out page elements, and so on.