1
00:00:00,000 --> 00:00:02,000
[?music?]

2
00:00:02,000 --> 00:00:07,000
[Responsive Web Design: Media Queries: Mobile Resolutions]

3
00:00:07,000 --> 00:00:13,000
[Nick Pettit] We'll go ahead and scroll up here and copy one of these comment flags 

4
00:00:13,000 --> 00:00:18,000
and we'll scroll down, jump outside of this media query, 

5
00:00:18,000 --> 00:00:21,000
and paste our comment flag right there, 

6
00:00:21,000 --> 00:00:28,000
the next resolution we're going to tackle is 720px across. 

7
00:00:28,000 --> 00:00:32,000
Now, there are several special considerations we need to make at this resolution 

8
00:00:32,000 --> 00:00:36,000
because it's going to be the resolution that tackles mobile phones. 

9
00:00:36,000 --> 00:00:41,000
So now would be a good time to go ahead and look at how we're doing 

10
00:00:41,000 --> 00:00:44,000
on a variety of mobile devices. 

11
00:00:44,000 --> 00:00:49,000
So here we have all of the hardware devices that we're going to be targeting. 

12
00:00:49,000 --> 00:00:53,000
We have an iPhone 4, running iOS, of course. 

13
00:00:53,000 --> 00:00:57,000
We have an HTC HD7 running Windows Mobile 7. 

14
00:00:57,000 --> 00:01:02,000
We have a Google Nexus S, running Android, of course; 

15
00:01:02,000 --> 00:01:06,000
a Palm Pre 2 running Palm OS, 

16
00:01:06,000 --> 00:01:12,000
and, of course, a Blackberry Torch 9800 running the Blackberry OS.

17
00:01:12,000 --> 00:01:16,000
It's always best to test on real hardware devices like this, 

18
00:01:16,000 --> 00:01:20,000
not only for technical reasons, but also for design reasons 

19
00:01:20,000 --> 00:01:23,000
because when you have the actual hardware devices in front of you 

20
00:01:23,000 --> 00:01:30,000
as opposed to a software emulator, you can see exactly what the design is going to look like 

21
00:01:30,000 --> 00:01:33,000
at the actual scale that the user will see it at. 

22
00:01:33,000 --> 00:01:37,000
So on our iPhone here, we're doing just okay. 

23
00:01:37,000 --> 00:01:40,000
As you can see, we're actually hitting the 2-column layout, 

24
00:01:40,000 --> 00:01:43,000
as would be expected. 

25
00:01:43,000 --> 00:01:47,000
All of the icons look pretty good down at the bottom, 

26
00:01:47,000 --> 00:01:50,000
but there's still more work that we need to do there

27
00:01:50,000 --> 00:01:53,000
in shifting it to a one-column layout. 

28
00:01:53,000 --> 00:01:56,000
Windows 7 is really not looking good at all, 

29
00:01:56,000 --> 00:02:00,000
but we'll get back to that later. 

30
00:02:00,000 --> 00:02:02,000
The Android actually looks pretty good as well. 

31
00:02:02,000 --> 00:02:06,000
It looks very similar to iOS. 

32
00:02:06,000 --> 00:02:13,000
The Palm Pre is having a few additional problems, particularly with CSS3 gradients, 

33
00:02:13,000 --> 00:02:17,000
but we'll address those. 

34
00:02:17,000 --> 00:02:21,000
And the Blackberry is actually looking pretty good. 

35
00:02:21,000 --> 00:02:27,000
I should mention that all of these phones are actually running webkit-based browsers. 

36
00:02:27,000 --> 00:02:33,000
The only phone that is not running a webkit-based browser is the Windows Mobile 7 phone, 

37
00:02:33,000 --> 00:02:36,000
so let's go ahead and see if we can fix these up. 

38
00:02:36,000 --> 00:02:40,000
So let's go ahead and get started on this next media query.

39
00:02:40,000 --> 00:02:43,000
We'll go ahead and scroll down here, 

40
00:02:43,000 --> 00:02:48,000
and we'll use our @media rule, 

41
00:02:48,000 --> 00:02:55,000
say (max-width: 720px) { 

42
00:02:55,000 --> 00:02:57,000
and we'll open up our media query there. 

43
00:02:57,000 --> 00:03:05,000
The first thing that we're going to do is change the body to have a background 

44
00:03:05,000 --> 00:03:10,000
that's just a solid color #C5C5C5; 

45
00:03:10,000 --> 00:03:13,000
so we're going to get rid of our background gradient. 

46
00:03:13,000 --> 00:03:18,000
Although many phones nowadays use the webkit rendering engine, 

47
00:03:18,000 --> 00:03:23,000
gradients still aren't very widely supported and it's better to just go with a flat color. 

48
00:03:23,000 --> 00:03:28,000
And really, design-wise, we're not losing a whole lot here, so it's okay. 

49
00:03:28,000 --> 00:03:33,000
So we'll go ahead and jump down here some more, and next, 

50
00:03:33,000 --> 00:03:41,000
we're going to set the video to display: none; 

51
00:03:41,000 --> 00:03:47,000
\t  and we're going to replace this video with just a screenshot of our application. 

52
00:03:47,000 --> 00:03:53,000
It's certainly possible to make HTML5 video work across a wide variety of mobile devices. 

53
00:03:53,000 --> 00:03:58,000
iOS devices as well as Android devices are excellent at video playback. 

54
00:03:58,000 --> 00:04:02,000
However, this is a very complex task to accomplish 

55
00:04:02,000 --> 00:04:05,000
just by using media queries, and may even be impossible. 

56
00:04:05,000 --> 00:04:11,000
Some of the devices we're attempting to support--particularly the Blackberry Torch 9800-- 

57
00:04:11,000 --> 00:04:16,000
either do not support HTML5 video or they have broken implementations. 

58
00:04:16,000 --> 00:04:21,000
For the sake of simplicity, it's much easier to replace the HTML5 video 

59
00:04:21,000 --> 00:04:24,000
with a static screenshot for mobile devices. 

60
00:04:24,000 --> 00:04:27,000
If this is not an option for your particular project, 

61
00:04:27,000 --> 00:04:33,000
you'll most likely need to resort to user-agent detection via JavaScript. 

62
00:04:33,000 --> 00:04:36,000
Next, we'll go ahead and select our phone 

63
00:04:36,000 --> 00:04:44,000
#phone #video_container #video_app_screenshot { 

64
00:04:44,000 --> 00:04:50,000
and we'll set it to display: block. 

65
00:04:50,000 --> 00:04:55,000
Then, we'll go through each one of our columns here 

66
00:04:55,000 --> 00:05:01,000
and we'll say #header, #phone, #misc { 

67
00:05:01,000 --> 00:05:06,000
And first, we're going to float all of these to the left 

68
00:05:06,000 --> 00:05:12,000
and then we're going to set a width: 100% 

69
00:05:12,000 --> 00:05:25,000
and then we'll set a margin: 0 auto;.

70
00:05:25,000 --> 00:05:30,000
By floating all of these to the left and setting a width of 100%, 

71
00:05:30,000 --> 00:05:35,000
we're essentially telling all of these columns to just stack on top of one another 

72
00:05:35,000 --> 00:05:39,000
rather than flowing next to one another. 

73
00:05:39,000 --> 00:05:44,000
So next, we'll go ahead and select the paragraph text inside our header 

74
00:05:44,000 --> 00:05:50,000
and we're going to say -webkit-text-size-adjust: none; 

75
00:05:50,000 --> 00:05:55,000
and this will target webkit-based browsers and will basically just tell the text 

76
00:05:55,000 --> 00:06:05,000
not to automatically adjust because webkit does apply some automatic text-size adjustment.

77
00:06:05,000 --> 00:06:10,000
Next, we'll select #phone { column, 

78
00:06:10,000 --> 00:06:14,000
and we're going to just apply some margin-bottom: 50px; 

79
00:06:14,000 --> 00:06:19,000
and this will just give it some separation from other screen elements. 

80
00:06:19,000 --> 00:06:23,000
Next, we're going to set the background: transparent 

81
00:06:23,000 --> 00:06:29,000
because remember, on this phone column, we do have a background image applied, 

82
00:06:29,000 --> 00:06:32,000
which is the image of the phone. 

83
00:06:32,000 --> 00:06:35,000
We're going to use an image-based fallback here 

84
00:06:35,000 --> 00:06:38,000
instead of the video, so we actually don't need this background image anymore. 

85
00:06:38,000 --> 00:06:43,000
And finally, we're going to set float: none. 

86
00:06:43,000 --> 00:06:51,000
Next, we'll select the phone and select the video_container [ 

87
00:06:51,000 --> 00:06:57,000
and we'll apply a width of 100% and we're just going to reset some margins here. 

88
00:06:57,000 --> 00:06:59,000
So we'll say margin: 0px; 

89
00:06:59,000 --> 00:07:01,000
auto

90
00:07:01,000 --> 00:07:06,000
and then finally, 10%;. 

91
00:07:06,000 --> 00:07:10,000
We just have a few more things here. 

92
00:07:10,000 --> 00:07:16,000
We're going to select the #call_to_action button, and again, 

93
00:07:16,000 --> 00:07:19,000
we're going to just remove the gradients here, 

94
00:07:19,000 --> 00:07:25,000
so we'll set a solid background color and we'll just use one of the colors that we used 

95
00:07:25,000 --> 00:07:28,000
as a color-stop in our gradient, 

96
00:07:28,000 --> 00:07:31,000
and then we'll set the hover state

97
00:07:31,000 --> 00:07:36,000
for the #call_to_action button, and of course, this won't be displayed 

98
00:07:36,000 --> 00:07:38,000
on most touch-screen mobile phones, 

99
00:07:38,000 --> 00:07:42,000
but this will be displayed in a desktop browser, 

100
00:07:42,000 --> 00:07:44,000
should it become this size. 

101
00:07:44,000 --> 00:07:47,000
So we'll go ahead and set the hover state 

102
00:07:47,000 --> 00:07:50,000
and let's go ahead and switch back to the browser at this point 

103
00:07:50,000 --> 00:07:54,000
and just refresh the page to see how we're doing. 

104
00:07:54,000 --> 00:07:58,000
Resize the browser window, and as you can see,

105
00:07:58,000 --> 00:08:01,000
 we no longer have our gradient background. 

106
00:08:01,000 --> 00:08:07,000
We no longer have a gradient on our call_to_action button 

107
00:08:07,000 --> 00:08:10,000
and everything looks pretty good. 

108
00:08:10,000 --> 00:08:15,000
We have some work to do on our features, but you'll notice that it appears 

109
00:08:15,000 --> 00:08:18,000
as though we're missing our app screenshot. 

110
00:08:18,000 --> 00:08:21,000
Now, the CSS is looking pretty good 

111
00:08:21,000 --> 00:08:26,000
so let's go ahead and switch over to the HTML, and it looks like our images 

112
00:08:26,000 --> 00:08:29,000
are actually inside of our video container. 

113
00:08:29,000 --> 00:08:35,000
Now, remember, we've hidden our video, so these images actually need to be outside 

114
00:08:35,000 --> 00:08:42,000
of the video, so we'll just cut them and paste them 

115
00:08:42,000 --> 00:08:46,000
so they are no longer nested inside of our video element 

116
00:08:46,000 --> 00:08:50,000
and if we switch back to Google Chrome and refresh the page, 

117
00:08:50,000 --> 00:08:54,000
you can see that we now have this static app screenshot. 

118
00:08:54,000 --> 00:08:59,000
Now, we still need to work on the features down at the bottom of the page, 

119
00:08:59,000 --> 00:09:06,000
so let's go ahead and switch back to our responsive webdesign.css document 

120
00:09:06,000 --> 00:09:10,000
and we'll skip down here and make some room to work.

121
00:09:10,000 --> 00:09:14,000
First, we'll select our #features element, 

122
00:09:14,000 --> 00:09:18,000
we'll select all of the features .feature: 

123
00:09:18,000 --> 00:09:25,000
and we're going to say :nth-child(1n) { 

124
00:09:25,000 --> 00:09:28,000
and we're going to float it to the left, 

125
00:09:28,000 --> 00:09:32,000
give it a width: 100% 

126
00:09:32,000 --> 00:09:35,000
and we're going to set some margins on it, so we'll say 

127
00:09:35,000 --> 00:09:39,000
margin: 0 auto 30px auto;. 

128
00:09:39,000 --> 00:09:44,000
Now, this essentially will just take our features and sort of line them all up

129
00:09:44,000 --> 00:09:48,000
in the center of the page and make them stack on top of one another 

130
00:09:48,000 --> 00:09:53,000
just like we had with our 3-column layout. 

131
00:09:53,000 --> 00:09:56,000
Next, select our #features element again, 

132
00:09:56,000 --> 00:10:03,000
select all of our features, go to the .info div and select our paragraphs 

133
00:10:03,000 --> 00:10:05,000
.information p {} 

134
00:10:05,000 --> 00:10:09,000
and we're just going to reset some font sizes here, so we'll say font-size: 1em; 

135
00:10:09,000 --> 00:10:12,000
And then again, we need to make sure that webkit 

136
00:10:12,000 --> 00:10:16,000
does not adjust the text-size automatically, so we'll say

137
00:10:16,000 --> 00:10:21,000
-webkit-text-size-adjust: none;. 

138
00:10:21,000 --> 00:10:25,000
So that should be it for our features, so let's switch back to the browser 

139
00:10:25,000 --> 00:10:29,000
and refresh the page, and when we scroll down here, 

140
00:10:29,000 --> 00:10:31,000
you can see that our features now look really nice. 

141
00:10:31,000 --> 00:10:37,000
We have this nice big icon here and our text is pretty reasonably sized. 

142
00:10:37,000 --> 00:10:40,000
And if we go down to even smaller sizes here, 

143
00:10:40,000 --> 00:10:43,000
you can see that our features still look pretty good. 

144
00:10:43,000 --> 00:10:46,000
Our icons look proportional to the text 

145
00:10:46,000 --> 00:10:49,000
and the text is still very readable. 

146
00:10:49,000 --> 00:10:55,000
Now, before we finish up with our rwd.css here, we do need to make one final adjustment 

147
00:10:55,000 --> 00:10:57,000
for the iPad.

148
00:10:57,000 --> 00:11:01,000
So here we have an iPad, also running iOS,

149
00:11:01,000 --> 00:11:04,000
and that, of course, has the Safari web browser,

150
00:11:04,000 --> 00:11:06,000
which is based on webkit.

151
00:11:06,000 --> 00:11:10,000
And just like on the phones, we're hitting our 2-column layout,

152
00:11:10,000 --> 00:11:15,000
but on the iPad, that's actually exactly what we want.

153
00:11:15,000 --> 00:11:19,000
If we scroll down here, you can see that the icons all look pretty good.

154
00:11:19,000 --> 00:11:22,000
This column over on the left looks great.

155
00:11:22,000 --> 00:11:27,000
We have our nice border radii, gradients look fine, everything looks good.

156
00:11:27,000 --> 00:11:34,000
Over on the right, we do have a slight issue with the way our phone and HTML5 video

157
00:11:34,000 --> 00:11:38,000
is being rendered, but that's okay, that's something that we can go ahead and fix. 

158
00:11:38,000 --> 00:11:44,000
In an ideal world, you wouldn't make any special concessions for any one individual device, 

159
00:11:44,000 --> 00:11:49,000
but the iPad is enormously popular--at least at the time of this recording-- 

160
00:11:49,000 --> 00:11:54,000
so we are going to make one special adjustment for the iPad. 

161
00:11:54,000 --> 00:11:57,000
So we'll go ahead and switch back here, and we're going to copy 

162
00:11:57,000 --> 00:12:04,000
our comment flag, and we'll paste it down here, 

163
00:12:04,000 --> 00:12:09,000
and we're going to change 720px across to say iPad, 

164
00:12:09,000 --> 00:12:15,000
and we're going to write a couple of special media queries here. 

165
00:12:15,000 --> 00:12:28,000
So we'll say @media only screen and (min-device-width: 768px)

166
00:12:28,000 --> 00:12:32,000
and then we're going to press Enter and just skip down to the next line. 

167
00:12:32,000 --> 00:12:37,000
We are still writing this same media query, but we're just skipping down to the next line 

168
00:12:37,000 --> 00:12:39,000
for the sake of clarity.

169
00:12:39,000 --> 00:12:42,000
So we'll continue this media query by saying 

170
00:12:42,000 --> 00:12:50,000
and (max-device-width: 1024px) 

171
00:12:50,000 --> 00:12:57,000
and (orientation: portrait) 

172
00:12:57,000 --> 00:13:01,000
and then we can go ahead and open up this media query

173
00:13:01,000 --> 00:13:09,000
with our curly braces and we'll just go ahead and move this curly brace all the way over to the left 

174
00:13:09,000 --> 00:13:13,000
and now, we can go ahead and write this media query. 

175
00:13:13,000 --> 00:13:21,000
So we'll say #phone #video_container video { 

176
00:13:21,000 --> 00:13:26,000
and we are just going to make this one adjustment here to the height 

177
00:13:26,000 --> 00:13:32,000
of our actual video element because on the iPad, we are going to display our video 

178
00:13:32,000 --> 00:13:36,000
whereas on other mobile devices, we are not going to display the video 

179
00:13:36,000 --> 00:13:41,000
because on the iPad, we have the 2-column layout; whereas on other mobile devices, 

180
00:13:41,000 --> 00:13:43,000
we just have the 1-column layout. 

181
00:13:43,000 --> 00:13:49,000
So we'll say height: 282px; and that's it. 

182
00:13:49,000 --> 00:13:52,000
Then we can go ahead and copy this media query 

183
00:13:52,000 --> 00:13:59,000
because we do need to write a second media query for the landscape orientation. 

184
00:13:59,000 --> 00:14:02,000
So we'll go ahead and paste it, just like that, 

185
00:14:02,000 --> 00:14:05,000
and we just need to make a few adjustments here. 

186
00:14:05,000 --> 00:14:08,000
The min-device-width and max-device-width will stay the same; 

187
00:14:08,000 --> 00:14:13,000
we just need to change the orientation to say landscape. 

188
00:14:13,000 --> 00:14:17,000
Then, we need to change the height of the video 

189
00:14:17,000 --> 00:14:22,000
because the resolution when you change it to landscape will actually be adjusted 

190
00:14:22,000 --> 00:14:26,000
and I have some very specific values picked out here. 

191
00:14:26,000 --> 00:14:29,000
We'll say height: 376px. 

192
00:14:29,000 --> 00:14:33,000
So we'll go ahead and save that out, and now, let's go ahead and take a look 

193
00:14:33,000 --> 00:14:36,000
at our mobile devices. 

194
00:14:36,000 --> 00:14:40,000
So as you can see, things are actually looking a lot better now. 

195
00:14:40,000 --> 00:14:45,000
On iOS, we have the background, the 1-column layout, 

196
00:14:45,000 --> 00:14:48,000
all of our icons look really nice. 

197
00:14:48,000 --> 00:14:54,000
On Windows Mobile 7, we still have a lot of issues that we need to tackle, 

198
00:14:54,000 --> 00:14:58,000
but in general, things are looking a little bit better. 

199
00:14:58,000 --> 00:15:05,000
On the Google Nexus S, things look very similar to the way they do on iOS 

200
00:15:05,000 --> 00:15:10,000
as would be expected, since they're both running a webkit-based browser. 

201
00:15:10,000 --> 00:15:15,000
On the Palm Pre, everything looks pretty good here. 

202
00:15:15,000 --> 00:15:19,000
It looks like we are missing a few fonts, but that's okay. 

203
00:15:19,000 --> 00:15:22,000
it doesn't have to look exactly the same in every browser. 

204
00:15:22,000 --> 00:15:27,000
As long as we're generally hitting something that looks similar, it should be okay. 

205
00:15:27,000 --> 00:15:33,000
And of course, on the Blackberry, we're doing pretty well as well. 

206
00:15:33,000 --> 00:15:37,000
We are loading in the fonts, unlike the Palm Pre. 

207
00:15:37,000 --> 00:15:42,000
It looks like we are having a few issues with the way border radii are being rendered, 

208
00:15:42,000 --> 00:15:45,000
but again, that's okay, it's acceptable. 

209
00:15:45,000 --> 00:15:49,000
We don't need to get rid of the border radii for all of these other phones 

210
00:15:49,000 --> 00:15:52,000
just because we're having a slight issue on the Blackberry here. 

211
00:15:52,000 --> 00:15:57,000
And other than that, everything else looks pretty good. 

212
00:15:57,000 --> 00:16:00,000
So here, once again, we have our iPad

213
00:16:00,000 --> 00:16:05,000
and if we look here, we can see that we're actually doing pretty well.

214
00:16:05,000 --> 00:16:07,000
All of our icons look great.

215
00:16:07,000 --> 00:16:10,000
The column over on the left looks really good.

216
00:16:10,000 --> 00:16:12,000
We have a really nice-looking button

217
00:16:12,000 --> 00:16:15,000
and over on the right, we've fixed the height issues that we were having

218
00:16:15,000 --> 00:16:18,000
with our HTML5 video.

219
00:16:18,000 --> 00:16:24,000
And on this device, we actually can go ahead and support HTML5 video just fine

220
00:16:24,000 --> 00:16:28,000
because we're just hitting the 2-column layout here.

221
00:16:28,000 --> 00:16:32,000
We don't actually need to worry about targeting the smaller resolutions

222
00:16:32,000 --> 00:16:34,000
like we do on the phones.

223
00:16:34,000 --> 00:16:39,000
We're almost done with our project; however, before we can call it finished, 

224
00:16:39,000 --> 00:16:43,000
it's imperative that we conduct some additional cross-browser testing.