"Active Record Associations in Rails" was retired on June 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Responsive Layouts

Well done!

You have completed Responsive Layouts!

Sign up for Treehouse Back to Library

Thinking in Relative Units

2:12 with Nick Pettit

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up