Previewing and testing your website with Dreamweaver device preview

Hi my name is Dan and we are going to be looking at testing in Dreamweaver. What I mean by that is just previewing it in a browser really. Because working inside Dreamweaver we've got this thing called live view. And live view displays it okay, but there are little bugs. Dreamweaver keeps promising that live view works exactly like a Chrome browser but it never does. So, what we are going to just to make sure is you should always be testing in your browser. We haven’t done it much in this class yet because we haven’t gotten to this stage yet. But whenever I'm making a site, I'm continuously testing it in a browser. There’s a couple of ways to do it. There’s down here, there is a little world icon, I can click that and click preview and these are the ones that I've got installed on my machine. I'm on a mac so I've got Safari; I've installed Firefox and Chrome. On a pc you’ve probably got Internet Explorer and you might have chrome as well or Firefox depending on what you’ve got installed. Now the exact same thing as up here, edit, preview in bowser, the exact same thing just a different way to get there. Now you can see up here there’s a shortcut so I use the shortcut quite a bit. Now if you’ve only got Internet Explorer or only got Safari, my advice is to go and install Google Chrome.

Now you do it by going to the Google website and installing the browser Google Chrome. You’ll find it and download it and install it. You really need this one, why? Because its actually by far the most popular browser. So if you're testing in any browser, you wanna be testing in crowd. You also want to test in all of the browsers you can get your hands on just to make sure it works across them because sometimes something works really good in Chrome but it falls to pieces in Firefox. So you need to make sure you're working across the browsers, but definitely Chrome. So, to preview in a browser, click on this little globe, click preview in Chrome, open up a little window and it previews it. Can you see here? There are my little bits of text, very exciting; a little bit of text okay a bit of text here and my image. And that’s what it’s going to look like when you publish your site. So testing in the Chrome browser often is quite useful.

There’s a cool new feature in Dreamweaver for testing. Its this one next to it, its this little one here, it says device preview. Now this works really cool if you’ve got, say a second monitor set up and your cellphone next to you and a tablet next to you because what it does is, watch this. I click this, so there’s two ways of using it, if you just want to use it for desktop, if I click on this link here, it goes off, opens a browser, its going to ask me to log in to my creative cloud id. So I do that, put in my password, okay and it looks very similar to preview in browser. The difference is, this is dynamic, it’s always trying to update. Whereas the one we produced earlier by using this method, it is kind of, once its finished or once you’ve produced it, like this. And you do any changes in Dreamweaver, you’ve got to come back into here and hit refresh. And that’s not a big deal really, but its quite cool, watch this.

If I'm in Dreamweaver and I go in here and change say this text from who we are to what we are and click out watch, if I quickly flashback, can you see its what we are? I didn’t have to refresh it. Its just so its dynamic so I have a second monitor set up next to me in my office that’s always showing me what it looks like in a browser so it’s a little perk. Where its really cool is to deal with mobile devices.

So what we need to do with that is, back in Dreamweaver, with the same little button, can you see this qr code here? Now qr codes for me have zero use in the world. I see them on all sorts of things but nobody really pulls out their qr code ready to use them but in this instant its amazing. So lets switch to the other camera so I can show you how it works

Okay, other camera view. Now for this thing to work, you need a qr code reader on your phone, they default go to the app store or Google play depending if you're android or IPhone and download a free qr code reader. They all work, so I've got one here called, I think its just called qr ode reader, its not very exciting. If you open it up, and it does this kind of thing, can you see there’s like a little camera? And what you do down here in Dreamweaver, is you click that same little button we were using before and you bring you camera and put it closer and eventually its found a URL which is great. There it is there, can you see it? I might turn the brightness up so you can see it a little clearer. And it says it wants to go to this URL here. So I click okay. It comes off and its going to ask me to put in my adobe id and password, I can do that, hopefully it defaults to the id, internets a little slow up here, ill speed this bit up. All right its back so I'm putting in my password.

All right, and it’s connected and you can kinda see there’s my site in mobile view, we haven’t designed the mobiles version of it now, and we are going to do that later on. But you start to see what it’s going to kinda collapse down to by default. You can see my image there; you will also see a nice connection between my phone and the desktop view. So watch this. I'm going to scroll up and down my desktop view and watch my phone. I'm scrolling on my computer over here, but its also scrolling on my phone. This becomes really cool when you’ve got your mobile phone set up kind of over here and you’ve got your tablet set above it and you’ve got another monitor over here, all doing these previews. You end up looking like a web designer rock star real quick. With all these kind of like matrixey minority report style monitors all over the place. I find that, especially when you get to mobile development stage, its so good to start working and actually previewing in mobile view rather than trying to kind of fake it on a screen or try and guess as you are working along on Dreamweaver.

All right that is how to preview in Dreamweaver, either using the preview in browser or using this thing called device preview.