The new iPad, images and rounded corners

Why the new iPad proves that progressive enhancement and responsive design are still best practice.

This week sees millions of people around the globe getting their sweaty hands on the latest generation of iPad.

With the last iPad outselling any other manufacturer of PCs, we can expect more of our visitors to be accessing our sites via the new retina display.

The release of the high resolution display on the latest iPad reinforces a couple of arguments I have been making for a while on this blog.

Stop designing for specific devices

First, with many app owners scrambling to update their apps to use high resolution graphics, the iPad retina display perfectly demonstrates the problem with designing for specific devices. This approach involves updating your native app or website every time a new device is released. A much better approach is to build sites that automatically respond to these new devices.

Use progressive enhancement

Second, the retina display reinforces my belief that we should be using CSS and not images to provide effects like drop shadows, rounded corners and gradients.

One argument I hear against progressive enhancement is that you can make things like rounded corners work on older versions of internet explorer using images. However, the latest iPad shows why this is a bad idea. Websites that use this approach will now look pixelated on the most modern device for the sake of supporting an old browser with a dwindling user base.

Comparison between images and CSS on retina displays

We need to build websites for the future and not the past. Yes, our sites should work on older versions of Internet Explorer but that doesn’t mean we should compromise the experience of those using devices like the iPad.

Boagworks

Boagworld