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 your graphics are the right size regardless of device.
Tablets are Here to Stay
Starting with the 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 recently reported that, among the 500 iPad owners surveyed, usage has increased as much as 80% since first purchased. I can tell you from personal experience 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 we design for them as well as for the the desktop and other mobile devices? Well, we first start with reviewing the screen specs of the most popular tablets that will be used:
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 x 768 (20%) |
480 x 854 Droid 2 480 x 854 Droid X 640 x 960 iPhone 4 |
1024 x 600 Samsung Galaxy Tab 1024 x 600 BlackBerry Playbook 1024 x 768 Apple iPad |
| Pixels Per Inch | 72 | 264 Droid 2 227 Droid X |
170 Samsung Galaxy Tab 170 BlackBerry Playbook 133 Apple iPad |
| Platform |
Windows Mac |
Android 2.2 iOS |
Android 2.2 Blackberry Tablet OS iOS |
| Adobe Flash support |
Windows Supported Mac Supported |
Android 2.2 Supported iOS Not Supported |
Android 2.2 Supported iOS Not Supported |
Sizing Graphics Appropriately
When it comes to the destop 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 cursor, since the pixels per inch (or dots per inch) was 72. When it comes to tablets and mobile devices, the cursor is replaced by a finger and the resolution is no longer 72dpi. Both of these factors make button size very important.
Finger Size
If you measure an average adults fingerprint, it would be at least .5″ square. That’s why the icons on iOS devices are this size. So that is the size we want for this button example. But how do we ensure the button will be .5″ on all devices?
Pixels Per Inch
Before we get into sizing content, we need to make sure nothing scales automatically:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
A quick look at the specs above would reveal that the pixels per inch (PPI) varies. To make sure a button is always .5″ square, just multiply the PPI (also known as DPI) by .5. In ActionScript 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 Flash you can use Capabilities.screenDPI to get the screen DPI of the device. Then just multiply that by .5:
next_btn.width = Capabilities.screenDPI * .5;
next_btn.height = Capabilities.screenDPI * .5;
Always Test
The Android 2.2 isn’t built for tablet devices, even though there are tablet devices on the market (Samsung Galaxy Tab). So the Capabilities.screenDPI will give a wrong resolution of 240 when the real resolution is 170. So you will have to do an extra check and change appropriately:
if (Capabilities.manufacturer == "Android Linux" && Capabilities.screenResolutionY == 1024)
}
next_btn.width = 85;
next_btn.height = 85;
{
