Web Development for IPhone and IPad

Today,iPhone operating system takes the 50% of the worldwide

smartphone market. Also with the next highest being android at 24 %

sales projection report next year. Believe it or not iPhone OS and safari,

have turned into a power to be figured with for Web developers.So

now it’s time to adapt the tools required to optimize websites and web

applications for this iPhone operating system.

At present, Safari on iPhone OS is a really great browser, it has some

great interface elements, CSS3 and HTML5 support.We know that the

iOS platform centers on native applications but you can still create a

robust native looking apps using HTML, JavaScript and CSS.

Here, we have presented three stages of building and optimizing your

website design and tools to create web experience on the platform

which is currently dominating the mobile world.

Before we proceed lets discuss Advantages and Disadvantages of

building a Web app instead of a native app:

No Apple approval process or red tape has given the terms of service

dispute going on right now.

Optimizing your Web app for other 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.

Disadvantages:

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.

Design

INSPIRATION

Apple has a “Web apps” section on its website

PAPER

Using paper prototyping for wire framing new ideas is a great choice.

You can deal with the size and dimensional constraints that you’re

dealing with.

Notepod is great for sketching out rough ideas for the iPhone and iPad.

App Sketchbook

UI Stencils sticky pads

Apress iPhone Application Sketch Book

DIGITAL

Now if your design is ready, we can move to the desktop and get

specific.

iPad GUI PSD (Photoshop)

Layered iPhone GUI elements (Photoshop), from Designer’s Toolbox

iPad and iPhone stencils; see more at Graffletopia (OmniGraffle)

iPhone and iPad Development GUI Kits, Stencils and Icons

Coding

when start coding , know how the browser works on iPhone,

iPhone Human Interface Guidelines for Web Applications

iPad Human Interface Guidelines

Safari Web Content Guide

Testing

This is the most critical part in any web development process.

Liveview is a really clever testing tool

Hopefully the above article will help web developers to express their

creativity while building a web app for iPhone or iPad.