Designing for the new iPad display

As expected, one of the features of the newly announced iPad 3 – or rather the “new iPad” as we’re to refer to it – is the retina display. As witnessed previously by iPhone users, the retina display is one of those “you didn’t know you wanted it until you get it” features. A while ago when everyone was upgrading to the iPhone 4, I stuck with my trusty 3GS for some time, cautious not to lose sight of what many users were still using. However, now I’m an iPhone 4S user, I’m amazed when I go back to the 3GS for some testing to find how poor the screen now feels. Make no mistake – the non-retina Apple screens are still very good screens – you just don’t want to go back to one after you’ve used the retina version. Similarly, the non-retina iPad 2 is fantastic and I’m feeling slightly cynical about whether the retina version of the new iPad is actually needed, but I have no doubt that when I first use one that returning to the iPad 2 will feel a vastly inferior experience.

So, the new iPad has a screen resolution of 2048 x 1536 pixels [double the 1024 x 768 of the iPad & iPad 2]. As an iOS designer/developer though, the joy of the improved visual clarity is marred by the concern about asset sizes. A full screen photo or UI background for iPad would typically be around 1Mb in size. Having done some brief resizing tests, this is likely to result in the new iPad retina versions being between 2.5Mb – 3Mb. Add to that the original non-retina version which still needs including to support the older iPads and each full screen design will conceivably require at least 3-4Mb of space. Add to this the increased processor performance in manipulating such assets and it’s clear that the retina display of the new iPad will introduce some interesting challenges for iOS designers and developers. [Note: All the above sizes are pre-compile sizes. During the production of the final binary using XCode, files are compressed using pngcrush which will in most cases reduce the file sizes considerably, but comparatively the above sizes still demonstrate the issue].

One of the obvious challenges which was a foreseeable concern for developers was the “wifi required” install limit of the App Store. Until the launch of the new iPad, users could only install apps larger than 20Mb if they had a wifi connection. However, to produce a “Universal” iOS App – one install that is optimised for non-retina and retina displays on both iPhone and iPad – 20Mb now seems measly. Hence, Apple have increased the limit to 50Mb – as shown in the attached screenshot.

Another challenge for designers is the implications of working with design files at this size. I’m a huge fan of Adobe Fireworks for UI production, and we always work at retina resolutions so that we have a choice to either reproduce or just down-scale assets for non-retina displays. However, Fireworks can sometimes suck when using complex multi-page, multi-layered documents, and to now be required to work at 2048 x 1536 for iPad designs is going to be a challenge to Fireworks’ stability and to a designer’s patience! Is it too cynical to suggest that Apple might have noticed we’ll need to go and buy bigger and better Macs now too? :-)

Finally of course, it goes without saying that there will soon a be a rush of new templates and design resources to assist us in designing and developing for the new iPad retina display. To save any digging around, just keep an eye on the excellent Teehan + Lax downloads. Let’s hope they’re working away on the new iPad version right now!

8th March 2012

Ben Childs

Tags: , , ,

Comments are closed.