Sizing graphics correctly across screens

Gone are the days when all you had to do is make sure your graphics were 72dpi. With an influx of mobile web-ready devices and tablets comes new screen sizes, resolutions, and pixels per inch. You must now ensure that your mobile app graphics are the right size regardless of device.

Starting with the Apple iPad, tablet devices have been the device of the year. But the big question was whether it is a novelty or if it has lasting value. Business Insider reported that, among the 500 iPad owners it surveyed, usage has increased as much as 80 percent since first purchased. From personal experience, I can tell you that I use mine about an hour every day for both reading and games.

Knowing that tablet devices are here to stay, how do you design for them as well as for the the desktop and other mobile devices? Table 1 reviews the screen specs of the most popular tablets.

Table 1. Comparing specs for various mobile devices

When it comes to the desktop, you could easily make a button that's 100 pixels wide by 30 pixels high and trust that the user could select it with their mouse pointer, since the pixels per inch (or dots per inch) was 72. When it comes to tablets and mobile devices, however, the pointer is replaced by a finger and the resolution is no longer 72dpi. Both of these factors make button size very important.

Note: As you work with bitmap graphics, be aware that the larger the DPI, the larger your file size. Refer to the resources at the end of this article to learn more about optimizing graphics.

Finger size

If you measure an average adult's fingerprint, it's at least a half-inch square. That's why the icons on iOS devices are this size. Therefore, tat is the size you want for your button. But how do you ensure that the button will be a half-inch on all devices?

Pixels per inch

Before you get into sizing content, you need to make sure that nothing scales automatically:

A quick look at these specs reveals that the pixels per inch (ppi) varies. To make sure a button is always 0.5" square, just multiply the ppi (also known as dpi) by 0.5. In ActionScript 3 it would look like this:

But you really don't want to do this calculation for every device. Luckily, in Adobe Flash Professional you can use the Capabilities.screenDPI property to determine the screen DPI of the device. Then just multiply that by 0.5:

So as not be too American-centric, here's a version of the code for determining the pixel size of your button if you know its size in millimeters instead of inches:

Because Android 2.2 isn't built for tablet devices—even though there are tablet devices on the market (such as the Samsung Galaxy Tab)—the Capabilities.screenDPI property will give a wrong resolution of 240 when the real resolution is 170. You will have to perform an extra check and change appropriately:

Figure 1 shows the button sized properly across three devices: Droid 2, iPad, and Samsung Galaxy Tab.

To find out more about the Capabilities.screenDPI property, check out the following article and references:

• Authoring mobile Flash content for multiple screen sizes
• flash.systemCapabilities class (ActionScript 3 Reference for the Flash Platform)
• mx.coreRuntimeDPIProvider class (ActionScript 3 Reference for the Flash Platform)

As you work with bitmap graphics, be aware that the larger the DPI, the larger your file size. Refer to these videos of mine to learn more about optimizing graphics:

• Screen density (Adobe TV)
• Optimizing graphics with ActionScript (Adobe TV)
• Optimizing graphics on the Stage in Flash Professional (Adobe TV)

You can also learn about optimizing graphics using a tool like Adobe Fireworks CS5:

• Design Learning Guide for Fireworks: Optimizing files for multiple exports
• Optimizing and exporting graphics (Fireworks documentation)