What the new iPad means for (Responsive?) Web Design

Apple yesterday launched their 3rd generation iPad, oddly named “the new iPad”. The buzz on twitter seems to be a feeling of disappointment with the product not being the step-forward that some people were expecting. However it does feature the much-expected Retina Display. And this leaves us web designers in a bit of a pickle. Allow me to explain…

Increased screen resolution

The resolution on the iPad is now a massive 2048 x 1536px. I’m writing this on a modern desktop iMac and the resolution here is less than that. As Apple are quick to point out (see screenshot from their promo video above) – it’s higher resolution than a lot of HDTV’s! That’s a lot of pixels.

When you put the new iPad into the context of building websites, I have a few observations.

On design…

• To be truly responsive you need to look larger as well as smaller. This is something which we seem to have ignored as the adoption of internet via HDTV, games consoles etc. has been much slower than that of mobile devices. In future you can envisage large screens all over your house, on your fridge door for instance!
• We should adopt one-web principles and be device agnostic. Designing for devices and their breakpoints is counter-productive as things change so rapidly.
• When building for multiple devices; tablets and their associated breakpoints tended to sit somewhere in between mobiles and desktop machines. Now what we have is a tablet that’s bigger than most desktop machines!
• The breakpoints which you may have set for the iPad 2 have been completely blown out of the water. Are you going to go back and amend all the sites you’ve created to date? This needs to be avoided in future.
• Making a layout suitable for > 2000px is challenging. Usually we set max-widths of around 1200px for our containers (catering for larger desktop machines). If you open a site you’ve built on a new iPad and only half the screen is utilised, it’s not ideal.

It’s been pointed that the new iPad will render with an “actual” resolution of 1024 x 768px (same as the iPad 2) just with a higher pixel density. This is the same way the iPhone 4 and 4S currently work. More info here

• Consider your starting point and whether you begin by designing for 2x or normal resolutions. Remember, a 1px keyline at 2x resolution will be 2px wide. There are no “half” pixels so implementing at 1px keyline at 2x will make it blurry for “normal” displays. Summary on this from Bjango

On images…

• You need to think about image quality. The new iPad display is going to make those fixed-size background images look pants. The iPhone 4 and 4S already do this, so often a “2x” or retina stylesheet is used to serve up double-resolution versions. But this comes with the trade-off of loading additional images.
• Consider images which are resolution independent; SVG images that scale perfectly whatever the resolution. The new iPad hammers home just how important this technique is. Be sure to remember a fallback for non-compliant browsers.
• We need a responsive image solution, now. SVG is great for vector images, but what about photography? For me, this is the biggest issue we face currently. New iPad users deserve a crystal clear image yet we don’t want to serve all that extra data to people on a mobile who might be using 3G.
• Screen size, or connection speed? The new iPad has huge resolution yet you would still class it as a tablet. It may be in use over a 3G/4G connection so how do we decide which “version” of an image to serve up?!
• One solution could be something like pngy by Nathan Ford where images are served based on connection speed. However I feel it will be a while before this is robust enough to be implemented into a Content Management System for use on client-managed websites.

On testing…

• No agency wants to stump up the cost of every new device that comes out, so how do we fully test our responsive websites?
• Chris Armstrong (among others) recently released a testing page to preview sites at various screen sizes. But how to we test resolutions larger than our own (e.g. Retina) without buying the device?
• James Young has already started the ball rolling in relation to hardware testing and I’d love to see further development here as there’s nothing quite like testing on an actual device.

———–

If anyone has any other thoughts or comments then let me know below or tweet me at @mattberridge,