Free Tutorial: A Look At What We Will Build

I hope this idea of responsive design is starting to make sense. Here's a look at our completed layout. Well, to be specific, this is the completed layout for the high resolution device. So, what you and I are going to be building is a website, a responsive website, for a fictitious karate dojo. So, this is the high resolution layout for the fictitious dojo that we're going to be building. So, once again we're going to have a header across the top. You saw the wire frame for this layout just a moment ago. Header across the top with a logo. Main navigation bar underneath that. Here's where the slide show will go. And then beneath that, we have our three content boxes with headings for each of our content boxes. And then beneath that, we have our news feed, which contains, at this point anyway, just some dummy content for us, which obviously would eventually get replaced with the real content, and then, of course, the footer at the bottom, closing things off. So, this is how the layout is going to look, or this is how we want our layout to look if the layout is being viewed on a high resolution device. And, once again, I have defined, for myself anyway and for this course, a high resolution device as being any device that's running 1,024 pixels or higher. And again, I know that's not a very high resolution in terms of modern monitor resolutions, but that's what we're going to go with for our time here. So, that's what's going to happen here. Now, check this out. This high resolution, if you will, layout is going to center itself inside the browser window automatically, as you can see here. And then what's going to happen eventually is, we're going to break through into the next device. There's going to be a point where I scale this down and I wind up inside the next device down. This is the second group of resolutions, if you will, or perhaps what you could call the medium resolution layout. So what's happened here is the code, the media query, has detected the width of my browser window and has now taken on a new look and feel. I still see the header and the logo across the top, but now I'm getting a navigation menu that breaks onto two lines. I still have the slide show, but check out. This is a really cool trick I'm going to show you in a little while. How to get that graphic to scale up and down. Notice in the previous device that we were using, the high resolution layout, that slide show graphic wasn't scaling. Now it is inside this medium resolution layout. And if I start scrolling down inside this layout, check out those center boxes. They're no longer vertical. They're now horizontal and they're filling the entire width of the layout. So we're having objects rearrange themselves inside the layout. This is exactly what responsive design is all about. And then beneath that, of course, we have our news feed, and below the news feed, we have the footer. And last but not least, our third device, our low resolution media query, if you will. I'm going to crush the width of my browser window all the way down to simulate a low resolution device which, once again, I've defined as 480 pixels or lower. You can see here what happens to our layout. So, we pretty much just get the logo at the top there with a little bit of the background in the header there. The main navigation menu is now broken onto three lines. And if I scroll down a little bit, the slide show has completely disappeared, and these content boxes have taken on some slightly different formatting with the graphic now centering itself in the middle of these boxes. And of course, beneath that, we have our news feed and our footer. So this is really what responsive design is all about. Having the page detect the resolution of the device that's being used and then automatically adjusting itself. So, that's what we have in store for us. Before we jump into all of that, let's have a quick conversation on some of the tools of the trade that we can make use of to help put together our responsive designs.

O'Reilly is a leading creator and provider of project-based computer software training videos via DVD, Online, and through our Cloud Based On Demand Solution for Enterprise and Education.

With offices in North America and distribution facilities around the world, we deliver affordable, high quality IT training videos/tutorials on the most widely used software and programming languages (C Programming, Java, iOS, etc.) as well as niche programs (Revit and Maya).