Mobile Web Design with the Meta Viewport Tag

Smartphones and tablet devices allow programmers to build, test, and deploy native applications. Regardless of the Operating System it is getting easier to build simple applications for mobile devices. But not everyone is interested to learn Java or Objective-C, and so many developers are instead turning to build mobile web applications.

You can utilize mobile web design techniques as a replacement for your current layout, or to build an entirely mobile optimized webapp. In this guide I want to showcase a number of helpful meta tags, among other HTML tags you might consider using. Not everything here will be crucial to the development process. But it is nice to know about the various options when building a mobile-specific website layout.

Meta Viewport

Typical mobile browsers use the zoom behavior for rendering webpages. This means visitors can see the entire 100% width of the website once it has finished loading, and they must zoom in closer to read the text. Some websites don't use this by default and it only requires one additional tag in your document header. Let's take a peek at some sample code snippets:

1
2
3
4

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1">
<meta name="viewport" content="maximum-scale=1">
<meta name="viewport" content="user-scalable=no">

I want to point out this is not the typical way you would write this code. Instead you would combine everything into one tag, but I want to introduce this very important meta tag with merely the basics. It was initially created by Apple which implemented the rendering into Safari for iPhone and iPod Touch. The content attribute has a list of comma-separated values which denote how the webpage should render.

Using the width value we can specify a default width for the site. Normally it will sit at 100% to display the full layout. device-width is a keyword to force the webpage into a full width linked to the device. So if somebody has an iPhone in portrait view, the website will be forced into 320px. This could also be written manually like so:

1

<meta name="viewport" content="width=320">

But this is much more uncommon because responsive design is a better solution. If somebody turns their phone sideways into landscape, you would have a site which is fixed at 320px wide on a 640 viewport. Instead we want the layout to expand or contract based on which viewport is being used.

1

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

This final code snippet is a way to combine everything you need together into one tag. This is how it should be written for any mobile HTML5 webpage. It will force the website into a perfect 1x1 scale at full width of the device, and the user cannot zoom in or out. Building a fluid layout with responsive media queries is the best choice when utilizing this viewport tag. You can expect a fantastic experience on mobile devices and modern desktop or laptop PCs.

Alternate Meta Tags

There are some other tags you might consider researching in regards to mobile design. These are nowhere near as significant as the viewport tag because modern browser support is generally unknown. But these have been around for a while and it can be educational to understand these topics.

1
2
3

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="true">

X-UA-Compatible is a meta tag for setting the type of rendering engine for Internet Explorer. The IE value is set to whatever rendering option you'd like. Edge forces IE to use the most modern rendering engine, while chrome=1 can be used with an extension to run IE like Google Chrome. It's a fairly useless tag if you just build for specifications in the first place.

MobileOptimized was created by Microsoft for support in older Windows Mobile Phones. A specific width needs to be given, which basically defeats the purpose. I'm also unsure which modern devices are supported(if any). HandheldFriendly is something originally used for AvantGo browsers to recognize websites designed for mobile. It has very little practical use nowadays considering the viewport tag.

I wouldn't recommend using any of these tags because you won't find much in the way of benefits. However it is nice to know where all our current standards originate from, and the older solutions created from browser developers.

Mobile Web Applications

I'd like to introduce another set of tags for your document header which can distinguish from a mobile website, and a mobile web application. Some devices like the iPhone allow users to save a local shortcut to an online webpage. This will be stored as a home icon which you can tap to open just like any native application.

But instead this will connect right to the Internet and load the webpage as if it were a generic device application. It is a way for developers to launch new projects which can be saved onto iOS devices, without needing to get approval through the App Store. But not every website needs this functionality so it's best reserved for projects that are meant to be used as web applications.

1
2
3
4
5
6

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="72x72" href="/img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/img/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/img/apple-touch-icon-57x57.png">
<link rel="apple-touch-startup-image" href="/img/splash-startup-screen.png">

I'd hope these tags are fairly obvious but I'll go over the block of code. The first two lines setup the ability to save the website as an application and then force the top navigation bar color. Some other choices include black-translucent or default to customize your design.

Now the apple-touch-icon will be similar to a favicon. But instead of being 16x16 it'll render out perfectly based on the device. So if a visitor saves your webpage to their home screen on an iPhone it'll likely be using the 57x57 or 72x72 icon. Retina devices make this a bit trickier and there isn't a whole lot of detailed support on this topic. But I do think Apple has plans to expand support for this kind of stuff in future releases of Safari.

If you have a mobile smartphone try building a simple webapp using these features and see how it appears on your homescreen. The icons don't need to be rounded or glossy, just a simple square design fitted to the exact image dimensions. iOS will handle everything else including the startup loading image you include with apple-touch-startup-image.

CSS Adaptation

The W3C has adapted another way of handling viewports called @viewport rules. This means you would write the adaptations within CSS3, possibly handled inside @media queries. IE10 has dropped support for the meta viewport tags and so you would need to handle this using generic CSS properties.

1
2
3
4
5
6
7
8
9

@viewport{
    zoom: 1.0;
    width: device-width;
}
 
@-ms-viewport{
    zoom: 1.0;
    width: device-width;
}

You can read more about how these styles work from this awesome blog post. It is a bit more confusing than just writing a single HTML tag, and hopefully the WC3 will come around to adopt the meta tag solution. But for now it is a good idea to understand the basics of @viewport and the proprietary @-ms-viewport for newer versions of Internet Explorer.

Closing

As trends advance further we can likely expect a surge of new developers getting into the mobile arena. Popular CMS' like WordPress or Drupal could see a wider adoption of mobile-responsive themes. These techniques are merely the beginning of a whole new mobile Internet. If you have similar ideas or questions on the article feel free to share with us in the post discussion area below.