Cross Browser Testing20:34 with Nick Pettit
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.
[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 up