1
00:00:00,000 --> 00:00:07,000
[Responsive Web Design] [Media Queries: Cross Browser Testing]

2
00:00:07,000 --> 00:00:12,000
We're now at a point where we're ready to start doing our cross browser testing.

3
00:00:12,000 --> 00:00:18,000
First, we should check this in a non-webkit based browser like Firefox.

4
00:00:18,000 --> 00:00:23,000
So, we'll go ahead and switch over to Firefox, and it looks pretty good, 

5
00:00:23,000 --> 00:00:27,000
but we should go ahead and resize the browser to make sure that all of our

6
00:00:27,000 --> 00:00:31,000
different media queries are being applied properly.

7
00:00:31,000 --> 00:00:35,000
So, if we go ahead and resize the browser, looks pretty good here.

8
00:00:35,000 --> 00:00:40,000
We can scroll down and see that all of our features look correct, and by the 

9
00:00:40,000 --> 00:00:45,000
background color changing we know that it is responding to these different

10
00:00:45,000 --> 00:00:51,000
media queries, but when we get down to this smaller mobile size, it looks like

11
00:00:51,000 --> 00:00:55,000
we are running into an issue where our screenshot is off to the side.

12
00:00:55,000 --> 00:00:58,000
And that's certainly not okay.

13
00:00:58,000 --> 00:01:04,000
We can go ahead and switch over to TextMate though, and it looks like right here

14
00:01:04,000 --> 00:01:11,000
our video app screenshot is set to display block, and we can try setting it to

15
00:01:11,000 --> 00:01:17,000
inline, and we can check that in Firefox, and it looks like everything 

16
00:01:17,000 --> 00:01:20,000
is just fine there now.

17
00:01:20,000 --> 00:01:23,000
We'll scroll down and take a look at these features.

18
00:01:23,000 --> 00:01:28,000
Looks like our call to action button looks great, and everything pretty much looks fine.

19
00:01:28,000 --> 00:01:34,000
We'll go ahead and check that change in a webkit-based browser like Google Chrome.

20
00:01:34,000 --> 00:01:40,000
So, we'll refresh the page, and if we resize, it looks like everything's fine,  

21
00:01:40,000 --> 00:01:44,000
and changing that to inline didn't seem to cause any harm.

22
00:01:44,000 --> 00:01:47,000
So, we're good there.

23
00:01:47,000 --> 00:01:51,000
Now, we're ready to go ahead and tackle Internet Explorer.

24
00:01:51,000 --> 00:01:56,000
Of course, Internet Explorer is much different in that it uses a different

25
00:01:56,000 --> 00:02:00,000
rendering engine, and we can target it specifically by using 

26
00:02:00,000 --> 00:02:04,000
conditional comments in our HTML.

27
00:02:04,000 --> 00:02:09,000
First, let's go ahead and create a few style sheets that we'll be using.

28
00:02:09,000 --> 00:02:15,000
So, in our CSS folder here, we'll go ahead and create a new file. 

29
00:02:15,000 --> 00:02:22,000
And the first file we're going to create will be called ie8.css.

30
00:02:22,000 --> 00:02:28,000
And this will basically target Internet Explorer 8 and downwards.

31
00:02:28,000 --> 00:02:30,000
So, we'll keep that file for later.

32
00:02:30,000 --> 00:02:37,000
We'll create another file here called "ie9," and this will target

33
00:02:37,000 --> 00:02:45,000
Internet Explorer 9 and onwards, and we're going to create one more file

34
00:02:45,000 --> 00:02:56,000
called "winmo," or windowsmobile7.css, and this will target our Windows mobile phone.

35
00:02:56,000 --> 00:02:58,000
So, we'll go ahead and create that.

36
00:02:58,000 --> 00:03:04,000
Now, let's go ahead and jump over to our index.html file 

37
00:03:04,000 --> 00:03:08,000
and add in these various style sheets.

38
00:03:08,000 --> 00:03:14,000
We need to add these just after our rdw.css, so we'll go ahead and 

39
00:03:14,000 --> 00:03:19,000
skip to the end of that line and jump down to the next one, and we'll start our

40
00:03:19,000 --> 00:03:24,000
conditional comment with an exclamation point, two dashes, 

41
00:03:24,000 --> 00:03:26,000
and then our square brackets.

42
00:03:26,000 --> 00:03:41,000
And we'll say if greater than or equal to IE 9, and we'll close it.

43
00:03:41,000 --> 00:03:45,000
And then inside of here, we'll go ahead and type out our style sheet, 

44
00:03:45,000 --> 00:03:49,000
and this is very similar to the style sheets that we've already included, 

45
00:03:49,000 --> 00:03:53,000
so we can just go ahead and copy and paste one of these lines.

46
00:03:53,000 --> 00:04:06,000
So, I'll copy that and paste it in, and I'll change rdw.css to ie9.css.

47
00:04:06,000 --> 00:04:11,000
So, if the browser is detected as being Internet Explorer 9 or a greater version 

48
00:04:11,000 --> 00:04:17,000
of Internet Explorer, then it will include ie9.css.

49
00:04:17,000 --> 00:04:21,000
So next, we're just going to go ahead and copy and paste this whole 

50
00:04:21,000 --> 00:04:37,000
conditional just like that, and then we'll say if less than IE 9, then include ie8.css.

51
00:04:37,000 --> 00:04:39,000
And that's it for that.

52
00:04:39,000 --> 00:04:46,000
And then, we'll go ahead and paste this one more time, and we're going to use

53
00:04:46,000 --> 00:04:51,000
a less commonly used conditional for IE Mobile.

54
00:04:51,000 --> 00:05:03,000
So, we'll say if IE Mobile, then include winmo7.css, and we do have 

55
00:05:03,000 --> 00:05:06,000
a very specific ordering here.

56
00:05:06,000 --> 00:05:09,000
The first two don't really matter so much because 

57
00:05:09,000 --> 00:05:12,000
they don't really intersect with one another.

58
00:05:12,000 --> 00:05:18,000
However, IE Mobile is also detected as being Internet Explorer 7.

59
00:05:18,000 --> 00:05:22,000
So, any of these style sheets, which apply to Internet Explorer 7, 

60
00:05:22,000 --> 00:05:27,000
which the second one does, will also be applied to Windows Mobile 7.

61
00:05:27,000 --> 00:05:31,000
So, in this style sheet, we'll need to make sure that we override anything

62
00:05:31,000 --> 00:05:37,000
that we do here that we don't necessarily want to be included.

63
00:05:37,000 --> 00:05:40,000
Before we get started on each one of these style sheets, let's go ahead and

64
00:05:40,000 --> 00:05:46,000
switch over to Windows and look at each version of Internet Explorer.

65
00:05:46,000 --> 00:05:51,000
Now, I'm using a program called IE Tester, which allows me to test a 

66
00:05:51,000 --> 00:05:54,000
wide variety of IE versions.

67
00:05:54,000 --> 00:05:59,000
In this tutorial, we're just going to be testing IE 8, IE 9 and IE 10 

68
00:05:59,000 --> 00:06:04,000
Platform Preview 1, but you can, of course, use any Internet Explorer version

69
00:06:04,000 --> 00:06:07,000
you want to test here.

70
00:06:07,000 --> 00:06:12,000
So, this is the tab for Internet Explorer 8, and as you can see, we have

71
00:06:12,000 --> 00:06:15,000
quite a few problems here.

72
00:06:15,000 --> 00:06:19,000
The phone doesn't seem to be really rendering properly at all.

73
00:06:19,000 --> 00:06:24,000
Our button is squared off, which because we don't have CSS 3 border radii

74
00:06:24,000 --> 00:06:29,000
in Internet Explorer 8, there's not a whole lot that we can do about that,

75
00:06:29,000 --> 00:06:33,000
and our features are sort of all jumbled up at the bottom.

76
00:06:33,000 --> 00:06:38,000
Now, this may look bad, but it's actually not quite as bad as it looks.

77
00:06:38,000 --> 00:06:41,000
We can fix a lot of the things here pretty easily.

78
00:06:41,000 --> 00:06:46,000
Next up is Internet Explorer 9, which looks a little bit better, 

79
00:06:46,000 --> 00:06:49,000
and you'll notice that we have the rounded corners.

80
00:06:49,000 --> 00:06:51,000
We have a little bit more of the phone here.

81
00:06:51,000 --> 00:06:57,000
We actually have HTML 5 video, although the video player is way too small.

82
00:06:57,000 --> 00:07:01,000
That's something that we'll need to fix, and you'll notice that the background color

83
00:07:01,000 --> 00:07:05,000
is green, which may look like an error, but remember, we've set the background

84
00:07:05,000 --> 00:07:10,000
colors to bright colors so that we know that our media queries are working.

85
00:07:10,000 --> 00:07:15,000
So, what that means is that IE 9 is actually picking up on our media queries,

86
00:07:15,000 --> 00:07:19,000
which is great because it means that the browser will respond

87
00:07:19,000 --> 00:07:22,000
to our different designs properly.

88
00:07:22,000 --> 00:07:26,000
Down here at the bottom, it looks like our features are displaying properly. 

89
00:07:26,000 --> 00:07:28,000
So, that's good too.

90
00:07:28,000 --> 00:07:33,000
So now, let's go ahead and take a look at IE 10 and see where we're at,

91
00:07:33,000 --> 00:07:39,000
and as you can see, it basically looks exactly the same as Internet Explorer 9.

92
00:07:39,000 --> 00:07:44,000
So, anything we do in that style sheet we can go ahead and safely apply to IE 10 

93
00:07:44,000 --> 00:07:49,000
and know that we'll be fixing all of those problems as well.

94
00:07:49,000 --> 00:07:53,000
So, let's go ahead and start out with IE 8.

95
00:07:53,000 --> 00:08:00,000
We'll go ahead and switch back to TextMate, and we'll go to our IE 8 style sheet,

96
00:08:00,000 --> 00:08:06,000
and the very first thing we're going to do is set the body background to a solid color.

97
00:08:06,000 --> 00:08:11,000
This will just remove any kind of CSS 3 gradients that we have that might be 

98
00:08:11,000 --> 00:08:16,000
interfering with the way that the page renders.

99
00:08:16,000 --> 00:08:22,000
Next, we're going to do the same thing for our call to action button

100
00:08:22,000 --> 00:08:31,000
and just set it to a solid color.

101
00:08:31,000 --> 00:08:41,000
And then we're going to go ahead and copy and paste that and set the hover state,

102
00:08:41,000 --> 00:08:44,000
again, to just a solid color.

103
00:08:44,000 --> 00:08:52,000
And then, we're going to set the phone background to transparent because

104
00:08:52,000 --> 00:08:58,000
we're actually going to be using the fallback screenshots because Internet Explorer 8

105
00:08:58,000 --> 00:09:02,000
and below does not support HTML 5 video.

106
00:09:02,000 --> 00:09:09,000
Next, we need to make a few margin adjustments to the video container.

107
00:09:09,000 --> 00:09:18,000
We'll say "margin-top 5%" and "margin-bottom 0 px."

108
00:09:18,000 --> 00:09:22,000
And again, remember that this will not be adjusting the actual video.

109
00:09:22,000 --> 00:09:29,000
We're just making some adjustments to the way the app screenshot is displayed.

110
00:09:29,000 --> 00:09:35,000
So, we'll say "#phone #video_container" and we're actually going to

111
00:09:35,000 --> 00:09:42,000
hide the app screenshot because we're going to use that secondary image

112
00:09:42,000 --> 00:09:48,000
which is just the static phone with the screenshot inside of it.

113
00:09:48,000 --> 00:09:56,000
So, we'll set the app screenshot to display none.

114
00:09:56,000 --> 00:10:06,000
We'll set the video itself to display none, and then finally, 

115
00:10:06,000 --> 00:10:14,000
we'll go ahead and select our phone, the video container, and the 

116
00:10:14,000 --> 00:10:23,000
static image of the phone, and we'll set that to display inline.

117
00:10:23,000 --> 00:10:26,000
So, let's go ahead and see where we're at.

118
00:10:26,000 --> 00:10:32,000
We'll switch over to IE 8 and hit refresh.

119
00:10:32,000 --> 00:10:35,000
And, as you can see, our site's looking a lot better.

120
00:10:35,000 --> 00:10:39,000
We still need to make a few additional adjustments, but at least 

121
00:10:39,000 --> 00:10:41,000
our phone looks pretty good.

122
00:10:41,000 --> 00:10:47,000
And again, this is now a static image of the phone and the screenshot of the app,

123
00:10:47,000 --> 00:10:51,000
which is just actually one image.

124
00:10:51,000 --> 00:10:54,000
So, we'll switch back to TextMate and continue here.

125
00:10:54,000 --> 00:11:01,000
Next, we need to adjust the font size of the paragraph text in our header.

126
00:11:01,000 --> 00:11:04,000
So, we'll dial it down to 1 em.

127
00:11:04,000 --> 00:11:11,000
And then finally, we need to fix those features down at the bottom of the page.

128
00:11:11,000 --> 00:11:15,000
We're going to give them a width of about 45%, which does break away from our

129
00:11:15,000 --> 00:11:20,000
fluid grid a little bit, but should still give them enough space.

130
00:11:20,000 --> 00:11:24,000
And we'll say "margin-right 5%."

131
00:11:24,000 --> 00:11:29,000
And we're going to give them an explicit height of 200 pixels.

132
00:11:29,000 --> 00:11:36,000
So, we'll go ahead and save that, switch back to Internet Explorer 8 and refresh.

133
00:11:36,000 --> 00:11:39,000
And as you can see, this looks pretty good.

134
00:11:39,000 --> 00:11:44,000
We have our features down here at the bottom that are all aligned properly.

135
00:11:44,000 --> 00:11:49,000
Over here on the left, our paragraph text is at a reasonable size, 

136
00:11:49,000 --> 00:11:54,000
and although we can't get the rounded corners working on our call to action button,

137
00:11:54,000 --> 00:11:56,000
it's okay that it's squared off.

138
00:11:56,000 --> 00:12:01,000
The thing to remember here is this layout is not going to be responsive

139
00:12:01,000 --> 00:12:06,000
because Internet Explorer 8 does not support CSS 3 media queries.

140
00:12:06,000 --> 00:12:10,000
So, we're basically stuck with this layout, which is why we're able to use

141
00:12:10,000 --> 00:12:17,000
explicit height and just sort of get away with eyeballing the percentages.

142
00:12:17,000 --> 00:12:19,000
So, that's Internet Explorer 8.

143
00:12:19,000 --> 00:12:26,000
Next, we need to fix IE 9 and IE 10, and we'll actually just do that all at once.

144
00:12:26,000 --> 00:12:29,000
So, we'll go ahead and switch back to TextMate.

145
00:12:29,000 --> 00:12:35,000
We're done with ie8.css, so we can move onto ie9.css.

146
00:12:35,000 --> 00:12:40,000
There's actually just one thing that we need to change in IE 9 and IE 10, 

147
00:12:40,000 --> 00:12:44,000
and that is the width of the HTML 5 video.

148
00:12:44,000 --> 00:12:51,000
So, we'll go ahead and select phone, the video container, and the HTML 5 video, 

149
00:12:51,000 --> 00:12:58,000
and we'll set the width to 100% so that the video takes up the full width

150
00:12:58,000 --> 00:13:02,000
of its parent container, and because the aspect ratio isn't changing, 

151
00:13:02,000 --> 00:13:05,000
it will also take up the full height.

152
00:13:05,000 --> 00:13:11,000
So, if we save that out, switch back to IE 9 and refresh the page, 

153
00:13:11,000 --> 00:13:15,000
you can see that the video now is properly sized, which also 

154
00:13:15,000 --> 00:13:21,000
properly sizes its parent container, which has the phone background.

155
00:13:21,000 --> 00:13:25,000
And we can go ahead and click play on this HTML 5 video, and it will 

156
00:13:25,000 --> 00:13:28,000
look like an actual phone.

157
00:13:28,000 --> 00:13:30,000
Pretty nifty.

158
00:13:30,000 --> 00:13:34,000
Now, if we go ahead and switch over to IE 10 and refresh the page, 

159
00:13:34,000 --> 00:13:37,000
we can see that we have similar results.

160
00:13:37,000 --> 00:13:42,000
We have our HTML 5 video, the properly sized phone, and another nice thing

161
00:13:42,000 --> 00:13:49,000
that we have in both IE 9 and IE 10 is the rounded corners on this call to action button

162
00:13:49,000 --> 00:13:55,000
because starting with IE 9, we have CSS 3 border radii.

163
00:13:55,000 --> 00:13:57,000
So, that's pretty nifty.

164
00:13:57,000 --> 00:14:01,000
We also have these features down here at the bottom, which look just fine.

165
00:14:01,000 --> 00:14:05,000
Our text over on the left and right are sized properly, and generally,

166
00:14:05,000 --> 00:14:08,000
everything looks good here.

167
00:14:08,000 --> 00:14:12,000
So now, we're ready to move onto Windows Mobile 7.

168
00:14:12,000 --> 00:14:18,000
So, let's go ahead and take a look at the Windows Mobile 7 phone again.

169
00:14:18,000 --> 00:14:22,000
So, on the Windows phone, we're still having a lot of issues here.

170
00:14:22,000 --> 00:14:25,000
We're actually still hitting that same three-column layout, and we're not 

171
00:14:25,000 --> 00:14:28,000
using any media queries.

172
00:14:28,000 --> 00:14:33,000
So, if we scroll down here, you can see that things are actually looking pretty bad.

173
00:14:33,000 --> 00:14:35,000
All of the icons are really small.

174
00:14:35,000 --> 00:14:44,000
They're all jumbled all over the place, and generally, we have a lot of work to do here.

175
00:14:44,000 --> 00:14:47,000
So, let's get started on our Windows Mobile 7 style sheet.

176
00:14:47,000 --> 00:14:53,000
This style sheet is going to be very similar to what we did in the rwd.css style sheet,

177
00:14:53,000 --> 00:14:56,000
but without the use of media queries.

178
00:14:56,000 --> 00:15:00,000
We're going to apply all of the same styles, for the most part, 

179
00:15:00,000 --> 00:15:03,000
and then remove the media queries.

180
00:15:03,000 --> 00:15:08,000
This way, we'll ensure that all of the styles cascade in the same way,

181
00:15:08,000 --> 00:15:13,000
but because Windows Mobile 7 actually does not support CSS 3 media queries, 

182
00:15:13,000 --> 00:15:18,000
we can just go ahead and remove them, but still have all the same styling.

183
00:15:18,000 --> 00:15:22,000
So first, we're going to switch over to rwd.css.

184
00:15:22,000 --> 00:15:28,000
We're going to highlight everything in the entire document, copy it,

185
00:15:28,000 --> 00:15:34,000
switch over to winmo7.css and paste it in.

186
00:15:34,000 --> 00:15:37,000
So, let's go ahead and start out here at the top.

187
00:15:37,000 --> 00:15:44,000
We have our 1700 pixel layout, and although our Windows Mobile 7 phone

188
00:15:44,000 --> 00:15:48,000
will never get to be that resolution, we still want all of those

189
00:15:48,000 --> 00:15:52,000
same styles to cascade, particularly the font sizes.

190
00:15:52,000 --> 00:16:00,000
So, let's just go ahead and remove that media query and this body background yellow.

191
00:16:00,000 --> 00:16:04,000
Just like that.

192
00:16:04,000 --> 00:16:09,000
And then we'll go ahead and correct the indentation here, just so we know that

193
00:16:09,000 --> 00:16:14,000
this is sort of at the first level and not inside of any kind of media query.

194
00:16:14,000 --> 00:16:18,000
Next, we're just going to do the same thing for the 1400 here by removing 

195
00:16:18,000 --> 00:16:23,000
the media query, removing the body background green and this ending

196
00:16:23,000 --> 00:16:27,000
curly brace for our media query, and then we're just going to remove 

197
00:16:27,000 --> 00:16:31,000
all of the indentation here.

198
00:16:31,000 --> 00:16:42,000
Same thing for the 1200, remove the media query and correct the indentation.

199
00:16:42,000 --> 00:16:45,000
Just like that.

200
00:16:45,000 --> 00:16:50,000
And then finally, we get down to where things are going to be different.

201
00:16:50,000 --> 00:16:53,000
So, it will be very similar here, but just so we don't get confused,

202
00:16:53,000 --> 00:16:59,000
let's actually start over, and we actually don't need this ipad css either.

203
00:16:59,000 --> 00:17:02,000
So, let's just remove all that.

204
00:17:02,000 --> 00:17:09,000
First, we're going to float our three columns, header, phone and miscellaneous, 

205
00:17:09,000 --> 00:17:11,000
over to the left.

206
00:17:11,000 --> 00:17:19,000
We'll give them a width of 100% and a margin of zero and auto.

207
00:17:19,000 --> 00:17:24,000
And again, this is just so that the elements won't flow next to one another

208
00:17:24,000 --> 00:17:27,000
and will rather stack on top of one another.

209
00:17:27,000 --> 00:17:34,000
Next, for our header paragraph text, we're going to use a very similar property

210
00:17:34,000 --> 00:17:39,000
to webkit text size adjust, but this time, we're going to use the Microsoft

211
00:17:39,000 --> 00:17:50,000
vendor prefix MS and say the same thing, "text-size-adjust:none."

212
00:17:50,000 --> 00:17:57,000
Next, we'll correct our features by floating them to the left, giving them a

213
00:17:57,000 --> 00:18:04,000
width of 100% and setting the margin to zero auto, just like our columns,

214
00:18:04,000 --> 00:18:08,000
so that all of our features will stack on top of one another, rather than 

215
00:18:08,000 --> 00:18:11,000
flowing next to each other.

216
00:18:11,000 --> 00:18:21,000
Next, we'll select our features, and we'll adjust the paragraph text for the info

217
00:18:21,000 --> 00:18:29,000
by setting a font size of 1 em, and again, saying "ms-text-size-adjust: none."

218
00:18:29,000 --> 00:18:32,000
Then we need to select our phone column.

219
00:18:32,000 --> 00:18:37,000
We'll set the background to transparent because we want to remove

220
00:18:37,000 --> 00:18:41,000
that background image of the phone.

221
00:18:41,000 --> 00:18:47,000
We'll set the margin bottom to 50 pixels, and we'll say "float:none."

222
00:18:47,000 --> 00:18:52,000
And, we need to add some margins to our video container.

223
00:18:52,000 --> 00:19:04,000
We'll say "width: 100%" and "margin: 0px," auto and then 10%.

224
00:19:04,000 --> 00:19:16,000
And then finally, we're going to say "#phone #video_container #video_phone_static."

225
00:19:16,000 --> 00:19:19,000
And we're going to set that to display none because we only want 

226
00:19:19,000 --> 00:19:22,000
to show our app screenshot.

227
00:19:22,000 --> 00:19:31,000
So, we'll say "#phone #video_container #video_app_screenshot."

228
00:19:31,000 --> 00:19:35,000
Display inline.

229
00:19:35,000 --> 00:19:39,000
And we'll go ahead and save that out, and let's go ahead and take a look

230
00:19:39,000 --> 00:19:43,000
at our phone and see how we did.

231
00:19:43,000 --> 00:19:49,000
So now, on our Windows Mobile 7 phone, we have our familiar one-column layout. 

232
00:19:49,000 --> 00:19:52,000
Our logo and text looks really good.

233
00:19:52,000 --> 00:19:55,000
We have our application screenshot.

234
00:19:55,000 --> 00:19:58,000
We do have our button here.

235
00:19:58,000 --> 00:20:02,000
It doesn't have border radii, but that's okay.

236
00:20:02,000 --> 00:20:04,000
We have our icons that look pretty good.

237
00:20:04,000 --> 00:20:08,000
The spacing is a little odd, but that's all right, and we're not loading in 

238
00:20:08,000 --> 00:20:12,000
fonts either, but again, that's okay as well.

239
00:20:12,000 --> 00:20:16,000
In general, it looks pretty good, and it looks very similar to the experiences

240
00:20:16,000 --> 00:20:20,000
that are available on the other devices.

241
00:20:20,000 --> 00:20:23,000
That about wraps things up for this master class, and for this 

242
00:20:23,000 --> 00:20:25,000
responsive web design project.

243
00:20:25,000 --> 00:20:29,000
Responsive web design is still relatively new, but many sites are now

244
00:20:29,000 --> 00:20:34,000
using this technique to target a wide variety of screen resolutions.