Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,560 --> 00:00:02,520
In this lecture,
2
00:00:02,520 --> 00:00:05,510
you're going to learn about a couple of different techniques
3
00:00:05,510 --> 00:00:07,223
of selecting breakpoints.
4
00:00:09,250 --> 00:00:13,310
Now, first of all, what actually are breakpoints,
5
00:00:13,310 --> 00:00:16,760
well breakpoints are the viewpoint width
6
00:00:16,760 --> 00:00:19,800
at which we want our design to change.
7
00:00:19,800 --> 00:00:23,550
Or in other words, breakpoints are the pixel values
8
00:00:23,550 --> 00:00:27,000
that we want to put in our media queries.
9
00:00:27,000 --> 00:00:30,430
Now about actually selecting these breakpoints,
10
00:00:30,430 --> 00:00:31,510
back in the day,
11
00:00:31,510 --> 00:00:34,630
we would simply use the screen width of popular Apple
12
00:00:34,630 --> 00:00:39,310
devices like the iPhone and iPad as breakpoints,
13
00:00:39,310 --> 00:00:41,450
and simply call it a day.
14
00:00:41,450 --> 00:00:45,130
And while this is certainly the easiest way of doing it,
15
00:00:45,130 --> 00:00:47,630
we actually no longer do this and
16
00:00:47,630 --> 00:00:50,150
that's for two important reasons.
17
00:00:50,150 --> 00:00:54,210
First, when we optimize for one very specific device,
18
00:00:54,210 --> 00:00:57,930
we ignore all the other users of the other devices.
19
00:00:57,930 --> 00:01:01,330
And so we create a worst experience for them,
20
00:01:01,330 --> 00:01:04,020
which doesn't make a lot of sense.
21
00:01:04,020 --> 00:01:08,150
And the second and even more important maybe is that this
22
00:01:08,150 --> 00:01:13,150
strategy is an absolute nightmare for maintaining your coat
23
00:01:13,230 --> 00:01:16,130
and keeping it up to date in the future.
24
00:01:16,130 --> 00:01:19,680
Because if tomorrow Apple releases a new phone
25
00:01:19,680 --> 00:01:21,650
with new dimensions,
26
00:01:21,650 --> 00:01:24,860
do you really want to go back and change all your media
27
00:01:24,860 --> 00:01:29,090
queries and all the projects that you have ever built?
28
00:01:29,090 --> 00:01:30,830
Well, I don't think so.
29
00:01:30,830 --> 00:01:35,790
Right, and so that's why we call this the bad strategy
30
00:01:35,790 --> 00:01:38,600
and therefore we need another one.
31
00:01:38,600 --> 00:01:42,550
So the next strategy is what I call the good strategy.
32
00:01:42,550 --> 00:01:46,370
And this one is based on screen width rangers.
33
00:01:46,370 --> 00:01:50,300
So basically what we do here is to look at the most used
34
00:01:50,300 --> 00:01:53,560
width for different categories of devices
35
00:01:53,560 --> 00:01:58,260
like phones or tablets or desktop computers.
36
00:01:58,260 --> 00:02:02,300
And then we try to group them together in some logical way
37
00:02:02,300 --> 00:02:05,800
to then pick our breakpoints from that.
38
00:02:05,800 --> 00:02:10,110
And so this is already a lot better than the first strategy
39
00:02:10,110 --> 00:02:13,310
because we're using a lot of different devices here.
40
00:02:13,310 --> 00:02:15,270
And even more importantly,
41
00:02:15,270 --> 00:02:19,010
we're not setting breakpoints at one specific device,
42
00:02:19,010 --> 00:02:21,950
but between similar device sizes.
43
00:02:21,950 --> 00:02:26,090
And so you can see that nicely by these red bars here.
44
00:02:26,090 --> 00:02:29,220
So we can assume that most phones are somewhere
45
00:02:29,220 --> 00:02:32,560
between 300 and 500 pixels,
46
00:02:32,560 --> 00:02:37,560
and that most tablets are between 600 and 900 pixels.
47
00:02:37,810 --> 00:02:41,830
And so therefore we can place a breakpoint somewhere at 600
48
00:02:41,830 --> 00:02:45,950
pixels, and the same works for other categories.
49
00:02:45,950 --> 00:02:46,980
So for example,
50
00:02:46,980 --> 00:02:51,930
most landscape tablets are between 900 and 1100 pixels
51
00:02:51,930 --> 00:02:55,560
and desktops are usually above 1200 pixels.
52
00:02:55,560 --> 00:03:00,560
And so we can put a media query for example, at 1200 pixels.
53
00:03:01,100 --> 00:03:03,590
So that is our breakpoint here.
54
00:03:03,590 --> 00:03:07,010
All right, so again, this is already a much,
55
00:03:07,010 --> 00:03:09,940
much better strategy than the first one,
56
00:03:09,940 --> 00:03:13,410
but we can make it even better by combining this with the
57
00:03:13,410 --> 00:03:15,340
perfect strategy.
58
00:03:15,340 --> 00:03:18,580
And the perfect strategy is basically all about setting
59
00:03:18,580 --> 00:03:23,230
breakpoints at places where the design breaks down.
60
00:03:23,230 --> 00:03:24,790
So in this strategy,
61
00:03:24,790 --> 00:03:28,380
we can try to completely ignore devices and device
62
00:03:28,380 --> 00:03:32,760
categories all together and only look at our content
63
00:03:32,760 --> 00:03:34,370
and our design.
64
00:03:34,370 --> 00:03:36,840
And ideally it works like this.
65
00:03:36,840 --> 00:03:39,540
So we begin at one screen size,
66
00:03:39,540 --> 00:03:42,360
either desktop or mobile size,
67
00:03:42,360 --> 00:03:45,970
and then we start decreasing our screen width,
68
00:03:45,970 --> 00:03:49,100
or increasing it for mobile first.
69
00:03:49,100 --> 00:03:52,170
Then as soon as the design breaks,
70
00:03:52,170 --> 00:03:56,010
so, which means that the design no longer looks acceptable,
71
00:03:56,010 --> 00:04:00,140
we create a new breakpoint and that's it.
72
00:04:00,140 --> 00:04:01,640
So again,
73
00:04:01,640 --> 00:04:04,320
what we do in this perfect strategy
74
00:04:04,320 --> 00:04:06,200
is to just put a breakpoint,
75
00:04:06,200 --> 00:04:11,200
wherever design starts to look weird and like out of place
76
00:04:11,290 --> 00:04:14,970
and try to not think about devices at all.
77
00:04:14,970 --> 00:04:18,490
Now it's actually quite hard to do this one completely
78
00:04:18,490 --> 00:04:21,100
without thinking about devices.
79
00:04:21,100 --> 00:04:26,100
So without classifying breakpoints as a phone or as a tablet
80
00:04:26,140 --> 00:04:27,830
or something like that.
81
00:04:27,830 --> 00:04:31,340
So therefore basically we're going to use this perfect
82
00:04:31,340 --> 00:04:34,660
strategy together with the good strategy.
83
00:04:34,660 --> 00:04:38,390
So the one where we select breakpoints based on
84
00:04:38,390 --> 00:04:41,320
device with rangers as well.
85
00:04:41,320 --> 00:04:44,693
So let's start doing that in the next lecture.
6537
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.