Hey there, in this video we're going to talk about Grid Systems and Responsive Web Design. So, when people talk about responsive, all it means is I'm going to design a site that responds to the different devices that I'm using, so if I'm viewing this site here, my site, bringyourownlaptop.com on a desktop, it looks like this, but when it gets down to a mobile size, something like this, you can see that the site changes, they best use the screen real estate, or the screen size for this view. You can see these guys are a big change, these go side by side, but when they're on a desktop there's 4 in a row rather than 2 in a row. And when it gets down to mobile, it changes even again. The big change is, on a mobile I've decided that that big image at the top, that smiling handsome man there disappears, he's not useful on mobile, I'm running out of screen real estate, so I'm just kind of getting right to the basics and using just these thumbnails here, so they're stacked on top of each other in one column, but in tablet it's set to two, and when it's out on desktop it is four, so those adjustments, best use of the screen size is what's called Responsive Web Design. 

So what we're doing when we're using Illustrator is that when you design for those three views-- so when it starts getting built, either by yourself or by a developer, they know what they need to adjust the size to, or the website to look like at those different screen sizes.

Now, the next thing to look at is what a good system is, because that is the most common way of breaking the site up. What happens is, there's an underlying 12 column grid that runs along all the web pages, and that's how you divide the content up. So what happens is-- it's very similar if you're in print or magazine design, a 12 column grid on a newspaper gets used to kind of help you get consistency across many pages. It's the same here in Web Design. The easiest way to see it is in our final version. 

This is our final design, there's the desktop version, tablet version, and mobile, and what ends up happening is, watch this, if I turn on the grids that I've got, you can see I've divided the desktop by even making sure I keep in mind these 12 columns, I wouldn't have it half way through this column, they all span to equal 12, so this guy here is 4 of them, they all add up to 12. It means that at the top here there's a line, it's actually spanning all 12, and that's fine. These guys up here need to be adjusted a little bit, My design, they are spanning these two columns here, I need to align them up a little better, and this guy here, he kind of spans the whole thing because there's nothing over here. So let's look at what we've done, and redesigned for the tablet.

Now what we do is, I could put 12 columns in here, but you can imagine, if I can press 12 of these columns down to here, even though they're technically all there, it becomes a bit harder to design with hundreds of lines across. Can you see, it gets worse when it gets down to mobile. So you can see what I've done, and what you'll do as a designer is-- I don't need all 12, that kind of finite adjustment is too much for me, you might like it and you can keep it 12 columns, I've just put 6 here. And I've divided them up evenly. This one spans 3, that one spans 3. It's still divisible by 12, you can see the spans-- half of it would be 6, and that would be 6, so we're still using the 12 column grid, but just visually it's too hard to see so many of them. 

What we've decided here, is I'm going to turn the guides off. That's the way I want it to look like when it's on a tablet device. When it gets down to mobile I want to change it again. We've changed it quite a bit in this one, the navigation's changed, down here, and we've used pretty much the whole way down, we've used the complete width, which is the whole 12 columns. I'm going to turn the guides back on. When I'm working on mobile, often I just deal with 2 columns, so there's 6 on that side, 6 on that side. I just use 2, just to make it a little easier. You can put all 12 there but it becomes a real headache to align things up. 

That is the Grid System, and that's how web designers on the other side divide your content up. You can't do 13 because it's really hard to divide up the middle because it's an odd number, so even numbers, most of the time it is 12 columns. So in the next video let's look at how to make these columns so you can design them.