1
00:00:08,570 --> 00:00:09,410
Finally.

2
00:00:09,410 --> 00:00:15,810
Finally, the time has come for us to get started with responsive design.

3
00:00:15,830 --> 00:00:16,880
Great.

4
00:00:17,030 --> 00:00:18,710
So what is it?

5
00:00:18,710 --> 00:00:22,510
And why should we care about responsive design?

6
00:00:22,520 --> 00:00:31,700
So when we say responsive design, it simply means that your website or your application must adapt

7
00:00:31,700 --> 00:00:37,810
to any screen size, ranging from watches to big televisions.

8
00:00:37,820 --> 00:00:44,060
So your website must look good irrespective of the device the user is using.

9
00:00:44,300 --> 00:00:49,400
Do you remember when we developed this website using these properties?

10
00:00:49,520 --> 00:00:53,360
This particular website is not responsive.

11
00:00:53,360 --> 00:01:01,040
So let me prove to you, when I reduce the screen size, you can see that not all contained are visible

12
00:01:01,040 --> 00:01:06,140
on the page unless I increase the size of my browser.

13
00:01:06,170 --> 00:01:10,640
So let's say that a user is using a small device.

14
00:01:10,670 --> 00:01:16,970
It means that their user will not be able to see the remaining content, which is really bad.

15
00:01:16,970 --> 00:01:17,660
Right.

16
00:01:17,720 --> 00:01:23,800
And we can test this one using a built in to form chrome.

17
00:01:23,810 --> 00:01:34,340
So if you right click and click on inspect and then after that you click on this icon called font and

18
00:01:34,340 --> 00:01:43,280
you can see that we have dimensions and here we can view our website on a different device ranging from

19
00:01:43,280 --> 00:01:45,700
small devices to big devices.

20
00:01:45,710 --> 00:01:50,370
When I choose iPhone, as you can see, that doesn't look good.

21
00:01:50,390 --> 00:01:52,090
Look at the image where it is.

22
00:01:52,100 --> 00:01:54,560
It is overlapping this one.

23
00:01:54,680 --> 00:02:04,400
And if I change to pixel five, look at the behavior of our website and this one and on less on a bigger

24
00:02:04,400 --> 00:02:05,030
screen.

25
00:02:05,030 --> 00:02:10,070
That's where I can see and you can select the responsive in that way.

26
00:02:10,070 --> 00:02:18,500
We can toggle the sizes as that and you can see that it is not responsive if you go to what we are going

27
00:02:18,500 --> 00:02:19,530
to develop.

28
00:02:19,550 --> 00:02:28,430
Now, if I reduce the screen size, have a look, everything aligned perfectly and this is what we call

29
00:02:28,430 --> 00:02:30,830
the responsive design.

30
00:02:30,920 --> 00:02:41,030
And the same thing when I click on Inspect and I reduce the screen size, you can see that it's being

31
00:02:41,030 --> 00:02:43,940
adapted to any screen size.

32
00:02:43,940 --> 00:02:47,660
How awesome it is, guys.

33
00:02:47,660 --> 00:02:52,280
You can see that is being laid out perfectly great.

34
00:02:52,280 --> 00:02:55,940
So let's get started with responsive design.

35
00:02:55,970 --> 00:03:02,900
The next video, we will have a look at the road map, meaning what you need to know before we can get

36
00:03:02,900 --> 00:03:05,000
started with responsive design.

37
00:03:05,000 --> 00:03:09,440
That is the ingredients to get started with responsive design.