New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Mobile Web Design & Development Fundamentals
Illustration by

Controlling the viewport layout


From:

Mobile Web Design & Development Fundamentals

with Joe Marini

Video: Controlling the viewport layout

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.
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Mobile Web Design & Development Fundamentals
5h 47m Beginner Jul 20, 2011

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.

Topics include:
  • Implementing well-defined web standards
  • Working with Modernizr and Mobile Boilerplate
  • Building a first mobile web page
  • Understanding content adaptation strategies
  • Designing forms for mobile
  • Detecting client capabilities with script
  • Using server-side detection with PHP and ASP.NET
  • Working with mobile browser capabilities
  • Viewing and testing the mobile site on device emulators
Subjects:
Developer Web Web Foundations Mobile Web
Software:
HTML
Author:
Joe Marini

Controlling the viewport layout

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.