Hey, welcome to this video, and, in this one, we're going to be learning what responsive web designing is, and how to do it using something called a media query.
So, what we'd like to do is, when the screen adjusts to different sizes-- I'm just going to drag this as an example, but what we're trying to do is, get it somewhere that looks-- on tablet, it looks like something, and when it's a mobile, it looks different, and when it's a desktop, it all looks different. And that's responsive, it's responding to the screen size. So that's what we're going to do in this video. So let's jump to the Dreamweaver.
So, on our last video, we just put in some real basic ‘h1’ in the HTML, and then we styled it in our CSS. Now, we get to look at responsiveness.
So, what we're going to do is, we're going to do something called Desktop first, our CSS. Now, a lot of people do mobile first, and they'll start styling their mobile screens first, because it can be the hardest screen to design for, because it's so small. And what we're doing in this course, and I find what most people do start with, and what I start with, is that I start with my desktop design, and then I scale it down for my mobile. It's up to you whether you start designing your mobile first or desktop first.
Just know though, that it's sexy to go and do mobile first. People love doing mobile first. Me, I kind of rock the boat a little bit by doing desktop first. But don't worry, it makes no difference to your site, and how it works on mobile, or a tablet.
So, what we're going to do is, desktop first. This means that this 'h1' is going to be desktop, and just to make things a little easier, what we're going to say is, we're going to put in a comment. The comments are this one here, and this here with the slash and then the asterisk, that's commenting in CSS. You can see one up there. That just means anything that I put in here is just for people, it's ignored by the browser, so you can write anything in here just to help yourself. Say you finally correct something, and you want to leave a note to yourself, you do it in these brackets here, on these little code snippets here.
So, what I want to do is just go to my desktop view. And next what I want to do is I want to copy and paste that. I'm done here. Now, 'return's means that anything in code-- okay, this is going to be my tablet view. So what I want to do is, we'll learn how to switch this out using something called a media query. Now, to write that media query, it's the @ symbol, then you type media, then you put in brackets, then you type in 'max-width'. Now, in terms of media queries, this is the one thing at the moment that Dreamweaver is not super helpful with. The only bit of stuff you're going to have to write out pretty much all of the syntax for. This is as hard as it gets.
If you're following along, you can copy and paste with the exercise files, you can download those and play along. You just copy paste it up, or like me, you can write it out.
We're going to pick out a tablet size now. Our max-width just means, we're trying to say, what size should this website change? Well, what size is the tablet size? Now, the most common at the moment is 768 pixels. That will adjust all the time, and some people use some slightly different ones, but that's the most common tablet size at the moment. Then, I'm going to put in curly braces. So that there is your media query. And it just means that anything inside of those two curly braces now is going to be triggered when the browser gets to a width of that.
So let's do that. Let's do 'h1', like we did up above. And what we're going to save is-- don't forget your curly braces. Now ‘h1, curly brackets, return’. And what we're going to do is, is we're going to force the color to change. So we use color like we did above. I'll use the color picker, and I pick green. Don't forget the semicolon at the end.
So, what's going to happen now, is that-- let's just put some spacing in here to make it look a little nicer. It just means that desktop view, it's going to be this color, but then, if the browser happens to be a width of this,or less, it is going to change it to this green color. Let's go just to that. Let's hit 'save'. Let's jump to our browser. Here it is. So, desktop view, it's red, but when it gets down to-- hey, look at that. So, with the width of 768, it's going to switch the color, and that my friends is how responsive web designing is done. Not that hard. People get a little freaked out by it.
It just means that, at this size do this other thing. And it can be-- like in our case, we're going to stack our navigation slightly different. So we're going to stack these guys there. You can see over there. And with these boxes down the bottom here, instead of stacking them 2x2, sorry, 3x3, on desktop. It's going to be 2x2 on tablet. Nice!
Let's go and do it for mobile as well. Because we're going to use all that stuff again, nice and easy, so, let's go to mobile, and the max-width for mobile, this one is a bit of a hard-- Mobile phones keep changing, they keep releasing new models of iPhones, and-- so 400 seems to be a really good size. I find it's really useful. It kind of ties in some of the bigger phones, the phabletty ones, and also, kind of like the real traditional. How big are iPhones at the moment? I think they're 375, or something like that. So I make it just a little bit bigger to cover in some of the bigger LG, Samsung phones. Do 400, it will be fine.
And what we're going to do is, we're going to change the color. So, if I type in semicolon, it should give me my little picker again. And I'm going to pick, I'll pick pink, or magenta, or purple, whatever this color is. Remember at the end, the semicolon, don't forget him. Save it. Let's jump out to our browser. Come on, browser. There's one here.
So, red, desktop. You’re ready? Tablet, green. Here we go. Mobile, it is a purply movie color. I'll dispute that color.
And that is responsive web design. So, in here, in my CSS, you can see the nice thing about my HTML, it is super clean and clear, there's very little on this page. There's just one new line that we added. But, in our styles, it looks quite complicated, but because you've built a web mirror, we're like actually, "I know what that does." It's not actually that hard coding. It isn't as hard as it looked. So, we got an ‘h1’, that's my desktop view, and, can you see what's happened here? This flow, it's got a cascading style sheet, CSS, that means that this thing here, say the font family, it flows down, and because the tablet doesn't argue with it, and the mobile doesn't argue with it, it stays Gill Sans the whole way through, whether it's mobile, tablet, or desktop. But, color though, it's a bit of a fight going on. What happens is, it's desktop unless this little media query gets triggered into that.
And then, it will flow down to here, in this little media query, it goes, "Hey, I want to be, when I get down to mobile size, I want to be this green color as well, sorry, pinky, purply, movie color.”
So, that is a media query. What we need to do now though, is switch out our particularly lame ‘h1’ and do it with our navigation. Where we have that nav-sandwich, and things start working. So let's jump out and start doing that now.