O'Reilly logo

Mobile Design and Development by Brian Fling

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Tools and Libraries

Many toolkits and interface libraries have emerged to aid in the creation of mobile web apps, specifically for the iPhone. Building on the work of others can be a huge time saver when trying to build a mobile web app.

iPhone GUI PSD

One problem that comes up with creating iPhone web apps is having to recreate the iPhone user interface in HTML and CSS. Even if you are creating your own look and feel, it is still helpful to see Apple’s user interface in detail to make your app feel at home on the iPhone. Luckily, the kind folks at Teehan+Lax have provided us with a layered Photoshop file (http://teehanlax.com/downloads/iPhone_GUI.psd.zip), complete with all of the iPhone GUI elements (Figure 12-19) needed to create an iPhone-inspired web app, or to be used as the foundation for your own UI.

iPhone GUI PSD

Figure 12-19. iPhone GUI PSD

iUI

Shortly after the iPhone was released, during the first iPhoneDevCamp, developer Joe Hewitt created an open source user interface library that mimics the appearance and interactions of the iPhone. Originally dubbed iphonenav, the project is now known as iUI (Figure 12-20), and is one of the more popular tools used for creating iPhone web apps.

iUI

Figure 12-20. iUI

iUI uses CSS and JavaScript to quickly create menus, animated page transitions, and other effects ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required