How to make a website change for mobile cell phones & tablets using Dreamweaver.

Hey there, in this tutorial we're going to look at adjusting our site for the different tablet sizes, and mobile phone sizes. They're called Media Queries, you can kind of seem them up the top here. So our website's a desktop, the Header there is gray. And if I get down to Tablet size, hey presto, it's red, and I get down again to Mobile, and it's green. I know those are ugly colors, they're just there as place holders to test our Media Queries. Let's go and do that now in Dreamweaver.

So it's time to get all responsive and mobile friendly. And it's actually really easy. So what we need to do is, look at something called a Media Query. First thing we need to do is look at these Media Queries Bar. If you can't see yours, there's a little icon here, you can turn on and off. If you don't have that bar, or that icon, it might mean that you're using an earlier version of Dreamweaver, maybe CS6, that doesn't have this option. Now unfortunately you can't follow this particular tutorial. You can still do Media Queries, but you have to hand code them. You can't use this nice little interactive thing at the top here.

So we're going to use this thing. And it kind of tells us what to do, it says, click on this Icon to add a Media Query. And that Icon is over here, and that's in there. So, we're just going to click on it. And we're going to say, our first one is going to be Tablet, because we've kind of already done Desktop. Desktop is considered Global in our case. Some people design their websites around Mobile first. That term, Mobile first, means I'm going to design it for the Mobile. And then I'm going to make a Media Query that overrides the Mobile with Tablet, and then, over the top of that, in Desktop. I design my websites the other way around. And I always find that my students find this easier. We design the Desktop version mostly. So often there's more on that side and it's kind of how most people view a website. It depends on your kind of website, but definitely my stuff, 80% of views are from Desktop.

So I'm using a Desktop first approach. So, we're going to click this little '+' button again. And we're going to work on Tablet first, so we're going to say Tablet is going to be between these two, so it's going to have a minimum of a certain size and a maximum of another size, and that's going to be considered Tablet. Now it's a little hard to get the exact measurement because there's so many Tablets up there, and so many different sizes. So what we say is, it's a minimum of about 401, it's the smallest. Anything smaller than that, we'll consider a Mobile phone. And we do a Media Query separate for that. How big should it get is, 768 is the width of an iPad, where it's in Portrait. So we'll use that size. There's no reason why you couldn't use 770, or say this is in the distant future when there's lots of different sizes, you might decide that it's too small, or different sizes. Kind of just a generalized sizing for now. But it would be a really typical size to use.

Where is it going to go? It's going to go inside my styles.css I'm going to click 'OK', and you can see here, there's my little blue bar, that's our min-max. It's got a minimum, and a maximum. And we're going to have things trigger when it gets to that size there. Let's have a little look at our styles.css Click on the related documents bar here. You can see, that is what a Media Query looks like, it's a syntax. Again, if you're using a version of Dreamweaver that doesn't have this nice little handy bar you can just type it in here. So, that is considered my Tablet. And what we'll do is put a few returns in just above it, and we'll add some comments, just so that later on we know what we're talking about, and what we're doing.

To add comments in Dreamweaver there's this option here, it says Apply Comment, css comments look like this. It's a slash '/', and then, an asterisk '*'. And it needs to go between here, we can say, this might be my Tablet view. Now this is ignored by the browser, it's just here for humans. So you don't need to write this, it just means, later on, I can say, go to Tablet view, and you know where to go. So next thing we’re going to do, is we're going to put in our Mobile view. So we're going to click on this little '+' again. And we're going to use a max. So a max width of 400. It's going to go into style.css, let's click 'OK'. You can kind of see up here, so, anywhere up until a maximum of 400 will be my Mobile view, and then, the Tablet view takes over. And it's just one pixel more than my Mobile view.

If things were both 400 I've no idea about what will happen. They'll probably just fight it out, and there'd be blood and css everywhere. So just make sure, 400, and then, 401 is where the next one starts. Now in this tutorial, we're just doing Mobile, Tablet, and Desktop. You'll find lots of other sites that have five views, or four, or seven views. We're just going to do three, and professionally that's normally all I attack. Small for Mobile, kind of medium size for Tablets, and a big size for all Desktops. You can see down here, in my css, I'm going to add that comment again. I'm actually just going to copy this one and paste it here on top, and this is going to be my Mobile view.

What I'll also do to make things a little easier is we'll put in, at the top here, underneath that we'll put in this, it's going to be my Global view. 'Global/Desktop View'. Just so that when you're working, you kind of know these. Now nothing much happens other than we've got colored boxes up here. Now we need to do some slight adjustments. So what we're going to do is, go back to Source Code, and we'll go to CSS Designer, and we'll say, in my Styles menu, we've got these guys. Before, we just skipped on clicking on Global, and these two didn't exist. Now we can say, I like a Global. I'd say, Global's got my two Styles that we've got, the Header and the Container. So what I'd like to do is, I want to adjust the background color of this Header. And I want to do it for Tablet first, which is this min-max one, which is 401 to 768. And you can see, there's no Selectors here.

So nothing specific for Tablet, I'm going to say, yes there is, so it's going to be now, Header. So, we've got one for Header. You'll notice we've got one for Global Header now, and one for Tablet. Now this one here in Tablet does nothing yet. I'm just going to go to 'Background', 'Background color'. Pick a big obvious color like red, hit 'return'. And I'm going to drag this in. And what you'll notice is, nothing happens. I'm going to hit 'Save All', still doesn't change. That's why I don't like using this Live view at the top here, it's just the few little things that don't update, but if I check it in my browser, here it is, and I drag it down, and I get to my 768, somewhere around here, hey, that my friends, is all Media Queries are.

You're just saying, between these two pixels do something different, and we're saying override the heading, and make it red instead of green. We'll do the same for Mobile, just jump in here. And I'm going to say, 'styles.css' in my maximum of 400. Remember, that's my Mobile view, I'm going to say, you, Header, toggling it in, hit 'return' again. I'm going to say, be background color of green. We're not going to keep this, this is more of an example. I'm going to hit 'Save All', I'm going to check it in my browser. So, big, Tablet, Mobile. Awesome! That's what Media Queries are.

So we're going to go through and do things like, I'd like the font to be bigger, I'd like this box to stack differently. That's how we're going to achieve all these different things. You can see, the font becomes centered when it's Mobile. I want to select the line, and a bit of some Tablet. It's smaller when it's in Mobile, and that's what we're going to do, we're going to say, I want this heading to be smaller, please. Just within this Media Query. And that's all Responsive Web Design is. Let's jump back into Dreamweaver. You can see here, that one's updated, that one quite hasn't yet. 'Save All'. You can, if you want to keep using this, you can go to 'View' and go to 'Refresh View' or 'F5'. That should get it going. I'm going to double click this gray area to go fully back out.

We're going to look at the next video, we're going to look at previewing it through your phone or tablet. There's a really cool feature using Live Preview. Let's do that in the next tutorial.