1
00:00:00,000 --> 00:00:02,160
Alright, is so
technically we have

2
00:00:02,160 --> 00:00:04,410
finished building our website.

3
00:00:04,410 --> 00:00:05,840
We have the homepage,

4
00:00:05,835 --> 00:00:07,335
we have the blog page,

5
00:00:07,335 --> 00:00:09,305
and we'll also have
a contact page

6
00:00:09,300 --> 00:00:11,550
as well as the
header and footer.

7
00:00:11,550 --> 00:00:12,840
But there is one very, very

8
00:00:12,840 --> 00:00:14,670
important thing that we
need to take care of and

9
00:00:14,670 --> 00:00:17,970
that is going to be
responsive design.

10
00:00:17,969 --> 00:00:20,129
Always remember
that so many people

11
00:00:20,130 --> 00:00:24,060
nowadays use their mobile
phones to browse the Internet.

12
00:00:24,060 --> 00:00:25,640
And if anybody stumble,

13
00:00:25,635 --> 00:00:28,665
stumble across your website
on the mobile phone,

14
00:00:28,665 --> 00:00:31,455
you want to make sure
that it looks good.

15
00:00:31,455 --> 00:00:33,065
So what we're gonna do in

16
00:00:33,060 --> 00:00:34,380
the rest of this
section is I'm going to

17
00:00:34,380 --> 00:00:37,760
show you how you can
reconstruct the header,

18
00:00:37,755 --> 00:00:39,275
the homepage, the footer,

19
00:00:39,270 --> 00:00:41,640
and the other pages
to look responsive.

20
00:00:41,635 --> 00:00:44,285
So that if it's viewed
on a tablet device

21
00:00:44,285 --> 00:00:47,285
or on a mobile device,
it will look good.

22
00:00:47,285 --> 00:00:48,205
Lambdas give you a very,

23
00:00:48,200 --> 00:00:49,430
very quick
demonstration right now

24
00:00:49,430 --> 00:00:51,470
this is for the tablet view.

25
00:00:51,470 --> 00:00:52,870
You can see I have reduced

26
00:00:52,865 --> 00:00:55,265
the size of my screen
to that of a tablet.

27
00:00:55,265 --> 00:00:56,755
And you can see right
now that it still

28
00:00:56,750 --> 00:00:58,510
looks very, very, very good.

29
00:00:58,505 --> 00:01:00,865
We don't have any issues
with space in the header.

30
00:01:00,860 --> 00:01:01,870
Looks fine.

31
00:01:01,865 --> 00:01:03,625
Testimony notes
section looks fine.

32
00:01:03,620 --> 00:01:04,930
The photo looks fine.

33
00:01:04,925 --> 00:01:06,865
But now if I scroll
all the way down

34
00:01:06,860 --> 00:01:08,900
to the smallest screen size,

35
00:01:08,900 --> 00:01:11,260
which will typically
be your mobile phone.

36
00:01:11,255 --> 00:01:13,345
Let me go back to
the top now you can

37
00:01:13,340 --> 00:01:15,260
see that the header
looks different.

38
00:01:15,260 --> 00:01:16,720
We have a black background.

39
00:01:16,715 --> 00:01:18,845
We do have our logo.

40
00:01:18,845 --> 00:01:21,115
We do have the main
menu right here,

41
00:01:21,110 --> 00:01:23,030
which is now the hamburger menu,

42
00:01:23,030 --> 00:01:24,580
which you've seen
many times before.

43
00:01:24,575 --> 00:01:26,125
And then if I scroll down again,

44
00:01:26,120 --> 00:01:28,520
you can see that it looks good

45
00:01:28,520 --> 00:01:31,820
all the way down
here to the footer.

46
00:01:31,820 --> 00:01:34,490
So responsive design is
extremely important.

47
00:01:34,490 --> 00:01:36,200
So coming up, I'm gonna show you

48
00:01:36,200 --> 00:01:38,980
how you can make changes to

49
00:01:38,975 --> 00:01:44,125
your website so that it looks
good on any mobile device.

50
00:01:44,120 --> 00:01:45,730
Lambda's also quickly mention

51
00:01:45,725 --> 00:01:47,275
that when it comes to
a responsive design,

52
00:01:47,270 --> 00:01:49,610
there are a few concepts
that should be aware of.

53
00:01:49,610 --> 00:01:52,880
One would involve doing
things like reducing

54
00:01:52,879 --> 00:01:54,469
margins are patterns that you've

55
00:01:54,470 --> 00:01:56,420
added in the desktop version.

56
00:01:56,420 --> 00:01:59,420
For example, you remember there
with the homepage banner.

57
00:01:59,420 --> 00:02:01,280
For this section, we had to add

58
00:02:01,280 --> 00:02:02,450
an outrageous amount of

59
00:02:02,450 --> 00:02:03,590
negative margin
and I think it was

60
00:02:03,590 --> 00:02:08,050
minus two to two pixels when
it comes to mobile versions.

61
00:02:08,050 --> 00:02:10,340
So responsive
versions, you might

62
00:02:10,340 --> 00:02:12,970
have to reduce that
size or Mabou,

63
00:02:12,965 --> 00:02:16,435
or maybe even in certain
situations increase the size.

64
00:02:16,430 --> 00:02:19,040
Adjustment to imagines or
patterns will be necessary.

65
00:02:19,040 --> 00:02:21,170
Also, there are times
when you just need to

66
00:02:21,170 --> 00:02:23,690
hide setting kinds of elements

67
00:02:23,690 --> 00:02:26,420
when viewed on a mobile
device because it

68
00:02:26,420 --> 00:02:29,390
might look great on the desktop.

69
00:02:29,390 --> 00:02:30,830
An example would
be a video editor

70
00:02:30,830 --> 00:02:32,410
will look great on desktop.

71
00:02:32,405 --> 00:02:33,995
But on a mobile device,

72
00:02:33,995 --> 00:02:36,425
it may not necessarily
be that great.

73
00:02:36,425 --> 00:02:39,265
Same thing applies with
animations as well.

74
00:02:39,260 --> 00:02:41,210
And the measures will
look good on a desktop,

75
00:02:41,210 --> 00:02:42,650
the walkways on a desktop,

76
00:02:42,650 --> 00:02:44,210
but mobile phone might have

77
00:02:44,210 --> 00:02:46,010
trouble displaying
that animation.

78
00:02:46,010 --> 00:02:49,780
So the whole point of this
massive design is sacrifice.

79
00:02:49,775 --> 00:02:53,845
You make changes, you remove
certain features so that

80
00:02:53,840 --> 00:02:57,830
when viewed on a mobile
device will be Uber grid.

81
00:02:57,830 --> 00:02:59,030
So that's it for

82
00:02:59,030 --> 00:03:01,870
the very quick induct introduction
to responsive design.

83
00:03:01,865 --> 00:03:05,165
Let's now get started with it.