In the short period of time since the release of the new iPads, we’ve been looking at many of our past web projects with curious eyes, to see how they hold up. The new iPad has a retina display, like the iPhone 4 series, which means that it packs 4 pixels into the space of 1, giving it four times the resolution and far more detail. It’s been 10 days now, and we’ve got some suggestions to share.
First of all, be sure to just open your site and play around with it on the iPad. This certainly isn’t a new concept, but we were surprised to find that some of our sites actually crashed the web browser! This was likely due, in our case, to images that were taking up way too much memory at retina resolution, but I expect to see the problem elsewhere.
When loading in a website, often the very first graphic shown is a logo. And since these are typically rendered as images, the first things visitors see on a new iPad—your logo, the centerpiece of your identity—is going to look blocky. That’s a relatively easy fix. Logo graphics are often very small files, so you may be able to replace yours with an image that’s twice the width and height, and tell the browser to show it at the old (smaller) size. On normal browsers, it will look the same, but on the new iPad it will look terrific.
Text generally looks great, especially if you are using web fonts, which we love. However, if your existing images contain text, for slide shows or something like that, they will look bad. Pixellated text looks sloppy on the new devices. Consider going the extra mile and separating the text from the images. You will often end up with a smaller page size as a consequence, since images and text have different needs. A soft bitmap image can stand a bit of pixellation, but when this happens on text, it’s rough.
Finally, consider small user interface elements. If you have a “lightbox” style image zoom, use higher quality widgets for the buttons. Your photography will look passable, but the pixels will be obvous and distracting on these smaller elements, much like with text.
Overall, we’ve found that making websites “retina iPad friendly” isn’t much different than making them “iPad friendly.” Focus on the places where the differences are most obvious and glaring, and don’t worry so much about replacing every single photograph. Load some pages, glance at them for a few seconds, and fix what jumps out at you. The improvements will help you stand out, and make your site look that much more professional.
