Requirements  
Prerequisite knowledge Required products
You should have some familiarity with ActionScript 3 and an understanding of vector and bitmap graphics.
User Level  
Beginning  

 

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.
 

 
Screen specs

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
 
Desktop Mobile devices Tablets
Screen size 15" laptops
17" – 24" desktops
4.3" Droid X
3.7" Droid 2
3.5" Apple iPhone 4
7" Samsung Galaxy Tab
7" BlackBerry PlayBook
9.7" Apple iPad
Resolution 1024 × 768 (20%)
1280 × 800 (higher 76%)
480 × 854 Droid 2
480 × 854 Droid X
640 × 960 iPhone 4
1024 × 600 Samsung Galaxy Tab
1024 × 600 BlackBerry PlayBook
1024 × 768 Apple iPad
Pixels per inch 72 264 Droid 2
227 Droid X
326 ppi iPhone 4G
170 Samsung Galaxy Tab
170 BlackBerry PlayBook
133 Apple iPad
Platform Windows
Mac
Android 2.2
iOS
Android 2.2
BlackBerry Tablet OS
iOS

 
Sizing graphics appropriately

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:
 
stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT;
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:
 
next_btn.width = 133 * .5; next_btn.height = 133 * .5;
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:
 
next_btn.width = Capabilities.screenDPI * .5; next_btn.height = Capabilities.screenDPI * .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:
 
next_btn.width = Capabilities.screenDPI * (mm / 25.4); next_btn.height = Capabilities.screenDPI * (mm / 25.4);

 
Always test

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:
 
if (Capabilities.manufacturer == "Android Linux" && Capabilities.screenResolutionY == 1024) { next_btn.width = 85; next_btn.height = 85; }
Figure 1 shows the button sized properly across three devices: Droid 2, iPad, and Samsung Galaxy Tab.
 
Play button sized appropriately across three devices
Figure 1. Play button sized appropriately across three devices

 
Where to go from here

To find out more about the Capabilities.screenDPI property, check out the following article and references:
 
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:
 
You can also learn about optimizing graphics using a tool like Adobe Fireworks CS5: