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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Responsive Design Patterns

2:32 with Nick Pettit

A design pattern defines a generic approach to a common problem in design. In responsive web design, it's important to consider how different design patterns will translate from one breakpoint to another.

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

    [MUSIC] 0:00
    So far, I've hinted at the idea of a single mobile column becoming multiple 0:04
    columns on desktop, which is a pretty common feature in many responsive layouts. 0:09
    However, thinking about it more deeply, it's important to consider how 0:15
    different design patterns will translate from one breakpoint to another. 0:20
    For example, if you want to include a full screen background or 0:24
    pagination or an image carousel, you need to think about how 0:28
    each atomic piece of design will look when it's scaled up or down. 0:33
    There's a huge number of design patterns that are in common to many websites, and 0:38
    there's also a lot of variation between them. 0:43
    Rather than try to explain each one specifically, 0:46
    let's take a look at a few select examples just to 0:49
    outline the type of thinking that's necessary when building these layouts. 0:53
    So, here I have the same site that we have been 0:58
    looking at before in previous examples. 1:01
    And you'll notice that not only do we have two columns here 1:04
    that turn into one column, there's a couple of other things going on here. 1:09
    There's also the navigation, and 1:13
    the navigation starts out using this tabbed design pattern. 1:16
    However, it ultimately ends up being a vertical menu. 1:22
    So, we size it down here, and we're still using tabs here. 1:26
    And then it becomes a vertical menu. 1:33
    So, those two things are two examples of how you can take an atomic piece 1:37
    of design like this and think about it in terms of a design pattern. 1:43
    You may even want to switch between two different design patterns if one might 1:48
    work on mobile like this and one might work better on desktop like this. 1:54
    Same thing with the columns. 2:00
    We're going from a two-column layout to a one-column layout. 2:02
    But in the orientation example, 2:06
    we kept the two-column layout because it looks better in landscape view. 2:09
    So, the thing to remember when thinking about design patterns and 2:14
    breakpoints is to think in terms of these atomic units, 2:18
    something like a multi-column layout, or something like the navigation, 2:22
    pagination, something like a image carousel, and so on. 2:27

    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