iOS web apps, icons, and startup images


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 <head> tag:

<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 initial-scale and 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" />

The 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.

default-status-bar

black-status-bar

transparent-status-bar

Default, Black and Transparent Black status bar styles

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.

precomposed vs gloss
precomposed vs. gloss(default)
<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!

 

10 Comments on iOS web apps, icons, and startup images

  • Tyler Paulson says:

    Thanks for putting this together – it’s the best complete round-up on this subject I’ve come across.

    I did some tests on the startup images for the iPad and it turns out the landscape image has to be vertical as well making it be 748px wide by 1024px high for non-retina devices with the graphics rotated 90º clockwise.

    • Andrew (Pez) Pengelly says:

      Generally speaking you can use 72 dpi for all your splash images, even with retina iPhones. You can use one 920 x 640 image to handle both retina and standard iPhones. iPads (1 & 2) use 1024 x 768 screen so use 1004 x 768 (remember that status bar) for now. I just got a retina iPad so I will be testing splash screens for it in the coming weeks.

  • danny says:

    great guide, thanks for putting it up there. passing along this link to a PNG compressor (paid mac app) in case it’s useful to anyone googling this article like i did.

    i’ve used it to shave a decent amount of file size off HTML5 animations and ipad graphics: http://www.shpakovski.com/png-compressor/

  • Flo says:

    hi guys, thanks for that awesome guide! i do have a problem using the , hope you can help me on this! including this line in the opens the website (when launched from the HOME BUTTON) in iPhone Size on the iPad?! Any chance how this can be fixed?
    Thanks so much!

  • developer launch says:

    Unquestionably believe that which you stated. Your favourite justification appeared to be at the web the easiest factor to be mindful of. I say to you, I definitely get irked whilst folks think about issues that they just do not know about. You managed to hit the nail upon the highest and defined out the entire thing with no need side effect , people could take a signal. Will likely be again to get more. Thank you


 
Leave a comment.

Please, keep in mind:

  • Be cool, no smack talk.
  • Basic HTML is allowed in posts.
  • If you like what you read, spread the word!
  • Fields marked with a * are required to post a comment.