Assuming your mom is a designer, working with Photoshop on her fairly new Macbook 15″, and putting out comps for “mobile”*.
Somehow many of us assumed that an iPhone has a “screensize” of 320 x 480px, an iPad has 768 x 1024px and next up in line we have the laptop screens and desktop screens. Mom’s Macbook for example has 1440 x 900px.
So, what’s your mom gonna do? Sitting on her 1440 x 900px screen, she is very likely to open a photoshop document and give the canvas a dimension of 320 x 480px, and happily starts designing a screen that should fit in there.
*) Now for the sake of this article, I won’t go into details of how working with a defined height/width canvas in itself is a problem for “mobile” design, there’s plenty of info around that out on the web. Plus I won’t go into details why with the arrival of the iPhone 5 and its 640×1136 screen the “this is iPhone” thinking is over.
Let’s say that your mom’s already aware that on an iPhone (or any other touch-enabled device, but let’s live in a world with iPhones and iPads only for now) people will use their rather clumsy (compared to the exactness of a mousepointer) fingertips to interact with elements on the design. So, your mom thinks, I shall make these buttons a bit larger. Since she is working on a screen, she thinks “if I put the zoom in photoshop to 100%, I’ll see if this button is big enough for touch…” Maybe she even touches her screen lightly with the fingertips to see if the button fits (I hate it when people do this, but moms are different).
Satisfied with result, she puts out her comp, some magic elves turn the Photoshop comp into a working dummy and a short while later, your mom looks at her work on her iPhone. She’s rather pleased with the result, but somehow everything seems to be a tad bit too small, the buttons are not really fitting to her fingertips… strange. She remembers the magic elven song “test on real devices”, but didn’t expect seeing consequences in something as simple as element dimensions which already had been tested on screen.
Enter the “PPI” (Pixel Per Inch). Since your mom has a background in designing for print and pre-press, this somehow rings a bell. Yes, mom, for years you’re used to “DPI” as a measurement of density of the print-dots in the final result, and since the dawn of DTP (Desktop Publishing) and the rise of Digital Imaging, you never really understood why, but accepted that, it’s important to have high-resolution (in pixel) images, if you want to print them out properly, esp. at high print-resolutions like the magic “300dpi” figure.
Surprisingly enough, a “resolution” of how many pixels can be displayed on a physical dimension has always been around us. For a long long time, “72dpi” was “the” resolution for images to be used on screen, later, when the old cathoderay monitors were replaced with the flatscreens, “96dpi” was somewhat around, but never really replaced the “72dpi” thinking, esp. when designers got used to work directly with pixel, like in “that header image there is 960px by 220px” – nobody really cared in what *physical* dimensions when viewed on screen this resulted. It simply didn’t matter, since the primary input device, the mouse-pointer, already lived in that world – no need to translate something coming from the physical world into that screeniverse.
That changed when touch-enabled devices like the iPhone suddenly were used to interact with website-elements. Now the *physical* dimension like the size of a fingertip needs to fit a target in that pixel-world – and suddenly a pixel on your laptop does not equal a pixel on your mobile anymore.
When Apple introduced the “retina” displays in 2010, first on the iPhone 4 and iPad 3, then this year with their latest Macbooks, this problem multiplied.
Have a look o this wikipedia-page on device-resolutions.
Let’s take a simply dive into the two devices your mom is working with:
Her 15″ Macbook has a PPI of 101. So one inch on her screen takes 101px. The iPhone she is designing for has 163ppi (it’s an old iPhone) – to get one inch drawn on that screen, 163px are needed, that’s 61.39% more.
Doing some simple math, we see that all elements that mom mocked up in her photoshop will be seen 61.96% smaller. (Not considering up/downscaling/zooming capabilities of the iPhone, let’s keep it simple)
Now consider she’s using a newer retina-iPhone – it has 326ppi – that’s a whooping 222.77% more!
Mom’s elements would be appear very tiny, if the iPhone were used with it’s native device pixels: 30,981813675% of the expected size, coming from mom’s screen.
Here are some PPI ordered by changes in percent, coming from mom’s Macbook:
15" MB: 101ppi / 100.00% iPad 1/2: 132ppi / 130.69% iPhone 3: 163ppi / 161.39% 15" MB retina: 220ppi / 217.82% iPad 3: 264ppi / 261.39% iPhone 4/4s: 326ppi / 322.77% iPhone 5: 326ppi / 322.77%
Mom now sees how seriously the retina-display impacts her work – in order to get the maximum quality and a sense of “preview control” in her Photoshop comps, she must use elements up to twice as large as she thought she’d have to. If she doesn’t, the high-res devices will do their very best to show the elements in the desired size, but this can result in interpolated and thus blurry “pixels”. All the worse – the screen itself, it’s physical size, is the same as in non-retinan devices, so in case of the iPhone 4s mom wouldn’t be the first to wonder if 320 x 480 still rules. In fact, if you target a retina-iPhone with media-queries, you need to consider that
device-with: checks the logical, not physical pixels, so it still is “320×480” (that’s where the
-webkit-min-device-pixel-ratio: 2 comes in handy).
I will not dive into the work of the magic frontend and backend elves that actually need to find a way to give the devices the assets best suited for their capabilities, that’s an entirely different beast to ride.
Well, that’s my short journey into the wonderful world of the multitude of devices and I expect this getting a whole lot more complicated (this is just the Apple sector, there’s whole lot of more stuff out there!). Trying to “control” all this is madness. Trying to “pixelperfect” design on one device and expecting this to work on all the other devices is madness. Responsive Design, Responsive Images, SVG, CSS-gradients are tools at our hands that will help to navigate around the problems and challenges ahead – but a fixed-width, fixed-resolution “layout” tool like Photoshop, Indesign, Fireworks or else will be heavily challenged, as are all who rely their workflow and decitions based on “screen”. The way like it used to work in the last ten years, it’s the way no more.
Who knows what will be under our Christmas tree two years from now? … but its likely to be connected to the internet. That’s what we’re designing for today.
– Brad Frost
Be done with the yesternet, it’s about time to take on the new challenges.