Today's lecture is about media queries. And yes, I've already given you a lecture on media queries but I really want to give you another one. Because media queries are something that it's much easier watching me do it than doing it yourself. So today, three simple steps that I want you to try at your best to follow and then, we'll look at an example. The key to understanding media queries is to actually use them in responsive design. This lecture is going to describe that process in three steps, but you won't necessarily need to use all of them. So the best I can do is give you guidelines. Step one, this is something that will cause your page to work or not work many times on mobile phones. It's a simple bit of code that you want to include in the head of your HTML. What we have here is a meta tag. And what it's going to do is it's going to convey this information to your browser. We're going to be using different view ports. And it wants a browser to let your style sheets know, hey, how big you are? You're always going to leave the code exactly like this. You're simply saying, I want to know the view port, I want to know the content width, this initial-scale equals one that basely just kind of set what your size is going to be. Now, if you ever been to a site where things are really small and you want to make it bigger so you can read it a little better. And it just won't let you do that. That is because somebody has put this very horrible, horrible piece of code into their HTML. Instead of saying just initial-scale equals one, it also has maximum-scale equals one. I mention this not because I want you to put it into your site, but because it's pretty common practice when you're first coding to use other people's code. So if you see this happening, you want to take it out. It's just a really bad experience for many people trying to use your page if they can't make things bigger or smaller. So that's step one. It's not only going to help your browser know that you're going to be doing responsive design. It may actually help your search engine optimization as well. In step two, I really want to encourage you to use fluid layouts. It's very often the case that when people use breakpoints, they then use absolute measurements. The reason for that is if you think about it, they know pretty much how big the screen's going to be. They know that's going to be somewhere between here, That size and that size. Based on the fact that they know how many pixels wide the screen is going to be, they can hard code the width of some of their elements. You're going to see this in Bootstrap all the time. But, just because somebody else does it, doesn't mean the you should. I want you to use those other things such as percentages, and ems. These are really great fluid measurements. Percentages you tend to use more on element such as images and dibs. Ems are a measurement of typography. So 1em is the width of one letter M. If you're not sure, you don't remember that, don't forget to go back and look at some of the fluid measurement videos. I also hear that Bootstrap 4, one of the platforms we're going to use is going switch over to ems and rems, too. The last thing I just like to remind people is that when you use these fluid measurements for things like padding and margin, the percents are affected by the width not the height of your page. What does that mean? It means if you're page is this big, let's switch to the pen there. The padding is affected by how wide it is. So 50% padding would pretty much give you something like this. If you make the page wider then you would get more padding. However, if you make the page the same but you make it taller, the height doesn't effect it at all. So it doesn't seem like a big deal until you're stuck trying to code it. Just remember paddings and margins, when you use percent, they're affected by the width of the page, not the height. That third step is really the biggest step. And that is including those media queries. The fluid layout is triggered by these certain break points that you want to use. Design for that smaller screen and work bigger. Some sites like to strip out information, or even just set it to display none when the site is small, because they think, that's not really important information. Well, that's kind of you deciding for other people what they might want to see. It drives me crazy when I go to a site and I have to click on a link to go to large size view. Or when it just won't let me access information at all. You don't want to penalize your mobile users. You also need to realize that just because you set something to hidden or display none, the content might still be downloaded. And this can affect performance. They're still downloading big things like pictures. And you're eating up their data. So think small screen and grow bigger. When you put in these media queries, it's common to have a few different sets of rules. You might have your large screen, and then a medium screen. And then, here's my default mobile view. I want you to look at this and if you need to, I want you to pause the video and I want you to see if you can figure out why this is bad code. All right. Did you see it? Let's see. I added one additional rule here. I just added in some size. But if you notice, as I resize this window, nothing happens. Nothing is getting triggered. Why is that? Well, its because I haven't ordered things correctly. Style sheets always start from the top and work their way down. All right, so the first thing its going to do is its going to check and say, do I have a minimum width of 1,024 pixels? If you do, great. It's going to apply the background blue and the width of 25%. But here's the problem. If you have a minimum width of 1,024 pixels right there, that means you also have a minimum width of 780. If it's going to happen when it's big, it's going to happen when it's smaller. So this rule overwrites the one above it. And then down here, this one, it's not even inside a rule. You're basically saying always apply this styling. So our rules are syntactically correct. This is a valid piece of code. It's the logic that we need to fix. Let's start by doing this. I'm going to take that default rule, and I'm going to move it up to the top. And as soon as I do that, let's see what happens. Well, one, you can see that it's now yellow, so we know that it's at least 780 pixels. But when I look at it, you can usually see it's actually 1,800 pixels, so I would expect it to be blue. But it is working on the small view, so that's good. So we have two out of the three views. Well, that problem still exists that the order isn't correct. When you're triggering on minimum width, you want to make sure you're always testing for your smallest sizes first. Save this and now we have, I'm hoping it'll go from green to yellow, to blue. As you can see, I still added fluid measurements because as the size of the screen grows so does my H1, because I set it to 25%. These are the type of things that it's really simple to nod along, say yep, yep, I got it. And it isn't until you write your own code that you're going to accidentally make these mistakes and not know what's going on. My advice to you is to always add one media query at a time, and make it something simple. Put in that media query, add a rule, test it, build from there. Add a new media query, add a rule, test it. It's the best way to make sure that your code's going to be clean. And with that, I'm pretty much going to leave you with a concept check here. The question I'm going to ask is, should your media queries be at the top or the bottom of that page? Where you have your little at media. The example I just showed you is that, well, they should go closer to the bottom. Have all your default styling first, and then trigger media questions. But in all honesty, its a bit of a trick question. If you're assuming min-width, if you're doing mobile first, put the rules on the bottom. If you're using somebody else's code and they didn't use that mobile first paradigm, and they're searching for max width, then its completely the opposite you want to put those rules at the top. It can be tricky, and that's why I encourage you, to get into good habits at the beginning, and continue them as you get better and better at coding responsive design.
