Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Responsive Layouts!
You have completed Responsive Layouts!
Preview
Prior to responsive web design, most web designers thought in terms of print design. Instead of thinking about layout in terms of fixed values, we must think in terms of ratios or percentages.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Prior to responsive web design,
0:00
most web designers thought in terms of
print design.
0:02
The layout was precisely controlled in
fixed pixel-based units, and
0:06
the goal was to make websites look exactly
the same in every browser.
0:11
Whether we like it or not, digital screens
are not the same as printed pages.
0:15
They come in all different sizes.
0:20
They can be oriented differently.
0:22
And they can have different pixel
densities.
0:25
So, instead of thinking about layout in
terms of fixed values,
0:27
we must think in terms of ratios or
percentages.
0:31
Let's take a [SOUND] simple example of a
two-column layout and
0:35
see how that's changed over the years.
0:39
Before responsive design, we might have
said that the layout should
0:42
be [SOUND] 960 pixels across and centered
on the screen.
0:46
Then the first column should be 672 pixels
across and
0:50
the second column should be [SOUND] 288
pixels across.
0:54
This would be [SOUND] mocked up in
Photoshop and
0:58
then replicated in [SOUND] CSS.
1:00
In [SOUND] modern times, we instead
express this using some basic wire frames
1:02
that outline the relative [SOUND]
proportions of one element to another.
1:07
[SOUND] In our CSS, we can use relative
units like percentages or ems.
1:12
[SOUND] In this example, we could instead
say that our left column should
1:17
take up 70% of the available area and our
right column could take up 30%.
1:22
Elements that use percentages are relative
to their parent container, so
1:28
that means we can safely apply another
percentage to the parent and
1:33
we'll still maintain our ratio between the
two columns.
1:37
For the parent, we could say something
like [SOUND] 80%, and
1:42
since its parent is the document window,
that means that generally,
1:46
it will take up about [SOUND] 80% of the
browser width.
1:50
At some point, these percentages will no
longer hold up and
1:53
we need to reconfigure the layout
entirely.
1:57
A multi-column layout might look good on a
big screen, but on a phone,
2:00
we should switch to a single-column
layout.
2:05
For that, we'll need media queries, which
we'll talk about next.
2:08
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up