Under the Bridge

HOWTO: Web Apps

So, as perhaps you noted on an earlier post available briefly before the client decided that we were sharing too much so down the memory hole it went, Apple is starting to crack down on enforcing App Store Review Guidelines section

2.13: Apps that are primarily marketing materials or advertisements will be rejected

with a rejection letter reading

We found that your app provides a limited set of features and functionality, and focuses primarily on marketing or promoting your business, which is not appropriate for the App Store…

and will go on to suggest

Alternatively, you may wish to consider building a web app using HTML5. HTML5 is the major new version of HTML and enables audio and video to play natively in the browser without requiring proprietary plug-ins. Using HTML5, web apps look and behave like native iPhone and iPad apps, and using HTML5′s Offline Application Cache, your web apps work even when the device is offline. With web apps, you have flexibility to deliver as much or as little functionality as you desire.

To get started with iPhone or iPad web apps, please review “Getting Started with iPhone Web Apps” .

For a description of the HTML elements and attributes you can use in Safari on iPhone, check out “Safari HTML Reference: Introduction“.

which is all very well, but the couple client inquiries we’ve had since then that we’ve told “yeah, we think you’re risking THIS…” have had their web designers not be overly impressed with the understandability of those referrals.

So, here is what appears to be an definitive, succinct, and nicely geared to web designers’ sensibilities writeup:

HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript

In this article, I’ll explain how to:

  • strip away the browser chrome (the url bar and button bar);
  • prevent viewport scrolling and scaling;
  • respond to multi-touch and gesture events;
  • use webkit CSS to get the iPhone OS look and feel;
  • cache the app so it runs without internet access;
  • get a custom icon on the home screen; and
  • have a splash screen load at the start.

If you want to put it in the app store, you can even package your web app as a “native” Objective-C app. (Although, why you’d want to subject yourself to the app store approval process when you don’t have to is beyond me.)

I’ve put this HOWTO together, because–even on Apple’s site–there’s not one centralized page that tells you how to do all this. I’ve included templates, examples and a stubbed-out XCode project…

Yes. Yes, that should do nicely as a Web App Making For Designers 101 that they’re likely to actually read, we’d say. Anything better you know of, Dear Readers?

h/t: @smashingmag!


These look like more excellent resource for getting started on web apps:

Mobile Boilerplate – A Base Template For Mobile Web Apps

18 New Useful Frameworks for Web and Mobile App Developers

If the ‘Flash video!!!’ things comes up: Sublime Video