Retina display design challenges
You might have heard of the phrase ‘Retina Display’ cropping up in relation to the latest batch of Apple product releases. The phrase essentially means a digital screen which has a 300 dpi or greater screen resolution. This moves a digital display much closer to the quality of those luxurious print magazines that appear crisp, sharp and full of colour. We’re talking about 3 or 4 times the pixel density which is a significant jump in image bitmap quality.
What this means onscreen is that you could be packing all that sharpness and colour into the images you’re serving on your website, and we’re not just talking about a large photographic portfolio – this applies to your company logo as well.
You’ve no doubt noticed that, if your company has a text based logo, it doesn’t always appear as crisp as you might want it to. This is because when it gets scaled down and put on the page it loses clarity as the image processing tool used to shrink it (Photoshop for example) crams a lot of information into not enough space – thin curves are a particularly obvious example. This wouldn’t happen on a retina display, not to the point of it being widely noticeable at least. Text, be it in an image or on the page, would be as crisp as you are ever likely to need.
Retina display - blog post
To add to the problem, these images look worse on a high density screen than they do on your standard desktop. At this moment in time, there is no easy or widely accepted way to manage the change from non-retina display devices to retina display devices. Web developers are scrambling around looking for a way to serve both the lush, pixel-packed images as well as an optimised version depending on the device. The most obvious challenge is that, although it might be easier to sit back and pack your website with super high resolution images which pack as much punch as a Mike Tyson right hand, these images will be significantly ‘heavier’ for someone to download. This is a real concern with the continuing rise in mobile web browsing – as well, of course, for bandwidth and disk space usages server side. The other intangible is that whilst Apple displays at a 2x pixel density, Android screens are currently packing a 1.5x pixel density.
One thing we can actively look to implement is to scrap icons as images and switch instead to embeddable icon fonts. Using an embedded font is resolution independent, the icon will scale with the display just as your H1, H2 etc should. As with every solution in discussion though, there is a trade off to be had – by implementing embeddable icon fonts you lose the pixel accuracy of an image format.
I’d love to finish off with a definitive list of things that can be done in the here and now, and while there are certainly developments and solutions being presented, they are, as yet not at a stage where they can be widely adopted with 100% confidence.
Rest assured, we’ll be working hard to adopt best practice solutions, as well as looking towards developing ideas of our own on the subject.