Web Development For The iPhone And iPad: Getting Started

Advertisement

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.

I know that most discussion about the iPhone OS platform centers on native applications. But you can still create powerful, native-looking applications using HTML, JavaScript and CSS. This article focuses on three phases of building and optimizing your website: design, coding and testing.

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:

  1. No Apple approval process or red tape, which is especially important given the terms of service dispute1 going on right now.
  2. Optimizing your Web app for other popular platforms like Android and Blackberry with the same code is much easier.
  3. You don’t have to learn Objective-C.
  4. If you’re charging users, you don’t have to share revenue with Apple.
  5. 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:

  1. No presence in the App Store.
  2. Installing the app on a device is a little trickier.
  3. No access to some of the features that are native to the iPhone OS, such as push notification and GUI controls.

Design

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.

Inspiration

Not many people know that Apple has a “Web apps2” section on its website, which is dedicated to showcasing optimized websites.

Apple Web apps
Featured Web app on the Apple website

There are also some galleries elsewhere that showcase the finest in mobile Web design:

Paper

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
Notepod8 is great for sketching out rough ideas for the iPhone and iPad.

Digital

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 OmniGraffle15, but sometimes diving straight into Photoshop makes sense. Either way, these tools are a huge help in making it happen.

iPad GUI
iPad GUI16 preview from Teehan + Lax.

Hungry for more? This article24 has a good rundown of additional design tools.

Coding

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.

Education

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 Applications25
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 Guidelines26
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 Guide27
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.

Preparing Your Web Content for the iPad28
This document provides tips on testing your website on the iPad, but its discussion on browser detection isn’t as detailed as I would like.

Browser Detection
David Walsh provides good examples of proper browser detection for the iPad29 and for the iPhone30 on his blog. Options for PHP and Javascript are included.

Detecting iPhone Window Orientation31
This iPhone development tutorial from Nettuts provides a good example of how to vary style sheets according to the iPhone’s orientation.

Detecting iPad Window Orientation
Detecting iPad’s window orientation is much easier. Here’s what the code looks like (no JavaScript required):

<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

jQTouch

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 website32, and go to the demo website33 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:

Testing

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.

Liveview

Liveview

Liveview37 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

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 SDK38 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 environment39 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?

PhoneGap is a game-changer for Web developers. If you would rather create your app in HTML, CSS and JavaScript but want it to run natively and have it be available in the App Store, then PhoneGap is the solution40. It’s an open-source development tool that not only compiles your code for native use on the iPhone OS but also works for Android, Palm, Symbian, Windows Mobile and Blackberry devices.

PhoneGap also steers clear41 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 apps42 that are built with PhoneGap to learn more.

Feeling Overwhelmed?

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:

Mobify
Mobify4443 is a great alternative if you don’t care to build from scratch.

Conclusion

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!

(al)

Footnotes

  1. 1 http://www.develop-online.net/news/34473/Apple-Control-freak-or-quality-catalyst
  2. 2 http://www.apple.com/webapps/
  3. 3 http://www.apple.com/webapps/
  4. 4 http://www.mobileawesomeness.com
  5. 5 http://www.cssiphone.com
  6. 6 http://wellplacedpixels.com/
  7. 7 http://www.apple.com/iphone/apps-for-iphone/
  8. 8 http://notepod.net/
  9. 9 http://notepod.net/
  10. 10 http://appsketchbook.com/
  11. 11 http://www.pixelpads.com/PixelPads_I_Features.html
  12. 12 http://www.uistencils.com/products/iphone-sticky-pad
  13. 13 http://apress.com/book/view/9781430228233
  14. 14 http://fullofdesign.com/posts/iphone-app-wireframe-template/
  15. 15 http://www.omnigroup.com/products/omnigraffle/
  16. 16 http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
  17. 17 http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/
  18. 18 http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
  19. 19 http://www.designerstoolbox.com/designresources/iphone/
  20. 20 http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
  21. 21 http://www.morford.org/iphoneosdesignstencil/
  22. 22 http://graffletopia.com/categories/iphone
  23. 23 http://speckyboy.com/2010/04/30/iphone-and-ipad-development-gui-kits-stencils-and-icons/
  24. 24 http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/
  25. 25 http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007900
  26. 26 http://developer.apple.com/iphone/library/documentation/General/Conceptual/iPadHIG/Introduction/Introduction.html
  27. 27 http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP40002079-SW1
  28. 28 http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html
  29. 29 http://davidwalsh.name/detect-ipad
  30. 30 http://davidwalsh.name/detect-iphone
  31. 31 http://net.tutsplus.com/tutorials/tools-and-tips/learn-how-to-develop-for-the-iphone/
  32. 32 http://jqtouch.com/
  33. 33 http://jqtouch.com/preview/demos/main/
  34. 34 http://code.google.com/p/jqtouch/wiki/GettingStarted
  35. 35 http://building-iphone-apps.labs.oreilly.com/ch04.html
  36. 36 http://philippbosch.de/talks/jqtouch/
  37. 37 http://www.zambetti.com/projects/liveview/
  38. 38 https://daw.apple.com/cgi-bin/WebObjects/DSAuthWeb.woa/wa/login?appIdKey=D635F5C417E087A3B9864DAC5D25920C4E9442C9339FA9277951628F0291F620&path=%2F%2Fiphone%2Findex.action
  39. 39 http://www.project83.com/blog/how-to-test-iphone-websites-locally-with-the-iphone-simulator/
  40. 40 http://phonegap.com/
  41. 41 http://www.phonegap.com/2010/04/14/phonegap-and-the-apple-developer-license-agreement/
  42. 42 http://phonegap.com/projects
  43. 43 http://www.mobify.me/
  44. 44 http://www.mobify.me/
  45. 45 http://m.smashingmagazine.com
  46. 46 http://wapple.net/
  47. 47 http://www.mofusepremium.com/
  48. 48 http://gomobiten.com/

↑ Back to top Tweet itShare on Facebook

Nick Francis builds websites with an outstanding team at Project83 in Nashville, Tennessee. He also co-founded Brightwurks that created web apps Feed My Inbox and Linkpatch, along with mobile website gallery Mobile Awesomeness.

Advertising
  1. 1

    The conclusion is just false. Apple fanboysh

    0
  2. 52

    Creating a separate mobile version of website isn’t good enough. There are drawbacks.
    There is a simple solution of making websites compatible with both – desktop and mobile browsers. See MobilizeToday.com (http://www.mobilizetoday.com)

    0
  3. 103

    Wow! What a wealth of info… I’ve done some work developing HTML/CSS for websites on mobile devices, and used many of the things here. Plus, you introduced me to some new ones which seem really helpful.

    It will be very interesting to see where the pendulum swings: to webapps or native apps. Go webapps!

    0
  4. 154

    Fantastic overview and really useful links; thanks for the article!

    0
  5. 205

    Anyone else notice 420 on the iPad? no?

    0
  6. 256

    Chicken Hero Defender

    June 9, 2010 2:55 pm

    Cool. Inspired and very useful.

    Thanks

    0
  7. 307

    you can have a look with your ipad, iphone or ipod touch on this link:
    http://www.smartcoyote.com/ipad

    it’s a small demo made as a “web iphone appli” with mysql connect queries.

    0
  8. 358

    what the duck?
    all people knows that Nokia and Symbian are leaders in smartphone market!

    0
  9. 409

    ipad got so many problems,but still can’t stop people buying.
    Why?
    I guess just outlooking attract many,and some Personalize setting make you more comfortable.
    Specially,it never similar with any others,so if you are conditioned to use Apple stuff,you are in.

    0
  10. 460

    Do you have any JQuery plug-in for iPad? For example, book fliping.

    0
  11. 511

    Thank you for this informative article! I’m thinking of offering this kind of service for my clients and this will be my starting point.

    0
  12. 562

    Many thinks for sharing this! This will be an excellent start point for my iPhone web development.

    0
  13. 613

    Good article.
    But I want to say that using HTML and JS to develop Apps is not so simple, and you must plan a lot of debug hours… and many hassles…
    I’ve tried a less heroic way, but robust and simpler: working on PDF and adding multimedia to it (see pdftoipad.net).
    If you are planning a real interactive App it is actually frustrating, but if are planning a Magazine App, it works:
    You can continue to work with your favorite software, like InDesign, and focus you on the contents, planning where to insert slide-shows, video, or other things

    0
  14. 664

    Incircle Media

    June 8, 2011 4:12 am

    Excellent tuts and guideline. It is perfect guide line for beginners as well as experts.

    Thanks to share.

    0
  15. 715

    A great resource to learn at least the basics of iPad / iPhone development is the following tutorial :

    infiniteskills.com/training/learning_to_build_apps_for_iphone_ipad.html

    This is how I got started, it does include some very basic coding, but in the main the lessons are quite easy to follow and come with working files. Not really aimed towards the more advanced programmer, but a great resource to help get started. Just my 2 cents worth.

    0
  16. 766

    I wonder why Smashing Magazine has dropped their mobile website with Mobify? At least when I try to visit m.smashingmagazine.com from iPhone I am forwarded to the main site.

    0
  17. 817

    Excellent guideline, Thanks

    0
  18. 868

    Wow, I really like these notepads. Giving your ideas on paper first seems odlfashioned, but it really works. You feel more connected to the things in your head.

    0
  19. 919

    Firebug lite and a few other handy tools in iDebug for iPad:
    http://itunes.apple.com/us/app/idebug/id525956537?mt=8

    0
  20. 970

    Super Cool insight on iPad and iPhone web design and development. The Galleries and Design tools are excellent resources. Thank you!

    Alex
    Isadora Design – Professional Web Design Studio

    0

↑ Back to top