A long, long time ago, I used to make a bit money on the side designing and printing business cards, along with ad materials and various documents. I was young and I needed the cash, and so did my buddy. Some of it went towards new hardware, while much of it was burned on 3-day barbecue binges, fuelled by cheap beer and brandy.
It didn’t take us long to realize the HP and Epson spec sheets, which proudly cited insanely high DPI for their printers and scanners, were as pointless as a Facebook share button on a kinky fetish site. So, we started using cheaper, older hardware other people didn’t want, and put the savings to good use: more meat and more booze. Fast forward twenty years, we still like to work hard and afford the finer things in life, and some of them were in part made possible by tech frugality. We didn’t buy into priter DPI poppycock back then, and we certainly couldn’t care less about display PPI today.
The evolution of high pixel density displays is about to stall, unless our eyes can evolve to keep up.
But your average consumer does. Oh yes, most of them still think they can actually see difference between 440 and 550 pixels per inch (PPI) on their latest gadget. I might have missed a few things over the past two decades, but either the human eye has evolved to such a degree that all kids and many millennials have better vision than ace fighter pilots, or they’re just delusional.
I’ll go with delusional, or at least immature, because I figured out my eyes weren’t that good when I was 15.
In this post I will try to explain what led the industry astray, and what developers and designers need to keep in mind when developing for this new breed of device. You may notice that I have some strong opinions on the subject, but this is not supposed to be a bland, unbiased report on a purely technical issue. The problem was not created by engineers, you’ll have to get in touch with marketing to find the responsible parties.
How Did The PPI Lunacy Get Started Anyway?
One word: Apple.
Apple was the catalyst, but it actually turned out to be the good guy in the long run. The real culprit was the Android mob.
Apple introduced the Retina marketing gimmick with the launch of the iPhone 4, which boasted a small, hi-res display that blew the competition out of the water. In fact, it still looks quite good, and there is a good reason for that: Our eyes couldn’t tell the difference in 2010, and guess what, they can’t tell the difference in 2015.
Apple may have started the high-PPI Retina craze, but the Android gang took it to absurdity.
Most people associate Retina displays with the density of the iPhone 4 display, which was 326 PPI (614,400 pixels on a 3.5-inch display). This is not inaccurate; saying that anything above 300 PPI can be considered a Retina display is more or less correct when talking about a mobile phone. The same metric cannot be applied to other devices because the typical viewing distance is different. Apple’s standard for mobile phones (at the time) was 10 to 12 inches, or 25 to 30 centimetres. The typical viewing distance for tablets is often cited at 15 inches or 38 centimetres, while desktop and notebook screens are viewed from about 20 inches (51 centimetres).
You can probably spot an issue here. Did you use your iPhone 4 at the typical 10-inch viewing distance? Maybe. But what about the iPhone 6 Plus, with two extra inches? Probably not. One of the good things about having an oversized phone is that you don’t need to bring it up to your face to view a notification or a message. Sometimes I don’t even pick my phone up, I just tap it next to my keyboard. Sometimes I pick it up and shoot off a short text without taking my wrist off the table, at desktop keyboard distance, which is much closer to what Apple had in mind for notebook and desktop screens than mobiles or even tablets.
Being the younger, insecure kids on the block, the Android gang quickly decided they had to do something about the iPhone 4. The response was swift and came in the form of 720p smartphones, with panels measuring 4.5 to 4.8 inches. When frustrated teens try to outdo someone else, they tend to overdo it, so a generation or two later, 1080p panels became mainstream, and they got bigger, 4.8 to 5.2 inches. The latest Samsung flagship, the Galaxy S6, boasts a 5.1-inch Quad HD Super AMOLED display, with a resolution of 2560 x 1440 and, wait for it, 577 PPI. There is just one thing: The panel uses a PenTile matrix, so many people would argue that it’s not really 2560x1440. Who cares, bigger numbers sell, right?
In Samsung’s defence, the Korean giant did create a use-case for such high resolution screens, sort of. It’s a simple and relatively inexpensive Virtual Reality solution dubbed Gear VR. Google Cardboard is more of the same, but Samsung seems to be taking the whole VR trend a bit more seriously.
The Invasion Of Oversized Androids
There was a bit of a problem with this approach. Like it or not, once you start chasing pixels, you are more likely to end up with a bigger screen. This means more backlighting, more GPU load, more juice, and a bigger battery. And, how many pixels does that leave us with anyway?
Well, for a 720p display, the phone has to render 921,600 pixels for every frame. That goes up to 2,073,600 for 1080p displays and culminates in 3,686,400 on a 1440p panel like the one used in the Galaxy S6. To go from 720p to 1440p, an application processor has to figure out what to do with four times as many pixels with each refresh cycle. This, obviously, isn’t very good for battery life although Samsung did a great job thanks to its efficient AMOLED technology and industry-leading 14nm SoC. However, the general trend was a vicious circle and many vendors simply keep making bigger screens, to hide the even bigger battery at the back.
Apple may have started the craze, but the real troublemakers are found elsewhere, hiding behind green droids.
We have already reached the ergonomic limit in terms of smartphone and tablet size.
I know what some of you are thinking: “But consumers want bigger phones!”
No. Consumers want whatever you tell them. That’s a fact.
In this case, the industry is telling them they want bigger phones, which are becoming so unwieldy that the next thing they’ll need are smartwatches, so they don’t have to drag their huge phablets from their pockets and purses. Convenient, is it not? Huge phones with insanely high pixel densities are a triumph of cunning marketing over sensible engineering.
Besides, people also want better battery life and we’re not seeing much progress in that department. The industry is tackling this issue with bigger batteries, some of which are almost powerful enough to jumpstart a car. I wonder what will happen when one of them, built by the lowest bidder, decides it’s had enough, springs a leak, or accidentally gets punctured?
That’s one of the reasons why I always found those tabloid headlines about smartphones stopping bullets so hilarious. Sure, it can happen under the right circumstances, but theoretically, you can also win the lottery and get struck by lightning when you go out to celebrate.
Instead Of Pointless PPI, Try Using PPD
While PPI has already been rendered a pointless metric, especially in the era of convertible, hybrid devices, the same cannot be said of pixels per degree (PPD). I think this is a much more accurate metric, and a more honest one at that.
Unlike PPI, which only deals with density, PPD takes viewing distance into account as well, so the same number makes sense on a smartwatch and a 27-inch desktop display. Here is how it works, taking the good old iPhone 4 as an example.
The device has a 326 PPI display and it’s supposed to be used 10 inches from the eye, you end up with 57.9 PPD at the centre of the image, going up to 58.5 PPD at the edge. This is almost at the limit of 20/20 vision. However, if you have better than 20/20 eyesight, you could theoretically benefit from a higher resolution. However, on a backlit screen, covered by smooth and reflective glass, with a pinch of anti-aliasing, few people could ever tell the difference.
The PPD formula is simple:
2dr tan(0.5°), where d is the viewing distance and r is the display resolution in pixels per unit length.
Before you start breaking out your trusty TI calculators, here’s an online PPD calculator you can use.
So, let’s see what happens with a 5.5-inch 1080p phablet (iPhone 6 Plus) if we change the viewing distance. At the standard 10 inches, we end up with 71.2 PPD, however, at 11 inches the number goes up dramatically, to 78.1 PPD. At 12 inches it stands at 85 PPD, and at 13 inches we see 91.9 PPD.
PPI is becoming a useless metric for designers and developers. PPD is the way to go.
Now let’s take a look at some cheap Androids with 720p panels. The visual density of a 5-incher at 10 inches is 52.1 PPD, but since I doubt the distance is realistic (if we are using the same distance for a 3.5-inch iPhone), let’s see what happens at 11 and 12 inches: we get 57.1 PPD and 62.2 PPD respectively. An entry-level 5.5-inch phablet with the same resolution has a density of 47.5 PPD at 10 inches, but at a more realistic 13 inches, we end up with 61.3 PPD. Granted, used at the same viewing distance as the iPhone 4, these numbers look bad, but few people will use these much bigger devices at the exact same distance.
So, why am I changing the viewing distance to begin with? As I pointed out earlier, that’s something most users do without even noticing, especially on Android phones. When I upgraded from a 4.7-inch Nexus to a 5-incher with capacitive buttons, I noticed a slight difference in the way I handled it. When I started playing around with a few 5.5-inch phablets and going back and forth between them, the difference became more apparent. Of course, it will depend on the user; someone might have the exact same viewing distance with a 4-inch Nexus S and a 6-inch Nexus 6, but I doubt it. This is particularly true of Android because the UI is more or less a one-size-fits-all affair and does not take into account the loads of different panel sizes out there. Since I am a fan of stock Android, the difference was even more apparent; Lollipop looks almost the same on a 4.7-inch Nexus 4 and a white-box 5.5-inch phablet.
Apple does it differently. Well, to be honest, Apple didn’t even have to do it until the launch of the iPhone 6 Plus because it only offered one screen size, which allowed it to optimize the user experience in no time.
Why Pixel Density Matters
Why should developers and designers care about all this? It’s mostly a hardware thing, anyway. Developers have nothing to do with this mess, just let Google, Samsung, Motorola and Apple sort it out.
Devs and designers aren’t part of the problem, but they can be part of the solution.
Like it or not, we have to waste perfectly good clock cycles and milliamps on these power-hungry things. Unfortunately, apart from optimisation, there’s not much developers can do. All mobile apps should be optimised for low power anyway, so that doesn’t make a difference. Designers can’t take into account every single resolution on every single screen size when they polish their designs. At the exact same resolution, they might have to use virtually no anti-aliasing, or moderate anti-aliasing, or go all out with some really aggressive edge-softening. It all depends on the type of device and screen size, not the resolution.
This is trickier than it sounds. Using slightly different settings for 5-inch and 5.5-inch devices with standard resolution screens sounds easy enough, but it would only address one side of the problem. Will a tall, 40-year-old Swede use a 5.5-inch 1080p phone at the same eye distance as a 14-year-old Taiwanese teen chatting with her girlfriends? Of course not.
PPD and viewing distance depend on a number of factors. PPI is just one small part of the equation.
This, among other things, is why I’ve come to despise PPI. It’s become a useless marketing number; it does not provide consumers with accurate information when they purchase a new device, and from a developer’s perspective, the PPI arms race is doing more harm than good. It’s not making hardware better in a noticeable way, yet it’s making it more expensive and less efficient. It is no longer improving the user experience, either, and in some cases it is even degrading it.
A few years ago, mobile designers had to take into account a few standard Apple resolutions and a handful of Android resolutions and screen sizes. Now, they have to deal with Apple products in more aspect ratios, resolutions and pixel densities. Android, due to its trademark fragmentation, poses a lot more challenges than Apple or Windows (Phone). While the trend has been to inch towards bigger screens and higher resolutions, a lot of Android devices still ship with 4.x-inch screens, and sub-720p resolutions. Add to that a host of legacy devices, and you end up with a pool of green goo.
Ten Easy Ways Of Wrecking User Experience On High-Res Devices
Let’s take a look at how high PPI displays have a negative impact on user experience, starting with hardware and performance issues.
- Heavy websites are too demanding
- Battery life and durability may take a substantial hit
- Effect on storage, bandwidth, load times
- Games that would otherwise run smoothly become jerky
- SoC may be throttled, refresh rate lowered
Websites with a lot of demanding content, such as elaborate responsive sites, can be problematic even on underpowered desktops, let alone mobile devices. Five years ago, most of us relied on 1080p desktop displays and the iPhone 3GS had a 480x360 pixel display. Today, most people still use 1080p on desktop platforms, but at the same time they buy 1080p smartphones on the cheap. For some reason, people think it’s OK to place the same strain on a desktop and a $200 smartphone that has a fraction of the processing power. Toptal Software Engineer Vedran Aberle Tokic authored an excellent post dealing with problems caused by responsive websites on mobiles, so please check it out for more details.
Of course, as soon as you start pushing a smartphone or tablet to its limits, battery life takes a massive hit. So, now we have bigger batteries in our phones, and more powerful chargers, and wireless charging, and powerbanks; and we still run out of juice by sundown. This is not just an inconvenience; the battery has to endure more charging cycles, it degrades over time, and now that most smartphones ship with integrated batteries, this poses a problem for the average consumer.
Who cares if your app or website look marginally better than your competitors if they end up draining the battery faster? And, what if your gorgeous hi-res designs end up loading slower, taking up more storage, and sucking more bandwidth than the competition?
Games and other graphically demanding applications might benefit from higher resolutions, but they can also experience nasty performance issues. Casual games that don’t stress the GPU to its limits can look muchbetter in very high resolutions, and they can be smooth even on underpowered hardware. However, 3D games, even casual ones, are a different story.
I am no gamer, and it’s been more than a decade since I was hooked on a game (Civilization, of course). However, I recently discovered World of Tanks Blitz for Android, and experienced a relapse, so here is some anecdotal evidence.
The game is easy to master, fast-paced, doesn’t require wasting hours per match, and it combines my love of history, technology, trolling people and blowing stuff up. Since I never install games on my phone, I tried it out on a 2048x1536 Android tablet, powered by a 2.16GHz Intel Atom Z3736F processor with 2GB of RAM. UX is good; after all, this is a popular game from a big publisher. Prior to the last update, the system would set the graphics preferences automatically and I was happy with overall performance, about 30 FPS in most situations (dipping to 20+ in some situations). However, the last update allowed me to tweak graphics options manually, and then I got to see what I was missing out: much better water shaders, dynamic shadows, fancier particle effects and so on. I tweaked the settings a bit, but had to trade a lot of eye candy for performance.
With that particular hardware platform, the game would have been able to run at maxed out quality settings at 1024x768, at a substantially higher frame rate. In other words, my user experience would be better on a cheaper and slower device, with just one quarter of the pixels. Changing the resolution would obviously solve everything, but it can’t be done.
Reducing the load would also allow devices to run smoother for longer periods of time, without having to throttle their processors, automatically reduce screen brightness and so on. In some cases, hardware vendors even opted for lower screen refresh rates to preserve battery life and reduce load.
This brings us to aesthetics, and ways of messing up UX on hi-res devices that have nothing to do with performance issues:
- Reliance on rasterised vs. vector graphics
- Use of resampled images
- Viewing old low-res content
- Using legacy apps
- Inadequate or overly aggressive anti-aliasing
Although vector graphics play a prominent role in design, we still have to rely on rasterised images for a lot of stuff. Vector graphics are more or less useless for everyday content delivery. For example, when developers create a simple news reader app, it might look magnificent, even on a low budget, on all devices. However, if the content provider doesn’t do a good job, the sleek and sharp design will be ruined, with inadequate visual content, such as low resolution images and video, compression artefacts, bad anti-aliasing, and so on. If forced to reuse older images, they may be tempted to resample them, making an even bigger mess.
The same goes for old content and apps. Not all websites look better on high resolution displays; not all websites are regularly updated to take advantage of new hardware. Ancient CSS does not look good on high PPI devices. Older apps can also misbehave, or end up with a broken UI.
Anti-aliasing can be another problem, but one of the ways of making sure it’s spot on is to rely on PPD rather than PPI. Of course, there is only so much developers and designers can do, especially if their products rely on third-party content, uploaded and maintained by the client.
Things Will Get Worse Before They Get Better
During any period of rapid tech evolution, teething problems are bound to occur. The fast pace of smartphone development and adoption has created numerous opportunities, along with more challenges for developers.
This high resolution race won’t go on for much longer; it’s impractical and becoming pointless. High-res screens are already shipping on low-cost devices, and the trend is going to slow down before it comes to a grinding halt. In the end, we will end up with a few standard resolutions from $200 to $1000 devices, and that’s it. There is a lot of room for improvement on other fronts, specifically, battery life and overall user experience.
Still, I think it’s a good idea to keep an eye on market trends and keep track of sales figures, just to be one step ahead and to know what to expect. It’s almost as important as tracking the spread of different OS versions and platform market share.
Unfortunately, there is not much developers and designers can do to tackle many of these issues. In my humble opinion, the best course of action is to keep clients in the loop, make them aware of potential issues beyond your control and issue clear guidelines on content that should be added to websites and mobile apps.
This article was written by NERMIN HAJDARBEGOVIC, a Toptal Editor.
