Migrating to the high-resolution Retina display

With the announcement of the iPhone 4, Apple introduced the Retina display. This new technology produces a 3.5 screen with a resolution of 960x640 pixels, which is considered to be the highest resolution screen ever placed inside of a mobile phone. The screen's pixel density is a welcome addition to consumers, but can cause a significant heartache for designers who are unprepared for the change. In this recipe, we'll take a look at how to best prepare resources for future changes in iOS screen resolution.

Getting ready

Updating our art resources for the new screen requires us to double the resolution of our original artwork. To help make this process easier, we'll need the original art resources for our application. Otherwise we'll be producing new high-resolution artwork from scratch, which can be a significant obstacle to overcome.

How to do it...

Now and in the future, it's to be expected that all iPhone and iPod touch devices will feature the high resolution Retina display. If we want success for our application, we should prepare our artwork for the 326 pixel per inch screen.

Let's take a look at a few steps that will help us migrate to the larger screen:

1. 1. We should start by going through our old applications and prepare to update outdated resources for the higher resolution display.

   Note

   Luckily, Apple has built iOS to properly upscale all standard UI elements that are drawn natively in code or through Interface Builder. Text will also be scaled properly depending upon the device, so we don't need to worry about changing any UITextViews either. The only real concern will come into play with art resources, typically stored as .PNG files. Isolate these files so that we have an idea as to what needs to be updated for the Retina display.

2. 2. Next, we hope that our original art files were created either as vectors, or as raster pieces greater in resolution than 640 pixels by 960 pixels, that were scaled down for the iPhone. If either of the previous two statements is true, we're fairly well off. If not, we've got a bit of a rough road ahead of us.

   Note

   Vector and raster images

   Vector graphic files are a type of image format where visual data is stored as a geometrical set of points, lines, curves, or polygons. Vector graphics scale up well because images are displayed as shapes with a specific mathematical relationship, meaning that magnifying the image is no problem because the relationship between the shapes stays the same regardless of size. Vector graphics can be built with an application like Adobe Illustrator but can be somewhat more difficult to use than Photoshop. If our art resources are still available in a vector format, we only need to create new copies of each resource at double the resolution of the old file. Once we do this, we're ready to move forward and prepare these new files for inclusion into our application.

   Raster images are built as a grid of square pixels, with each point in the grid having a set color. It is difficult to increase the size of raster graphics because a multiplication in size just means that there will be a multiplication in the amount of pixels that build the image. As such, raster images tend to look pixilated or blurry when increased in size. Doubling the size of a raster graphic will look unprofessional and isn't likely to be of high enough quality for our application.

   • More likely however, we'll find that our resource files have been saved and only remain in a raster format like PNG:

   • If, at this point, we're left with only raster images and have no access to either higher resolution artwork or vector images, we have a bit of a predicament on our hands. The tough reality of this situation is that we'll have to go about creating each piece of art again by hand at double its original resolution in order to fit the Retina display.

3. 3. After we've gone about updating our resource art for the Retina display, it's time to update the file names of each piece for inclusion into our app project.

   Due to exceptional engineering by Apple's iOS team, it's extremely simple to name our high-resolution art so that our app knows how to handle these new files. To properly name our high-resolution files, we only need to append @2x onto the file name of the low-resolution resource file name.

   For example, if we have a resource called Button.PNG, we need to name our new double resolution resource file as [e-mail].

4. 4. Once we've renamed all new high-resolution resource files to include the @2x suffix, we're ready to hand the new files off to our programmer or include them into the XCode project ourselves.

5. 5. We should take the new files and include them into the XCode project as we would do to any other art file and that's it. There's no need to play around with any code or project settings; just leave the new art in the same resource folder as the original resource file.

   At this point, our application should be well prepared for the Retina display. No matter if our user has the high-resolution screen or not, our application will continue to look great.

How it works...

Apple has developed iOS and XCode so that inclusion of artwork for the Retina display is extremely simple. The operating system is designed to recognize if an iOS device is utilizing the Retina display, and then display the correct resource file size for the specific device. If a Retina display is detected, then the @2x art is used. If not, then the original piece of art is displayed instead.

There's more...

The introduction of the Retina display with the iPhone 4 was a wonderful example of why designers should create artwork in either a vector format or in a size much larger than they ever intend on using. While it is easy to take something big and make it smaller, it's extremely difficult to take something small and make it bigger.

Don't get too comfortable

Even though the Retina unbelievably displays high pixel density of 326 pixels per inch, it seems to be at an upper limit which Apple will likely not increase. Hence, we should prepare for the future by creating artwork at much higher resolutions that we should ever need, just in case.

Hiring someone to help fix our art problem

Since the emergence of the Retina display, several web companies have begun to specialize in the up scaling of mobile phone art for higher resolution displays. We should be wary of hiring such a company, as there are no magical techniques that can automatically increase the size of our low-resolution artwork.

If we do decide to work with a company that specializes in up scaling, we should ask for the contact information of previous clients to insure that the company completely redraws artwork for the higher resolution. We don't want to get stuck paying for artwork that was just magnified in Photoshop.

See also

• Accounting for resolution and aspect ratio changes in Chapter 9