Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Media Queries!
You have completed Media Queries!
Preview
In this video, we'll test our layout across a few browsers, including several versions of Internet Explorer. We'll also make necessary adjustments for Windows Mobile 7 phones.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[Responsive Web Design] [Media Queries: Cross Browser Testing]
0:00
We're now at a point where we're ready to start doing our cross browser testing.
0:07
First, we should check this in a non-webkit based browser like Firefox.
0:12
So, we'll go ahead and switch over to Firefox, and it looks pretty good,
0:18
but we should go ahead and resize the browser to make sure that all of our
0:23
different media queries are being applied properly.
0:27
So, if we go ahead and resize the browser, looks pretty good here.
0:31
We can scroll down and see that all of our features look correct, and by the
0:35
background color changing we know that it is responding to these different
0:40
media queries, but when we get down to this smaller mobile size, it looks like
0:45
we are running into an issue where our screenshot is off to the side.
0:51
And that's certainly not okay.
0:55
We can go ahead and switch over to TextMate though, and it looks like right here
0:58
our video app screenshot is set to display block, and we can try setting it to
1:04
inline, and we can check that in Firefox, and it looks like everything
1:11
is just fine there now.
1:17
We'll scroll down and take a look at these features.
1:20
Looks like our call to action button looks great, and everything pretty much looks fine.
1:23
We'll go ahead and check that change in a webkit-based browser like Google Chrome.
1:28
So, we'll refresh the page, and if we resize, it looks like everything's fine,
1:34
and changing that to inline didn't seem to cause any harm.
1:40
So, we're good there.
1:44
Now, we're ready to go ahead and tackle Internet Explorer.
1:47
Of course, Internet Explorer is much different in that it uses a different
1:51
rendering engine, and we can target it specifically by using
1:56
conditional comments in our HTML.
2:00
First, let's go ahead and create a few style sheets that we'll be using.
2:04
So, in our CSS folder here, we'll go ahead and create a new file.
2:09
And the first file we're going to create will be called ie8.css.
2:15
And this will basically target Internet Explorer 8 and downwards.
2:22
So, we'll keep that file for later.
2:28
We'll create another file here called "ie9," and this will target
2:30
Internet Explorer 9 and onwards, and we're going to create one more file
2:37
called "winmo," or windowsmobile7.css, and this will target our Windows mobile phone.
2:45
So, we'll go ahead and create that.
2:56
Now, let's go ahead and jump over to our index.html file
2:58
and add in these various style sheets.
3:04
We need to add these just after our rdw.css, so we'll go ahead and
3:08
skip to the end of that line and jump down to the next one, and we'll start our
3:14
conditional comment with an exclamation point, two dashes,
3:19
and then our square brackets.
3:24
And we'll say if greater than or equal to IE 9, and we'll close it.
3:26
And then inside of here, we'll go ahead and type out our style sheet,
3:41
and this is very similar to the style sheets that we've already included,
3:45
so we can just go ahead and copy and paste one of these lines.
3:49
So, I'll copy that and paste it in, and I'll change rdw.css to ie9.css.
3:53
So, if the browser is detected as being Internet Explorer 9 or a greater version
4:06
of Internet Explorer, then it will include ie9.css.
4:11
So next, we're just going to go ahead and copy and paste this whole
4:17
conditional just like that, and then we'll say if less than IE 9, then include ie8.css.
4:21
And that's it for that.
4:37
And then, we'll go ahead and paste this one more time, and we're going to use
4:39
a less commonly used conditional for IE Mobile.
4:46
So, we'll say if IE Mobile, then include winmo7.css, and we do have
4:51
a very specific ordering here.
5:03
The first two don't really matter so much because
5:06
they don't really intersect with one another.
5:09
However, IE Mobile is also detected as being Internet Explorer 7.
5:12
So, any of these style sheets, which apply to Internet Explorer 7,
5:18
which the second one does, will also be applied to Windows Mobile 7.
5:22
So, in this style sheet, we'll need to make sure that we override anything
5:27
that we do here that we don't necessarily want to be included.
5:31
Before we get started on each one of these style sheets, let's go ahead and
5:37
switch over to Windows and look at each version of Internet Explorer.
5:40
Now, I'm using a program called IE Tester, which allows me to test a
5:46
wide variety of IE versions.
5:51
In this tutorial, we're just going to be testing IE 8, IE 9 and IE 10
5:54
Platform Preview 1, but you can, of course, use any Internet Explorer version
5:59
you want to test here.
6:04
So, this is the tab for Internet Explorer 8, and as you can see, we have
6:07
quite a few problems here.
6:12
The phone doesn't seem to be really rendering properly at all.
6:15
Our button is squared off, which because we don't have CSS 3 border radii
6:19
in Internet Explorer 8, there's not a whole lot that we can do about that,
6:24
and our features are sort of all jumbled up at the bottom.
6:29
Now, this may look bad, but it's actually not quite as bad as it looks.
6:33
We can fix a lot of the things here pretty easily.
6:38
Next up is Internet Explorer 9, which looks a little bit better,
6:41
and you'll notice that we have the rounded corners.
6:46
We have a little bit more of the phone here.
6:49
We actually have HTML 5 video, although the video player is way too small.
6:51
That's something that we'll need to fix, and you'll notice that the background color
6:57
is green, which may look like an error, but remember, we've set the background
7:01
colors to bright colors so that we know that our media queries are working.
7:05
So, what that means is that IE 9 is actually picking up on our media queries,
7:10
which is great because it means that the browser will respond
7:15
to our different designs properly.
7:19
Down here at the bottom, it looks like our features are displaying properly.
7:22
So, that's good too.
7:26
So now, let's go ahead and take a look at IE 10 and see where we're at,
7:28
and as you can see, it basically looks exactly the same as Internet Explorer 9.
7:33
So, anything we do in that style sheet we can go ahead and safely apply to IE 10
7:39
and know that we'll be fixing all of those problems as well.
7:44
So, let's go ahead and start out with IE 8.
7:49
We'll go ahead and switch back to TextMate, and we'll go to our IE 8 style sheet,
7:53
and the very first thing we're going to do is set the body background to a solid color.
8:00
This will just remove any kind of CSS 3 gradients that we have that might be
8:06
interfering with the way that the page renders.
8:11
Next, we're going to do the same thing for our call to action button
8:16
and just set it to a solid color.
8:22
And then we're going to go ahead and copy and paste that and set the hover state,
8:31
again, to just a solid color.
8:41
And then, we're going to set the phone background to transparent because
8:44
we're actually going to be using the fallback screenshots because Internet Explorer 8
8:52
and below does not support HTML 5 video.
8:58
Next, we need to make a few margin adjustments to the video container.
9:02
We'll say "margin-top 5%" and "margin-bottom 0 px."
9:09
And again, remember that this will not be adjusting the actual video.
9:18
We're just making some adjustments to the way the app screenshot is displayed.
9:22
So, we'll say "#phone #video_container" and we're actually going to
9:29
hide the app screenshot because we're going to use that secondary image
9:35
which is just the static phone with the screenshot inside of it.
9:42
So, we'll set the app screenshot to display none.
9:48
We'll set the video itself to display none, and then finally,
9:56
we'll go ahead and select our phone, the video container, and the
10:06
static image of the phone, and we'll set that to display inline.
10:14
So, let's go ahead and see where we're at.
10:23
We'll switch over to IE 8 and hit refresh.
10:26
And, as you can see, our site's looking a lot better.
10:32
We still need to make a few additional adjustments, but at least
10:35
our phone looks pretty good.
10:39
And again, this is now a static image of the phone and the screenshot of the app,
10:41
which is just actually one image.
10:47
So, we'll switch back to TextMate and continue here.
10:51
Next, we need to adjust the font size of the paragraph text in our header.
10:54
So, we'll dial it down to 1 em.
11:01
And then finally, we need to fix those features down at the bottom of the page.
11:04
We're going to give them a width of about 45%, which does break away from our
11:11
fluid grid a little bit, but should still give them enough space.
11:15
And we'll say "margin-right 5%."
11:20
And we're going to give them an explicit height of 200 pixels.
11:24
So, we'll go ahead and save that, switch back to Internet Explorer 8 and refresh.
11:29
And as you can see, this looks pretty good.
11:36
We have our features down here at the bottom that are all aligned properly.
11:39
Over here on the left, our paragraph text is at a reasonable size,
11:44
and although we can't get the rounded corners working on our call to action button,
11:49
it's okay that it's squared off.
11:54
The thing to remember here is this layout is not going to be responsive
11:56
because Internet Explorer 8 does not support CSS 3 media queries.
12:01
So, we're basically stuck with this layout, which is why we're able to use
12:06
explicit height and just sort of get away with eyeballing the percentages.
12:10
So, that's Internet Explorer 8.
12:17
Next, we need to fix IE 9 and IE 10, and we'll actually just do that all at once.
12:19
So, we'll go ahead and switch back to TextMate.
12:26
We're done with ie8.css, so we can move onto ie9.css.
12:29
There's actually just one thing that we need to change in IE 9 and IE 10,
12:35
and that is the width of the HTML 5 video.
12:40
So, we'll go ahead and select phone, the video container, and the HTML 5 video,
12:44
and we'll set the width to 100% so that the video takes up the full width
12:51
of its parent container, and because the aspect ratio isn't changing,
12:58
it will also take up the full height.
13:02
So, if we save that out, switch back to IE 9 and refresh the page,
13:05
you can see that the video now is properly sized, which also
13:11
properly sizes its parent container, which has the phone background.
13:15
And we can go ahead and click play on this HTML 5 video, and it will
13:21
look like an actual phone.
13:25
Pretty nifty.
13:28
Now, if we go ahead and switch over to IE 10 and refresh the page,
13:30
we can see that we have similar results.
13:34
We have our HTML 5 video, the properly sized phone, and another nice thing
13:37
that we have in both IE 9 and IE 10 is the rounded corners on this call to action button
13:42
because starting with IE 9, we have CSS 3 border radii.
13:49
So, that's pretty nifty.
13:55
We also have these features down here at the bottom, which look just fine.
13:57
Our text over on the left and right are sized properly, and generally,
14:01
everything looks good here.
14:05
So now, we're ready to move onto Windows Mobile 7.
14:08
So, let's go ahead and take a look at the Windows Mobile 7 phone again.
14:12
So, on the Windows phone, we're still having a lot of issues here.
14:18
We're actually still hitting that same three-column layout, and we're not
14:22
using any media queries.
14:25
So, if we scroll down here, you can see that things are actually looking pretty bad.
14:28
All of the icons are really small.
14:33
They're all jumbled all over the place, and generally, we have a lot of work to do here.
14:35
So, let's get started on our Windows Mobile 7 style sheet.
14:44
This style sheet is going to be very similar to what we did in the rwd.css style sheet,
14:47
but without the use of media queries.
14:53
We're going to apply all of the same styles, for the most part,
14:56
and then remove the media queries.
15:00
This way, we'll ensure that all of the styles cascade in the same way,
15:03
but because Windows Mobile 7 actually does not support CSS 3 media queries,
15:08
we can just go ahead and remove them, but still have all the same styling.
15:13
So first, we're going to switch over to rwd.css.
15:18
We're going to highlight everything in the entire document, copy it,
15:22
switch over to winmo7.css and paste it in.
15:28
So, let's go ahead and start out here at the top.
15:34
We have our 1700 pixel layout, and although our Windows Mobile 7 phone
15:37
will never get to be that resolution, we still want all of those
15:44
same styles to cascade, particularly the font sizes.
15:48
So, let's just go ahead and remove that media query and this body background yellow.
15:52
Just like that.
16:00
And then we'll go ahead and correct the indentation here, just so we know that
16:04
this is sort of at the first level and not inside of any kind of media query.
16:09
Next, we're just going to do the same thing for the 1400 here by removing
16:14
the media query, removing the body background green and this ending
16:18
curly brace for our media query, and then we're just going to remove
16:23
all of the indentation here.
16:27
Same thing for the 1200, remove the media query and correct the indentation.
16:31
Just like that.
16:42
And then finally, we get down to where things are going to be different.
16:45
So, it will be very similar here, but just so we don't get confused,
16:50
let's actually start over, and we actually don't need this ipad css either.
16:53
So, let's just remove all that.
16:59
First, we're going to float our three columns, header, phone and miscellaneous,
17:02
over to the left.
17:09
We'll give them a width of 100% and a margin of zero and auto.
17:11
And again, this is just so that the elements won't flow next to one another
17:19
and will rather stack on top of one another.
17:24
Next, for our header paragraph text, we're going to use a very similar property
17:27
to webkit text size adjust, but this time, we're going to use the Microsoft
17:34
vendor prefix MS and say the same thing, "text-size-adjust:none."
17:39
Next, we'll correct our features by floating them to the left, giving them a
17:50
width of 100% and setting the margin to zero auto, just like our columns,
17:57
so that all of our features will stack on top of one another, rather than
18:04
flowing next to each other.
18:08
Next, we'll select our features, and we'll adjust the paragraph text for the info
18:11
by setting a font size of 1 em, and again, saying "ms-text-size-adjust: none."
18:21
Then we need to select our phone column.
18:29
We'll set the background to transparent because we want to remove
18:32
that background image of the phone.
18:37
We'll set the margin bottom to 50 pixels, and we'll say "float:none."
18:41
And, we need to add some margins to our video container.
18:47
We'll say "width: 100%" and "margin: 0px," auto and then 10%.
18:52
And then finally, we're going to say "#phone #video_container #video_phone_static."
19:04
And we're going to set that to display none because we only want
19:16
to show our app screenshot.
19:19
So, we'll say "#phone #video_container #video_app_screenshot."
19:22
Display inline.
19:31
And we'll go ahead and save that out, and let's go ahead and take a look
19:35
at our phone and see how we did.
19:39
So now, on our Windows Mobile 7 phone, we have our familiar one-column layout.
19:43
Our logo and text looks really good.
19:49
We have our application screenshot.
19:52
We do have our button here.
19:55
It doesn't have border radii, but that's okay.
19:58
We have our icons that look pretty good.
20:02
The spacing is a little odd, but that's all right, and we're not loading in
20:04
fonts either, but again, that's okay as well.
20:08
In general, it looks pretty good, and it looks very similar to the experiences
20:12
that are available on the other devices.
20:16
That about wraps things up for this master class, and for this
20:20
responsive web design project.
20:23
Responsive web design is still relatively new, but many sites are now
20:25
using this technique to target a wide variety of screen resolutions.
20:29
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up