Previewing and testing your website with Dreamweaver device preview

Hi, my name is Dan and we're gonna look at  testing in Dreamweaver. What I mean by that is just  previewing it in a browser really. 'cause 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're gonna do is just to make sure  as you should always be testing in your browser.

We haven't done it much during this class yet  because we haven't got to this stage yet. But whenever I'm making a site,  I'm continuously testing in a browser. There's a couple of ways to do it is down here, uh,  there is a little world, okay? A little, uh, little world icon. I can click that and click preview. And these are the ones I've got installed on my machine.

I'm on a max. I've got Safari,  I have installed Firefox and Chrome. If you're 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 is up here, edit, premium browser,  exact same thing, just a different way to get there. Now you can see here there's a shortcut. So I use the shortcut quite a bit.

Now, if you don't, 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. Okay? You'll find it and then download and install it. Um, you really need this one. Why?

Because, 'cause it's actually  by far the most popular browser. So if you're testing in any browser,  you wanna be testing in Chrome. You also wanna test in all of the browsers  that you can get your hands on just  to make sure it works across them. 'cause 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, um, to preview a browser, click on this little globe,  hit previewing Chrome, open up a little  window and it previews it.

Can you see here? Okay, there's my little bits of text. It's not very exciting, but a text there. Okay, bit of text here and my image. Um, and that's the best. That's what it's gonna look like when you publish your site.

So testing in the browser often is quite useful. There's a cool new feature in Dream with of testing. It's this one next to it. Okay? It's this little one in here. It says device preview.

Now this works really cool if you've got say a second  monitor set up and your cell phone next to you  and a tablet next to you,  because what it does is click watch this. So click this. So there's two ways of using it. If you just wanna work for desktop,  if I click on this link here, it goes off, opens a browser,  it's gonna ask me to log into my creative cloud id. So I do that, put in my password, Okay? And it looks very similar to preview and browser.

The difference is this is dynamic. It's always trying to update,  whereas the one we produced earlier by using this method,  okay, it is kind of, once it's finished  or once you've produced it like this, um,  and you do any changes in Dreamweaver,  you've gotta come back into here and hit refresh. And that's not a big deal really. Okay? But it's quite cool. Watch this.

If I'm in Dreamweaver and I go in here  and change, say, uh, this text from who we are to, uh,  what we are, what we are,  and click out, which,  if I quickly flash back, can you see this what we are? Okay, I didn't have to refresh it, just so it's 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  and I don't have to keep refreshing it. So that's, it's a little perk. It's quite nice. Where it's really cool is to deal with mobile devices.

Okay? So, and what we need to do with that is, um,  back in Dreamweaver, hit the same little button  and can you see this QR code here? Now QR codes for me have zero use in the world, okay? I see them on all sorts of things,  but nobody ever pulls out their QR code reader to use them. You might be different, but in this instance, it's amazing. So let's switch to the other camera  so I can show you how it works.

Okay? Other camera view. Now, uh, for this thing  to work is you need a QR code reader on your phone. Most phones don't have one. By default. Go to, uh, the app store  or Google Play, depending off your Android or iPhone  and download a free QR code reader.

Um, it doesn't have they all work. Okay? So I've got one here called, uh,  I think it's just called QR Code Reader. It's not very exciting. Um, if you open it up, okay,  and, uh, does this kind of thing,  uh, can you see it's like a little camera. And what you do down here in Dreamweaver is you click  that same little button that we were using before  and you bring your camera okay, and you put it close to it  and eventually, okay, it is found A URL, which is great.

Uh, here is there, can you see it? I might turn the brightness up  so you can see it a bit better. Okay, it said it wants to go to this, uh, URL here. So I click okay, thumbs off,  and it's gonna ask me to put in my Adobe ID and password. I can do that. Hopefully it defaults to the id.

Internet's a little slow up here. I'll speed this bit up. All right, it's back. So I'm putting in my password and you. Alright? And it's connected  and you can kind of see, uh,  there's my site and mobile view.

We haven't designed the mobile version of it Now, um,  we're gonna do that later on,  but you can start to see what it's gonna kind  of collapse down to By default you can see my image here. You also see a nice little connection between, uh, my phone  and the desktop view. So watch this. Uh, I'm gonna scroll up  and down on my desktop view and watch the phone. Uh, so scrolling, can you see,  I'm scrolling on my computer over here. Okay.

But it's also scrolling on my phone. So this becomes really cool when you've got, uh,  both your mobile phone set up kind of over here  and you've got your tablet set up above it  and you've got another monitor here all  doing these previews. You end up looking like a,  like a web design rockstar real quick. Um, with all these kind of like matrixy minority report  style monitors all over the place. Um, and yeah, I find it, it's uh, especially when you get  to mobile development stage, 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're working along on Dreamweaver. Great.

Alright. That is how to preview in Dreamweaver,  either using the preview and browser  or using this thing called device preview.