Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,200 --> 00:00:03,733
Since building a real world website,
2
00:00:03,733 --> 00:00:07,235
we need to think about responsive web design principles
3
00:00:07,235 --> 00:00:09,730
from the very beginning.
4
00:00:09,730 --> 00:00:13,766
Even if we initially built and test for big screens.
5
00:00:13,766 --> 00:00:16,838
So these principles are really ingrained
6
00:00:16,838 --> 00:00:19,174
in the entire development process.
7
00:00:19,174 --> 00:00:20,699
And so therefore,
8
00:00:20,699 --> 00:00:23,495
before we actually start building the site,
9
00:00:23,495 --> 00:00:28,043
let's quickly learn what responsive design is all about.
10
00:00:29,670 --> 00:00:33,274
So responsive design or responsive web design,
11
00:00:33,274 --> 00:00:35,719
as it's been more traditionally called,
12
00:00:35,719 --> 00:00:39,318
is essentially a technique that we can use
13
00:00:39,318 --> 00:00:43,799
to make a webpage, adjust its layout and its visual style
14
00:00:43,799 --> 00:00:46,326
to any possible screen size.
15
00:00:46,326 --> 00:00:50,086
And with screen size, we don't just mean the entire screen
16
00:00:50,086 --> 00:00:53,516
of the device that it's been used to consume the page,
17
00:00:53,516 --> 00:00:55,935
but it might also just be the window
18
00:00:55,935 --> 00:00:59,112
or the viewport size of the browser.
19
00:00:59,112 --> 00:01:03,197
So in practice, this means that responsive web design
20
00:01:03,197 --> 00:01:06,906
makes websites usable on all devices.
21
00:01:06,906 --> 00:01:09,507
So no matter if you're using desktop computers,
22
00:01:09,507 --> 00:01:11,838
tablets, or a mobile phone,
23
00:01:11,838 --> 00:01:15,605
a responsive website will be easily consumable
24
00:01:15,605 --> 00:01:17,477
on all of these devices.
25
00:01:17,477 --> 00:01:21,467
Now it's important to understand that responsive web design
26
00:01:21,467 --> 00:01:24,416
is not a separate technology.
27
00:01:24,416 --> 00:01:28,590
So instead it is really just a set of best practices
28
00:01:28,590 --> 00:01:33,257
and of techniques that we use in our regular CSS.
29
00:01:33,257 --> 00:01:34,194
Okay.
30
00:01:34,194 --> 00:01:38,471
And speaking of the set of best practices and techniques,
31
00:01:38,471 --> 00:01:41,604
let's now actually learn about them.
32
00:01:41,604 --> 00:01:44,983
So there are essentially four big ingredients
33
00:01:44,983 --> 00:01:47,174
to responsive designs.
34
00:01:47,174 --> 00:01:50,584
And those are fluid layouts, responsive units,
35
00:01:50,584 --> 00:01:54,273
flexible images and media queries.
36
00:01:54,273 --> 00:01:55,765
Now there might be more
37
00:01:55,765 --> 00:01:57,965
and they might be classified differently,
38
00:01:57,965 --> 00:02:01,033
but these are really the big and important ones
39
00:02:01,033 --> 00:02:02,604
that you need to know.
40
00:02:02,604 --> 00:02:04,963
And so let's start with fluid layouts,
41
00:02:04,963 --> 00:02:08,414
which basically allow the webpage to adapt
42
00:02:08,414 --> 00:02:11,010
to the current viewport width.
43
00:02:11,010 --> 00:02:13,860
And this is a behavior that we have already seen
44
00:02:13,860 --> 00:02:15,224
in practice a couple of times,
45
00:02:15,224 --> 00:02:19,078
especially when we used Flexbox and CSS grid,
46
00:02:19,078 --> 00:02:21,914
which are fluid by default.
47
00:02:21,914 --> 00:02:22,747
All right.
48
00:02:22,747 --> 00:02:26,224
And we can very easily create fluid layouts,
49
00:02:26,224 --> 00:02:30,085
simply by using the percentage units for all elements
50
00:02:30,085 --> 00:02:32,653
that should adapt to the viewport.
51
00:02:32,653 --> 00:02:37,624
So using percentages instead of pixels for all the elements
52
00:02:37,624 --> 00:02:41,370
that are usually part of any layout.
53
00:02:41,370 --> 00:02:44,361
So things that should really adapt to the viewport
54
00:02:44,361 --> 00:02:48,596
should always use percentages and not pixels.
55
00:02:48,596 --> 00:02:52,271
Also, we should always use the max-with property,
56
00:02:52,271 --> 00:02:54,247
instead of simply width.
57
00:02:54,247 --> 00:02:57,261
And we will learn a little bit about how this one works
58
00:02:57,261 --> 00:02:59,236
in the next lecture.
59
00:02:59,236 --> 00:03:02,327
Next up, there are responsive units,
60
00:03:02,327 --> 00:03:04,228
which basically it just means
61
00:03:04,228 --> 00:03:06,299
that we should use the REM unit,
62
00:03:06,299 --> 00:03:09,809
instead of pixel for most of the length
63
00:03:09,809 --> 00:03:12,316
that are in our CSS.
64
00:03:12,316 --> 00:03:14,705
And using REMS instead of pixels,
65
00:03:14,705 --> 00:03:17,305
will make it really easy for us
66
00:03:17,305 --> 00:03:22,305
to basically scale the entire page up or down automatically.
67
00:03:22,874 --> 00:03:24,968
And if that sounds a little bit strange,
68
00:03:24,968 --> 00:03:28,608
I can show it to you in the next lecture as well.
69
00:03:28,608 --> 00:03:30,406
Now here, one helpful trick
70
00:03:30,406 --> 00:03:33,017
that I will also show you how to implement
71
00:03:33,017 --> 00:03:37,136
in the next lecture, is to set one REM to 10 pixels,
72
00:03:37,136 --> 00:03:40,180
because that makes it very easy for us
73
00:03:40,180 --> 00:03:41,997
to then calculate these length.
74
00:03:41,997 --> 00:03:46,800
And again, more about that in the next video.
75
00:03:46,800 --> 00:03:49,941
The next ingredient are flexible and fluid images.
76
00:03:49,941 --> 00:03:53,500
And this is a separate and important ingredient,
77
00:03:53,500 --> 00:03:57,282
because by default, images behave different
78
00:03:57,282 --> 00:03:58,498
than text content,
79
00:03:58,498 --> 00:04:01,270
because they do not scale automatically
80
00:04:01,270 --> 00:04:04,220
as we change the viewport.
81
00:04:04,220 --> 00:04:05,822
Therefore, we need to fix that.
82
00:04:05,822 --> 00:04:10,036
So we need to ensure that they do also adapt nicely
83
00:04:10,036 --> 00:04:14,243
to whatever viewport the page is viewed at.
84
00:04:14,243 --> 00:04:17,144
And usually we simply make images flexible
85
00:04:17,144 --> 00:04:20,223
by defining their dimensions in percentages
86
00:04:20,223 --> 00:04:22,853
and not using pixels.
87
00:04:22,853 --> 00:04:26,753
And also sometimes by using the max-width property,
88
00:04:26,753 --> 00:04:28,780
instead of width.
89
00:04:28,780 --> 00:04:31,453
So this one sounds trivial and not important,
90
00:04:31,453 --> 00:04:33,734
but actually flexible images
91
00:04:33,734 --> 00:04:35,935
is yet another important ingredient
92
00:04:35,935 --> 00:04:38,466
of responsive web design.
93
00:04:38,466 --> 00:04:41,981
And now finally media queries is what brings
94
00:04:41,981 --> 00:04:43,693
all the other ingredients together
95
00:04:43,693 --> 00:04:47,260
and really brings responsive sites to life.
96
00:04:47,260 --> 00:04:49,233
So without media queries,
97
00:04:49,233 --> 00:04:52,565
responsive web design would not work at all.
98
00:04:52,565 --> 00:04:56,087
And that is because media queries allow us to change styles
99
00:04:56,087 --> 00:05:00,615
on certain viewport width, which we call breakpoints.
100
00:05:00,615 --> 00:05:04,032
So basically media queries allow developers
101
00:05:04,032 --> 00:05:07,084
to create different versions of a website
102
00:05:07,084 --> 00:05:09,865
for different types of devices,
103
00:05:09,865 --> 00:05:14,234
because different types of devices have a different width.
104
00:05:14,234 --> 00:05:15,604
Now just keep in mind,
105
00:05:15,604 --> 00:05:19,086
that media queries alone are completely useless.
106
00:05:19,086 --> 00:05:22,343
We really need to start creating a fluid layout
107
00:05:22,343 --> 00:05:23,971
from the very beginning.
108
00:05:23,971 --> 00:05:26,705
And the same is true for responsive units
109
00:05:26,705 --> 00:05:28,545
and flexible images.
110
00:05:28,545 --> 00:05:31,927
And in fact, we usually write media queries
111
00:05:31,927 --> 00:05:34,754
only at the end of building a certain page
112
00:05:34,754 --> 00:05:36,954
or a certain component.
113
00:05:36,954 --> 00:05:39,865
And so that's why we will use fluid layouts
114
00:05:39,865 --> 00:05:43,853
and responsive units and flexible images in this section,
115
00:05:43,853 --> 00:05:46,043
but then media queries,
116
00:05:46,043 --> 00:05:48,280
we will only use them in the next section
117
00:05:48,280 --> 00:05:51,268
to really make this page responsive.
118
00:05:51,268 --> 00:05:52,369
All right.
119
00:05:52,369 --> 00:05:54,189
Now, just as a side note,
120
00:05:54,189 --> 00:05:57,670
of course I'm not showing you all of this to scare you
121
00:05:57,670 --> 00:06:01,940
or to make you memorize all this information.
122
00:06:01,940 --> 00:06:04,924
So this slide is more like a reference for you in the future
123
00:06:04,924 --> 00:06:08,539
and also for us to guide us through this project.
124
00:06:08,539 --> 00:06:09,993
All right.
125
00:06:10,968 --> 00:06:13,465
Now finally we also need to talk about
126
00:06:13,465 --> 00:06:14,952
the two opposites strategies
127
00:06:14,952 --> 00:06:18,939
of building responsive sites with CSS.
128
00:06:18,939 --> 00:06:22,368
So the first one is the desktop-first approach,
129
00:06:22,368 --> 00:06:27,368
in which we optimize our interfaces for large screens.
130
00:06:27,700 --> 00:06:30,800
And so therefore we start writing CSS code
131
00:06:30,800 --> 00:06:34,997
for these large screens into our main CSS file.
132
00:06:34,997 --> 00:06:35,946
Then later,
133
00:06:35,946 --> 00:06:39,055
when we actually want to make the website responsive,
134
00:06:39,055 --> 00:06:42,866
we simply write media queries in order to shrink the design
135
00:06:42,866 --> 00:06:44,984
to fit to smaller screens.
136
00:06:44,984 --> 00:06:48,053
This is the more traditional way of doing things,
137
00:06:48,053 --> 00:06:52,116
and it's also the easier way to learn in my opinion.
138
00:06:52,116 --> 00:06:55,823
And so therefore that's the reason why we will actually use
139
00:06:55,823 --> 00:06:59,473
the desktop-first approach in this project.
140
00:06:59,473 --> 00:07:03,004
Now on the other hand, in mobile-first,
141
00:07:03,004 --> 00:07:06,300
we start writing CSS code for smaller screens
142
00:07:06,300 --> 00:07:09,670
in order to basically optimize or layout
143
00:07:09,670 --> 00:07:13,496
in our website for mobile small screens.
144
00:07:13,496 --> 00:07:17,595
Then from there, we can move up to larger screens of course,
145
00:07:17,595 --> 00:07:20,288
and again, using media queries.
146
00:07:20,288 --> 00:07:25,288
So basically it is the complete opposite of desktop-first.
147
00:07:25,570 --> 00:07:26,403
Right.
148
00:07:26,403 --> 00:07:29,984
Now the idea that's behind this strategy of mobile-first,
149
00:07:29,984 --> 00:07:32,143
is that we, as the designer,
150
00:07:32,143 --> 00:07:35,333
really have to think about the mobile experience
151
00:07:35,333 --> 00:07:37,104
for our users.
152
00:07:37,104 --> 00:07:41,344
And basically we can do that by reducing our website
153
00:07:41,344 --> 00:07:43,202
to the absolute essentials
154
00:07:43,202 --> 00:07:45,632
and stripping away everything
155
00:07:45,632 --> 00:07:48,003
that is not entirely necessary.
156
00:07:48,003 --> 00:07:50,912
And since we live in a mobile world now,
157
00:07:50,912 --> 00:07:53,843
this has actually become the more modern way
158
00:07:53,843 --> 00:07:56,503
of building websites these days.
159
00:07:56,503 --> 00:08:01,001
But again, doing desktop-first works just as fine, I think.
160
00:08:01,001 --> 00:08:04,848
And it is also way easier for me to show you as a beginner,
161
00:08:04,848 --> 00:08:07,062
how web development works.
162
00:08:07,062 --> 00:08:10,558
So basically how CSS and HTML works,
163
00:08:10,558 --> 00:08:15,032
with really seeing the results in a large screen.
164
00:08:15,032 --> 00:08:17,680
Okay, and that's it.
165
00:08:17,680 --> 00:08:19,541
That's basically a short introduction
166
00:08:19,541 --> 00:08:22,229
into responsive web design.
167
00:08:22,229 --> 00:08:23,779
And so now in the next lecture,
168
00:08:23,779 --> 00:08:26,850
we will quickly learn about two of the ingredients,
169
00:08:26,850 --> 00:08:28,518
a little bit better in CSS.
170
00:08:28,518 --> 00:08:31,427
So we're going to learn how the REM unit works
171
00:08:31,427 --> 00:08:34,423
and also the max-width property.
12705
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.