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 topShare on Twitter

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

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1
  2. 2

    Inspiring. :)

  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!

  4. 5

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

  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

    • 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?

      • 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

      • 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!

    • 10

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

  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

  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/

  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.

  9. 14

    Christopher Campbell

    May 28, 2010 4:58 am

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

  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.

  11. 16

    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

  12. 17

    Useful Article! Dinamo Riga Champions!

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

      • 19

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

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

  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.

  14. 23

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

  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.

  16. 25

    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

    • 26

      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.

  17. 27

    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/

  18. 28

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

  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

  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.

  21. 31

    Dennis Spencer

    May 28, 2010 6:48 am

    Thank God for this article!!!

  22. 32

    It’s very useful for me,thanks!

  23. 33

    Great post-
    When will I find a step by step guide for a beginner to start and to create web, iPhone/iPad, Anroid apps ?
    I know there is tons of stuff online but it just takes you from one web page to another. There is something always missing. I am a web designer and would really like to get myself started on Mobile design. Suggestions please.
    Thanks!

  24. 34

    More people use IE6 than these devices. I yawn in your general direction.

    • 35

      Tai you are living in the past. We both know this is changing rapidly and won’t be the case within a year. If you build websites, it’s in your best interest to optimize for devices like this, whether you like Apple or not; just like it’s in your best interest to optimize for IE6 until people stop using it.

      • 36

        WallMountedHDD

        May 29, 2010 1:19 pm

        @Nick, you couldn’t be more subjective and basically wrong. Especially about the IE6 bit. If you keep supporting it, it’ll only linger longer. Eventually enough is enough, and you have to take the baby’s bottle away to force it to grow up. If you wanna support it because you’re an anal retentive, obsessed with technical correctness, semantic-loving, buzzword slinging elitist then fine. Cool. But not if you just think it should be supported cause it’s there and it’s our “duty.” Bull.

        • 37

          Reputable studies like this one (http://news.cnet.com/8301-17939_109-10231713-2.html) show that 60% of companies in America are still using IE6 as their browser of choice. Pretty much everyone using it doesn’t have the choice to upgrade for one reason or another. Refusing to optimize for it without looking at the numbers is more “elitist” in my opinion.

          Of course it’s always the developer’s choice, but our company supports IE6 if more than 5% of incoming traffic is using it because I think it’s what we’re being paid by the client to do. If incoming traffic is less than 5% we don’t typically worry about it.

  25. 38

    Wow this is a really helpful article. I’m about to begin working with a developer on our first app and I truly did not want to buy a “dummies” book. I may still, but this will keep me busy for quite some time. Thanks!

    And Tai, more people do a lot of things… like eat. And smoke. Designing and developing web sites for IE6 users is important, but if you’re a designer or developer you have to embrace new technology and methods. Adapt buddy, adapt.

  26. 39

    Such a great article. Exactly what I was looking for.

  27. 40

    A note about the future. My HTC Desire can render webpages just perfectly. No need for any particular optimization. ;)

    • 41

      Christopher Anderton

      May 28, 2010 11:43 am

      I think you are missing the point Dennis. It’s about the screen size, not if the browser can render webpages perfectly. You don’t optimize print CSS as you do for regular webpages do you? ;)

      • 42

        WallMountedHDD

        May 29, 2010 1:23 pm

        @Christopher, I think the point Dennis indirectly tried to make is that web developers shouldn’t stress to make their sites phone optimized (which severely limits what they can do unless they make a mobile sister site, like many do, which means making two sites for every site you make). It’s a matter of us not bending to phones, but phones bending to us. Phones should be made to accommodate our websites.

  28. 43

    Another disadvantage, depending how you look at it, could be no flash support. Something to consider when creating your web app as opposed to a native app.

  29. 44

    Now this is nice! I love the Notepad.

  30. 45

    Vladimir Grichina

    May 28, 2010 2:54 pm

    We are also making sketchbook for prototyping iPad apps on paper — http://www.ipadsketchbook.com/.

    Would be nice if you include it in the post, I think it is not less relevant than notepod or appsketchbook.

  31. 46

    Thanks for the post. I’ll add one thing to the disadvantages though: apps that are forced to require frequent server connectivity to retrieve data because that data can’t be stored in a local/client database are not well suited for iphone web apps.

  32. 47

    Matthew James Taylor

    May 28, 2010 7:20 pm

    Wow, some great tools here that I didn’t know existed.

    I made an iPad CSS layout that changes design when rotated if anyone is interested:
    http://matthewjamestaylor.com/demos/ipad-css-layout/index.html

    I think there is going to be a huge wave of useful iPad and iPhone web development tools now the iPad is out. It’s an exciting time :)

  33. 48

    Nice article. Now I have no excuse for making my own app. Thanks!

  34. 49

    F***CK the iphone , bring on some Android Articles

  35. 50

    fyi. tumblr built sites do this automatically.
    But lots of good reads here. Thank you.

  36. 51

    WallMountedHDD

    May 29, 2010 1:16 pm

    Considering most people I know outside of the US and some parts of Canada say the iPhone craze is pretty much all us, I find “iPhone operating system makes up 50% of the worldwide smartphone market” hard to believe.

    p.s. I too am sick of all the special attention the iProducts get. Make it “how to make mobile sites,” and not just iPhone-centric stuff.

    • 52

      I’d like to clarify the 50% worldwide market statistic in the article. As the article says in the beginning, these figures are according to AdMob (owned by Google now), one of the foremost authorities on mobile analytics. AdMob reports are slanted towards mobile web browsing (not overall mobile handset usage), as all the impressions on their network are from web traffic. However, as web developers that’s the kind of data we’re looking for anyways.

      According to the AdMob Mobile Metrics Report from March, 2010 (available here- http://metrics.admob.com/2010/04/march-2010-mobile-metrics-report/), the iPhone OS makes up 46% of worldwide operating system share. The previous three months it was at 50% or higher. That’s where the number comes from. It’s much more accurate than a Google search as James suggests.

      This article was written prior to the April report being released, but the share went down to 42% in April. Android has been 24-25% all three months. Android is only picking up significant OS market share in the US, which is where they now outnumber the iPhone OS.

      Even if the number is 42% worldwide, the iPhone OS is a big player in the mobile market and will remain as one. That’s where the best mobile design is being done, which is why we’re talking about it more. Android will get there eventually.

  37. 53

    You REALLY need to clarify that 50% market share thing. That has to be skewed, a lot. And that really changes the purpose of this article.

    Please do a quick Google search for ‘world smartphone market share’ before posting such an important piece of information.

  38. 54

    Here is another great example of an web based iPhone app:

    http://www.deliciousdays.com/recipeshelf/

    Surely, it’s primarily for cooks, like myself, but it works awesome and the final version with its offline mode, works indeed like local app. Amazing.

  39. 55

    50% market share is a blatant lie. Where did you pull that info off? This is why I don’t like apple fanboys.

  40. 56

    Thanks is not enough.
    Many many many thanks!!!!!!!!!

  41. 57

    Hey Nick, do your research! “Android operating system continued to shake up the U.S. mobile phone market in the first quarter (Q1) of 2010, moving past Apple to take the number-two position among smartphone operating systems.”

    http://www.npd.com/press/releases/press_100510.html

  42. 58

    For anyone worried about Flash on the iPhone chech out this nifty article:

    Smokescreen makes Flash content visible on iPhone and iPad (video)
    http://alt.engadget.com/2010/05/30/smokescreen-makes-flash-content-visible-on-iphone-and-ipad-vide/

  43. 59

    Thaaank you sooooooooooooooooooooo much

  44. 60

    Great Post, thankx alot

  45. 61

    Well I find this article not finished, I feel like reading newspaper, like a general topic.. It is not so deep and to my mind it is just a type of “to be continued” article.
    At this point you could make article not only for iphone/ipad but also for other market players, it would start the same, but the “coding” section would be bigger. No offence.
    To my mind everybody try to cut each other throats in comments because of one simple thing – we know/feel that current domination of apple will come/is comming to an end.

  46. 62

    Hi there.

    Another useful tool in creating mobile websites is iWebKit (http://www.iwebkit.net).

    – Simon.

  47. 63

    ah thats great

  48. 64

    @mangopudding: Chrome is not allowing me to see iwebkit website because it could harm my computer!

  49. 65

    Woow…great tips. Notepod looks awesome, i will definitely try it out.
    There is a nice resource on how to build iPad apps with iPhone SDK at http://ipadappsplus.com/ipad-apps/how-to-create-ipad-apps/

  50. 66

    @Benjamin: That’s because the website is blacklisted; it doesn’t actually contain any kind of malware, virusses etc. It’s an awesome framework, and most of the webapps of the iPhone/iPod touch are litterally made with iWebkit.

  51. 67

    The conclusion is just false. Apple fanboysh

  52. 68

    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)

  53. 69

    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!

  54. 70

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

  55. 71

    Anyone else notice 420 on the iPad? no?

  56. 72

    Chicken Hero Defender

    June 9, 2010 2:55 pm

    Cool. Inspired and very useful.

    Thanks

  57. 73

    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.

  58. 74

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

  59. 75

    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.

  60. 76

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

  61. 77

    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.

  62. 78

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

  63. 79

    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

  64. 80

    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.

  65. 81

    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.

  66. 82

    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.

  67. 83

    Excellent guideline, Thanks

  68. 84

    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.

  69. 85

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

  70. 86

    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

↑ Back to top