28 Aug 09 Simulating an iPhone App: iWebKit vs. iUI

• 
• 
• 
• 
• 
• 
• 
• 
• 

For those of you out there looking to produce a mobile site that simulates the look of a native iPhone app, you have probably run head first into two separate (but free) CSS/Javascript packages aimed at helping you achieve just that. If you’ve yet to stumble upon them, it’s your lucky day. The purpose of this post is to introduce you to both iWebKit and iUI, and highlight their features and the pros and cons of their distinct differences.

If one were to personify both packages iUI would be the buttoned up and stable, yet somewhat plain Jane older brother destined for law school, 2.4 kids and white picket fence. The designated driver. Guaranteed to get you home, but rarely taking the scenic route unless you make him. While iWebKit would be iUI’s more approachable, fast-talking, flashy, but irresponsibly fast and loose younger brother. There’s room for both in this world and if you’re fairly CSS/Javascript savvy a hybrid of the two is probably right for you– which is the road I generally end up taking.

Let’s get this out of the way first:
iUI and iWebKit are CSS and Javascript libraries that you can use to build, stylize and optimize Web sites for mobile viewing, specifically targeted at replicating the look and function of the iPhone UI. [ad#200x200-square-1]The libraries will typically include a CSS file or two along with a few javascript files. All in all, it constitutes the essential framework necessary to construct your Web app.

What is it not? It is not a stand-alone software install, plugin, or graphical aid for building native iPhone apps or Web apps (although there is a slightly dodgy Wordpress plugin built around the iWebKit framework now available).

If you aren’t comfortable with CSS and/or lack a basic understanding of how Javascript and HTML interact, I would recommend downloading iUI or iWebKit and reverse engineering some of the demonstration pages as explaining CSS and Javascript is beyond the scope of this article.

That said, let’s meet them:

iUI ver 0.30 | Try demo | Download

Originating as a core set of scripts/css by Joe Hewitt, the Facebook software engineer responsible for Facebook’s iPhone app (and the Three20 open-source iPhone generic library), iUI is easily the best maintained, documented, debugged and updated of the libraries. Not to mention, it’s probably the iPhone Web experience with which you are most familiar– with it’s side-scrolling page loads (for an example of this in action try the demo).

If you take a look under the hood, you may be surprised at how many high profile websites employ iUI in one form or another. Granted, virtually all of them modify the original framework to better serve their needs, but in most cases so should you. Who quietly uses iUI? Web sites like: CNN.com and eonline.com and the majority of the iPhone sites built and maintained by Crisp Wireless.

Although currently iUI is fairly limited in its replication of the iPhone UI, it offers a highly dynamic blank canvas and the core tools necessary to showcase your particular flavor of Web experience. For a developer looking to design a mobile/iPhone site from (almost) the ground up, particularly a large SQL-driven site, I find it to be the most reliable and scalable solution.

Those looking for assistance with iUI server integration (PHP, ASP or Ruby), can visit iUI’s home at code.google.com for some helpful documentation.

iWebKit ver 4.6.2 | Try demo | Download

The product of Dutch duo Christopher Plieger, 17, and Johan van Wilsum, 24, iWebKit offers a wealth of features in an easy and compact CSS/Javascript package. While the Javascript update included with Apple’s iPhone 3.0 firmware temporarily produced some crippling errors when interfacing with iWebKit 4.6.2, a simple workaround quickly addressed the issue and iWebKit is now increasingly 3.0 friendly (with the exception of a minor conflict here or there).

iWebKit offers an array of unique iPhone UI goodies, most notably:

• Pop-up menus (view)
• Multiple list types (view store, view classic, view music)
• Full-screen support (view)

What is full-screen support?
“(iWebKit) …found a way to create a multi-page website that can handle the fullscreen ability on the iPhone and iPod Touch. This means the navigation bars will disappear. You can … click on the plus sign at the bottom of the page, add to the homescreen and open it up! It even works in Landscape! This mode will give your users the feeling your webapp is a native application and speed up the navigation. Add a webclip icon to finish it off and you have your own native webapp!” — iWebKit.net

Perhaps the one area in which iWebKit excels is true iPhone UI replication. iWebKit not only offers the core CSS to “iPhone-ize” your site, but it also provides outstanding form support, iPhone-style pop-up menus and of course the aforementioned full-screen support.

iWebKit firmly places its bet on aesthetics, leaving developers the task of integrating and optimizing the scripts to work within their framework. However, that said, I’ve yet to see a product compete with iWebKit’s stunning replication of the iPhone’s native UI.

Recently, I have created new ad inventory by embedding ad positions into pop-up menus. While I have an ad type (.png) for this, it could just as easily serve small banner ads from any ad network simply by integrating it into iWebKit’s pop-up code.

So Which Right For Me?

While both are fantastic open-source solutions, I am sure you are starting to see the distinct differences between the two frameworks.

iUI is developed with emphasis on content and flexibility and is meticulously updated, debugged, and maintained. While iWebKit certainly aims to dazzle with a user-interface that will have you doing a double-take, hallmarked by exclusive pop-ups and full-screen support, it lacks the revisions and debugging necessary to make it a viable option for any major media outlet.
[ad#200x200-square-1]
Both iWebKit and iUI should be easily understood by anyone familiar with CSS and Javascript and even a user with little or no experience could create a basic page if using one of the supplied demo pages as a template. However, for those who like to hack apart CSS/Javascript, you may find iWebKit’s code more inviting if only for the simple fact that there is less of it.

While iWebKit’s full-screen support is a essentially hands-off, requiring no modification, iWebKit’s pop-ups require customization but are fairly easy to produce and can be served dynamically from SQL or any database– it will just take you some extra work.

All in all, if you aren’t experienced enough to blend the iUI and iWebKit source code effectively, the question of which best suits you boils down to your overall goal. If the primary function of your iPhone Web app is to serve content and lots of it (like a news site or blog), you will undoubtedly experience far fewer headaches and a consistent product employing iUI.

However, if you are purely trying to replicate the iPhone experience, new to mobile development, and/or are designing a site to showcase a specific element or function (like a credit card processing service or a personal resume) then iWebKit is the best bet to deliver the experience you’re after.

Tags: iPhone, iphone site, iUI, iWebKit, mobile safari, mobile site