October 8, 2013

blog

Responsive design is the new norm, which is great, but now more than ever there is growing pressure on web designers and developers to stay at the top with twice as many considerations as before. If you do not have a basic understanding of responsive design I suggest reading Louie’s post here before reading on.

Basically, the goal of responsive design is to achieve a functional and presentable layout of your website at any resolution. Making sure the site is legible and usable are two massive topics in themselves but I want to pay more attention to becoming resolution-independent and using resolution-independent content.

Retina Displays

With the release of the iPad in 2010 and the introduction of Apple’s “Retina Display” a new problem emerged. The iPad’s Retina Display, which is a fancy name for a Liquid Crystal Display(LCD), has increased its pixel density to 264 pixels-per-inch(PPI) which was 3 times the pixel density of the industry standard 72ppi. Calculating PPI has a bit of maths involved as it is not only determined by quality of the screen but also the size. Since 2010, the Retina Display has been rolled out on the iPhone, iPad Mini and now even the Macbook laptop with competitors Google and Samsung also releasing high density screens on their own devices like the Google Chromebook.

So what’s all the fuss?

Basically, to make images and icons look high-def on Retina Displays they need to be 3x the size or scalable vector graphics, keeping in mind we do not want to triple file size or export files more than once.

Let’s look at the most common example we are all bound to come across one time or another. On your iPhone or other retina display device have you ever noticed a blurry logo? Weird right?

You’re probably thinking it’s a bit ironic that on the Retina Display most website content looks worse than on your desktop. This is because in the web environment we were pigeonholed pixel-perfect comps and images using three main graphics formats for exporting: Portable Network Graphics (PNG), Graphic Interchange Format (GIF) and Joint Photographic Experts Group (JPEG).

All three of these graphic formats are roughly based on a pixel-perfect output, each with their pros and cons, but none of them are capable of scaling larger without losing quality.

So for example, when you have a logo which was exported using one of these three formats at 200px by 40px showing on a screen with a 72ppi pixel density, every pixel is rendered as 1px.

But on a Retina Display there are three times as many pixels so each pixel is stretched to 3px(roughly). The browser then has to “stretch” the image to cover the space which will render it slightly blurry. This is not the fault of the browser but the file format, as all three of those formats do not carry any information of how that image should scale gracefully.

Solution?

Sadly, there is no solution at present and no super hybrid file format exists for images. In saying that, images for mobile Retina are reasonably safe because they are often scaled down to under half the original width so will look fine – but loading images bigger than you need is just a waste of space.

At the moment that’s not a big issue but with the increasing amount of desktop computers with pixel density above 72PPI it will be something to watch out for.

For more basic graphics like icons, patterns or logos there is a file format called Scalable Vector Graphics (SVG) which is supported by the majority of browsers except for a couple like Android 2.3 and IE8 and earlier. Using and working with SVG is easy too; with a program like Adobe Illustrator or a vector-based equivalent you can not only export but re-edit SVG on the run. Very handy when it comes last minute changes.

Resources

The responsive image performance issue

cooding.smashingmagazine.com  – Learn how to implement SVG

canisue.com – Great resource for browser support queries