Preview
Video Player
00:00
00:00
Creating Breakpoints
3:49Breakpoints define a certain threshold where the layout should change, typically defined by the content (and not by devices).
Breakpoints define a certain threshold
where the layout should change.
0:00
But how do we decide exactly what that
certain threshold should be?
0:04
Your first instinct might be to make
breakpoints based on
0:09
different popular devices.
0:12
For example, if we know that a popular
mobile phone has a width of 320
0:14
pixels in portrait mode, then maybe we can
create a breakpoint there.
0:18
However, this is actually bad practice and
not a sustainable approach.
0:23
Responsive web design was created to help
address
0:28
new devices being introduced all the time.
0:31
So, if we create breakpoints based on
specific devices,
0:34
then we're just recreating the same
problem for ourselves.
0:38
Instead, we should create breakpoints
based on our content.
0:42
Whenever our one column layout starts to
look bad,
0:47
we should create a breakpoint and make the
appropriate adjustments.
0:50
That said, going from a one column layout
to a multi-column layout
0:54
is a pretty dramatic change, and not every
breakpoint demands it.
0:59
Instead, we should also make major and
minor breakpoints.
1:04
Maybe just one element just needs to be
slightly resized,
1:08
or some padding needs to be changed on a
list.
1:12
If that's the case, then we can also set
up minor breakpoints.
1:16
So, let's take a look at an example.
1:21
So here we have the same site that we have
been looking at.
1:23
And if I resize the browser here, let's
start out on our mobile look, here.
1:27
And you'll notice that we have these
buttons here, and
1:33
that makes sense for this mobile layout.
1:37
This would be on a fairly small screen, a
mobile phone screen.
1:40
And you'd want these large tap areas for
people to click on.
1:44
You wouldn't want small, tiny links.
1:48
And then we also have a one column layout
that really lends itself
1:50
to scrolling up and down.
1:54
Now, if we size up a little bit here,
1:57
we get to something that's maybe more
suited for a tablet.
2:00
And again, we have these large tap areas
that work really well for touch.
2:05
But still,
2:09
in portrait mode on a tablet, we would
want something that looks like this.
2:10
Now, we also have a media query that
adjusts based on orientation.
2:15
So if the tablet or maybe a phone is in
landscape,
2:19
we have a layout that looks something like
this, and
2:24
this will also work on smaller laptop
screens.
2:28
I, for example, am on a 15 inch screen,
but if you're on a smaller
2:32
laptop than that, a lot of users might get
a layout that looks like this.
2:37
Now, this works pretty well, but we have a
minor breakpoint here.
2:43
So you'll notice, up at the top, the size
of the header changes very slightly.
2:49
And this is mostly an aesthetic thing, but
really, it's also slightly functional.
2:55
You want to have a larger header here,
3:02
because it makes better use of the
available space.
3:06
Whereas if you go down to a smaller width
here,
3:08
you can also assume that there's probably
less vertical space as well.
3:12
So you want the header to take up less
space there.
3:16
These breakpoints don't have any kind of
performance cost, but
3:21
each breakpoint does slightly increase the
complexity of your design and code.
3:26
It can be tempting to add lots of
breakpoints to make a design look
3:31
absolutely perfect at any possible
resolution, but
3:35
be careful to use breakpoints only when a
change really needs to occur.
3:39
For more tips about breakpoints,
3:43
be sure to check out the notes associated
with this video.
3:45