7 - Real time preview on phone and tablet

Questions & Comments

hamed alghafri - 2 years ago

I got a problem here with Samsung S3 that it translate me to the adobe's help but I couldn't fix it. So what the solution if you know how to solve it? and thank you.

Administrator Daniel Scott - 2 years ago

Hey Hamed, Normally it's because you're not on the same wireless network. OR your network has some super security. Try another wifi and test it.

Catherine Wilkie - 2 years ago

Hi Dan. I have made a website using Dreamweaver: wilcon.co.nz following your excellent instruction which with some difficulty I managed to get online. When I view the site on my mobile phone using the QR reader, and when I view it on my desktop it is fully responsive, but when I bring the site up from Safari on my mobile phone the responsive Nav bar is not there just the full screen bar shrunk down to an unreadable size. Can you help please? Thanks

Administrator Tayla Coman - 2 years ago

Hi Catherine, Lovely looking site, simple and to the point. I'm currently a bit too busy to fix the site for you but I can tell you with 95% confidence that you have a big issue with your divs, specifically div's not being closed properly OR incorrect layout. For example I can see that your script tags are in 2 layers of divs, they should not be. Have another look at your code, double check all your closing tags and check it against Daniel's completed files and check all of your script positions against how his is laid out. Good luck! Let us all know how it goes.

Jane Stokes - 1 year ago

Hi Catherine, I have just viewed your site and it is certainly responsive on my iPhone 6S and working beautifully. What was your solution to the issue?

Jane Stokes - 1 year ago

Hi Dan, thank you so much for the fabulous tutorials. My website is now online evokecards.com and I've run into the same issue that Catherine experienced (post below) My website is fully responsive on my desktop but on my iPhone 6S the 'hamburger' menu does not appear and the full screen bar again, like Catherine, is shrunk down to an eligible size. Solutions gratefully received. Thank you

Administrator Tayla Coman - 1 year ago

Hi Jane, please add the following code to your <head> area. I'd recommend putting it just before the closing </head> tag. <meta name="viewport" content="width=device-width, initial-scale=1">

Jane Stokes - 1 year ago

Thank you very much Tayla. It appears that I have put together my first fully responsive website and I am delighted. Please thank Dan for the excellent tutorials that made this possible.

One suggestion please - can two more tutorials be added to the course?

1 Building a footer
2 Building a contact form with email delivery

Both are absent in searches using Dreamweaver CC 2017 and those that do exist to not keep things in order via styles.css and the html files.

Dan appears to like order and it is catching!

Thank you

Administrator Tayla Coman - 1 year ago

Thanks for the kind words and also the recommendations, I'll pass this on to Daniel! And also, well done to you for making your first responsive site, it's a great feeling isn't it!?

steven twyford - 9 months ago

Why are nav elements, buttons etc so crystal clear at any scale? And why are png images fuzzed. For example my logo image built in PhotoShop at 72dpi on a 70px X 90px document renders fuzzy online! How do you get around this and produce crystal clear logos at 72 dpi on tiny documents?

steven twyford - 9 months ago

To answer my own question - I used optimised svg and applied a div, hope this works.

Administrator Tayla Coman - 8 months ago

Hi Steven, that's exactly what I was going to suggest, SVG's are great for logos and anything that you want to be sure will be crisp at any size. Good work for figuring this out yourself :)

steven twyford - 9 months ago

Hey Dan why didnt you really real-time preview on your phone and show that? What i mean is: the font that displays in the real time mobile preview is the slicknav default font (at least for me) . I used Roboto and it previews beautifully (in chrome and dreamweaver) but i cant find the default slicknav font in the browser to disable the said slicknav font. I know it must work that way! How do you disable the slicknav font in the real-time preview please?

Administrator Tayla Coman - 8 months ago

Hi Steven, you'll just have to redefine the font in your own CSS. The selector will probably be something like .slicknav_nav li

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Okay, welcome back. And, up until now, what we've been doing is, we've just been living with the whole toggling between Dreamweaver, back into the browser, and sliding things around mobile, and this one. And this one works okay for mobile, but it's not a mobile phone. It's not the same size. It's longer than it should be, so, what you need to do is, actually preview it in your actual devices, and it's really easy with Dreamweaver. Dreamweaver has got some sneaky tricks to do that.

So, when I'm working, this is how I typically work. I've got two screens. I obviously can't for this tutorial, because you can only see one of them. But what I'll do is, I'll have this set up like a desktop up here. I've got a big nice Mac screen over here. And then I have Dreamweaver down, this video, sorry, this screen. That means that when I'm editing in this, this adjusts. We see that happens at the same time. So if I make changes, they instantly display on the browser, which is great. So that gives me my desktop one always there. So I'd only have to toggle back and forth.

Now, for the devices, say your tablet, and your mobile phone, what you can do is-- I'll show you down the bottom here. I'm going to make it full screen. See this thing down here. There's this little QR code reader, no, QR code. And what you need to do is, you need to jump to your phone, and use your QR code reader. So let's go-- Let me grab my phone now. So, I got my QR code reader here. I'm going to open it up. And down here, bottom of Dreamweaver, I'm going to go here, click, and get my QR code reader close to it. I'm going to wait till it angles on my desktop. Good work, phone! Jumps out.

Might ask you for your user name, and your password. It does. Can you see it while I'm typing it? You totally can. So you know it begins with 'T', but I'm going to cut this out so you can't see the rest of it. Okay! Look at us. We have got it on our phone. Cool ways. You just take a photo with a QR code reader. 

You have to download a QR code reader. They are free from Apple store, or from Android, like my one. And then, you just kind of set this next to you, so I'm going to set it down there, and watch this. As I make changes, so let's go to our 'styles.css'. And what can we see on mobile? Not a lot at the moment. So let me decide. What can we see? I got an image here. So I'm going to, do what with the image? I'm going to make it smaller. So I'm going to give it a width. I'm going to give this guy a ‘width’, of, what? 100 pixels '100px'. And you can see, it got smaller. If I make him 50 pixels '50px', he's tiny. Yeah, you get the idea, 10 pixels. 

So it means that while you're working, and you're like-- say you're doing something on your desktop view, you kind of realize, it affects something in the tablet, or the mobile device. If you have them up around you while you're working, it just means that as you're making changes, you realize the ramifications of that. And probably the best reason for having them up, is that you'll impress the heck out of anybody walking past. 

If you work from home, your flat mates, or your wife will look at you, and you will look like you're in Minority Report, lots of devices all around. And at work, you will look like a hard core coder, with all sorts of things flying around.

So, that is real time browser preview, and you can do it on your device as well.

ALL ACCESS: $12 per Month + Cancel anytime