According to AdMob, the iPhone operating system makes up 50% of the worldwide smartphone market, with the next-highest OS being Android at 24%. Sales projections for the Apple iPad run anywhere from one to four million units in the first year. Like it or not, the iPhone OS, and Safari in particular, have become a force to be reckoned with for Web developers. If you haven’t already, it’s time to dive in and familiarize yourself with the tools required to optimize websites and Web applications for this OS.
Thankfully, Safari on iPhone OS is a really great browser. Just like Safari 4 for the desktop, it has great CSS3 and HTML5 support. It also has some slick interface elements right out of the box, which sometimes vary between the iPhone and iPad. Lastly, because the iPhone OS has been around for quite some time now, a lot of resources are available.
Before we get into the three phases, let’s look at some of the advantages and disadvantages of building a Web app rather than a native app.
Advantages of building a Web app instead of a native app:
- No Apple approval process or red tape, which is especially important given the terms of service dispute1 going on right now.
- Optimizing your Web app for other popular platforms like Android and Blackberry with the same code is much easier.
- You don’t have to learn Objective-C.
- If you’re charging users, you don’t have to share revenue with Apple.
- You get 100% control over the means of payment, promotion and distribution to users… which could also be a negative, depending on how you look at it.
Disadvantages of building a Web app instead of a native app:
- No presence in the App Store.
- Installing the app on a device is a little trickier.
- No access to some of the features that are native to the iPhone OS, such as push notification and GUI controls.
Designing a Web app for this platform is much like designing a native app, so you’ll have access to some really great tools. Whether your wireframing tool of choice is pencil and paper or desktop software, you’re covered.
Featured Web app on the Apple website
There are also some galleries elsewhere that showcase the finest in mobile Web design:
- Apple Web Apps Listing3
- Mobile Awesomeness Design Gallery4
- CSS iPhone Design Gallery
- Well Placed Pixels
- Apple App Store5 (Even though these are native apps, you can find great visual inspiration here.)
Paper prototyping has long been my tool of choice for wireframing new ideas or websites. What I really like about the tools below is that they provide perspective on the size and dimensional constraints that you’re dealing with. To successfully optimize a Web app for the iPhone OS, you have to cut things out. I suggest keeping the design minimal by wireframing with a sharpie and one of the tools listed below.
- Notepod: iPad and iPhone sketchbooks7
- App Sketchbook8
- UI Stencils sticky pads10
- Apress iPhone Application Sketch Book11
- Printable iPhone Wireframe Template (free)
Once you know exactly how things will lay out in your design, we can move to the desktop and get specific. I really like wireframing with OmniGraffle12, but sometimes diving straight into Photoshop makes sense. Either way, these tools are a huge help in making it happen.
iPad GUI preview from Teehan + Lax.
- iPhone GUI PSD 3.0 and iPad GUI PSD (Photoshop)
- Layered iPhone GUI elements13 (Photoshop), from Designer’s Toolbox
- PSD Vector Kit14 (Photoshop), from Smashing Magazine
- iPad and iPhone stencils; see more at Graffletopia15 (OmniGraffle)
- iPhone and iPad Development GUI Kits, Stencils and Icons16
When you start coding for Safari on the iPhone OS, understanding how the browser works is important. Also, there are subtle differences in the iPhone and iPad’s browsers, such as how form-select boxes work. Most importantly, Safari has great CSS3 and HTML5 support, so you can use modern code without having to worry about cross-browser compatibility.
Apple actually does a really good job of documenting Safari for the iPhone OS. The only shortcomings in my opinion are a lack of help with browser detection and window orientation. Read each of the articles below for everything you need to know about coding for this browser.
iPhone Human Interface Guidelines for Web Applications18
This is a good overall summary of how Safari for the iPhone OS works. It’s certainly worth scanning through, because it has some good advice, although no specific coding examples.
iPad Human Interface Guidelines19
This document does a good job of distinguishing iPhone elements and iPad elements. This is also worth scanning through, because it has some great advice on designing for the iPad.
Safari Web Content Guide20
This document gets specific about the viewport, webclip icons, unique meta tags and event handling, among many other topics. Code examples are provided. I recommend reading it cover to cover before getting started.
Detecting iPad Window Orientation
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
jQTouch Mobile Framework Link
While the iPhone has a few mobile development frameworks, jQTouch is far and away the best. jQTouch gives you all of the tools to make your mobile Web app look and feel like a native one. Visit the website25, and go to the demo website26 from your iPhone to get a feel for it.
My only complaint when building my first website with jQTouch was a lack of documentation and tutorials. I had to figure it out by playing with the demo website’s code. Here are some jQTouch articles that proved helpful in coding my first website:
- jQTouch Wiki on Google Code
- PDF slides about getting started with jQTouch, by Philipp Bosch
A crucial and somewhat tricky part of building a website or Web app for the iPhone OS is testing. It’s a little more complicated than testing in a web browser, but familiarizing yourself with a couple of tools should make the process simple.
Liveview28 is a really clever testing tool for when your app is in the design or initial coding phase. It allows you to broadcast an image from your desktop onto your phone so that you can see what it looks like. This is useful for getting text size and the visual specifics just right, because sometimes visualizing from Photoshop is hard.
Using the iPhone Simulator Link
In my opinion, no good iPhone or iPad emulators are available. The ones that are available are a waste of time. Much better is to download the latest version of the SDK29 and use Apple’s official iPhone OS simulator, which of course supports the iPad as well.
Setting up the SDK and a local testing environment takes a few minutes but is well worth the effort, rather than depending on unofficial and often inaccurate emulators. I’ve written a step-by-step tutorial about setting up a local testing environment30 that’s worth a read. One great thing about local testing is that it’s faster and does not require an Internet connection. I highly recommend going this route until you are ready to launch.
PhoneGap: Best Of Both Worlds? Link
PhoneGap also steers clear32 of the recently controversial 3.3.1 clause of Apple’s terms of service. In other words, apps compiled with PhoneGap will still be approved. Check out the list of apps that are built with PhoneGap to learn more.
Feeling Overwhelmed? Link
If you are, then some good hosted services will make it easier to optimize your website for multiple platforms without having to start from scratch. There are various levels of flexibility available, but all the services use a WYSIWYG-like editor to help you create mobile websites on the fly. Depending on your Web app and client, one of the following may be a good fit:
It’s a great day to be a Web developer, because non-desktop platforms like the iPhone OS open up greater possibilities for us to express our creativity and entrepreneurial savvy, while allowing us to adhere to modern Web standards. All of the tools you need to create great a Web experience on the platform that’s currently dominating the mobile space are out there. It’s up to you to make the most of them!
- 1 http://www.develop-online.net/news/34473/Apple-Control-freak-or-quality-catalyst
- 2 http://www.apple.com/webapps/
- 3 http://www.apple.com/webapps/
- 4 http://www.mobileawesomeness.com
- 5 http://www.apple.com/iphone/apps-for-iphone/
- 6 http://notepod.net/
- 7 http://notepod.net/
- 8 http://appsketchbook.com/
- 9 http://www.pixelpads.com/PixelPads_I_Features.html
- 10 http://www.uistencils.com/products/iphone-sticky-pad
- 11 http://apress.com/book/view/9781430228233
- 12 http://www.omnigroup.com/products/omnigraffle/
- 13 http://www.designerstoolbox.com/designresources/iphone/
- 14 https://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
- 15 http://graffletopia.com/categories/iphone
- 16 http://speckyboy.com/2010/04/30/iphone-and-ipad-development-gui-kits-stencils-and-icons/
- 17 http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/
- 18 http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007900
- 19 http://developer.apple.com/iphone/library/documentation/General/Conceptual/iPadHIG/Introduction/Introduction.html
- 20 http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP40002079-SW1
- 21 http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html
- 22 http://davidwalsh.name/detect-ipad
- 23 http://davidwalsh.name/detect-iphone
- 24 http://net.tutsplus.com/tutorials/tools-and-tips/learn-how-to-develop-for-the-iphone/
- 25 http://jqtouch.com/
- 26 http://jqtouch.com/preview/demos/main/
- 27 http://building-iphone-apps.labs.oreilly.com/ch04.html
- 28 http://www.zambetti.com/projects/liveview/
- 29 https://daw.apple.com/cgi-bin/WebObjects/DSAuthWeb.woa/wa/login?appIdKey=D635F5C417E087A3B9864DAC5D25920C4E9442C9339FA9277951628F0291F620&path=%2F%2Fiphone%2Findex.action
- 30 http://www.project83.com/blog/how-to-test-iphone-websites-locally-with-the-iphone-simulator/
- 31 http://phonegap.com/
- 32 http://www.phonegap.com/2010/04/14/phonegap-and-the-apple-developer-license-agreement/
- 33 http://www.mobify.me/
- 34 http://www.mobify.me/
- 35 http://m.smashingmagazine.com
- 36 http://wapple.net/
- 37 http://www.mofusepremium.com/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.