Updating interfaces for iPad 3: Why your favorite app might take a while to go Retina

Updating interfaces for iPad 3: Why your favorite app might take a while to go Retina

Depending on how an app was designed and developed, updating for an iPad 3 Retina display could take days or weeks

Flash forward — After lining up for hours, or sitting at home all day waiting for a courier to arrive, you finally have your hands on an iPad 3 with its amazing Retina display. A display with over 3.1 million pixels. All of them difficult to distinguish, because they're so damn tiny. Text is crisp. Photos look are amazing. This thing is gorgeous.

You launch your favourite app and notice things aren't as amazing as they were a few seconds ago. The app in question doesn't contain Retina image assets -- the pictures that make up the user interface elements are at the iPad 2's screen resolution, so things look as blocky as they did on your previous iPad. What's going on?

Custom UI vs standard UI

A regular graphic (1x) will simply be rendered with more (4) pixels per point on a Retina display, unless designers create proper Retina (2x) resources

When creating an iOS app, developers can choose to use Apple's supplied UI (user interface) elements, they can create their own, or they can use a mixture of the two.

If they choose to only use Apple's in-built elements, then the onus is on Apple to ensure everything is designed to take advantage of the iPhone 4, iPhone 4S and iPad 3's Retina displays. No additional work needs to be done by the developer. Apps like this will look great on the iPad 3 on day one.

For designs using entirely custom elements, every single part of the user interface needs two images created — one for the previous, non-Retina size, and another at the new, double resolution Retina size (these contain "@2x" at the end of the filename). A simple app may only contain tens of images, but most of the prettier iOS apps also contain a large amount of individual images to construct their overall design. Some of the apps I've worked on have well over 300 images, so by the time we've finished creating the Retina assets, that's doubled to over 600 images.

Depending on the designer and developer involved, each image may take up to a few minutes to create. Multiply that by the images required and it can often be a daunting, awkward, repetitive task. This also assumes the artwork was created using vector layers and layer styles in Photoshop (or a similar, freely scalable method). If it hasn't, there's a good chance everything will need to be rebuilt from scratch, using vector layers and layer styles, turning a few solid days' worth of work into something that might span weeks.

Thankfully, the transition from iPhone 3GS to iPhone 4 has taught a lot of iOS designers to work in ways that make creating two sets of images easier. If you're a designer looking to learn ways to improve your workflow when building non-Retina and Retina images, I've written articles on Designing for Retina and automated exporting.

Preparation is the key

Some developers have made the assumption that a Retina iPad was on the horizon, and have already included Retina images in their apps. However, I suspect the vast majority haven't, even if they have the images on hand — being double the width and height also means the images are bigger in file size, which may push the total app size over the 20MB 3G download limit (apps bigger than 20MB can't be downloaded over 3G networks).

Why doesn't iOS just use vectors for everything?

From the app Consume, an example of a vector interface element set up in Photoshop

If the issue is that pixel based images look blocky when they're scaled, why aren't vector based image formats, like SVG and PDF, used for iOS? Sometimes SVGs and PDFs are used in iOS development, but only rarely -- they're not the method Apple recommends. Vector formats tend to be far more resource hungry, especially for photorealistic icons, due to the amount of layers that have to be drawn independently to create the final visual. Mobile devices just don't have the grunt or memory to draw everything on the fly.

That's ok though -- think of the bitmap images used in iOS apps as pre-rendered vectors. The tools developers use to create the initial design should be easily scalable, but the final assets used in the app should be bitmaps, because they offer better performance (everyone loves silky smooth scrolling).

Patience

Good developers will know what's required of them, but may not want to start the arduous task ahead until the iPad 3 is announced (keep in mind that until Apple announces, we don't really know anything for sure). So please be a little patient if your favourite app doesn't take full advantage of the iPad 3's Retina display on launch day.

Marc Edwards is the founder Bjango and co-host of the mobile design podcast, Iterate.

Have something to say about this story? Share your comments below! Need help with something else? Submit your question!

-
loading...
-
loading...
-
loading...
-
loading...

← Previously

OtterBox Camo Defender Series Case for iPhone 4S and iPhone 4 only $37.95 [Daily deal]

Next up →

Apple, Analysts, Bloggers, and Stocks: An Explanation of the Insider Trading Allegations Against Kinnucan

Reader comments

Updating interfaces for iPad 3: Why your favorite app might take a while to go Retina

15 Comments

When the ipad 3 comes out i'm hoping to grab and older ipad for 50% off we'll see if i can get that good of a deal.

Like i read a few days . Jsut hurry Up and take our money. One thing. I just hope its wont be. "just" an ipad 2s, but im afraid they will do jsut that..... Sigh.....

So to sum up, when using our new ipad 3, old apps might not take advantage of the retina display... but there isn't any possibility for the app to have a worse image than it had in ipad 2, right?

Great article and great point. There will be some people who'll say, "Why does Facebook look like crap on my new iPad!? Apple is stupid!" Easy people, easy.

facebook app already looks (and feels) like crap... on all mobile platforms. Don't understand why a billion dollar company can't find the developers to do it right

An excellent article idea for iMore would be to list apps (at least the more popular ones) that will be Retina ready Day 1. I would think developers would cooperate because everyone buying a 3 would want to download Retina apps ASAP to see the quality difference. I may not buy a particular game today, but would spend a couple of bucks if I know it looks amazing on my new 3.

I've been meaning to get into chess for some time now. I've had a board (never ueochtd), on the Mac (never at my computer except for work) and grabbed 1 or 2 from the App Store. Still never stuck. The apps just weren't polished enough, or didn't feel right to me.Last night I downloaded this. Wow. Amazing job on this one. The simplicity is what makes it so elegant. Love, love, love the work you did on this game.Making it universal after being released two years ago shows your level of commitment to customers. It's this type of thinking that will bring more to you faster.

Great article Marc, keep them coming! But ironically, Siri will help to reduce the need for all that "chrome." We think many apps that deliver small amounts of information (the kind of apps that currently have the fanciest, most photo-realistic graphics) could go Siri-only.
Of course, that won't happen until Apple opens up the Siri API to developers. We can't wait.

I just realised that most apps are compatible with both ipad and iphone (also ipod touch) so as long as iphone 4s has a retina display apps won't have any problem with the new ipad's resolution! of course we are waiting for new apps that will benefit the 2048x1536 resolution!

For last few months this is only article that is written highly professional & contains some serious talking about iPad 3 features/possible issues.
Seems that iPad 3 apps will be massive! Cloud computing could be great solution combined with LTE. In that way we could have big amount of apps that we launch from servers via high-speed network. Second solution is to have massive storage space on iPad 3.
I assume that big companies & developers already have instructions from Apple about requirements for iPad 3. Their Retina ready apps will be ready for download few days after iPad 3 get to stores.

As a UI designer I'm beyond excited to start working on resources for iPad3 apps, I've even started to convert my own personal project to @2x for a quicker transition.
I'm not an Apple fan boy - But I'm starting to be...

Ture Retina has not been "officially" confirmed, but neither has the iPad 3. So "officially" we are all just grasping at straws here, but I am "officially" stoked about this and cannot wait!

I was over the moon when I switched from the niigroal iPhone to a 3GS but haven't had the pleasure of getting my hands on a iPhone 4 yet.Hard to get my head around the two camera concept, retina view sounds quite a concept.