subject: Web Apps For Ipads: Design Them Judiciously [print this page] The iPad application development has created a mile stone by introducing iPad web applications. This feature enables the use of ipad or web device in a flexible way by bypassing the App Store altogether. This short article covers few ideas about designing web apps for iPad. The technology of iPad web apps facilitates the easy access to e-mail, playing of games and reading news without connecting to the app store, downloading files or paying a penny.
Creating a Functional App/Website for the iPad
The road blocks in the creation of functional app/website for the iPad are:
Objective-C coding language
Time constraints and
Having to deal with the infamous Apple App Store.
Need of creating a web app for the iPad
In iPad, web apps are created mainly for personal use, as it is far better than the App store and other paid apps. The news aggregating app helps the people busy in business or finance by providing them up to date news.
Start with a functional goal
An iPad app must be created as such it is valuable to the end-user. The functional goal of iPad apps development can be understood by putting forward following questions:
What do you want your iPad app to accomplish?
Who will use your iPad app?
What needs are you trying to fulfill for your users?
Create ideas for the workflow
First of all ideas for the workflow must be preferred.
Some tips for iPad are:
Create all designs at 768px x 1024px
iPad displays both in portrait and landscape mode
Always note where scrolling is needed
Use native iPad GUI elements
Cautions regarding iPad resolution
The native screen iPad resolution (768 x 1024) will look bigger on computer monitor, which put forward some issues with sizing and needs experimenting with typography.
Limitations in developing an iPad
Some limitations are given below:
No flash
iPad cannot display Flash objects.
No mouse cursor
This means that mouse events, such as mouse-over and hover events, are not possible.
Scrollbars dont act as expected
Scrollbars are not displayed for scrollable divs with overflowing content.
Frames have height/width issues.
In addition, scrolling requires two-finger gestures.
No CSS fixed positioning
HTML elements with the position:fixed CSS property will not cannot be controlled properly and requires some other fixes.
Using fingers
The difference between browsing on computer or laptop and browsing on iPad is that you get to use your fingers.
Setting size of the viewport
Viewport determines how content is laid out and where text wraps on the page when viewed on iPad.
To set the dimensions of the viewport, add the meta markup inside your tags:
Controlling touch scrolling with iScroll
Scroll does not scroll content inside a fixed width/height element.
This situation prevents any web app to have a header or footer with a position: absolute CSS property, and a scrolling central area for contents.
The iScroll code base is extremely easy to work with.
"Add to Home Screen"button
Adding an icon similar to a native apps looks facilitates the user to add the app to the home screen. To customize this icon, you can link it in the tags using the following code.
HTML5 and CSS3
HTML5/CSS3 improves the web experience for everyone.
The things that helps to take advantage of the emerging standards:
CSS3 gradients, font shadows, rounded boxes and borders are useful for menus and simple website designs.
HTML5 video player to show videos.
HTML5 to create offline apps and store data offline.
Tutorials for these kinds of functionalities are everywhere.
Keep moving forward
If things dont work as planned, find a creative alternative.
Awareness
Web apps are not as popular as native apps.
Native iPad Apps vs. iPad Web Apps
Many argue that web apps are the future and will quickly outperform their native counterparts; this is because the openness of the web is more appealing than closed platforms.
Native iPad Application Development
Are faster
No need to search the web
Users feel comfortable
Easier to turn on and off
Requires knowledge of Objective-C and use of Apple SDK for development.
Closed Platform: difficult to adapt for other devices like the Android platform.
iPad Web Apps
Emerging coding standards: HTML5, CSS3, JavaScript brings incredible functionality to the web; especially with local/offline storage.
Tailor the site for any browser: switch between style sheets or redirect pages depending on which device or browser your user is operating. It is possible to make your app universal.
Easy to develop: Use HTML, CSS and JavaScript to create iPad web apps instead of learning new languages. These are skills you already have.
Steve Jobs cant censor your web app: The web is an open platform meaning that you are in control. No waiting to get approved by the App Store.
Small market, not enough support.
Conclusion
iPad web apps are designed to look and feel just like the apps downloaded from Apple. What draws people to web apps is that not only can you use them on your iPad, iPhone, iPod Touch but also on any type of device that uses a web browser.
