Developing a web app for iPad with HTML5, CSS3 and JavaScript

Developing a web app for iPad is surely of the most interesting and stimulating topics currently discussed on the web. I'd like to share some insights on the latest web app I'm developing for my web agency. Some of the following notes might shock you, so you're warned.

It's all about meta tags

Most of the main layout and rendering aspects of a web app for mobile can be actually controlled by some new meta tags invented for the iPhone and iPad devices (and other mobile devices).

For example, the following meta tag puts the app in standalone mode and in full-screen mode:

<meta name="apple-mobile-web-app-capable" content="yes" />

Instead, another meta tag prevents users from zooming the page and blocks the zoom when you change the device orientation:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

For a complete list of available meta tags see the Apple's documentation.

Setting a dock icon

To set a dock icon for your app simply use:

<link rel="apple-touch-icon" href="ipad_icon.png"/>

Icons should be 72 x 72 pixels wide.

Houston, we got HTML5

Web apps are usually coded in HTML5. This means that you can use all the latest features of this standard without worrying too much about backward compatibility and browser quirks.

For example, try the following code and see how Safari for iPad handles it:

<input type="email" required="required" name="email" id="email" />

CSS at its full potential

You can use all the latest and supported features of CSS3, including animations and media queries. In that vein, media queries are really useful for applying specific styles to the different orientation modes of the device (namely portrait and landscape):

@media only screen and (orientation:landscape) {

	#app { width: 1024px; }

}

@media only screen and (orientation:portrait) {

	#app { width: 768px; }

}

Some CSS3 features replace entirely JavaScript under many aspects. You got animations:

@-webkit-keyframes pulse {
    0%   {-webkit-transform: scale(0); opacity: 1;}
    10%  {-webkit-transform: scale(1);opacity: 0.5;}
    50%  {-webkit-transform: scale(1.75);opacity: 0.8;}
    100% {-webkit-transform: scale(1); opacity: 1;}    
}

.animate {
	-webkit-animation: pulse 3s ease-in-out;
}

And transitions:

div.slide {
	position: absolute;
	left: -30000px;
	width: 100%;
	height: 400px;
	-webkit-transition: all 600ms ease-in;
}

div.slide:target {
	left: 0;
}

plus many other features. You have only to choose your styles.

Last (but not least) JavaScript

Either you choose to write your own code or to use an existing framework (jQuery, jQuery UI, jQuery Mobile, just to mention few), you can finally get rid of all the workarounds required in the past to make your code work consistently across browsers.

Now you can use the standard-compliant W3C DOM at its full potential. And all the latest ECMAScript features supported by Safari.

Are you shocked?