Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course surveys the core principles and techniques essential to building web sites for mobile devices. Author Joe Marini introduces the mobile context, sheds light on its unique coding requirements, and discusses interface design techniques that enhance existing sites for mobile viewing. The course shows how to approach designing for mobile form factors such as smaller screens and finger-based interaction, along with how to incorporate CSS3 and HTML5 capabilities, such as geolocation, local storage, and media queries.
One of the fundamental, basic steps you've to take when you're creating mobile pages is to designate them as mobile ready with a viewport tag, or one of a number of tags you can use to indicate that a page is designed to be viewed in a mobile browser. These tags have come into existence over the years. Various mobile browser vendors have come up with a couple of different ways and tags to put in your web pages to identify them as being made to work in a mobile browser.
Now, many mobile browsers often try to optimize web pages that were designed for the desktop to work well and when you put these tags into your web pages, their presence turns off any optimizations that the mobile browser might be trying to do. So let's take a look at these tags. And I have listed them here. Each one is a meta tag, and each one has come about during a different time in mobile web development history. The first one you see there, the HandheldFriendly tag, was actually invented some years ago back during the days of the AvantGo-based handheld browser.
This is going back some time now. And it's basically just a Yes/No Boolean content tag. So the name of the tag is HandheldFriendly, and the content is either true or false, and if the content is true then the mobile rows realizes, "Hey! This is a mobile web page. I don't need to do any special work. The designer has designed it to work well on a mobile browser." The next tag, the MobileOptimized tag, was invented by Microsoft back in the days of the Pocket PC, and it's a little more advanced than the HandheldFriendly tag and that the content contains a number and that number is the screen width in pixels that the page was designed for.
So in this case, the content says, "Hey! This page was designed to be well rendered and laid out in a window that's 320 pixels wide," and that's pretty much the extent of the control you have with that tag. If you put a value of zero in there, then the browser says, "Oh! It was just meant to be laid out on whatever the width of the screen is, and there is no predetermined width, that it should work well on a screen of whatever width." The most recent of these tags, however, is the Viewport tag, and you can see it listed there on the bottom. The Viewport tag was invented by Apple for use with the iPhone, and over the years most mobile browsers now work with the Viewport tag--it's become a de facto standard.
And the content has a number of different settings you can put into it. Here the content simply says the width of this page should be whatever the device width happens to be. So kind of like the content tag before it in the MobileOptimized version, you can put some indicators in the content field here that says what the optimal width is, what the optimal height is, and we'll look at those in the moment. But in this particular case, the tag is saying, "Whatever the width of the screen is, that's what I'm laid out for." Now, let's take a look at the Viewport tag properties.
As I said earlier, the Viewport meta tag controls how the browser displays the page and if conclude it, it will turn off whatever mobile optimizations the mobile browser happens to be trying to do for desktop-based web pages. It has several properties that you can set that determine how the browser responds to user interaction, and those are laid out in this table right here. The Width and the Height properties are pretty self-explanatory. The Width property basically sets the width of the viewport.
The Viewport can either be an integer value or you can set it to device-width, and you can see I've also listed what some of the default values are for various popular mobile browsers. So for Windows Phone, iPhone, Android, Opera, they have different default values that they use for the width if you just say device-width. The Height sets the height of the viewport and again, you can either set this to an integer value or device-height. It's somewhat less useful than the width property though, because the height of the viewport is actually calculated based upon how tall the document actually turns out to be when it's rendered in the page, so setting this value is not particularly useful.
The Initial, Maximum, and a Minimum scale values determine what the initial zoom factor of the viewport is, and if you don't set it, it defaults to 1.0. And it's a floating-point number. It goes from--depending on the browser-- 0.1 up to I think 10.0, and you can think of it as a percentage. So 1.0 corresponds to a 100% view, and setting this tag will determine how far zoomed in or zoomed out the initial viewport is for the web page.
You can usually just leave it at 1.0. The Maximum and Minimum scale settings determine how far in and how far out the user can zoom, and you can see I've listed the ranges there. Again, these are usually just left alone. You can set these to be whatever you want, from 0.5 to 2.0, for example, to limit the user from scaling in or out from 50% to 200%. The last field is the user-scalable field, and that's a Boolean value that determines whether the user can scale the viewport.
Now the default is true, but if you set it to false then when the user tries to use their fingers to pinch and zoom on the screen, that behavior will be turned off. Okay, let's take a look at how the viewport actually decouples the page size from the screen. So imagine we had a web site, and let's view it in two different settings with the viewport. So here I have a page and on the left, you can see the page is pretty far zoomed out, and on the right side it looks like it's normally intended to look.
So this is what the behavior of the viewport controls. On the left there is no viewport tag, so the browser assumes that the page is somewhere between 800-1,000 pixels wide, depending on which browser is viewing it. So in order to make all the content viewed initially, the browser sets the Zoom setting to be zoomed all the way out and then the user can just double-tap and zoom in, but this isn't really the intended behavior. Now on the right there is a viewport tag and as a result, the page is correctly sized for the device using the device- width keyword. Or as I mentioned earlier, you can use a specific pixel with like 320 or 480.
Okay, let's actually fire up the code to see how we did this. Okay, so here we are in the code, and we're going to take a took and see how various browsers load and display pages when they don't have a viewport setting. But before we do that, let's take a look at a simple viewport sizing test, so you can get a sense of how different browsers will size things. What I've done here is I've created a sample file with a collection of absolutely positioned div tags in them. And if you switch over to the preview, you can see that these divs are varying widths.
There is one for 240, 320, 480, 800, and 1024 pixels, and that's these divs right here. So what I'm going to do is save this file and then I'm going to bring it up in a couple of emulators to give you an idea of how each emulator loads the file and displays it when there's no viewport tag. You can see the top of the file here. There is no viewport setting in this document, so let's switch over to our emulators. So I'm going to load this file in both the Windows Phone emulator and the Android emulator, and we've got this right here.
So you can see when there is no viewport the Windows Phone emulator loads this document and gives it a default size of about 1,024 pixels, because you can see the entire gray div, and that was the one that was 1,024 pixels wide. So if we zoom in a little bit and we scroll, you can see that's the one that's being seen. So we scroll back out and you can see all the divs. Let's do the same thing in the Android emulator, so I'll click on my Favorites, and I'll bring it up.
And you can see in the Android case the default setting for sizing the viewport when there's no viewport tag is 800 pixels. You can see, if I scroll over, the 1,000-pixel one is over here. Android sized it to be about 800. Let's go ahead and load our test documents up. First what I'm going to do is bring up the document that does not have the viewport, and that's this one right here, and you see that it's displaying the document in a zoomed-out state.
Let's do the same thing over here. We'll bring it up, and there it is. Okay, so these guys are zoomed out initially, and it's not displaying the way that we intended it to, so let's go back to the code and see what that is. All right, let's go over to viewport start page. You can see here in this document I've got my divs with my pictures, but there's no viewport tag. So when the browser loads the page the default setting for the page size is whatever that browser happens to choose.
On Windows Phone it's about 1000; on Android it's about 800; on Opera it would be around the same size; on iPhone it's about 980 pixels. So we can fix this problem by putting some mobile declaration tags in there. And to do that, I'm going to switch over to my Snippets file, and here we are in the Viewport setting. I'm going to copy over these three tags, and I'm going to copy them and I'm going to paste them in the head. I'll paste right below the title there, okay. So what we've done now is added a couple of mobile optimization tags, one for HandheldFriendly, one for MobileOptimized, and one for Viewport.
That way when this document is viewed on browsers of varying age and varying devices their browser are told, "Hey! This page was laid out to be HandheldFriendly." And modern browsers are smart enough to choose whichever tag is the most relevant one, the most recently invented, and ignore the ones they don't know about. So for example, old Pocket PC browsers will see the MobileOptimized tag and choose that one and ignore the HandheldFriendly and the Viewport tags, whereas a new browser, like IE on Windows Phone or the Chrome browser on Android, will see the Viewport tag and choose that one over the other two older ones.
And you can see that we decided to set the width setting of the viewport to be the device-width. So whatever device-width happens to be on that particular device, that's how wide the page would be in that particular browser. So on Windows Phone it will be 480, on iPhone it will be 320, and Android, it will be 320, and so on. So I'm going to save. So now let's go back over to the emulators, and let's view these documents when they have their finished HandheldFriendly, MobileOptimized, and Viewport tags in them. And remember, I'm viewing these in my emulators running from my local web server which we talked about earlier. And again, you can do this on a local web server on your machine, or you can run it off of whatever web site you normally develop on.
Some of these emulators have the ability to open local files and some don't. So just to make it easy, that's what I'm doing here. And once again, I have a favorite for this. So I'll just open it up. And this time you can see that the document is now being sized correctly, because the browser is being told, "Hey! This page was laid out for whatever the width of the screen happens to be." On Windows Phone it happens to be 480. But when you use device-width it actually defaults to 320 for compatibility reasons with other browsers like Android and iPhone. And let's do the same thing over here. Let's go ahead and bring up the one that has the finished meta tags in it, and you can see that's being sized correctly.
So using the Viewport tag you can actually control how the page is laid out, what the zoom factor is, and how the user can interact with a page when it's loaded in the browser. And this is a pretty basic step that you take for your mobile pages. Make sure that pages that are being viewed on mobile devices have these meta tags at the top. You can put them in pretty much any order. Just to be safe, I put them in order from oldest to newest. So let's go back to the code real quick and look. You can see that this is the oldest one, so I put that one first, and then the next newest one, the next newest one. And that's just a good practice so that older browsers know to pick the one that they know about and stop there, and newer browsers can just look for the one that they know is the one that is most relevant to them and the most recent one that's been invented.
So that's how you control the layout on a mobile browser using the Viewport setting.
There are currently no FAQs about Mobile Web Design & Development Fundamentals.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.