How to test your Dreamweaver website on a mobile phone or tablet.

Hi there, in this tutorial we're going to look at previewing our website from Dreamweaver directly on to our mobile phone. And it's going to appear here. See that green background, and then watch this. It's red background. The nice thing about it is we don't have to host it on a website, and we can just make adjustments on Dreamweaver directly, and it automatically updates on a mobile phone, it's really cool. Why am I holding across my face? It's because my camera won't zoom when I get it close to the camera like that. See, so I hold it here. All right, let's get into the tutorial.

The first thing we need to do if we're going to test on a mobile phone is we need an actual website that has some differences when it's on mobile. So, the Desktop view, it's gray, if I get down to Tablet, goes red, and down to cell phone, it's green. We did this in a previous tutorial. Now what I want to do is, down the bottom here, go to Real Time Browser Preview. Clicked on this, and before, we used Chrome, now we're going to use this one. I'm going to have to twirl that up because for some reason my screen drops off that bottom. So you need to be able to see this. And we're going to do two things we do in real life. You can either use a QR code, just scan that, or you can type in that URL, or email that to yourself. So I switch to real life human Dan, and he will show you the rest.

Okay, demonstration time. What you do is you download a QR Code Reader. There's loads of free ones online or through the App Store, I've got mine on an Android here. And pretty much it is pointed at the QR code that we generated. And hopefully-- I'll get close enough. Makes a little beepy noise, and it takes you to the website. Now you're going to have to put in your password for your Adobe ID. And eventually, hopefully, it's going to load. There it is, it's the green version. We have the camera focused on it. And watch this, horizontal, it's the red version for Table, green version for Mobile. It's because it does screen width rather than the actual device. It's too hard to try and pick devices that change too much. So you end up just doing screen widths.

The nice thing about this though is that you get to then stick this up next to your computer and plug it into the power, and just be developing on Dreamweaver, and it instantly updates all the time on your mobile device, you can have a tablet there. Impress the heck out of people, you'll look like a pro. All right, let's jump back into the screen capture version of myself.

So before we go, what we want to do is, we added these crazy colors to prove that Media Queries work, it's not what we want for the long term website. So we're going to go and just remove those. So 'Styles', we're going to find-- we'll do it for Tablet first, 'Header'. Actually we're just going to delete the whole Selector. You can just remove the background color but actually I don't think I need the Header for anything else. But I'm going to hit minus '-', goodbye. Go to one that's similar, find Header, minus '-', goodbye. Now the responsiveness doesn't really do anything but at least our Media Queries are still there for our future work. Tablet, and Mobile view. All right, onwards and upwards.