Introduction

In the previous master classes covering responsive web design, 0:00 we learned how to create both low fidelity and high fidelity mockups. 0:03 Then we learned how to set up our fluid grids. 0:08 In this master class, we're going to finish our project with media queries, 0:10 which is the last major component of responsive web design 0:14 that we haven't yet covered. 0:18 [Responsive Web Design] [Media Queries: Introduction] 0:20 Before we get started, we should take a little bit of time to review 0:28 what we have so far. 0:31 This code is included with the previous master class as well as this current master class. 0:33 So, we have this layout that's advertising the web app "GeoNotation" 0:39 which allows you to take notes from anywhere and tag them with geolocation. 0:44 If we scroll down here, we can see that we have some features down here at the bottom. 0:52 We have some testimonials about how awesome the app is. 0:57 We have a little bit of a blurb about the app. 1:02 We have a call to action button, and then finally, in the center here, 1:05 we have this nice HTML5 video which demonstrates how the app works. 1:09 Now, this website is built using a fluid grid. 1:16 So, if we go ahead and resize the browser here, our fluid grid will kick into effect 1:21 and actually resize all of the page elements and keep them 1:27 relatively proportional to one another. 1:32 Now, the problem with this is that when we get down to these really small sizes, 1:35 our layout starts to break down. 1:41 These columns don't look very good, the text size is too large, this phone is 1:43 far too small, this button is too small to contain this large text, and so on. 1:48 If we scroll down the page, you can see that we have 1:55 similar problems down here as well. 1:57 Our icons become way too small relative to this text, and this paragraph text 2:00 is too large for these tiny columns. 2:05 So, that's what we're going to be fixing in this master class, and we're going 2:09 to do that using media queries. 2:13 Let's go ahead and review some of this code. 2:17 I'm going to switch over to TextMate, and in the HTML, you can see 2:19 that we have an HTML5 doc type. 2:23 We're using a font from the Google Font API. 2:27 We have our CSS included, and we have several divs here 2:32 that sort of just lay out the page. 2:37 We have main content, and that contains 3 columns. 2:39 The first column is header, and that is the column that is over here on the left. 2:45 That contains our logo and some paragraph text. 2:50 We have a second column called "phone," and that has a div inside of it 2:54 called "video container," and nested inside of that we have our HTML5 video 2:59 with several different sources depending on which browser 3:05 we're trying to display that video in. 3:09 So, if we switch back to the browser, you can see that center column right here. 3:11 We have a background image for the phone and an HTML5 video layered on 3:16 top of that background. 3:21 So, if we go ahead and switch back to TextMate, we can see our last column here 3:24 which is called "miscellaneous." 3:29 It contains a call to action button that says "Start Taking Notes," 3:31 and it contains a few block quotes, which are testimonials about the app. 3:36 So, if we go ahead and switch back to the browser, you can see that column right here. 3:40 We have our call to action button, and we have our testimonials. 3:45 After main content, we get into this features unordered list, and it just contains 3:49 four different features with an image-based icon and some paragraph text 3:56 just describing that particular feature. 4:02 So, if we go ahead and switch back to the browser, we can see 4:05 that we have those features down here. 4:08 Now, let's go ahead and take a look at the CSS that we have so far. 4:11 So, we'll go ahead and switch back to TextMate, and we'll open up 4:15 application.css and up here at the top, we have some reset code which basically 4:20 just resets the browser so that we have a level playing field 4:28 across all platforms. 4:32 We have this flag here called base, and that just applies some basic styling 4:35 across the entire page for things like our wrapper div, main content and so on. 4:40 We have header for the first column. 4:46 There's the video container, and we have our call to action button here. 4:51 Now, if we look here, we can see that we have several very large numbers here, 4:58 and those are our fluid grid calculations. 5:03 These are basically just percentages that help the page scale proportionally. 5:06 So, if we go ahead and scroll down some more here, you can see that we have our 5:12 quotes, which are for our testimonial block quotes, and finally, 5:16 we have a flag for features, and that just basically styles all of the features 5:22 that are down at the bottom of the page. 5:28 So, now we're ready to go ahead and add in our media queries. 5:30 So to do that, we're going to go ahead and create a new style sheet. 5:34 We're going to create this inside of our CSS directory, 5:39 and I'm going to call this rwd.css. 5:43 We're going to switch back to our HTML, scroll up to the top, and we'll go ahead 5:48 and include this style sheet, and we can do that very easily simply by copying and pasting 5:54 our application.css line. 6:01 So, we'll go ahead and paste that in, and all we really need to do here 6:07 is change the path to rwd.css instead of application.css. 6:14 Now, before we really dive into this CSS, we do need to do 6:21 a few more things inside of our HTML. 6:25 First, we need to add the meta tag with the name "viewport." 6:29 We're going to do that just after our first meta tag here for the charset. 6:34 So, we'll say "name = viewport," and we'll say "content= 6:41 width=device-width,user-scalable=no, initial-scale=1.0, 6:47 minimum scale=1.0," and finally, "maximum-scale=1.0." 7:06 And we'll go ahead and self-close that tag, and let's go ahead and explain this a little bit. 7:18 This line is basically to lock off the viewport on mobile devices. 7:24 We're not going to get into mobile devices just yet, but we will 7:29 later on in this master class. 7:33 So first, we have user-scalable=no, and that basically just means 7:36 that the user cannot scale the page, and then later on, we have initial-scale=1.0, 7:41 minimum-scale=1.0 and maximum-scale=1.0. 7:49 This basically just says that no matter what, the scale of the page should always 7:55 stay the same and should start at 1.0 and should never deviate from 1.0. 8:00 Next, we need to add some fallback images for our HTML5 video, 8:07 and we'll talk more about that later, but let's just go ahead and add them in now. 8:12 We'll scroll down to our video container here, and we already have 8:17 one of these fallback images, images/app.screenshot.jpg. 8:22 We need to add one more of these. 8:28 So, I'll just go ahead and copy and paste that line, and we'll change app.screenshot 8:33 to phone_static.jpg, and phone_static.jpg will appear in some instances 8:42 where HTML5 video is not supported. 8:51 We'll revisit the HTML markup later on, but first, let's go ahead 8:54 and switch over to application.css and go ahead and hide 8:59 those screenshots that we just added. 9:04 So, let's go ahead and scroll down to where we're styling our video container, 9:07 and let's go ahead and hide those fallback images. 9:14 So, in order to do this, we need to select our phone div, our video container, 9:18 and we'll say "video_app_screenshot." 9:24 We'll put a comma, and then we'll select phone, video_container, video_phone_static. 9:30 And we'll just set those to display none. 9:43 Now, in order for this to work, we do need to put the video_phone_static 9:46 id on that secondary image, so let's go ahead and do that now. 9:50 We just need to change app_screenshot to say "phone_static." 9:55 Just like that. 10:02

You need to sign up for Treehouse in order to set up Workspace

Sign up