Hi, everybody, so you're here and I'm here, and we're here to talk about responsive design. But one of the first questions should be, what is responsive web design? And what it is, is it's designing your web site with the idea that people will be viewing it from multiple screen sizes and different resolutions as well. So we want to make sure that our side is going to, what we call work, under any platform, any browser size or any orientation. And by orientation I mean whether you turn your phone up or to the side. And same for the tablet. The most important lesson is that you want to make sure that the user has the power. Don't dictate to them what they can and can't do. So let me give you an example. A lot of times when you're looking at a site on a smaller screen such as your phone you get a lot less content. And while it's true their smaller space it's not that there should be less things you can do everything should just be laid out a little bit more intelligently. You have to remember that people are doing more and more things on their phone that they've never done before. We often think now about watching videos, but we also have to think about filling out applications, or coding. There's going to be a lot of things that we don't even know yet that exist, so we want to be as flexible as possible. The most important thing is never assume that the user won't need access to specific functionality. I think we've all been there when we're looking at a website on a smaller device and we just can't find the thing that we're looking for. Or even worse, there's these pictures or buttons or different things we can't even move them out of the way with our fingers because the site just won't work for us. So here are some of the concepts that we're going to be considering throughout this entire course. Three concepts that I want you to keep in the back of your mind. And I'm hoping at the end of this course you'll be able to say, yeah I think I've got that, and the first one is called media queries, and what media queries do is that they can detect the view port size and other information about the device that the browser is on. The next thing that we're going to want to talk about is this idea of flexible grid-based layout for relative sizing. And relative means, depending on how large the screen is, that's how big your grid is going to be as well. And finally we want to think about flexible images. All these things add up, so that when you go to the page, the user doesn't need to waste their time scrolling back and forth or trying to resize things to be able to see everything. We want it to happen really automatically. So let's take a look at some examples that have great responsive design. So the first place I'm going to take you is a website called mediaqueri.es. This site has a really nice collection of different sites that it's found that really kind of find that key to responsive design. So let's go ahead and take a look at, I'll scroll down a few. How about this one right here? CapRadio, go any place. So this site right now, when I'm looking at the large screen, you can see that there's a definite look to the layout. As I resize the screen, as if I'm looking perhaps on a tablet, and I reload it you can see that things have moved over. The navigation bar is now over to the left when it wasn't there before. I'm going to go ahead and make it smaller still. I don't even need to refresh. And now you might see something that looks much more close. To that look and feel of something you would see on the phone. The navigation bar has completely disappeared, and there's this little pop up and down. These different sites just don't make everything smaller, let me make it bigger, they actually think about the best way to lay out the content, so that you can still find everything that's there without having to look too much. Now, you can use that site to see examples of great responsive design, but what if I also wanted to show you an example of kind of bad responsible design. Unfortunately, when you Google that out, or you look for that on your search engine, nobody really wants to advertise the fact that they're really bad at web design ,so I found one for you. It's the Internal Revenue Service. And what we have here is a site that not only looks the same, but is laid out the same no matter what type of screen you're looking at. So it looks okay right here, but when I make the screen much smaller, you can see that it didn't really do anything. Now I actually have to physically scroll back and forth to see things. The navigation bar hasn't changed. You have the same size pictures. This is just an example of really bad responsive design. So let's work together over the next few weeks to make sure that you are avoiding those same types of traps, and we're going to get started coding right away.
