[MUSIC]

So far, I've hinted at the idea of a single mobile column becoming multiple

columns on desktop, which is a pretty common feature in many responsive layouts.

However, thinking about it more deeply, it's important to consider how

different design patterns will translate from one breakpoint to another.

For example, if you want to include a full screen background or

pagination or an image carousel, you need to think about how

each atomic piece of design will look when it's scaled up or down.

There's a huge number of design patterns that are in common to many websites, and

there's also a lot of variation between them.

Rather than try to explain each one specifically,

let's take a look at a few select examples just to

outline the type of thinking that's necessary when building these layouts.

So, here I have the same site that we have been

looking at before in previous examples.

And you'll notice that not only do we have two columns here

that turn into one column, there's a couple of other things going on here.

There's also the navigation, and

the navigation starts out using this tabbed design pattern.

However, it ultimately ends up being a vertical menu.

So, we size it down here, and we're still using tabs here.

And then it becomes a vertical menu.

So, those two things are two examples of how you can take an atomic piece

of design like this and think about it in terms of a design pattern.

You may even want to switch between two different design patterns if one might

work on mobile like this and one might work better on desktop like this.

Same thing with the columns.

We're going from a two-column layout to a one-column layout.

But in the orientation example,

we kept the two-column layout because it looks better in landscape view.

So, the thing to remember when thinking about design patterns and

breakpoints is to think in terms of these atomic units,

something like a multi-column layout, or something like the navigation,

pagination, something like a image carousel, and so on.