Before the times of responsive design, the websites would shrink down on mobile devices. 1
Many websites are still made like this, 2
until today. Just very recently I was looking for some information about Payoneer payment system 3
and got to their help article or the support article page, which looked like this. 4
It's a shrink down version of their desktop site. Using this sort of website on the mobile phone, 5
is just super annoying. 6
You have to zoom in and move around, and you know the drill. 7
Luckily with Webflow, we can use the power of responsive design. And serve our users different layouts 8
and very specific responsive layouts for their specific fonts and specific devices that they are looking 9
at. 10
This way everybody's going to have an optimal experience with our website. 11
In this section, we're going to do exactly that make our home page responsive and optimize it for different 12
screen sizes. 13
First, let's understand how Webflow works with responsiveness. Inside the designer on the top, 14
we can see the switches for different devices. 15
First one is desktop. 16
That's where we are. Then it's tablet, mobile landscape and mobile portrait. 17
In technical words, we call these Breakpoints or Media Queries. 18
They work like checkpoints, instructing browser to change styles of elements, 19
if a browser width is in certain size in pixels. For example, if we make a style change on a tablet view, 20
then this change won't be affected on a desktop. 21
This is basically adding an extra CSS rule that says, if browser window is a certain size, 22
then show black background instead. 23
And if we decide to change the background color on the desktop version, this change won't take place 24
on the tablet view, because we're overriding the background color. 25
This uses the same inheritance rule as everything else. 26
Remember how Combo Classes carries all the style information from the Base Class? But moment we change 27
a particular style on the Combo Class, then we are permanently overriding it. 28
So no future changes on the Base Class, 29
will effect for the particular style. I say a particular style because that's an important key word 30
here. 31
Just like classes, same with breakpoints. We haven't touched any other style besides background color. 32
So everything else, will be inherited from the desktop version 33
every time we make the change, like this border 34
for example. 35
The changes that we make to different views only apply to styles. 36
If you change the structure of the page or add new elements, that will be reflected everywhere. 37
Why? 38
Because these breakpoints are CSS feature not part of HTML. And in CSS we style things, we can't change 39
the skeleton of the page. 40
We can only change the looks. Although we have an ability to hide and show elements using CSS. 41
So if we want something on tablet, but we don't want it on desktop, we can just hide it. 42
This image is hidden on desktop version, but it's still part of HTML and it's still inside the Navigator, 43
as you can see. 44
Another thing to note about style changes, when you make a change on a tablet, 45
all changes will cascade down to the smaller screen. 46
In other words, mobile landscape and mobile portrait will inherit changes from the tablet. And mobile 47
portrait will inherit changes from mobile landscape. 48
You can override styles on smaller devices, but any changes on smaller devices won't affect to bigger 49
devices. 50
This uses same inheritance hierarchy like classes. Mobile portrait inherit styles from mobile landscape. 51
Which in turn inherits its styles from tablet. Which inherits tiles from desktop. Each device breakpoint 52
has a range to it. We can see this range using this canvas resizer. The tablet expands to the maximum 53
of 991 pixels and shrinks to 768 pixels. 54
You can see this on the ruler below. 55
This means 992 pixels is where desktop begins. And 767 is where it turns into mobile. 56
The changes that we make to each breakpoint applies to the range. 57
That's why we have to check by resizing the canvas 58
in each view to make sure it responds well. By default, Webflow shows the most common sizes in each view. 59
On the bottom, when you resize that slider you'll see that Webflow shows common devices for that specific 60
pixel width. 61
This is a good way for us to see how many devices are being affected by our changes. And to make sure 62
that we achieve optimal designs and optimal versions for the most popular devices. 63
One thing to note, we're not able to apply specific style for independent devices, like pink background 64
on iPhone 6. When we apply styles on the mobile portrait, 65
then that style is set for the entire range of all the width and devices whoes screen resolution false 66
in that range. 67
There is one more thing I want to show you before we move on to optimizing. 68
We can reset any style changes we make by clicking on the blue style and clicking reset. Just like we 69
would do with classes. 70
The resetting will remove overrides and inherit value from the first higher level size. 71
It even says here, 72
where will the style be inherited after resetting. 73
In this case, hero section class for a tablet version. That icon in front shows that it's a tablet version. 74
As a shortcut hold Alt or Option when clicking and it will reset right away. 75
And for the tablet it shows that it will revert to desktop version. And you can see that with a small 76
laptop icon. So to recap. We are able to change styles of our elements for 4 different sizes: desktop, tablet, 77
mobile landscape and mobile portrait. For each of this device types, 78
we also have an ability to shrink and expand browser within. So we can clearly see how our webpage will 79
look like for any number of devices, for example, iPhone 6 or 7. Styles are being inherited from top to 80
bottom, from bigger devices to the smaller ones. And not in opposite directions, 81
so the changes on mobile are not going to affect tablet or desktop. But change on tablet will affect 82
the mobile. 83
All right. Up next, we'll get down and optimize our page for these devices, starting from hero section.