One of the things we always talk about is that there's a real difference between sitting and listening to me talk about something, and getting in there and coding it yourself, or at least following along with me while I code it. So let's do an example as we go from static or absolute measurements to something that's more fluid. So what I have here is a site where I've used absolute measurements to lay everything out. I have a large screen, and I have three columns. I'll check out the HTML quickly just so we can all follow along. I've got my header, right here. Not much in it other than H1 and H2 element. I have a nice little paragraph over here where I basically say, I've hard coated these measurements, what's going to happen when I resize the screen? And then, the last thing I have is really just a little bit of craziness. I'm going to pull it down here. It's just three divs, each of which has an H2 header and a paragraph. They all say the same thing, it's just some Latin filler, because I don't really care about the actual content itself. More importantly, let's look over here at the CSS. In that main section, the main content of my page I've gone in and I've hard coded the value to 980 pixels, the margin 0 auto, just means hey, make sure you center me, if I'm on a bigger browser. For each column, because I'm going to have three, I set the width to 300. Now 300, 300, 300 that's only 900 pixels. But, because I leave some margin in-between each column, it's important we add a little bit of extra padding there. Everything else is fairly straightforward. I have rules for the body and the H1 and H2. The only other real measurements I use are the fact that I set my font size to 13 pixel, and down here for the H1. I've set my font size to 64 pixels. All right, let's take a look at this page when I really bring the content up, so it's something we can see. Here we go. I have it. I have a fairly large sized screen, in fact, if I pull it around I can usually see how big it is. And it looks okay, but as I make the screen smaller, you're going to see that what happens is the content is hidden. If I scroll, I can't even scroll up and down. I'm trying. The only way for me to see more content is to scroll horizontally. And we all know that I absolutely hate that. In addition, this H1, the fluid measurement, the font is so big that it kind of overshadows the rest of the content. So I'm going to make this big again, and let's think about what we want to do. One of the keys to responsive design typically is mapping out what you want your page to look like before you code it, and we're going to talk about that in week two. But right here, for week one, let's just wing it a little bit. I'm going to make it so I can see my code. And the first thing I'm going to do is I'm going to go to the first place I hard coded a value, which is the width of this main part. Saying that I always want it to be 980 pixels, it's just a mistake. Instead, let's use percent here, and say I want this to take up, let's say somewhere between 95 and I'll pick 95% of my page. Already, you could see that things happened in there. Not everything we wanted to happen, but a little. I'll resize it again. You can see that my paragraph down here still fits, but the columns just look at little bit awkward. Particularly, if I'm somewhere in that awkward range of two columns fit, but not the third. So while the main page is responsive, let's work on those columns. Here, I've set them to 300 pixels. Let's change that. Since I have three columns, again, I can set it to 33, 33, 33, but I'm probably going to end up with some overlap. So I'm going to make these 30%, and I'm going to set the margin left to, we'll use 2%. Now you can already see this is a huge difference in our page. Whether I make it big, there's not a lot of wasted white space along the side. And if I make it small, the columns are still together. This is really good. The last thing I'm going to change, I'm going to go ahead and change my H1, so I'm using the percent instead. We're going to make this 125%. That's not big enough. I'll make it 300%. That'll be big. Okay, I'm going to save this, I'm going to resize, and when you go in, it no longer will be quite as dramatic over the entire page. All right, so this is a fairly straightforward example of how we can take absolute measurements and change them do something that's relative or responsive to make our page a little bit better. This is just the first step, but it's an important step and it's something I want you to play with. So you can feel like you're beginning to understand percents, ems, and other things like that. Good luck.
