0
1
00:00:00,180 --> 00:00:05,380
Before the times of responsive design, the websites would shrink down on mobile devices.
1

2
00:00:05,400 --> 00:00:07,230
Many websites are still made like this,
2

3
00:00:07,230 --> 00:00:12,600
until today. Just very recently I was looking for some information about Payoneer payment system
3

4
00:00:12,920 --> 00:00:18,830
and got to their help article or the support article page, which looked like this.
4

5
00:00:18,870 --> 00:00:24,480
It's a shrink down version of their desktop site. Using this sort of website on the mobile phone,
5

6
00:00:24,480 --> 00:00:25,620
is just super annoying.
6

7
00:00:25,650 --> 00:00:28,500
You have to zoom in and move around, and you know the drill.
7

8
00:00:28,680 --> 00:00:34,890
Luckily with Webflow, we can use the power of responsive design. And serve our users different layouts
8

9
00:00:34,890 --> 00:00:40,470
and very specific responsive layouts for their specific fonts and specific devices that they are looking
9

10
00:00:40,470 --> 00:00:40,770
at.
10

11
00:00:40,770 --> 00:00:44,640
This way everybody's going to have an optimal experience with our website.
11

12
00:00:44,670 --> 00:00:49,680
In this section, we're going to do exactly that make our home page responsive and optimize it for different
12

13
00:00:49,680 --> 00:00:53,080
screen sizes.
13

14
00:00:53,110 --> 00:00:57,640
First, let's understand how Webflow works with responsiveness. Inside the designer on the top,
14

15
00:00:57,640 --> 00:01:00,600
we can see the switches for different devices.
15

16
00:01:00,610 --> 00:01:01,830
First one is desktop.
16

17
00:01:01,840 --> 00:01:07,150
That's where we are. Then it's tablet, mobile landscape and mobile portrait.
17

18
00:01:07,150 --> 00:01:11,260
In technical words, we call these Breakpoints or Media Queries.
18

19
00:01:11,350 --> 00:01:15,880
They work like checkpoints, instructing browser to change styles of elements,
19

20
00:01:15,880 --> 00:01:22,600
if a browser width is in certain size in pixels. For example, if we make a style change on a tablet view,
20

21
00:01:22,870 --> 00:01:25,930
then this change won't be affected on a desktop.
21

22
00:01:25,930 --> 00:01:31,120
This is basically adding an extra CSS rule that says, if browser window is a certain size,
22

23
00:01:31,540 --> 00:01:34,160
then show black background instead.
23

24
00:01:34,190 --> 00:01:40,330
And if we decide to change the background color on the desktop version, this change won't take place
24

25
00:01:40,330 --> 00:01:43,680
on the tablet view, because we're overriding the background color.
25

26
00:01:43,690 --> 00:01:46,830
This uses the same inheritance rule as everything else.
26

27
00:01:46,840 --> 00:01:52,420
Remember how Combo Classes carries all the style information from the Base Class? But moment we change
27

28
00:01:52,420 --> 00:01:56,530
a particular style on the Combo Class, then we are permanently overriding it.
28

29
00:01:56,530 --> 00:01:58,870
So no future changes on the Base Class,
29

30
00:01:58,870 --> 00:02:03,730
will effect for the particular style. I say a particular style because that's an important key word
30

31
00:02:03,730 --> 00:02:04,360
here.
31

32
00:02:04,390 --> 00:02:09,990
Just like classes, same with breakpoints. We haven't touched any other style besides background color.
32

33
00:02:10,210 --> 00:02:13,170
So everything else, will be inherited from the desktop version
33

34
00:02:13,170 --> 00:02:16,060
every time we make the change, like this border
34

35
00:02:16,060 --> 00:02:16,780
for example.
35

36
00:02:19,690 --> 00:02:23,540
The changes that we make to different views only apply to styles.
36

37
00:02:23,590 --> 00:02:30,080
If you change the structure of the page or add new elements, that will be reflected everywhere.
37

38
00:02:30,190 --> 00:02:30,500
Why?
38

39
00:02:30,520 --> 00:02:37,550
Because these breakpoints are CSS feature not part of HTML. And in CSS we style things, we can't change
39

40
00:02:37,550 --> 00:02:38,960
the skeleton of the page.
40

41
00:02:38,960 --> 00:02:44,690
We can only change the looks. Although we have an ability to hide and show elements using CSS.
41

42
00:02:44,690 --> 00:02:49,970
So if we want something on tablet, but we don't want it on desktop, we can just hide it.
42

43
00:03:00,560 --> 00:03:06,380
This image is hidden on desktop version, but it's still part of HTML and it's still inside the Navigator,
43

44
00:03:06,390 --> 00:03:07,070
as you can see.
44

45
00:03:09,930 --> 00:03:14,180
Another thing to note about style changes, when you make a change on a tablet,
45

46
00:03:14,280 --> 00:03:17,730
all changes will cascade down to the smaller screen.
46

47
00:03:17,730 --> 00:03:23,790
In other words, mobile landscape and mobile portrait will inherit changes from the tablet. And mobile
47

48
00:03:23,790 --> 00:03:26,670
portrait will inherit changes from mobile landscape.
48

49
00:03:30,050 --> 00:03:35,330
You can override styles on smaller devices, but any changes on smaller devices won't affect to bigger
49

50
00:03:35,330 --> 00:03:36,290
devices.
50

51
00:03:36,320 --> 00:03:42,860
This uses same inheritance hierarchy like classes. Mobile portrait inherit styles from mobile landscape.
51

52
00:03:43,100 --> 00:03:50,680
Which in turn inherits its styles from tablet. Which inherits tiles from desktop. Each device breakpoint
52

53
00:03:50,680 --> 00:03:57,850
has a range to it. We can see this range using this canvas resizer. The tablet expands to the maximum
53

54
00:03:57,850 --> 00:04:02,940
of 991 pixels and shrinks to 768 pixels.
54

55
00:04:02,980 --> 00:04:04,420
You can see this on the ruler below.
55

56
00:04:04,450 --> 00:04:11,680
This means 992 pixels is where desktop begins. And 767 is where it turns into mobile.
56

57
00:04:11,680 --> 00:04:15,120
The changes that we make to each breakpoint applies to the range.
57

58
00:04:15,130 --> 00:04:18,250
That's why we have to check by resizing the canvas
58

59
00:04:18,250 --> 00:04:24,970
in each view to make sure it responds well. By default, Webflow shows the most common sizes in each view.
59

60
00:04:25,360 --> 00:04:32,080
On the bottom, when you resize that slider you'll see that Webflow shows common devices for that specific
60

61
00:04:32,080 --> 00:04:33,030
pixel width.
61

62
00:04:33,130 --> 00:04:40,000
This is a good way for us to see how many devices are being affected by our changes. And to make sure
62

63
00:04:40,000 --> 00:04:47,110
that we achieve optimal designs and optimal versions for the most popular devices.
63

64
00:04:47,110 --> 00:04:53,020
One thing to note, we're not able to apply specific style for independent devices, like pink background
64

65
00:04:53,020 --> 00:04:56,390
on iPhone 6. When we apply styles on the mobile portrait,
65

66
00:04:56,410 --> 00:05:01,990
then that style is set for the entire range of all the width and devices whoes screen resolution false
66

67
00:05:01,990 --> 00:05:05,840
in that range.
67

68
00:05:05,870 --> 00:05:09,260
There is one more thing I want to show you before we move on to optimizing.
68

69
00:05:09,260 --> 00:05:15,680
We can reset any style changes we make by clicking on the blue style and clicking reset. Just like we
69

70
00:05:15,680 --> 00:05:16,850
would do with classes.
70

71
00:05:16,880 --> 00:05:21,940
The resetting will remove overrides and inherit value from the first higher level size.
71

72
00:05:21,950 --> 00:05:23,180
It even says here,
72

73
00:05:23,180 --> 00:05:25,940
where will the style be inherited after resetting.
73

74
00:05:25,940 --> 00:05:31,520
In this case, hero section class for a tablet version. That icon in front shows that it's a tablet version.
74

75
00:05:35,030 --> 00:05:39,580
As a shortcut hold Alt or Option when clicking and it will reset right away.
75

76
00:05:39,790 --> 00:05:44,120
And for the tablet it shows that it will revert to desktop version. And you can see that with a small
76

77
00:05:44,120 --> 00:05:52,120
laptop icon. So to recap. We are able to change styles of our elements for 4 different sizes: desktop, tablet,
77

78
00:05:52,180 --> 00:05:56,770
mobile landscape and mobile portrait. For each of this device types,
78

79
00:05:56,770 --> 00:06:03,160
we also have an ability to shrink and expand browser within. So we can clearly see how our webpage will
79

80
00:06:03,160 --> 00:06:09,730
look like for any number of devices, for example, iPhone 6 or 7. Styles are being inherited from top to
80

81
00:06:09,730 --> 00:06:14,800
bottom, from bigger devices to the smaller ones. And not in opposite directions,
81

82
00:06:14,800 --> 00:06:20,830
so the changes on mobile are not going to affect tablet or desktop. But change on tablet will affect
82

83
00:06:20,830 --> 00:06:21,790
the mobile.
83

84
00:06:21,790 --> 00:06:26,740
All right. Up next, we'll get down and optimize our page for these devices, starting from hero section.