Original subtitles

1 1

Let's take a small break 2

2

and talk about a very important thing in modern web design, 3

3

responsive web design. 4

4

You have probably heard of it by now. 5

5

So, in this lecture we will set up our project 6

6

to that we can easily build a responsive website. 7

7

So, what is responsive web design? 8

8

Building a responsive website means that that website 9

9

will work well on any device 10

10

and with any screen resolution. 11

11

Working well means that that website is easy to read 12

12

and to navigate without needing to constantly zoom in 13

13

and zoom out, which is really annoying. 14

14

Here are just two examples of responsive websites. 15

15

You can see that they change with the browser's width 16

16

which means that they respond to the screen size; 17

17

therefore, the name responsive web design. 18

18

According to Google, 50% of all internet traffic 19

19

already happens on mobile phones 20

20

and this will even increase in the future. 21

21

In fact, Google recently announced 22

22

that mobile-friendly websites will be ranked higher 23

23

on their Search Results page. 24

24

So, it's really important 25

25

to embrace responsive web design right now. 26

26

So, there are three main ingredients 27

27

to responsive web design. 28

28

First is the fluid grid. 29

29

In a fluid grid all layout elements are sized 30

30

in relative units like percentages 31

31

instead of absolute units like pixels. 32

32

in the CSS section we used a static layout 33

33

and defined width with pixels. 34

34

Now we are leaving that behind and work with percentages. 35

35

We will set up the fluid grid in a minute. 36

36

And the same goes for images so as to prevent them 37

37

from displaying outside their parent elements. 38

38

And finally, media queries allow us to specify 39

39

different CSS rules for different browser width. 40

40

With media queries we can target different devices 41

41

like mobile phones and tablets 42

42

and make the website respond to their screen size. 43

43

So, now that we know the main ingredients 44

44

to responsive web design let's go back to brackets 45

45

and set up the fluid grid. 46

46

We will then build our website using that grid 47

47

in the next lectures. 48

48

We will take care of the media queries part later 49

49

after building our webpage. 50

50

While we build the webpage it's just important 51

51

that we always use the grid. 52

52

Now, the fluid grid we will use in this course 53

53

is based on this little responsive grid system, 54

54

which claims to be spectacularly easy responsive web design. 55

55

So you can build any layout you can imagine 56

56

with this fluid grid. 57

57

I actually made some changes that makes things easier for us 58

58

and compiled everything in one file. 59

59

Please go download that file 60

60

from the lecture description right now. 61

61

We will come back to this website later 62

62

so I can show you how that grid works. 63

63

So I hope you downloaded the file by now. 64

64

I actually already have it here on my desktop 65

65

so I will copy it. 66

66

And then we put it in the Vendors folder 67

67

because once again it's a file that we got from the internet 68

68

and then in the CSS folder. 69

69

And here we go, alright. 70

70

So now back to brackets. 71

71

Let's include that file. 72

72

I'll do it here. 73

73

Again, before the style CSS, which is our CSS file, 74

74

and let me just tell you another trick 75

75

which is I can 76

76

since I don't want to write all of this again 77

77

and instead of copying which is a little annoying 78

78

I can just do 79

79

duplicate, which is Command + D 80

80

or probably Control + D on Windows. 81

81

So right here just Command + D and here we go. 82

82

'Cause all I want to change now is this file. 83

83

So I want the grid file, right. 84

84

So now the grid file is included in our project. 85

85

Now let me show you how that grid works. 86

86

So on this website is a little example. 87

87

So all our content will be inside columns, 88

88

as you can see here. 89

89

And each of these group of columns is a row. 90

90

So in each row we can have two or three or four or five 91

91

all the way to 12 columns 92

92

which all have the same width. 93

93

And now as for the responsive part, 94

94

if we resize the browser window 95

95

all of them shrink 96

96

and that means that they are defined with a relative width 97

97

because their width is always relative 98

98

to the browser window. 99

99

So they get smaller and smaller 100

100

as I decrease the browser window. 101

101

And that's what responsive web design is all about. 102

102

And after a certain amount of width 103

103

they even stack. 104

104

So when they get too small we can't see any content 105

105

in this column here, right? 106

106

Then they will all stack 107

107

just like this. 108

108

In our website, since we will use this grid, 109

109

we'll do the same. 110

110

Okay, so then let's see the CSS file 111

111

that we just included and it's down here. 112

112

Let me just open it. 113

113

And if I click it twice, double click, 114

114

then it appears up here in the working files. 115

115

So we have a row 116

116

and columns 117

117

and then different spans 118

118

and each of this span will be a column. 119

119

For example this span one of two 120

120

is just columns. 121

121

But don't worry, we will use that in the next lecture 122

122

and then you will understand everything 123

123

just how this works. 124

124

Alright, let's get back to our HTML file. 125

125

And as I said, the content will be in rows. 126

126

So let's just define the row 127

127

and I will simply call it row. 128

128

And what I want for this row 129

129

is a maximum width 130

130

of 1,140 pixels 131

131

just as we used in our previous project. 132

132

So this is the only value 133

133

that will have an absolute value in pixels. 134

134

We will define all other layout margins 135

135

in pettings and percentages 136

136

and not in pixels. 137

137

And now I also want to center this row 138

138

on the webpage so all our rows will be centered. 139

139

So do you remember how we did that? 140

140

We'll just set margin 141

141

and then to center a container 142

142

inside another container 143

143

as you remember we set the left margin to auto 144

144

and the right margin to auto. 145

145

You probably also remember 146

146

that we can use a shorthand to set margins just like this. 147

147

Top and right 148

148

and bottom and left. 149

149

Alright, but there's an even simpler way of doing this. 150

150

So let me show you that as well. 151

151

Which is we can say zero and auto 152

152

and then top and bottom will be zero 153

153

and left and right will be auto. 154

154

Let me delete this 155

155

and now this row will be centered. 156

156

You can just try this out. 157

157

So I'll say div and class will be row. 158

158

Alright, just put us here. 159

159

And let's see how this looks like. 160

160

Okay, you'll see it's perfectly centered. 161

161

So now we have everything in place 162

162

so we can start building the first section of our webpage 163

163

which will be the header. 164

164

So don't wait, and join me in the next lecture.