Skip to main content

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
A regular graphic (1x) will simply be rendered with four pixels per point on a Retina display, unless proper Retina (2x) resources are in place to take advantage of the higher density
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
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.

Comments

Popular posts from this blog

Ipad apps: AppStart Review

AppStart For iPad Review Free for a limited time only , AppStart for iPad is a terrific app by the folks over at  AppAdvice.com  that’s meant to serve as a starter guide for new iPad users and owners. The promotion is only available for a limited time as customers flock to pick up their iPad 2s this week. Whether you’ve had your iPad since launch day or you just picked one up, AppStart For iPad is a detailed and comprehensive guide for the most popular and useful ways to utilize your iPad in addition to recommending a few apps to get your feet wet. When you first open the app, the home screen is displayed in a clean grid of buttons for you to tap-in and find out everything there is to do with the iPad. Each grid-box allows you to open up a mini-guide for how you can use your iPad as an eReader, home theater, radio, nightstand, magazine, or social media hub. Within each mini-guide, the folks over at App-Advice also throw in their suggestions for both free and paid apps that re...

Ipad 2 Accesories

Zagg have done it again and released what we are excited to say is the seasons MUST HAVE iPad accessory: The  ZAGGmate iPad case with keyboard . It’s not often that we get entirely blown away by an accessory for the iPad, but this one has left us shell shocked and in awe. The perfect compliment to your iPad, this is the first iPad keyboard case combo that we have seen yet that has done it right. In fact, it’s the best bluetooth keyboard we’ve seen to date as well! It’s so right and so perfect that we already wonder how we ever used our iPad without it! Check out the review below… ZAGGmate with Keyboard The iPad’s New Best Friend Our first impression of the ZAGGmate was: “Where’s the rest of it?” This iPad case is unlike anything else we’ve seen on the market to date and the designers at Zagg worked hard to literally rethink what an iPad case could be. This is an iPad case that doesn’t cover the whole iPad, but rather just covers the iPad’s screen, and leaves the back of the tablet...

Ipad 2 Apps: Skyfire Web browser Review

Ipad 2 Apps: Skyfire Web browser Review Skyfire for the iPad made headlines when it was first released, due to its ability to play Flash videos on a device previously void of this popular technology. Users flocked to the App Store, eager to drop five bucks for the chance to view their favorite clips, shows, and movies on their iPad. Not only did the browser play these videos, but the integrated video compression saved a significant amount of bandwidth for people on a restricted data plan. The initial excitement wore off quickly, though, as complaints were rampant about many sites not playing videos as expected. Since its inception Skyfire has certainly improved in this area, now claiming support for over 200,000 websites containing Flash. The dissenters will always be there as not every Flash video on the Web will be playable, even if the developers at Skype Labs remain diligent. Some of the backlash is warranted to a certain extent. If I paid $4.99 with the intent of viewi...