Create a Mobile Web App with HTML5 – Part 1: The Basics

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Having a mobile version of a website is a very important feature. It is very simple to turn your site into a mobile web app.

A Note on Design

This tutorial mainly focuses on mobile web for iPhone/iPod Touch, however all you need to do is look up the dimensions to make it compatible with other systems. Create a design for the mobile site in both portrait (320x480px) and landscape (480x320px). To support retina display, make sure the design is at least 326 pixels per inch.

HTML

Create the HTML document as you wish for your site, make sure the doctype is HTML5.

<!DOCTYPE HTML>

Now, within the ‘head’ section place the following:

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

This let’s the viewing browser know that the user should not be able to scale the page and the width should match the current device width.

<meta name="apple-mobile-web-app-capable" content="yes"/>

This informs mobile safari that this is a mobile web app.

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

This hides creates the status bar as the monochromatic one, you can substitute ‘black’ with ‘default’ to use the colorized one.

<link rel="apple-touch-icon-precomposed" href="icon.png"/>

This allows you to set a custom iOS icon for your app (at least 50x50px), for when it is added to the homescreen. Remove the ‘-precomposed’ to get a glass overlay on your icon.

CSS… almost

Link all standard stylesheets in the HTML, however, if specific stylesheets are required for portrait or landscape (they probably are) add this code:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Create custom styles based on orientation, such as hiding or displaying certain graphics in their respective stylesheets.

Next Week…

For a more advanced mobile app, check back next week to learn how to redirect from your main site to the mobile app, customize graphics, cache content, and much more!