Preview
Video Player
00:00
00:00
Responsive Design Patterns
2:32A 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.
[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