HTML5 Zone is brought to you in partnership with:

Mobile and web 2.0 developer, consultant and speaker. Author of "Programming the Mobile Web" book, published by O'Reilly in 2010. Forum Nokia Champion. Maximiliano is a DZone MVB and is not an employee of DZone and has posted 36 posts at DZone. You can read more from them at their website. View Full User Profile

What iOS 5.1 and the New iPad Mean for Web Developers

03.10.2012
| 5024 views |
  • submit to reddit
The new iPad is here with iOS 5.1. I’ve done the usual research and, mm… there are no much new details to give you. However, the new iPad retina display remembers us some web stuff we should be aware of while creating iPad web experiences.

Safari on iOS 5 and Safari on iOS 5.1 seems to be exactly the same. There is no new APIs, no new stuff supported, same WebKit version; only we have the version change on the User Agent.

However, iOS 5.1 is the first version supporting high resolution iPads. While there is no real devices yet to test on, there are some ideas we need to remember from the iPhone 4 high definition launch and everything goes in the same direction.

Too many pixels

The iPad has a resolution of 2048 x 1536. It’s far away more pixels than we use to have on the web.

Do we need to change our websites for this new resolution? Well, definitely no.

First, remember that more pixels doesn’t mean more visual space to use. Your website will be rendered as in iPad 1 and iPad 2 with the advantage of sharpen text, CSS3 effects and gradients.

We need to remember that since the appearance of iPhone 4 -and also followed by Android- mobile browsers are exposing a virtual resolution to web developers based on the viewport meta tag and/or an attribute called Pixel Ratio. iPad 1 and iPad 2 have a Pixel Ratio of 1. The new iPad has a Pixel Ratio of 2. This value can be accessed though JavaScript using window.webkitPixelRatio or though CSS media queries using -webkit-device-pixel-ratio. 

If we define a div of 500 pixels-wide, it will be really 500 pixels-wide on iPad and 1,000 pixels-wide on the new iPad, unless an special viewport is defined.

High resolution images

Now we know that we will not have problem with text and CSS3 effects. Images is a very different problem. Basically, the new iPad will resize your image. At the end you will not see much difference from iPad 1 or iPad 2. However, if you provide a high resolution alternative the image will become more clear. You can provide alternative images using the Device Pixel Ratio attribute. In case of CSS3, the code should look like:

@media (-webkit-device-pixel-ratio: 2) {
#someContainer {
background-image: url('images-hi/image.png');
}
}


Icons and launch images

 For WebClip icons -those that iOS uses when the user adds our website to the Home Screen- we can leave the current iPad icon -72×72 pixels- or we can provide a high resolution version -144×144 pixeles- using the same code:
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-lo.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-hi.png" />

If you are creating a chromeless app then you may know about apple-touch-startup-image link element. There is no official way to define different sizes on this element. However, a trick using media queries is working for delivering landscape and portrait versions right now so it’s possible to have this working for high resolution images too.

Performance

Wait before looking for high resolution versions of your images. If we think about it, we need an image with four times pixels. That’s a huge difference and the image size will be much higher. What does this mean? Your page will be much slower. Ok, there is a 4G version of the new iPad but that doesn’t mean that the difference will be covered.

Think twice about the value added when delivering high resolution images.

Creating effects and gradients using CSS3 will be much faster. However, large backgrounds tends to use lot of memory. Fortunately, the new iPad comes with more memory and CPU power so hopefully this won’t be a problem.

Maybe it’s time to start looking at scalable solution, such as SVG that will take advantage of the high resolution without harming network performance.

In terms of HTML5 games, we need to wait until having the real device but usually if you want to increase your frame rate sometimes it’s better to provide a smaller viewport, so the game will use less memory -like a iPad 2 emulator- and using hardware accelerated CSS3 transforms we can scale it if we need to. It’s just a thought and a trick that is being used in some Android HTML5 games to gain some frames per seconds.

 

Published at DZone with permission of Maximiliano Firtman, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Paul Shezier replied on Fri, 2012/04/13 - 2:33pm

Great analysis of opportunities both good and bad. Apple puts us in an interesting position, as it is somewhat inevitable that display quality would improve for the web, just as it has for television with HD over the past few years.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.