13.3 Mobile viewpoint - Video Tutorials & Practice Problems

<v Instructor>All right, we've got a great start here</v> on our mobile design, but it's actually not going to work on a live site. And we'll talk about the reason for that. But, yeah, it looks nice here locally. But what's going on here is that this is just a regular browser being shrunk down to this size. Right, Lee? <v Lee>Right, exactly.</v> It's just pushing the edge as the browser end until it matches the size of the device, but that doesn't mean it's actually running the same way that it would on the phone. So this is just an approximation of how it would look. <v Instructor>Yeah.</v> Right, so one way to test this out is actually to deploy it to the live web. So let's try that. Just add everything and then say, "Finish mobile prototype," and then push it. And the result after the cache clears will be something you can visit on your mobile device on a live web. But we're gonna show you an alternate way that if you have a Mac and you're willing to install Xcode, which is a large download, there's actually a simulator. And so we're gonna do that in this screencast so that we can actually have a live feedback loop. Let's take a look at how to do that. First, we launch Xcode. And by the way, I didn't know about this. Lee just taught me about how to do this, like, today. (chuckles) So in Xcode and then Open Developer Tool, Simulator. <v Lee>And this is just part of the whole IDE.</v> It just installs when you install Xcode. <v Instructor>Okay.</v> All right, so this is now running a little simulation of an iPhone. <v Lee>We're running an iPhone 7.</v> You can actually switch the hardware up in the menu, where it says Hardware. Then there's Device. And then you can choose that. And then choose a bunch of different screen sizes. And you can actually install different versions of iOS to test different things as well. <v Instructor>Nice.</v> So what we can do now is just visit our local host. And we can maybe look at-- <v Lee>You can see that, already--</v> <v Instructor>That it's a problem, yeah.</v> <v Lee>It's the desktop version of the blog.</v> <v Instructor>Right.</v> <v Lee>So it doesn't have our new styling.</v> So what's going on here? <v ->Yeah.</v> <v ->Is that when iPhone</v> was originally launched, and iOS was originally launched, and then, you know, Android came along, there weren't that many mobile optimized sites that were out there. And so the creators of these operating systems and phones had to find a workaround to be able to deal with it. So what mobile browsers do is they actually used a fake, larger browser. Your phone tells the server that has the website that, "Oh, I'm a bigger screen than I really am." And then it just loads your page like normal, like it would be on a desktop. And then it allows you to zoom in to different parts of it to try and give you the ability to view content on a smaller screen. But there's actually a way that we can tell a website, like, "Hey, don't do that. Just show me exactly what your content is on a screen that is exactly the device size." And then that will force the kind of view that we have on the left. <v Instructor>Right, and so we can see</v> what's going on here. This is the local view in the browser, you know, the Safari simulator. And we can see that it doesn't agree with the true mobile Safari running in the iOS simulator here. <v ->Yeah.</v> <v ->So the way to fix that,</v> as Lee was saying, is we need to tell the browser about that, and the way to do it is with an extra meta tag in the head. And this is the kind of thing that you would necessarily know. This is, you would just, probably copy and paste this from a site that tells you how to do mobile design. <v Lee>Yeah, there are actually a lot of different values</v> that you can give the actual functional part of this. You can actually set it to a set width if you really want to, if say you're designing for a very specific device, like just one type of thing 'cause your site's only gonna ever be used on an iPad or something like that. Like, you're making an internal website, you can actually force the site to render at exactly that size. And then you never have to worry about some sort of crazy stuff going on. <v Instructor>Yeah, so let's save that.</v> So this is just something you can copy and paste from text. And then if we go over here and refresh it, ah, there, it's working. <v ->Yep.</v> <v Instructor>So this is what you should see</v> if it's actually working. So basically what we saw before with this, actually just commented out, so this is what you should see. Oops, that's kind of weird. Why is it different now? <v Lee>You zoomed in somehow.</v> <v Instructor>Oh, that's strange.</v> How do I unzoom? Okay, there we go. So this is what you should see on a true mobile device accessing the live site on the web. And so we've now added this viewport, and if we can make a commit, we just need an am, (chuckles) and at this point after you push and then wait for the cache to clear, it should look like this. So now that matches the version here in the Safari simulator <v Lee>Or at least very close to it.</v> Notice it's not exact. <v Instructor>What are the diffs?</v> <v Lee>It's just slightly different.</v> <v Instructor>The size is a little different.</v> <v Lee>Just things are handled</v> just ever so slightly different. So we could actually switch. So this is on a 6s Plus is what it's saying. <v Instructor>Yeah.</v> <v Lee>We could actually switch that.</v> It'll be the same though. <v Instructor>Yeah.</v> <v Lee>Things are just ever so slightly different.</v> You'll notice it. And you'll just have things that you'll have to go through and fix. There is actually a really cool thing that we can do here in the developer tool. You can actually in-- So this is Safari, And on the developer menu, you can go to Simulator. <v Instructor>Oh, that's wild.</v> <v Lee>And you can actually hit this</v> and open up the web inspector. And even though this is like a different application that's running, you can use the web inspector. Oh, that's right, you can't right-click, you have to use the little target thing to find things. But you can use the web inspector to actually get in here and change stuff on the simulator. So if you're doing responsive site design, this is invaluable if you're on a Mac. <v Instructor>Wow, so basically Safari</v> is hooking into Xcode. <v Lee>Right, yeah, it's tied right in</v> so that you can just type stuff and, you know, add new rules, and just see if everything's working. <v Instructor>Wow, that's amazing.</v> And I can see how this is incredibly easier than deploying a new site every time you wanna see how it looks on iOS. <v Lee>It's just, the downside is,</v> is that it can eat up a lot of battery life if you're not plugged in, and it runs a little slow. But other than that, like, forgetting those final tweaks down, like, this is, yeah, an invaluable tool. <v Instructor>All right, that's great.</v> Well, so it looks like we've got things working now, at least in terms of having this meta tag that is now telling browsers how to render the page. And so now we're ready to move on and do some more design for both regular browsers and mobile.