1
00:00:02,300 --> 00:00:03,550
Throughout this module,

2
00:00:03,550 --> 00:00:06,160
we created another website

3
00:00:06,160 --> 00:00:10,280
and we now learned a lot about different units that we have,

4
00:00:10,280 --> 00:00:14,170
which help us to make sure that our font size

5
00:00:14,170 --> 00:00:18,490
and other properties like the width or the height,

6
00:00:18,490 --> 00:00:22,320
adjust according to the user's browser settings.

7
00:00:22,320 --> 00:00:27,300
This is nice, but what about responsive design actually?

8
00:00:27,300 --> 00:00:31,020
How can we create our website in a way that adjusts

9
00:00:31,020 --> 00:00:33,630
to different user devices,

10
00:00:33,630 --> 00:00:36,960
and that looks good on basically any device?

11
00:00:36,960 --> 00:00:40,800
Well, this is what we will dive into now in this module,

12
00:00:40,800 --> 00:00:43,530
and to answer this question here,

13
00:00:43,530 --> 00:00:46,060
we first have to look at the difference

14
00:00:46,060 --> 00:00:50,223
between desktop first and mobile first design.

15
00:00:51,540 --> 00:00:55,030
Desktop first design is something like this here.

16
00:00:55,030 --> 00:00:57,830
So, basically designing a website first

17
00:00:57,830 --> 00:00:59,750
for the computer screen,

18
00:00:59,750 --> 00:01:01,920
which is the approach that we followed

19
00:01:01,920 --> 00:01:05,193
throughout this module and throughout this course so far.

20
00:01:06,380 --> 00:01:09,300
Whereas mobile first design means

21
00:01:09,300 --> 00:01:14,300
that we first design our website for mobile devices,

22
00:01:14,620 --> 00:01:16,530
smart phones, typically.

23
00:01:16,530 --> 00:01:20,790
And then we later ensure that the page also looks good

24
00:01:20,790 --> 00:01:23,053
on bigger device screens.

25
00:01:24,250 --> 00:01:27,590
So that's the core difference between these two approaches,

26
00:01:27,590 --> 00:01:30,550
but there is some more about these design schemas.

27
00:01:31,552 --> 00:01:35,460
Desktop first design is the traditional approach,

28
00:01:35,460 --> 00:01:39,180
which kind of makes sense as computer screens were there

29
00:01:39,180 --> 00:01:41,460
before smartphones or tablets.

30
00:01:41,460 --> 00:01:45,260
So typically web design was desktop first design,

31
00:01:45,260 --> 00:01:48,583
so building nice looking websites for computer screens.

32
00:01:50,514 --> 00:01:53,280
Desktop first design also focuses

33
00:01:53,280 --> 00:01:55,820
onto an office-based audience,

34
00:01:55,820 --> 00:01:57,730
which also kind of makes sense

35
00:01:57,730 --> 00:01:59,480
if you know that your audience

36
00:01:59,480 --> 00:02:01,680
typically browses your website

37
00:02:01,680 --> 00:02:04,520
from the notebook or the desktop computer.

38
00:02:04,520 --> 00:02:06,530
Well, then you first want to make sure

39
00:02:06,530 --> 00:02:09,449
that your page meets exactly the criteria

40
00:02:09,449 --> 00:02:12,000
this audience is looking for.

41
00:02:12,000 --> 00:02:14,920
This also depends highly on the type of content

42
00:02:14,920 --> 00:02:16,800
you want to deliver.

43
00:02:16,800 --> 00:02:20,010
You are watching an online course at the moment.

44
00:02:20,010 --> 00:02:22,850
And typically, as this is a coding course,

45
00:02:22,850 --> 00:02:24,950
where you learn how to become a web developer,

46
00:02:24,950 --> 00:02:28,740
you're probably watching this from your desktop device,

47
00:02:28,740 --> 00:02:30,640
because you hopefully code along.

48
00:02:30,640 --> 00:02:34,340
So, a smartphone might not be the perfect choice here,

49
00:02:34,340 --> 00:02:37,380
therefore desktop first is also the approach

50
00:02:37,380 --> 00:02:39,280
we used for this course so far,

51
00:02:39,280 --> 00:02:41,210
as this is what we are doing here.

52
00:02:41,210 --> 00:02:45,393
We are creating desktop websites in a first instance.

53
00:02:46,270 --> 00:02:49,050
The desktop first approach also allows you

54
00:02:49,050 --> 00:02:52,580
to create feature-rich websites.

55
00:02:52,580 --> 00:02:56,100
Typically, computer screens have lots of space available,

56
00:02:56,100 --> 00:02:58,160
and are very big these days.

57
00:02:58,160 --> 00:03:01,490
So if you have a website with an office-based audience,

58
00:03:01,490 --> 00:03:03,630
and where you want to present a lot of features,

59
00:03:03,630 --> 00:03:05,540
then the desktop first approach

60
00:03:05,540 --> 00:03:07,513
might not be the worst choice.

61
00:03:08,460 --> 00:03:11,240
However, we also have the mobile first approach,

62
00:03:11,240 --> 00:03:14,510
and here the thoughts when creating a website

63
00:03:14,510 --> 00:03:16,210
are a bit different.

64
00:03:16,210 --> 00:03:20,440
The mobile first approach is a more functional approach.

65
00:03:20,440 --> 00:03:23,510
You have limited space on your mobile device,

66
00:03:23,510 --> 00:03:25,190
therefore you have to clearly think

67
00:03:25,190 --> 00:03:28,640
about the way you want to present your content,

68
00:03:28,640 --> 00:03:31,440
and what type of content you present.

69
00:03:31,440 --> 00:03:35,310
The website has to work also with less space available

70
00:03:35,310 --> 00:03:37,840
and less information that can be presented.

71
00:03:37,840 --> 00:03:41,450
Therefore, you have to follow this more functional approach

72
00:03:41,450 --> 00:03:43,953
when creating mobile first websites.

73
00:03:45,010 --> 00:03:47,550
Mobile first design also is great

74
00:03:47,550 --> 00:03:50,960
for a lifestyle or news focused audience.

75
00:03:50,960 --> 00:03:54,500
No matter if you take any typical news app or newspaper app,

76
00:03:54,500 --> 00:03:58,300
or if you take apps like Instagram, Facebook, or TikTok,

77
00:03:58,300 --> 00:04:02,110
all these apps, which are websites in the end,

78
00:04:02,110 --> 00:04:04,130
are built mobile first.

79
00:04:04,130 --> 00:04:07,640
You can also browse Instagram from your desktop computer,

80
00:04:07,640 --> 00:04:11,220
but the core idea is that people are using these apps,

81
00:04:11,220 --> 00:04:15,200
these websites, from their mobile devices.

82
00:04:15,200 --> 00:04:18,550
Therefore what comes here is content first.

83
00:04:18,550 --> 00:04:22,330
You want to present the core content to your audience

84
00:04:22,330 --> 00:04:26,370
on the limited space available on your mobile device.

85
00:04:26,370 --> 00:04:29,050
So these are two different approaches,

86
00:04:29,050 --> 00:04:31,830
either writing the code for the desktop computer

87
00:04:31,830 --> 00:04:35,520
and then adjusting it for smaller devices,

88
00:04:35,520 --> 00:04:38,720
or first writing your code for the mobile device

89
00:04:38,720 --> 00:04:42,030
and then adjusting it for larger devices.

90
00:04:42,030 --> 00:04:44,460
Both approaches are totally valid.

91
00:04:44,460 --> 00:04:48,140
Nowadays, we typically follow a mobile first approach.

92
00:04:48,140 --> 00:04:51,160
As well, everybody has a smartphone and people tend

93
00:04:51,160 --> 00:04:55,020
to browse for the internet by using the smartphone.

94
00:04:55,020 --> 00:04:56,850
Nevertheless, as I said,

95
00:04:56,850 --> 00:05:00,660
for an office-based audience or feature rich websites,

96
00:05:00,660 --> 00:05:02,640
and also for the purpose of this course,

97
00:05:02,640 --> 00:05:06,550
therefore we use the desktop first approach.

98
00:05:06,550 --> 00:05:08,730
So this is desktop versus mobile,

99
00:05:08,730 --> 00:05:11,930
but how can we now use these concepts

100
00:05:11,930 --> 00:05:14,883
to implement a responsive design?