1
00:00:00,410 --> 00:00:04,330
Breakpoints define a certain threshold
where the layout should change.

2
00:00:04,330 --> 00:00:09,490
But how do we decide exactly what that
certain threshold should be?

3
00:00:09,490 --> 00:00:12,750
Your first instinct might be to make
breakpoints based on

4
00:00:12,750 --> 00:00:14,330
different popular devices.

5
00:00:14,330 --> 00:00:18,900
For example, if we know that a popular
mobile phone has a width of 320

6
00:00:18,900 --> 00:00:23,780
pixels in portrait mode, then maybe we can
create a breakpoint there.

7
00:00:23,780 --> 00:00:28,410
However, this is actually bad practice and
not a sustainable approach.

8
00:00:28,410 --> 00:00:31,440
Responsive web design was created to help
address

9
00:00:31,440 --> 00:00:34,450
new devices being introduced all the time.

10
00:00:34,450 --> 00:00:38,410
So, if we create breakpoints based on
specific devices,

11
00:00:38,410 --> 00:00:41,540
then we're just recreating the same
problem for ourselves.

12
00:00:42,700 --> 00:00:47,040
Instead, we should create breakpoints
based on our content.

13
00:00:47,040 --> 00:00:50,530
Whenever our one column layout starts to
look bad,

14
00:00:50,530 --> 00:00:54,950
we should create a breakpoint and make the
appropriate adjustments.

15
00:00:54,950 --> 00:00:59,550
That said, going from a one column layout
to a multi-column layout

16
00:00:59,550 --> 00:01:04,360
is a pretty dramatic change, and not every
breakpoint demands it.

17
00:01:04,360 --> 00:01:08,850
Instead, we should also make major and
minor breakpoints.

18
00:01:08,850 --> 00:01:12,930
Maybe just one element just needs to be
slightly resized,

19
00:01:12,930 --> 00:01:16,740
or some padding needs to be changed on a
list.

20
00:01:16,740 --> 00:01:21,030
If that's the case, then we can also set
up minor breakpoints.

21
00:01:21,030 --> 00:01:23,740
So, let's take a look at an example.

22
00:01:23,740 --> 00:01:27,224
So here we have the same site that we have
been looking at.

23
00:01:27,224 --> 00:01:33,820
And if I resize the browser here, let's
start out on our mobile look, here.

24
00:01:33,820 --> 00:01:37,930
And you'll notice that we have these
buttons here, and

25
00:01:37,930 --> 00:01:40,310
that makes sense for this mobile layout.

26
00:01:40,310 --> 00:01:44,700
This would be on a fairly small screen, a
mobile phone screen.

27
00:01:44,700 --> 00:01:48,250
And you'd want these large tap areas for
people to click on.

28
00:01:48,250 --> 00:01:50,520
You wouldn't want small, tiny links.

29
00:01:50,520 --> 00:01:54,860
And then we also have a one column layout
that really lends itself

30
00:01:54,860 --> 00:01:57,020
to scrolling up and down.

31
00:01:57,020 --> 00:02:00,078
Now, if we size up a little bit here,

32
00:02:00,078 --> 00:02:05,028
we get to something that's maybe more
suited for a tablet.

33
00:02:05,028 --> 00:02:09,830
And again, we have these large tap areas
that work really well for touch.

34
00:02:09,830 --> 00:02:10,590
But still,

35
00:02:10,590 --> 00:02:15,180
in portrait mode on a tablet, we would
want something that looks like this.

36
00:02:15,180 --> 00:02:19,940
Now, we also have a media query that
adjusts based on orientation.

37
00:02:19,940 --> 00:02:24,395
So if the tablet or maybe a phone is in
landscape,

38
00:02:24,395 --> 00:02:28,225
we have a layout that looks something like
this, and

39
00:02:28,225 --> 00:02:32,295
this will also work on smaller laptop
screens.

40
00:02:32,295 --> 00:02:37,735
I, for example, am on a 15 inch screen,
but if you're on a smaller

41
00:02:37,735 --> 00:02:43,380
laptop than that, a lot of users might get
a layout that looks like this.

42
00:02:43,380 --> 00:02:49,020
Now, this works pretty well, but we have a
minor breakpoint here.

43
00:02:49,020 --> 00:02:55,930
So you'll notice, up at the top, the size
of the header changes very slightly.

44
00:02:55,930 --> 00:03:02,400
And this is mostly an aesthetic thing, but
really, it's also slightly functional.

45
00:03:02,400 --> 00:03:06,210
You want to have a larger header here,

46
00:03:06,210 --> 00:03:08,920
because it makes better use of the
available space.

47
00:03:08,920 --> 00:03:12,270
Whereas if you go down to a smaller width
here,

48
00:03:12,270 --> 00:03:16,860
you can also assume that there's probably
less vertical space as well.

49
00:03:16,860 --> 00:03:20,140
So you want the header to take up less
space there.

50
00:03:21,942 --> 00:03:26,090
These breakpoints don't have any kind of
performance cost, but

51
00:03:26,090 --> 00:03:31,320
each breakpoint does slightly increase the
complexity of your design and code.

52
00:03:31,320 --> 00:03:35,450
It can be tempting to add lots of
breakpoints to make a design look

53
00:03:35,450 --> 00:03:39,030
absolutely perfect at any possible
resolution, but

54
00:03:39,030 --> 00:03:43,900
be careful to use breakpoints only when a
change really needs to occur.

55
00:03:43,900 --> 00:03:45,340
For more tips about breakpoints,

56
00:03:45,340 --> 00:03:48,110
be sure to check out the notes associated
with this video.