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