TechBrew

Informative geekery on software and technology

iPhone faux-apps with iWebKit

April 23rd, 2010 by

Making websites that are iPhone-friendly is easy enough, but I recently wanted to make a site that felt like a real iPhone app.  I don’t own a Mac, so building a native iPhone app wasn’t an option.

I turned to iWebKit 5.0, a lightweight DHTML toolkit for making websites that look “native” on the iPhone. It is a collection of CSS and Javascript files, a few small images, and a tutorial PDF on how to use them.  If you’re reading this on an iPhone, try out http://demo.iwebkit.net to see how a site built with it feels.

The iWebKit developers had these goals for version 5.0:

  • It needs to be very lightweight
  • Use small or no images (use css3 gradient and shadows for example)
  • Use limited amounts or no javascript, always try to find a css3 solution first!
  • Be user friendly (the least amount of elements possible in the html code as iwebkit is structured right now)

It’s dead-simple to use, and I think even people with scant web experience could put a static  site easily enough.  Safari for the iPhone has solid Javascript support, so more advanced web developers could put together some pretty decent dynamic functionality as well.

My favorite feature of iWebKit is when you use the “Add To Home Screen” button in Safari to put a bookmark icon on your iPhone.  A site made with iWebKit can be made to provide its own icon for your Home Screen, show a splash image while it loads, and run full-screen (no browser bar).  At that point, you can build something that most people would never suspect was a web site.

Other benefits from this approach:  No need to get Apple’s approval to list it in the app store and you can update it as often as you want.  You don’t get the exposure that the App Store brings, of course.   There are always trade-offs.

If you decide to give it a try, I recommend using Safari on your PC (or Mac) as a test browser during development, since it will render the pages fairly close to how they’ll appear on your iPhone.  You won’t get great results on IE or Firefox, but the Chrome browser works fairly well.

Have fun!

Trackback URI | Tags: How-To

1 response so far ↓

Leave a Comment