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.

  • I’m excited for this, once people start to catch on to the potential of more progressive web design and development, perhaps the users will be more inclined to upgrade (Internet Explorer for example).
    Wouldn’t it be ironic if the new iPad with it’s retina display is the tipping point that pushes people to realize they need to upgrade, instead of Microsoft finally stopping support and development for old out of date browsers.

  • Great comment and nice to have a very clear and visual display of the benefits of using the increased capability of CSS for visual effects. There remains an excessive fear of losing support for older browsers, and it’s frustrating when there’s not actually any reason why progressive enhancement can’t provide the best of both worlds; keeping functionality on older browsers and using the full capability of newer technology.

  • I love the comment on designing for the future and not the past. too many times are amazing designs ‘watered down’ to make sure they work in IE7… upgrade already!