Building responsive layouts: Lab

Now it's time to revisit our desolve.org layout and help convert it to a responsive design. In this lab, we're going to tackle properly writing media queries, controlling the initial page view in mobile devices, and styling elements based on the targeted device. So I have the finished file of our lab opened in the browser right now, and I just want to preview it for you guys and show you the different breakpoints within this responsive layout. Now this is the same layout you guys have seen for quite some time now. The only difference, of course, here is that we now have a responsive layout rather than just a fluid or a fixed one.

So you'll notice right off the bat, it's a fluid layout within a certain range, but then when you hit a breakpoint, it switches to the next layout. We have some pretty large differences between the layouts. You can see here, for example, the Preview section is dramatically different between the tablet and the desktop version. You'll also notice that our menu on the sidebar here, when we go to a single- column design, that menu becomes a pulldown menu, and you'll notice for our mobile layout we have things like the banner goes away and we have much larger icons for the touch area that's involved, that sort of thing.

Okay, so I'm just going to switch over to our code. And I've got two files opened right now. I have the index.htm file and I have the main.css file. Okay, as usual, I have our lab steps right here commented out within the CSS file. We're just going to get through those one at a time, and we'll talk about what we need to do to this layout to get it to its finished state. So the first thing I want you guys is to do is go over to the index.htm file, so right here, and add a meta-viewport tag that forces mobile devices to set the viewport width to the actual device width, and then set the initial scale to 100%.

Now the next thing you're going to do is you're going to go down to three separate lines, line 292, 512, and 748, and you're going to need to finish a few media queries for us. So we have three media queries that we're going to be doing. The first one at 292 is going to target mobile devices, so anything with a width below 481 pixels. And then on line 512 we have a tablet media query, and we need to constrain that one to a range of 481 pixels to 768. And then of course, desktop is going to be anything 768 and greater.

I'm going to go down to 291, just to show you kind of the state that these guys are in. And you can see that the @media declaration is all we really have there. We don't have the actual media query itself written, so you're going to need to do that for all three of those. And I'm going to back up to our steps. After you've done with the media queries, you're going to go down into the mobile styles and the tablet styles and you're going to write a selector that's going to hide the sidebar Archived Galleries menu. Now the menu that I'm talking about-- let's switch over to index, scroll down a little bit so you'll know how to write the selector for this. On the mobile styles and the tablet styles, this menu, this unordered list right here, needs to be hidden.

Now, by the same token, you're going to go in the desktop styles and you are going to hide the Select menu, so you're going to need to do both of those. So for mobile styles, on about line 465 is where you'll need to write the selector that hides the menu, and for the tablet styles about line 695 is where you're going to need to write that selector. In the desktop styles, go down to about line 965, and then you're going to write a selector there that it's going to hide the select pulldown menu. The last thing that you're going to do is you're going to go into the mobile and tablet styles and you're going to find, on about line 430 and line 658--and I'll take you down and show you that in just a moment-- you're going to find our preview gallery image. And what we want to do is we want to use the larger images for our desktop styles, but for tablet and mobile, we want to request the smaller graphics.

Number one, they fit the layout better. Number two, they're smaller, so they're going to be less resource-intensive for those particular devices. Now the way that you're going to do that is the way that the images are actually named. And you can go into the _images directory and find these, but essentially, where in the desktop styles, it might say Philadelphia_banner, the small version of that says sm_philadelphia, so sm_New York, sm_Chicago, that sort of thing. So if I go down to, say, line 430 to kind of show you what it is that we're targeting, these are the selectors that are controlling the images in that preview area. So you need to swap out these images with the smaller images.

Okay, now although you have a fair amount to do in this lab, we're really just barely scratching the surface in terms of what's really going on here that makes this particular design responsive. So after you're done, be sure to watch the solutions movie to not only check out your code, but also to hear about some of the other responsive-design features of the desolve.org layout.