You've already started watching Introduction
In this video, we'll introduce the project that we'll be creating. We'll also introduce the ideas of a fluid grid and responsive web design.
-
0:00
Hi, I'm Nick Pettit.
-
0:02
Responsive web design is a dramatically different approach
-
0:05
to designing web sites that uses a concept called fluid grids
-
0:09
in combination with CSS3 media queries
-
0:12
to create layouts that work across multiple screen resolutions.
-
0:16
That's a lot of stuff, so we're going to break this down
-
0:19
and take things 1 step at a time.
-
0:22
In this master class, we're going to create all the low fidelity
-
0:26
and high fidelity mockups that we'll need to
-
0:29
eventually build a full project.
-
0:32
[? Music ?]
-
0:59
[Mockups for Responsive Design with Nick Pettit]
-
1:01
Here we have our finished responsive web design project.
-
1:06
This project is advertising an HTML5 geolocation app
-
1:12
that was built in a previous master class,
-
1:15
and there's a lot going on on this page, despite its simplistic look.
-
1:20
If we go ahead and resize this page,
-
1:23
you can see that we're using fluid grids
-
1:26
to resize all of the individual elements,
-
1:30
and we're also using CSS3 media queries
-
1:33
to completely change the layout once we get down to small sizes.
-
1:38
So, we have our very large 27-inch monitor desktop layout,
-
1:43
and when we get down to a smaller size,
-
1:47
this might be better for, say, an iPad or any other tablet device
-
1:52
or a laptop.
-
1:54
And then it will change 1 more time
-
1:59
once we get down to this mobile size.
-
2:02
And if we scroll down the page here, you can see that we have
-
2:05
all the same elements,
-
2:08
just in a little bit different arrangement.
-
2:11
Now let's go ahead and take a look at the code.
-
2:15
Here we have our project, and we have our HTML here,
-
2:19
which is pretty standard stuff.
-
2:22
We are using some HTML5 video, as you saw
-
2:25
at the larger screen sizes
-
2:30
here in the center of the page.
-
2:34
And we also have several columns here, which we'll be talking about
-
2:38
in just a little bit, so let's go ahead
-
2:41
and look at the structure of this project.
-
2:44
We have, of course, a CSS directory.
-
2:47
And in the CSS directory, we have application.css,
-
2:52
which is sort of our main CSS document
-
2:55
which defines all of our reset styles and
-
2:59
lots of other stuff on the page, our fluid grids,
-
3:02
CSS3, and so on.
-
3:04
We also have a responsive web design
-
3:08
CSS document, which uses media queries
-
3:12
to reset the layout when it gets down to smaller sizes.
-
3:18
And we also have an Internet Explorer 9 style sheet,
-
3:20
which just makes a few small corrections,
-
3:23
an Internet Explorer 8 style sheet, which will actually help
-
3:27
Internet Explorer 8 and 7 display this web site a little bit better.
-
3:32
And finally, we have a Windows Mobile 7 style sheet,
-
3:36
which we'll get into much later on.
-
3:39
Now let's take a look at our images directory.
-
3:42
We have a few static screen shots of the application,
-
3:46
which are used at the smaller mobile sizes.
-
3:49
We have a few icons here, which we saw used
-
3:53
down towards the bottom of the site
-
3:55
and a few other images that we'll be talking about later.
-
3:59
And then finally, we have a videos folder
-
4:02
that contains all of the different codecs we need
-
4:05
for our HTML5 videos.
-
4:08
Now, before we actually get started building this project,
-
4:12
I should mention that it's going to work on a huge
-
4:15
variety of devices.
-
4:17
I'm just showing it in Google Chrome here for the sake of simplicity,
-
4:21
but this site will also work in Firefox,
-
4:24
Opera, Internet Explorer 7, 8 and 9,
-
4:28
and it will also work in a wide variety of mobile devices.
-
4:33
So, without further ado, let's go ahead and get started.
-
4:38
For a very long time, the Web has been compared
-
4:41
to print media.
-
4:43
Many designers, myself included,
-
4:45
felt the need to perfectly lay out a web page with all the elements
-
4:49
placed in pixel perfect positions.
-
4:52
For print media, this works great because typically
-
4:56
you'll know the exact size of the page that you're printing on,
-
5:00
the type of paper, ink, and printer that you're using, and so on.
-
5:04
All the elements are known, so it's easy to go for
-
5:08
a very rigid design.
-
5:10
However, the Web is a very different beast.
-
5:13
Screens can be all different resolutions,
-
5:15
and browser windows can be all different sizes,
-
5:18
and so there's no guarantee our pages
-
5:20
are going to be displayed a certain way.
-
5:23
For the past decade and then some,
-
5:25
we as a community have been pretty shielded from this problem.
-
5:29
When people really started thinking seriously about web design,
-
5:33
most screens were just around 800 by 600,
-
5:37
and then over the years, the resolution increased very slowly
-
5:41
to about 1014 by 768, and so on.
-
5:45
As you may have noticed, there's been a recent explosion
-
5:48
in hardware.
-
5:50
Screens are getting smaller and more mobile,
-
5:53
and at the same time, they're getting larger with higher and higher resolutions.
-
5:59
And then of course, there's everything in between with netbooks,
-
6:02
tablets, and your average desktop computer.
-
6:07
So, at every point along the spectrum of screen resolutions
-
6:11
our fixed-width designs were either getting squeezed
-
6:15
on to a mobile device or stretched across a giant desktop display.
-
6:22
The traditional solution to this problem is to create
-
6:25
a separate mobile site, and over the past few years,
-
6:29
that's often meant a site designed specifically for the iPhone.
-
6:34
Things have changed in a short period of time,
-
6:36
and now not only are there a multitude of
-
6:39
other mobile phone platforms that have excellent web browsers,
-
6:43
there are also tablets, so what is a web designer to do?
-
6:48
Make a site for every phone and every tablet?
-
6:51
Well, obviously, there has to be a better solution.
-
6:55
In March of 2009, Ethan Marcotte wrote an article
-
6:59
for "A List Apart" outlining a concept he calls "fluid grids."
-
7:04
The idea is to create a layout where all the elements
-
7:07
are based on carefully calculated percentage widths.
-
7:11
Fluid grids have not been tremendously popular
-
7:15
over the past several years, so Ethan's idea shook up
-
7:18
the web community a bit.
-
7:20
However, as we'll discover,
-
7:22
fluid grids are actually pretty cool.
-
7:25
The calculations create unusual looking numbers,
-
7:28
but they're actually pretty simple to understand.
-
7:30
You take the pixel value of the element that you want to be fluid
-
7:34
and then divide it by its parent element,
-
7:37
or in other words, you take the target element
-
7:40
divided by the context.
-
7:42
This will give you a percentage value
-
7:44
that you can then apply to your target element.
-
7:48
Using this method for all your page elements,
-
7:51
it's possible to create designs
-
7:53
that scale proportionally when resized.
-
7:56
Ethan built upon this idea with another
-
8:00
"A List Apart" article he wrote in May of 2010.
-
8:04
This next article was called "Responsive Web Design."
-
8:07
And it changed the way that many people think about designing web sites
-
8:11
for multiple screen resolutions.
-
8:14
Responsive web design is the usage of fluid grids
-
8:17
in combination with media queries.
-
8:19
The media queries allow you to detect
-
8:22
when the page is greater than, less than or equal to
-
8:25
a specific width.
-
8:27
With this information, you can then modify your CSS
-
8:30
and make changes that are appropriate
-
8:33
for a particular width.
-
8:35
For example, when your site is squeezed down to a mobile browser,
-
8:39
you might need to remove elements, rearrange elements,
-
8:42
change font sizes, swap out page elements, and so on.
You need to sign up for Treehouse in order to download course files.
Sign up