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 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%)

1280×800 (Higher76%)

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

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
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;
{