When I set out to build TrailCheckIn I wanted to build a web app that provided a near native app experience on mobile devices. Thankfully, with the tips I’m going to show you, this is entirely possible using only HTML.
Apple has built several features into iOS that allow developers to create web apps that look and behave like native apps. All that is required on the user’s end is to bookmark the site to their home screen. Lucky for us, Google has also adopted many of the same features, so some of the techniques I’m about to show you will work on Android as well! Rock on!
Much of what I’m showing here comes straight out of Apple’s own iOS Human Interface Guidelines(HIG) and the Safari Web Content Guide. If you haven’t read them already you owe it to yourself to read these Guides! They both contain useful information that goes far beyond building iOS apps.
Set the viewport
We start by setting the viewport so it’s the same size as the device. This will be the the first item in the
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
For the purpose of this post, the app will be wide as the device. Also, we don’t need the user to be able to scale this app so we set
maximum-scale to 1.0 and
user-scalable to 0. If you’re unfamilliar with the preceding code, read about the viewport meta tag at Mozilla Developer. They cover everything you could possibly need to know about it. With that out of the way we can get to some interesting stuff.
Web app capable? Yes please!
Start off by telling iOS (not Android, sorry) that when a user bookmarks the page using Add to Home Screen it needs to treat it as an app. This will remove browser chrome and and provide a full screen view when launched from the home screen. The following code is required for our next bit of code, so add it now!
<meta name="apple-mobile-web-app-capable" content="yes" />
Having set a page as
apple-mobile-web-app-capable opens up a whole world of opportunities to enhance a web app for mobile devices. Let’s check out what we can do.
Status bar style
We got rid of the browser chrome by declaring it a web app however, iOS will still display the status bar at the top of the screen. The status bar shows the user network connection, time and battery life. While we can’t get rid of the status bar we sure can style it!
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
content attribute has three options: default, black, and black-translucent. default and black both display as solid blocks at the top of the screen with web content below the status bar. If you set black-translucent the web content will be fullscreen with the status bar obscuring the content underneath.
icon for iPhones, iPad and retina
This is where the real fun begins as far as I’m concerned. In the app store the icon can mean the difference between a user purchasing or passing on an app. Icons give an app a personality on the users home screen and give them a connection to the experience the get when they click to launch an app. Let’s add an icon!
<link rel="apple-touch-icon" href="/touch-icon.png"/>
Icons used in iOS come in a multitude of sizes based on the device.
- 57 x 57 pixels – iPhone/iPod standard
- 114 x 114 pixels – iPhone/iPod retina display
- 72 x 72 pixels – iPad standard
- 144 x 144 pixels – iPad retina display
Best practice right now is to include one 114 x 114 icon and one 144 x 144 icon for iPhone/iPod and iPad respectively. Non retina devices will scale down retina icons if we specify the correct icon to use. Sizes are specified by the sizes attribute.
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" /> <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
Also by default iOS will add the following visual styles:
- Drop Shadow
- Rounded Corners
- Reflective Shine
Web developers have no control over drop shadow being added but we can control rounded corners and reflective shine.
Rounded corners need to be done in your image editor. We can find the correct rounded corners radius that Apple uses in iOS by taking the icon size and dividing it by 6.4 so:
- 57 icon / 6.4 = 9 pixel radius
- 72 icon / 6.4 = 11 pixels radius
- 114 icon / 6.4 = 18 pixels radius
- 144 icon / 6.4 = 22 pixel radius
Reflective Shine is controlled with use of
-precomposed to the end of the
rel attribute. I should also note that
-precomposed is required if you want the icon to work on Android devices.
<link rel="apple-touch-icon-precomposed" href="/touch-icon.png"/>
apple-touch-icon, iOS will add a reflective gloss by default.
apple-touch-icon-precomposed, no reflective gloss will be added.
Startup splash screens
Th startup screen is a PNG image that will display immediately after the user has touched the icon to launch your app during the time it takes to load the content from the web. Again this can be used on iPhones/iPod and iPad and has support for retina quality images. In order to get them to work correctly we need to make sure we size the images appropriately.
- iPhone/iPod Standard – 460 x 320 pixels
- iPhone/iPod Retina – 920 x 640 pixels
- iPad Standard – Landscape – 1004 x 768 pixels
- iPad Standard – Portrait – 748 x 1024 pixels
- iPad Retina – Landscape – 2048 x 1496 pixels
- iPad Retina – Portrait – 1536 x 2008 pixels
Splash screens take up the entire display except for the status bar at the top of the screen. This means you need to account for it in height of your images; 20 pixels on standard displays, 40 pixels on retina. As well, the iPad can do portrait and landscape images too! To tell iOS which splash screen to load we use media queries:
<link href="apple-touch-startup-image-iphone.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-iphone-retina.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-ipad-portrait.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-ipad-landscape.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-ipad-portrait-retina.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <link href="apple-touch-startup-image-ipad-landscape-retina.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
This should do it. I don’t have an iPad so I’m unable to test these out yet. If you have an iPad and have tested this let me know in the comments below and I can update this post with all the correct information! I should also note that the Retina iPad has an issue with high resolution JPGs so for now make sure you use PNGs.
Ready to Rock!
Thats about all there is to know for now when making a web app that works on mobile. It’s fairly easy and pretty darned fun! It’s a good idea to remember that any site can be used as an app on the iPhone. So even if your site isn’t media-queried, adaptive, responsive etc. You can still add these features to the head of your HTML and take advantage!