1
00:00:02,550 --> 00:00:07,340
This is what we created in the last optional lectures.

2
00:00:07,340 --> 00:00:11,290
In case you didn't follow along these lectures, don't worry.

3
00:00:11,290 --> 00:00:14,890
This is just a basic website we created

4
00:00:14,890 --> 00:00:17,670
with HTML and CSS concepts.

5
00:00:17,670 --> 00:00:21,700
We learned about already in this course and this page

6
00:00:21,700 --> 00:00:25,830
simply consists of this single landing page.

7
00:00:25,830 --> 00:00:28,500
We have two navigation items up here,

8
00:00:28,500 --> 00:00:31,800
and we have these add to cart buttons, but at the moment,

9
00:00:31,800 --> 00:00:35,830
these are all just dummy data. So they don't actually work.

10
00:00:35,830 --> 00:00:39,210
It's just for the looks here at this stage.

11
00:00:39,210 --> 00:00:41,160
The looks are very important though,

12
00:00:41,160 --> 00:00:45,740
because this module is all about responsive design.

13
00:00:45,740 --> 00:00:50,740
This means a design which adapts to different device sizes.

14
00:00:51,300 --> 00:00:55,900
Nowadays users don't browse websites simply by using

15
00:00:55,900 --> 00:00:58,150
a desktop computer, for example,

16
00:00:58,150 --> 00:01:01,770
we have different devices available like smartphones,

17
00:01:01,770 --> 00:01:05,269
tablets, laptops, desktop computers, and so on,

18
00:01:05,269 --> 00:01:08,470
and all these can have different sizes on their own.

19
00:01:08,470 --> 00:01:11,490
So you have smaller smartphones, larger smartphones,

20
00:01:11,490 --> 00:01:14,100
smaller tablets, bigger tablets, and so on.

21
00:01:14,100 --> 00:01:16,673
So lots of different possibilities here.

22
00:01:17,820 --> 00:01:21,640
The problem is that we as developers don't know

23
00:01:21,640 --> 00:01:26,640
which device our users are using to browse our website,

24
00:01:27,760 --> 00:01:30,780
therefore as developers, we have to make sure

25
00:01:30,780 --> 00:01:34,150
that our site looks good, no matter which device

26
00:01:34,150 --> 00:01:37,333
the people browsing our website are using.

27
00:01:38,490 --> 00:01:42,720
For this, we have the concept of responsive design,

28
00:01:42,720 --> 00:01:45,780
and responsive design is basically all about

29
00:01:45,780 --> 00:01:48,850
this website content, website layout,

30
00:01:48,850 --> 00:01:52,353
adjustment, depending on the device size.

31
00:01:53,320 --> 00:01:56,110
Now in the DevTools, which are open to you already,

32
00:01:56,110 --> 00:01:59,800
we have different options to see what our website

33
00:01:59,800 --> 00:02:03,240
looks like on different device sizes.

34
00:02:03,240 --> 00:02:05,720
For this, I first want you to make sure

35
00:02:05,720 --> 00:02:10,080
to set the zoom level of the page to 100%.

36
00:02:10,080 --> 00:02:13,170
For this, please click onto the pager to the left,

37
00:02:13,170 --> 00:02:15,090
to make sure you don't accidentally

38
00:02:15,090 --> 00:02:17,910
select the DevTools here.

39
00:02:17,910 --> 00:02:21,750
And then press the command key on a Mac device

40
00:02:21,750 --> 00:02:24,850
or the control key on a Windows device.

41
00:02:24,850 --> 00:02:28,480
And now with plus you can increase the zoom level,

42
00:02:28,480 --> 00:02:31,150
with minus, you can decrease the zoom level,

43
00:02:31,150 --> 00:02:34,583
and here on the Mac you see over here in the right part,

44
00:02:36,410 --> 00:02:38,800
the current zoom level that is applied,

45
00:02:38,800 --> 00:02:41,340
I will set this to 100%.

46
00:02:41,340 --> 00:02:45,730
So please make sure to do so on your computer too.

47
00:02:45,730 --> 00:02:48,720
This will become important later in this module

48
00:02:48,720 --> 00:02:52,060
when we work with different device, which therefore,

49
00:02:52,060 --> 00:02:55,410
I just want to make sure that we have the same core settings

50
00:02:55,410 --> 00:02:58,243
to avoid any kind of confusion later.

51
00:02:59,200 --> 00:03:01,630
Now, talking about responsive design,

52
00:03:01,630 --> 00:03:05,430
we now have a kind of default view, so to say.

53
00:03:05,430 --> 00:03:08,000
If you click onto this vertical line here

54
00:03:08,000 --> 00:03:11,620
between the dev tools and the actual website content,

55
00:03:11,620 --> 00:03:14,180
then you see that you have the width and the height

56
00:03:14,180 --> 00:03:16,160
displayed up here. You can see this.

57
00:03:16,160 --> 00:03:20,800
We have now a width of around about 1,500 pixels

58
00:03:20,800 --> 00:03:24,860
and the height of 1,361 pixels.

59
00:03:24,860 --> 00:03:28,230
And as you can see, I can play around with this width.

60
00:03:28,230 --> 00:03:30,230
If I increase the width here which

61
00:03:30,230 --> 00:03:34,140
could be a very large screen to more than 2000 pixels.

62
00:03:34,140 --> 00:03:36,880
Well, you'll see that the readability of our page

63
00:03:36,880 --> 00:03:40,270
is not perfect. The font size might be too small.

64
00:03:40,270 --> 00:03:42,610
The images are kind of too wide.

65
00:03:42,610 --> 00:03:45,950
So our entire card basically is too wide and so on.

66
00:03:45,950 --> 00:03:47,830
So the look is not perfect.

67
00:03:47,830 --> 00:03:50,270
The look doesn't really perfectly adjust

68
00:03:50,270 --> 00:03:52,693
to our bigger device width.

69
00:03:53,620 --> 00:03:55,870
And if I do it the other way around,

70
00:03:55,870 --> 00:03:59,890
by decreasing the device width, you see it looks okay,

71
00:03:59,890 --> 00:04:04,090
but now things start to look odd, especially right here.

72
00:04:04,090 --> 00:04:07,740
You see on top the navigation bar, well,

73
00:04:07,740 --> 00:04:09,920
that's definitely not a nice styling.

74
00:04:09,920 --> 00:04:12,280
We have the card, we have the button,

75
00:04:12,280 --> 00:04:14,530
which is kind of broken into, well,

76
00:04:14,530 --> 00:04:16,519
two different lines and also

77
00:04:16,519 --> 00:04:18,779
the enter a card being that high.

78
00:04:18,779 --> 00:04:20,579
Well, I don't think this looks good.

79
00:04:22,150 --> 00:04:25,740
Besides testing our device size by

80
00:04:25,740 --> 00:04:29,170
increasing and decreasing the width here in DevTools.

81
00:04:29,170 --> 00:04:34,170
You can also emulate real devices in the Chrome DevTools.

82
00:04:34,680 --> 00:04:36,690
You can find this option right here

83
00:04:36,690 --> 00:04:38,860
next to the elements written,

84
00:04:38,860 --> 00:04:41,590
this symbol with the smartphone and the tablet.

85
00:04:41,590 --> 00:04:43,290
If you select this,

86
00:04:43,290 --> 00:04:48,290
then you have the emulated view on a real mobile device.

87
00:04:48,350 --> 00:04:51,340
In my case here, we have an iPhone six, seven, eight,

88
00:04:51,340 --> 00:04:53,910
or plus, if you click onto this arrow,

89
00:04:53,910 --> 00:04:57,060
you can select different other devices like an iPad,

90
00:04:57,060 --> 00:05:00,763
for example, or you can also use an iPhone X.

91
00:05:02,120 --> 00:05:04,160
With this, you get even more control

92
00:05:04,160 --> 00:05:06,333
about the looks of our website.

93
00:05:07,260 --> 00:05:09,450
At the moment I will work with the,

94
00:05:09,450 --> 00:05:12,300
well the change of the width in the DevTools,

95
00:05:12,300 --> 00:05:15,090
so we can simply click onto the symbol once again,

96
00:05:15,090 --> 00:05:17,143
to get back to this normal view.

97
00:05:18,300 --> 00:05:22,880
Now, as you saw, our design is not responsive at the moment,

98
00:05:22,880 --> 00:05:26,170
it has some default, well responsive behavior,

99
00:05:26,170 --> 00:05:28,890
but we have to work on this design on our own

100
00:05:28,890 --> 00:05:33,050
to make sure it looks good on all of our devices.

101
00:05:33,050 --> 00:05:35,770
To implement such a responsive design though,

102
00:05:35,770 --> 00:05:39,580
we have to understand different concepts.

103
00:05:39,580 --> 00:05:42,600
One of these concepts lets us dive deeper

104
00:05:42,600 --> 00:05:45,793
into the concept of units, once again.