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

[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

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 apps” section on its website, which is dedicated to showcasing optimized websites.

Featured Web app on the Apple website

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

• Apple Web Apps Listing
• Mobile Awesomeness Design Gallery
• CSS iPhone Design Gallery
• Well Placed Pixels
• Apple App Store (Even though these are native apps, you can find great visual inspiration here.)

Read more…

(No Ratings Yet)

 Loading ...

Nick Francis Community, iPhone design, ipad, mobile