How to create the responsive mobile view using media queries in Dreamweaver

Hi, my name is Dan. In this tutorial we're going to look at creating the mobile version of our website. To do that we need to understand a couple of things. One is, what Responsive is, and another one is what a Media Query is. Up until now we've been building the desktop version, but if you look at my Photoshop mock up, I've got this one on the right here, I've designed my Desktop, but I've also got what it looks like when it falls down to mobile. You can see it's a little bit different, some images turned off. These stack differently, these stack differently. So I need to do that in Dreamweaver.

Let's have a look at what our current site does. Let's see a working version of it. Now, this site here, startbootstrap sells things for bootstrap. We're creating our own at the moment, but if you wanted to cheat, and buy one, you can start here. Now one of that things here, just nice and clear to see, what it does when it breaks down in terms of Responsive. So what happens is, it clicks, and we're dragging it down and as it get smaller, you can see a desktop view. It's set to these featured boxes to be 4 across. But when it gets smaller, down to say a tablet, you can see, it breaks down to 2 and 2. Now, when we get down even further, it breaks down into mobile view. Which is, all stacked on top of each other. And two things are happening.

The term Responsive is the broad term for-- say that the website responds depending on the browser size. The thing that activates the browser, or activates these changes from tablet to mobile is something called a Media Query, and it's a bit of code that says-- the screen width happens to be 700 pixels here, so it's activating the tablet version, but when it gets below 700, it activates the mobile version. It's just a bit of code that just looks at the screen size, and the browser width, and activates different bits of code depending on how wide the browser is. So if you've done it on a mobile, it's going to activate the mobile size.

Now there are two distinct uses for these Media Queries. One is to activate the columns, which we just looked at before. Remember, we did earlier, when playing around with our columns. This thing here is 12 columns across. And this one here is occupying 4. 1, 2, 3, 4… 1, 2, 3, 4… 1, 2, 3, 4. Adding up to 12. So these guys are spaced liked this. But when it gets down to tablet, that's actually different now. These little boxes were being told to span 4, now they're getting told to span 6. So 6 and 6 equals 12. Then it get down here, these boxes now are being told to span 12. So that's one part where Bootstrap and Media Queries are playing around with the structure or playing around with the column width, depending on the size.

Another distinct part is when the css gets activated and changes its style. So instead of changing the structure it changes the style of say some of these css Classes. You see, here there's an H1, and it's nice and big when it's a desktop, but when it gets down to a mobile, it's a lot smaller. It's a way of telling the css, use the exact same Media Queries, but instead of changing things like the column width, we are changing the size of the font.

So we're going to separate those in two separate videos just to makes sure that they're clearly different. And we will work on them separately, not together