Optimizing webpages for mobile devices, part 1: viewports and the viewport meta tag

Do you own an iPhone? How about an Android phone? iPad? There is a good chance that you or someone you know does. With more and more people using  smartphones and other mobile devices to browse the internet it is imperative that you as a web designer take a moment to consider your mobile users. If you haven’t been optimizing your pages for different desktop resolutions, that is usually the best place to start and may in fact be all you need to do. If you need to go deeper there are several options:

  • Use the viewport meta tag.
  • Screen for different window/device sizes and target them with specific CSS rules (media queries or Javascript).
  • Screen for mobile devices and present them with mobile-specific pages.

This is part 1 of a 2-part article on mobile device optimization, where we will also discuss different monitor resolutions and screen sizes on desktop and laptop computers (hereon referred as “desktop”).

Read on to find the advantages and disadvantages of optimizing your webpages, learn about viewports and how to use the viewport meta tag. In part 2 we will go over media queries, Javascript and mobile-specific websites.

You don’t have to optimize for mobile devices

If you don’t have the time or desire to optimize your webpage for mobile devices, you can rest assured that it will display fine on mobile devices as long as:

OR

  • All of your layout and content is inside a container or wrapper with a fixed width, such as a <div>. This <div> would set your viewport width ( more on viewports later).

If you’re not sure if you meet one of these requirements you can easily test how your page will look on a mobile device by shrinking your desktop browser window to simulate a smaller display. If everything looks good then you can stop there if you want. It doesn’t even matter if you have to scroll horizontally to see everything; the point is to check that your layout doesn’t fall apart on a resized browser window or a small mobile display.

If your design doesn’t hold upon resizing the browser window, you should probably work on it some more. You could add a viewport meta tag with a fixed width to fix the problem for mobiles, as we will see later, but it’s no fun for your users to see a mess when they resize the window on their desktop either.

How does it look?

Regardless of how your layout looks upon resizing, be aware that if it has a set width that is too wide for a particular display most mobile browsers will automatically zoom out in order to fit everything on the screen. Otherwise useres can zoom out themselves, though you can limit that option in the viewport meta tag which, again, we will explore later.1 The point is to keep this in mind since your zoomed out webpage might look very small depending on the mobile device.2

1 The concept is the same for desktop browsers: if you have to scroll horizontally the layout is too wide for your display. You’re free to zoom out instead of scrolling. 

2 You can test this pretty accurately by placing your mobile device up against your desktop monitor (or using a physical ruler to measure for other screen sizes) and resizing your browser window horizontally so that it is the same width as the mobile display. Then zoom out until the horizontal scroll bars disappear. You might get strange looks while you’re doing this, but you can just ignore that or tell them that you’re doing it for science! What you see on your desktop browser now should correspond to what gets displayed on the mobile device, but be aware that it might be slightly off since your browser probably doesn’t allow such surgical zooming. Also when text and images are so small they might not render with the same quality as they would on the mobile device.

Pros of leaving your pages unoptimized

Assuming you have a fluid design or all of your layout and content is inside a container (wrapper) with a fixed width…

  • Takes absolutely no time and zero effort.
  • Retains the same design users see on their desktop browser.

Cons of being lazy

Assuming you don’t have a fluid (liquid) design or if the layout/content is not inside a container (wrapper) with a fixed width…

  • Layouts which have a set width considered “normal” on a desktop display will be too wide for most mobile devices. This will in turn make it necessary for users to zoom in and out in order to juggle between seeing the entire page and actually being able to see any one thing in a reasonable amount of detail.

The viewport and the viewport meta tag

It can be tricky deciding how or if you should even use the viewport meta tag. And if you do decide to use it, should you combine it with the other mobile optimization tools at your disposal? In the following paragraphs I will attempt to answer these and other questions that you will inevitably ask yourself.

In order to understand what the viewport meta tag does you should first know what a viewport is. Simply put, the viewport is the area which contains your entire page. Everything you see on your browser window you are seeing through the viewport.

On a desktop browser you might have to scroll up and down or side to side to see everything. Most mobile browsers will not show you scroll bars but will instead let you zoom in and out to see the entire page.  Regardless of how much you are shown when the page first loads, the entire area in which you can move around is enclosed by the viewport.

Viewports
Viewports and zoom (click to enlarge)
Most mobile browsers automatically load pages zoomed out (right) so that the entire viewport is visible, but you can have a certain amount of control over this by setting initial-scale or minimal-scale values in your viewport meta tag.

——————————–

So now you might be wondering how to control the size of the viewport. If it has not been set by an element, as described earlier, we can go ahead and insert the infamous viewport meta tag between the <head> tags on the page.3 It looks like this:

<meta name=”viewport” />

It’s not much to look at and it is in fact useless as defined above. In order to control anything with this tag we need to add some parameters to it. To set a specific width to our viewport we could write:

<meta name=”viewport” content=”width=1500″ />

And here it is again with even more parameters:

<meta name=”viewport” content=”width=1500,initial-scale = 1.0,maximum-scale = 1.0″ />

In this case we are telling the browser to make the viewport 1500 pixels wide (width=1500). The page is loaded at 100% zoom (initial-scale=1.0) and the user is not allowed to zoom in (maximum-scale=1.0).

One last example:

<meta name=”viewport” content=”width=1500,initial-scale = 1.0,minimum-scale = 1.0″ />

This time the user is not allowed to zoom OUT (minimum-scale=1.0). Combined with the other values we provided this is probably not a good idea: since 1500 pixels is a lot for most mobile displays and the page is being loaded at 100% zoom the user will only see the top-left corner of the page on most mobile devices. Combine that with the inability to zoom out and the user will have a very frustrating experience!

3 Remember that the viewport meta tag has no effect on desktop browsers. It can be useful in controlling how your page displays on mobile devices, but if your layout falls apart when you resize the browser window on a desktop you should fix that first. 

What can you do with the viewport meta tag?

Below are several things you can do to control how the viewport is presented to users. Keep in mind that different combinations of meta tag parameters can produce different results, which are often hard to predict. On top of that different browsers may have different ways of interpreting parameters and their values so the more browsers a page is tested on, the better.

Note for parameters that take numerical values that these should not be less than “1.0” (100%) as different browsers either ignore or output unpredictable results for lower values. By the same token manually zooming out to less than 100%  does not seem possible.

  • Control the width of the viewport using the width parameter.
    • “width=x” for a viewport x pixels wide or “width=device-width” to let devices set viewport width automatically. This page lists many mobile devices and their default viewport sizes.
    • “width=device-width” is a good choice for liquid and responsive designs as it ensures that the page loads at 100% zoom, meaning a comfortable reading experience across devices.
    • The width parameter may override a viewport width previously defined by an element or vice-versa depending on the browser.
    • If no width is defined by a page element or by the viewport meta tag, different browsers will set different viewport widths.
    • The width parameter has corresponding “height” and “device-height” values but in most cases it is not useful to control viewport height.
  • Set the initial zoom level of a page when it loads using the initial-scale parameter.
    • “initial-scale=x” sets page width to (x*100)%, then disables the ability to zoom out if no element exists with a wider width. Otherwise zoom out limits vary by browser or are limited by the minimum-scale parameter.
    • 100% zoom corresponds to the device’s default viewport size.
    • initial-scale may override minimum-scale and/or maximum-scale or vice-versa depending on the browser.
  • Limits how much users are allowed to zoom IN using the maximum-scale parameter.
    • “maximum-scale=1.0” disables the ability to zoom in, higher numbers allow zooming in more.
  • Limits how much users are allowed to zoom OUT using the minimum-scale parameter.
    • “minimum-scale=x” sets page width to (x*100)% , then disables the ability to zoom out since it is already at the minimum scale of (x*100)%.
    • minimum-scale may override initial-scale or vice-versa depending on the browser.
  • Control whether users are allowed to zoom in and out in your page using the user-scalable parameter.
    • “user-scalable=yes” allows users to zoom in and out; “user-scalable=no” disallows zooming in and out.
    • The most unpredictable parameter of the viewport meta tag is the user-scalable parameter and its use is strongly disencouraged. Despite previously defined viewport widths, some browsers set unique viewport widths on page load when user-scalable is set to “no.” Additionally all other parameters of the viewport meta tag are disabled, effectively denying not only the user but also the developer the ability of scaling and controlling the page layout. Many browsers do not support the user-scalable parameter.
    • The default value of the user-scalable parameter is “yes.” To disallow users the ability of zooming in and out the best option is to set “maximum-scale=1.0, minimum-scale=1.0”

Some examples of defining viewport width

Following are three different ways to set the viewport width on a page, plus one example where no width is set anywhere. Examples are meant to be viewed on a mobile device — view the index page at goo.gl/ma4Fm or scan the following QR code:
Viewport width test

When should you use the viewport meta tag?

  • When you have a layout that already works well on a desktop — including when the resolution is low or the browser window is small — and you want to have more control over how the page is displayed on mobile devices.

When should you refrain from using the viewport meta tag?

  • When your design is falling apart when viewed on lower desktop resolutions and resized browsers. The viewport meta tag only applies to mobile devices; therefore it is important to fix these problems at their source so that your desktop users (which is probably the marjority) also have a decent experience.
  • When you cannot test your webpage on multiple mobile browsers. Since different browsers handle viewport meta tag parameters differently what works on one browser may give a completely different result on another.

Conclusion

In a lot of ways optimizing for mobile devices is the same as making sure that your pages work on different desktop resolutions and resized browsers — something webdesigners have been doing since the dawn of time. Many of the old tricks can still be used and we can now combine them with new tools whose development was encouraged by the evergrowing use of the internet on small screens. In addition new solutions like the viewport meta tag, CSS media queries and mobile-specific websites have been exclusively developed to deal with mobile devices.

Part 2: media queries, a Javascript alternative to media queries, and mobile-specific websites.