Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Web Development For The iPhone And iPad: Getting Started

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 Link

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 Link

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 Link

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

Digital Link

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
iPad GUI preview from Teehan + Lax.

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

Coding Link

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 Link

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.

Preparing Your Web Content for the iPad21
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 iPad22 and for the iPhone23 on his blog. Options for PHP and Javascript are included.

Detecting iPhone Window Orientation24
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 Link

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 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:

Testing Link

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 Link

Liveview

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 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 solution31. 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 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:

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

Conclusion Link

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 Link

  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.apple.com/iphone/apps-for-iphone/
  6. 6 http://notepod.net/
  7. 7 http://notepod.net/
  8. 8 http://appsketchbook.com/
  9. 9 http://www.pixelpads.com/PixelPads_I_Features.html
  10. 10 http://www.uistencils.com/products/iphone-sticky-pad
  11. 11 http://apress.com/book/view/9781430228233
  12. 12 http://www.omnigroup.com/products/omnigraffle/
  13. 13 http://www.designerstoolbox.com/designresources/iphone/
  14. 14 https://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
  15. 15 http://graffletopia.com/categories/iphone
  16. 16 http://speckyboy.com/2010/04/30/iphone-and-ipad-development-gui-kits-stencils-and-icons/
  17. 17 http://iphoneized.com/2009/11/21-prototyping-mockup-wireframing-tools-iphone-app-development/
  18. 18 http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007900
  19. 19 http://developer.apple.com/iphone/library/documentation/General/Conceptual/iPadHIG/Introduction/Introduction.html
  20. 20 http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP40002079-SW1
  21. 21 http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html
  22. 22 http://davidwalsh.name/detect-ipad
  23. 23 http://davidwalsh.name/detect-iphone
  24. 24 http://net.tutsplus.com/tutorials/tools-and-tips/learn-how-to-develop-for-the-iphone/
  25. 25 http://jqtouch.com/
  26. 26 http://jqtouch.com/preview/demos/main/
  27. 27 http://building-iphone-apps.labs.oreilly.com/ch04.html
  28. 28 http://www.zambetti.com/projects/liveview/
  29. 29 https://daw.apple.com/cgi-bin/WebObjects/DSAuthWeb.woa/wa/login?appIdKey=D635F5C417E087A3B9864DAC5D25920C4E9442C9339FA9277951628F0291F620&path=%2F%2Fiphone%2Findex.action
  30. 30 http://www.project83.com/blog/how-to-test-iphone-websites-locally-with-the-iphone-simulator/
  31. 31 http://phonegap.com/
  32. 32 http://www.phonegap.com/2010/04/14/phonegap-and-the-apple-developer-license-agreement/
  33. 33 http://www.mobify.me/
  34. 34 http://www.mobify.me/
  35. 35 http://m.smashingmagazine.com
  36. 36 http://wapple.net/
  37. 37 http://www.mofusepremium.com/
SmashingConf New York

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.

↑ 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.

  1. 1

    Nice!

    0
  2. 2

    Inspiring. :)

    0
  3. 3

    This is exactly what i needed :) Im working on a new web app, and I see an iphone/ipad version in my future. Thanks!

    0
  4. 5

    An other great development platform for creating native iPhone, iPad, Android and Blackberry apps just programming in javascript is Titanium Appcelerator

    0
  5. 6

    Nick – you’re wrong regarding 2 very important points:

    1. you can access ALL hardware features with a web app
    2. you can put your web app on the app store

    To do so you need to use a open source framework (not only for iPhone/iPad, it also works for Android, etc) called Phone Gap,it gives you JS methods to take advantage of all hardware features that are accessable by native apps.

    Phone Gap also allows you to make your web app a native app that you can submit afterwards.

    There are hundreds of web apps using Phone Gap in the app store.

    To get a good glimpse on the whole process of developing rich iphone web apps without objective c I highly recommend Jonathan Stark’s “Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa”

    just my 2 cents

    0
    • 7

      Hi maik – It is true that the frameworks like Phone Gap and Appcelerator’s Titanium are great. I personally started to play with Titanium with some success. I don’t think that it gives access to ALL hardware features though. The example that comes to my mind is bluetooth. I don’t think it is available in Titanium’s API yet, is it in Phone Gap?

      0
      • 8

        Hi Regis,

        without Phone Gap you can access the maps app only, with phone gap the accelerometer, magnetometer, vibrations, sounds, alerts, geo location, camera, offline database & caching, gesture, multi-touch – think Bluetooth is on the roadmap – you can get a good overview from this table:
        http://phonegap.pbworks.com/Roadmap

        0
      • 9

        Be careful with using PhoneGap or similar layer frameworks, as Apple recently changed the developer guidelines (Section 3.3.1). Using such frameworks could result in a rejected app!

        0
    • 10

      Nick Francis

      May 28, 2010 9:46 am

      @malik – keep reading the article :-). The section called “Phone Gap: The Best of Both Worlds?” mentions this. However, PhoneGap doesn’t provide ALL native functionality that coding with Objective-C does. I still think it’s great though.

      @Regis and @Gadgetto – PhoneGap is A-OK with the new terms of service and Titanium is not. I wouldn’t be building anything with Titanium, as last I heard those apps will no longer be acceptable.

      0
  6. 11

    Also check out iWD: http://www.mgateway.com/iwd.html

    There’s a pretty cool YouTube video that demonstrates an iWD iPhone App being developed in 7.5 minutes! http://bit.ly/cf6Bm6

    0
  7. 12

    In Titanium Appcelerator u can not only write in JavaScript, HTML & CSS, but also in Python, Ruby, and PHP

    http://www.appcelerator.com/showcase/

    0
  8. 13

    Really nice article covers iPhone app. I really like a concept of developing a mart-phone app without knowing its language.. It would be much better to just build on css, xhtml and php.

    It’s worth checking out appcelerator.com as well.

    0
  9. 14

    Christopher Campbell

    May 28, 2010 4:58 am

    Brilliant article. I love the Notepad. Might have to buy one of those :)

    0
  10. 15

    Christopher Anderton

    May 28, 2010 5:02 am

    While i am on a Mac, i just wanted to say, that the Apple iPhone/iPad SDK is Mac-only. So if you looking for a simulator for Windows, you have to look for another solution.

    0
  11. 16

    Igor Faletski

    May 28, 2010 5:02 am

    Hey guys, thanks for the shout out! Great article – we’re looking forward to a lot of great mobile websites from everybody

    Igor from Mobify

    0
  12. 17

    Useful Article! Dinamo Riga Champions!

    0
    • 18

      Not to shoot the pretty good article down, but is it not so, that the fastest growing smartphone os is by far Android?

      Furthermore I have problems with seeing the magic of the ipad besides its overprice..as clumsy a tool as your random laptop with very lowclass hardware. For a high price.

      To just assume it will be huge before we see any effect of it does not seem sensible but rather as public relations..

      Safari is NOT an excellent browser on the iphone..its slow and buggy in comparison.

      I dont buy the reasons to start this area. As little as I would buy another iPhone.

      0
      • 19

        Nick Francis

        May 28, 2010 9:51 am

        @Dennis – I believe Android is now the fastest growing platform now … it’s just a bit different because many devices use it, but you are correct.

        I’m capable of an objective opinion about Apple and I really like my iPad for about 100 reasons I won’t get into. I know many people aren’t happy with Apple’s decisions lately, but most of them are good for the long term and for web developers IMO. Even if you don’t like the iPad, it’s something we as web developers should pay attention to since it’s selling a reported 200k units per week.

        I would argue with your comment about Safari. I think Webkit is great (great enough for Google too). I don’t ever see bugs with it on the iPhone OS.

        0
        • 20

          Thanks for the reply!

          The iPad-discussion can offcourse be had in one of a million ways or more, I just find the kneeling before it in a shrinelike manner to be utterly annoying. My laptop works perfectly and is way easier to use (if you want to do something with the thing that actually demands typing…)

          Webkit is a good thing, I agree on you there, but the all-knowing (;P) people on Apple must have done SOMETHING with the way they’ve wrapped it in the browser cause I’ve always found browsing in general a bit tedious and slow. (http://korta.nu/speeds provides SOME numbers)

          Obviously I am missing something here, concerning Apple. A million flies…sorry, design-interested people, cant be wrong, right? :)

          I do agree with you that webdesign in general need to be on its toes concerning future and development. I just think its way too soon to say anything regarding the iPad. Reading books and papers is NOT going to be easier and more eye-friendly on a 9 inch screen than on a 20 inch lcd. For instance.

          Might be famous last words, but I am totally sure that the iPad will not be an item that we even talk about in a few years time. ;)

          That said I wish you luck. Smashing magazine in general have saved my webdesigner-life.

          0
  13. 21

    Do not let Apple and other evil companies to dictate direction and way of web development,
    the way of design, and the way of lookin at the world around us.

    0
  14. 23

    Thanks for the article. It will be a great help when I start designing for mobile devices.

    0
  15. 24

    i’m with Jurica. There should be a nice cross-platform way of web developing for mobiles. Android, Symbian, iPhone… they are all little computers. No APIs for just a brand. Please web develop for every gadget. It can be done.

    0
  16. 25

    Remi Grumeau

    May 28, 2010 6:15 am

    Perhaps people could use some clarifications and tips here.

    First, iPhone is definitely not 50% of the smartphones market worldwide. What i have here is 34% for iPhone, 28% for Opera and 18% for Nokia webkit browser. 50% is for north america (Blackberry at #2 w/ 22%).

    Second, JQTouch framework (if you don’t know JQuery, i’d rather go iUI…) are good for webapps… but not for mobile websites. Why? Direct linking! Simple case study: fact 1: Facebook is driving more traffic than Google since 2010 Q1 in USA. Fact 2: 1 connection on 4 to FB is via a mobile (smartphone or feature phone). Fact3: people “share” deep links in it. Fact 4: Anchor-style navigation of those frameworks brings you back to its homepage. So go to http://jqtouch.com/preview/demos/main/ and click on the first two links. Refresh. Oh god, back to the homepage! So if you share a specific page of a website, let say ” home / page_1 / subpage_1 ” on FB, and one of your friend click on the link using a smartphone with those framework automatically switching to this mobile version, he/she will go down to the site homepage … which, you’ll be agree, makes nosence. (Ex: http://jqtouch.com/preview/demos/main/#edge is first two links). Not to say that it will not work for 30% of worldwide mobile users, and neither BB users (since BB do not support HTML5 yet).

    No direct links. So what Google will think about that? In fact … nothing. And desktop version of your site will not help in SEO neither since the direct link in Google will bring the mobile user to … the homepage of the mobile website. Fail.
    So if you just want to create a webapp for iPhone and Android, JQTouch (or again, iUI or WebApp.net) will do the job. Otherwise, you should really think twice and if still focusing on iPhone/Android rather take a look at things like iWebKit, or if you really want a full SEO+Nokia+BB+Opera(mini and mobile)-friendly solution go for a plain xHTML/CSS2 website using % for width (and why not use a platform detection JS to switch CSS files between tablets/large screen smartphones/BB/feature phones and use JS or not.

    Last but not least: Tablets.
    With on million iPads sold only in USA and it’s availability in Europe (good to know: iPhone market share in Europe is 50% too) today, HP to (probably) switch to WebOS for its next tablet and Samsung/Acer/Dell/… to go Android for theirs, the tablet market is not to forget. Go back to my Second step here since it’s the same issue for direct links from Digg, Twitter, FB, … even email! What happens if you send a newsletter with dozens of links and your visitors to be redirected to the homepage on each ones?!

    Good to know: Apple does not include webapps in the App Store in iPhone/iPad. So you can submit your webapps to apple.com, but well… users simply don’t go to apple.com/webapps :)

    Cheers,
    Remi

    0
    • 26

      James Tupper

      May 29, 2010 2:36 pm

      I’d be surprised if iPhone is really 34%. Blackberry still dominates the US market, and Android has been getting close to iPhone’s market share.

      Thanks for at least clarifying that the 50% thing is bogus though. This article really needs an edit.

      0
  17. 27

    Chris Tanner

    May 28, 2010 6:18 am

    Over at teehan+lax we just released the iPhone Sketch Elements AI, perfect for mocking up app flows.

    http://www.teehanlax.com/blog/2010/05/17/iphone-sketch-elements-ai/

    0
  18. 28

    why to create a web app if (based on this article) it has: No presence in the App Store. makes no sense.

    0
  19. 29

    Cool, thanks for mentioning mobi10. Awesome article, mobi10 is built using django and we will be adding QR code support soon. check us at http://mobiten.com

    Leon from mobi10

    0
  20. 30

    SteveJobsIsNotJesus

    May 28, 2010 6:28 am

    Like the article, like the Apple products (some of them) but don’ like the way Apple treats the developer community.

    0

↑ Back to top