Frameworks
If you come from a web development background and would like to get started creating iPhone-optimized websites, you’re in luck. The bulk of the knowledge you’ve learned can be applied to creating web content for mobile as well as for the desktop.
One of the main considerations when developing web content is what framework to use for your project or application. Below, we’ll review several tools you can use to help make this job easier.
If your not comfortable working with HTML and CSS, don’t worry, I’ll also cover some ways you can easily create an iPhone website without writing any code.
Dashcode
Dashcode is an Apple application used to create desktop widgets. This IDE can be used for iPhone web app development using integrated tools. This option may be desirable if you are used to working in a similar environment. In our experience, the same results can be achieved using less bloated code using open source toolkits, so let’s look at some of those.
http://developer.apple.com/tools/dashcode/
iUI
iUI is a JavaScript/CSS framework used to create iPhone webapps and mobile websites. It comes complete with all necessary image assets and is released under a New BSD License.
iUI is considerably easier to use than Dashcode, particularly if you have previous experience building websites from scratch. Once you download the framework, you simply update the HTML content and upload your changes to your server. Slide-in page navigation and UI formatting happen automatically. One major drawback of iUI has to do with the page transition effect. In my experience, it results in jerky and inconsistent navigation when compared to the look and feel of a native iPhone app.
In all fairness, iUI was created a very short time period by an individual who had not much time to test on this new platform before releasing what became the framework for scores of web apps from mid 2007 through 2008.
Joe Hewitt of Firebug and Netscape fame originally created iUI.
Edit: A new version of iUI was recently released that addresses many of the functional bugs that plagued the framework since its inception 2 years ago.
iWebKit
iWebkit is another JavaScript/CSS framework which can be used for iPhone website development. It comes with all necessary image assets as well as detailed documentation and support for multiple themes. iWebkit is released under an LGPL License.
iWebkit is a valuable tool for getting an iPhone website project up and running quickly. It’s easily setup by webmasters with a basic understanding of HTML/CSS. There’s some JavaScript used for sliding and other effects, but it’s not necessary to edit these files to use the framework.
iWebkit’s main advantages over iUI in my experience are its ease of use and detail of documentation. Its original owner, Chris Pleiger, meticulously updates the framework and the updates are relatively easy to install.
In my option, the one major drawback of iWebkit is the JavaScript used for the page transition, which suffers from a similar flickering as iUI. Page transitions are easily disabled, but a smooth transition effect would really push iWebkit over the top in terms of open source frameworks.
wAN
wAN, or webapp.net, is a robust framework, well suited for dynamic or database driven content.
wAN is by far the most difficult to use, particularly at the beginning or for users without experience with server/client side scripting. The trade off, however, comes in user experience.
Projects created using wAN most closely mimic native iPhone applications, both in terms of look and feel. Subtle details, such as content fading or menu memory add to a user experience that feels very comfortable.
Chris Apers, the creator of wAN, is very helpful and willing to assist with questions you may have regarding development. There’s also a user forum, which is a useful resource when you encounter an issue.
The main downside of wAN is its lack of detailed documentation and level of difficulty for casual use. If you put the time in to study and understand wAN, it’s a powerful toolkit with a robust feature set.
There are other open source frameworks available, but these are the ones I recommend for create iPhone-optimized websites.
Toolkits
If you’re just beginning in web programming or would like to create iPhone web content without learning HTML, CSS and JavaScript, there are several great tools which take all the hard work out of it.
WordPress
WordPress may be a great solution for serving iPhone-optimized content to your visitors. There is a number of plug-ins you can install which will add an iPhone-optimized view to your blog.
One popular plug-in is WPtouch by Brave New Code. It’s a robust theme package containing a default mobile UI. They’ve done a good job of handling detection, allowing the user to choose between the mobile and regular blog via a footer link, and recording the user preference in a cookie. The plug-in is free, and can be downloaded at http://www.bravenewcode.com/wptouch/
Another choice is iWPhone by Content Robot, though it does not appear that the site has been updated in some time, it was for a long time considered the de-facto standard for WordPress.
The WordPress team also offers a native iPhone app to update your WordPress blog, so if you’re “on the go” and are looking to manage your blog via iPhone, consider their app – it’s free, and available now in the App Store.
iMicrosites
If it’s been done before, and you can use it, why recreate it? “Work smart, not hard headed” is my real secret to getting more done. Take the iMicrosites online toolkits for example. It’s my recommended technique for creating killer mobile websites. Why? Because it allows you to get the job done, quickly, with the piece of mind of consistent results. There’s no need to test your changes across multiple devices, the software is smart enough to turn your input into valid HTML supported on a wide range of today’s popular smartphones and devices.
If you’re a seasoned pro you have full control over your page content using standard HTML, but the toolkit makes it super easy for anyone to easily incorporate a host of features, from custom themes and content to advertising and analytics. Publishing your killer mobile site is as simple as pushing a button, anyone can do it! And the page is guaranteed to look great in today’s modern smartphones.
I created iMicrosites because I wanted to provide a lightweight, easy-to-use solution enabling anyone to create mobile web content. There’s a free 7-day trial so it costs you nothing to sign up and test-drive the service.
