Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Responsive web design could be an entire course in and of itself. In fact, Treehouse has several courses that discuss responsive techniques in detail. I’ll leave links to some of them in the teacher’s notes. We’ll touch on just a few really important points here that should be enough to get you started.
At this point in the evolution of the web,
0:00
it's widely agreed that we need to
build for a vast array of screen sizes.
0:02
There's simply no getting around it.
0:07
We've got phones, and tablets,
and Laptops, and desktops,
0:10
and giant conference room monitors,
that we have to account for.
0:13
There are so many different
sizes a user screen might be,
0:18
that there's no use in trying
to design for each individually.
0:21
What we can do instead is
design around our content.
0:25
We can make our work beautiful and
easy to use,
0:29
no matter the size of
the screen it's viewed on.
0:32
Responsive web design could be
an entire course in and of itself.
0:35
In fact, Treehouse has several
courses that discuss responsive
0:39
techniques in detail.
0:43
I'll leave links to some of
them in the teacher's notes.
0:44
For now, we'll touch on just a few
really important points here,
0:47
that should be enough to get you started.
0:51
An integral part of a responsive
layout is a flexible grid.
0:55
Grids are broken up into columns,
usually twelve.
0:59
And our content then fills as many
of those columns as we need it to.
1:03
This helps to maintain consistency,
1:08
in the way everything is
spaced throughout a site.
1:10
The widths of our columns need to
be defined using a relative width.
1:12
Rather then a fixed unit like pixels.
1:17
That way our columns, and
1:19
therefore our content, will be able to
scale with the width of the viewport.
1:21
There is a wealth of CSS
frameworks out there.
1:26
And the responsive grid is possibly
the most common feature among them.
1:28
Let's head back over to
the Skelton website and
1:33
check out what it has to
say about their grid.
1:36
So here we can se that everything should
be wrapped in an element, likely a div or
1:40
a section, which has the container class.
1:45
From there,
content is broken up into rows.
1:48
Again, there's a class to go along with
this sort of inner container element.
1:52
Each row gets broken up
into twelve columns, but
1:56
the combination of those columns is
up to the developer of the site.
1:59
The available class names make
it easy to write out in English,
2:04
how much space should be taken up.
2:08
But the total should always add up to 12.
2:10
Skeleton comes with a little demo site,
that we can play around with.
2:14
Using the developer tools on it,
2:20
reveals how we might use those
grade classes in action.
2:22
You need to sign up for Treehouse in order to download course files.
Sign up