Get Your Web App On!

Dev

Get Your Web App On!

With iOS5 boasting such an wide array of HTML5 and CSS3 support there’s no better time to start dipping your toes in the world of web app creation. So I thought I’d go ahead and put together a quick reference for all the little snippets you’ll need to get started and emulate that iOS native app look and feel.

The following bits of code will need to go in the of your document:

This will let the iOS device know that it can run fullscreen when the user bookmarks it on their springboard.

This sets the status bar color (the bar with the network status, clock, battery, ect). You can also change the content parameter to content=”default” (grey gradient) or content=”black-translucent” (black with transparency).

This adds an icon to your web app that will show up on the springboard when a user saves it. This will automatically round the icons corners and add Apple’s gloss overlay to it.

You can use this icon option instead and it will do the exact same thing but it won’t automatically add the gloss to your icon.

I love this one! It adds the startup splash screen.

On the iPad you can even have a landscape and portrait splash screen depending on how the user is holding th device.

This is landscape.

This is portrait.

This option will make sure the web app is fitting perfectly on your iOS device. It also disables the users ability to zoom in or out. This is good because it helps provide more of that native app feel, but make sure you’re content is large enough that the use won’t need to zoom.

Ok enough with those link and meta tags, lets move onto a few more extra tips that can provide a wonderul iOS experience. First, and foremost the user will have to find your app online and add it to their homescreen. In that situation you’ll be seeing the Safari address bar, but we didn’t design our app for that so let’s hide it!

%MINIFYHTML24ed72c7cbd6b7aa2ec88371382d665017%

So this little guy calls hideURLbar() as soon as the app has loaded and it will automatically hide the Safari address bar so that it is no longer visible. You can either stick this script at the bottom of your web app just before the closing

tag or preferably throw it in an external JavaScript file.

More About the Author

Scott Siemens

Web Developer
Drupal Webforms Quick-tip: Creating a Webforms Block The Webforms module comes with a plethora of options out of the box.  So many in fact I think some of the most useful settings can be ...
Drupal 101: Intro to Views – The Essentials Views are a massive part of Drupal and you can’t experience the power of Drupal without the Views module.  To get views up and ...

See more from this author →

Subscribe to our newsletter

  • I understand that InterWorks will use the data provided for the purpose of communication and the administration my request. InterWorks will never disclose or sell any personal data except where required to do so by law. Finally, I understand that future communications related topics and events may be sent from InterWorks, but I can opt-out at any time.
  • This field is for validation purposes and should be left unchanged.

InterWorks uses cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Review Policy OK

×

Interworks GmbH
Ratinger Straße 9
40213 Düsseldorf
Germany
Geschäftsführer: Mel Stephenson

Kontaktaufnahme: markus@interworks.eu
Telefon: +49 (0)211 5408 5301

Amtsgericht Düsseldorf HRB 79752
UstldNr: DE 313 353 072