As we look back to March this year, you probably remember when Apple launched their new iPad. Despite some heating issues it sold quite well. You’re probably familiar with some highlights of the device, especially high-resolution screen.

This brings some interesting challenges for web designers (possible), because the users of the new iPad now have four times more pixels to work with than the users of iPad 2. So web designers may need to start thinking how to use the capabilities of the new high-resolution screens in their designs. Using images of high-resolution is not a big issue, but there is no one “fit-them-all” design as all different devices, especially tablets, have different screen resolutions, even though 1280px wide screen became quite a standard (a screen resolution of majority of good tablets).

World Wide Web Consortium (W3C) saw it coming and CSS3 arrived with media queries. This provides media queries with the ability to detect screen resolution, or even screen orientation, and apply a certain stylesheet. Thanks to that, we can now target different devices like mobile phones, tablets, and computers with different stylesheets.

Unfortunately, we have some challenges with the new iPad… The device size CSS media queries don’t differentiate between the new iPad and the previosu version, or the first one and that’s because all the iPads report the same sizes! Weird, isn’t it? To make it more interesting, iPhone 4 does the same!

The solution is a seperate media query – WebKit-min-device-pixel-ratio. To indicate Retina display you use a value of 2 (new iPad and iPhone 4), and for the rest you use a value of 1. Obviously not all browsers support this media query at the time of writing, only Safari on the iPad.

Obviously, as the web developers start creating for new high-resolution screens, the applications get bigger and bigger (as the graphics are getting bigger as well). And these numbers will be going up and up. That’s something to keep in mind.

Here’s an example with the Apple website:

They updated their website and the images are replaced with high-resolution images when the new iPad is detected. However, the images are replaced with the high-resolution images once the regular images have been downloaded. So, if you’re on a data plan, you’re downloading two sets of images. Not such an issue if you’re on WiFi.

Enjoy! 🙂