By Colleen O'Banion
If you are in the design community, you have probably dipped your toes in the burgeoning realm of mobile design.
The rapid adoption of mobile technology has introduced a tricky set of constraints – smaller screen sizes, landscape and portrait ratios, odd UI/browser variations – that can overwhelm newcomers to the field.
Although several great resources have cropped up, a few of the basics are rarely addressed.
Before you kick off your next mobile design, let us tackle one of the most common, yet easily-overlooked problems: designing at an accurate size and pixel ratio.
Ever designed an app or a mobile site?
Maybe you have spent hours in Photoshop, pushing pixels until declaring peace between your whitespace obsession and the project’s content requirements.
Then you wait impatiently while your boss/client/persuasive friend slowly loads your design on their smartphone, hoping for glowing praise or a simple request to re-size the logo.
Instead, you are on the receiving end of a bewildered stare as they view the shrunken version of your creation – a once-beautiful 2”x3” design that looked great on your monitor yet is now bite-sized on their 2”x3” screen.
Know thine enemy
The culprit is your dear friend, the pixel.
When high-def displays became popular, the pixel transformed into a relative unit. The iPhone 3GS displayed 165 pixels per square inch. The retina display on the iPhone 4 crammed twice as many into the same space.
Referred to as pixel density, or PPI (pixels per inch), a display with a higher PPI will be sharper and support a higher screen resolution, similar to prints with a higher DPI.
This is where the headaches begin.
Mobile devices have a much higher PPI than most laptop screens or monitors, allowing them to display high-resolution objects in a smaller space.
For example, an 800x600 image on an old CRT monitor occupies the entire screen. That same image on an iPhone 4 will not even fill the viewport in landscape mode. Even if your monitor supports an extremely high resolution, a default 2”x3” canvas will rarely be 2x3 physical inches.
So, what is the work around?
Common solutions
While most mobile designers will tell you they rely on standards like minimum font sizes, tapable areas and larger-than-normal elements to produce accurately-sized designs, other methods can be observed in the wild.
You have seen it: designers holding their phone up to a Photoshop document, squinting while tweaking zoom levels until they appear to be the same size, or viewing bits of their current screen on their phone through remote-screen-viewing applications such as LiveView, zooming wildly until their canvas fits.
The most patient make blind adjustments at full-size, checking as they go on their phone.
You can do better.
Skip the guesswork
The only way to accurately match the size of your design canvas to your target device’s screen is to calibrate based on their PPI.
Luckily, Photoshop has a few print settings that we can hijack to simplify. If you know the PPI of your monitor and your device’s screen, skip ahead to step two. If not, our PPI calculator should keep your weekend algebra-free.
Step 1: Calculate your screen PPI
To do this, drop your monitor's size (diagonal) and its screen resolution (i.e. 1024x768 pixels) into our PPI calculator (http://go.ubr.mn/ppicalc).
Step 2: Set your screen and print resolutions in Photoshop
Under Preferences > Units & Rulers, update two settings:
● Screen resolution: the PPI you just calculated for your monitor.
● Print resolution: the PPI of your phone or target device. (You can use the same calculator if you are unsure.)
Step 3: Stop tweaking your zoom levels
After creating a new document with your phone’s PPI in the Resolution box, go to View > Print Size. Your Photoshop document should zoom out to match the exact physical size of your device’s screen.
Problem solved.
Colleen O’Banion is a designer and front-end engineer at Übermind Inc., Seattle. Reach her at cobanion@ubermind.com.