Designer's Guide to the iPad: Retina Edition

Last year, on the launch of the iPad 2, I wrote a piece detailing some of the apps that I use in my everyday work as a designer. Amazingly, little has changed over the last year. I swapped the official Twitter app for Tweetbot, and Writer for Evernote, but Flipboard, Kindle, and Reader remain a part of my everyday workflow. It was the update for the latest Tweetbot that got me thinking about the upcoming new iPad.

The new iPad features a powerhouse Retina Display featuring a 2048x1536 resolution screen on a 9-inch device. In comparison, my 27” iMac has a resolution of 2048x1536. The new iPad has a larger resolution than my TV sitting downstairs.

This thing is going to be pushing some serious pixels. Much like the leap from the iPhone 3GS to the iPhone 4, the differences will be immediately apparent. Which causes a problem. Double the resolution means larger assets, which means larger filesizes. 

The developer of Tweetbot suggested as much last week: 

iMovie increased in size from 70MB to 400MB. Pages, a word processing program, jumped from 95MB to 269. Size is going to become an issue on devices, especially those with 16GB iPads, and 8-16GB iPhones, who presumably will also gain the Retina assets in their downloads. But how will this affect the web? 

DOWNLOADING ALL OF THE PIXELS

As I was fruitlessly refreshing my FedEx tracking screen yesterday, hoping to see that my iPad has left the purgatory of Ontario, California, I started thinking about my website. I use my iPad as a portfolio right now, and the increased resolution has me excited, even though I’m going to need to rebuild a lot of those images. But how will my website look on the new retina screen? And how can I insure that it looks great on RetinaPads as well as iPhones and OG iPads? 

(Left: Old and busted. Right: New hotness.)

Apple has started replacing the images on their main page and iPad product page with higher resolution, “retina” ready images. Cloud Four has figured out how Apple is doing it: 

What they’ve chose to do is load the regular images for the site and then if the device requesting the page is a new iPad with the retina display, they use javascript to replace the image with a high-res version of it.

The heavy lifting for the image replacement is being done by image_replacer.js

I am not a developer, so I don’t know what most of that means, but what it sounds like it means is Apple is storing two versions of their assets, and sending Retina assets to Retina iPads. But what about bandwidth? And smaller screens? As Global Moxie notes, 

As an industry, we’re still learning the right way to do responsive design, and one of the big sticking points is how to cope with images. While it’s easy enough to make the browser resize a big image to fit a tiny display, bandwidth concerns suggest we shouldn’t send that big file to devices that can’t use the extra pixels. The new iPad only magnifies this problem. Sending a full-screen iPad image (1536x2048) to an iPod Touch browser (320x480) is overkill to the tune of 25 times the file size. Over a wireless connection, that’s gonna smart.

This isn’t a new problem. Folks at the forefront of mobile web design have been wrestling with this responsive-image problem for the past year. How do we nudge the server to send a properly sized image instead of sending a giant one-size-fits-all file?

I’ve been working on a design for my new website that incorporates this blog, and I really want it to be responsive. But I also want a website that looks fabulous on my shiny new gadget, without forcing an iPhone on AT&T’s crappy 3G to choke on it. 

That said, text heavy sites like the Verge and New York Times look great on the new screen.

THE HIGH RESOLUTION ELEPHANT IN THE ROOM

Even after figuring out how to deliver content to new iPad, the high-resolution screen presents a whole new piracy concern for designers, photographers, and other content creators. While there are plenty of safeguards out there to prevent unauthorized downloading of images for personal use from websites, there’s no safeguard to prevent the end user from merely taking a screenshot of your image using the home and power buttons. At the new iPad’s killer resolution, there’s more than enough juice to grab a 3 megapixel image. Pop Photo explains further: 

A 2048 x 1563 image is roughly 3.2-megapixels. As we all learned back in the days of the megapixel wars, that’s plenty of resolution to produce a more-than-acceptable 8” x 10” print. Even at 11” x 14”, you’d likely get a more than acceptable result. And that’s how big you’re going to have to make your online images if you want them to look their best on the new iPad. 

I’ll be honest here-I’m not terribly worried about my work getting stolen. But if takes a while for your favorite artist, photographer, or comic book publisher to update their sites and apps to Retina, I’d be willing to guess this is the reason why. 

So, what to do? I’m sure that shortly after the new iPad’s launch, developers will be all over writing their own Javascript or working them into Wordpress plugins to make all of this magic happen invisible to you. In the meantime, I’ve already started updating my portfolio images to be optimized for the new resolution, as well as creating lower resolution fallbacks for everyone else. And I’ll probably start adding watermarks and other security features to prevent unauthorized use of my work. 

Apple is clearly headed toward resolution independence, and I expect these Retina displays to make their way to the MacBook Air line very soon, and then spread throughout the rest of the Mac line. Android tablets are also headed toward high resolution screens-Samsung has hinted they will have a similar Retina-style tablet ready later this year. So unless sales of the new iPad fall off a cliff, I’m sure this resolution is here to stay. Time to jump on board.

Dwight Battle

Studio Battle, 9410 35th Ave SW #A, Seattle, WA 98126, USA

Dwight Battle is an award-winning independent art director specializing in mobile and digital design, branding, and creative direction. Dwight has been an art director and designer for over twelve years, and have worked with a variety of clients in a variety of stages of growth, from Fortune 500 companies to small family businesses, and from established companies to early-stage startups.