Delightful High Resolution Displays

At one time the atom was thought to be the smallest particle in existence; the smallest building block on which all matter is built. In screen based design the pixel is our smallest building block.

But times change; in physics we have discovered numerous sub-atomic particles and in screen design pixel densities have increased where the pixels sizes we define in CSS no longer equate to the pixels on a screen.

The first popularised high pixel density (HiDPI) display was found on the Apple iPhone 4. It doubled the pixel density over its predecessor providing a new level of clarity; or at least it does for vector graphics.

Vector vs Bitmap

Vector graphics, like icons or even fonts, contain all the necessary information about an image to allow it to become whatever size a designer or device needs it to be. A vector image only loses quality when its size becomes too small to be well represented on a screen.

Bitmap images, like those taken with a camera, only know what colour each pixel should be. If a bitmap image is scaled down a computer removes pixels and there’s a loss of quality. If it’s scaled up the computer takes its best guess at filling in the gaps but normally doesn’t do so well and the image comes out blurred.

Designers are perfectionists and don’t like creating designs where the quality is anything less than 100%; blurred images simply won’t do.

HiDPI Displays

For some of our previous websites, including the current Bronco design, we’ve implemented processes to duplicate images for HiDPI devices. This involves creating a larger version of the same image and using CSS to show these on HiDPI devices. It’s a time consuming and costly process so is often limited to a small set of images.

For our newest website Delightful Communications we’ve implemented a new method that is slowly being adopted by the wider web community. This method not only uses vector graphics more prominently within a design but also combines these for use within a font file.

Wingdings Version 2

I’m sure most people have seen the Wingdings font on a Windows PC, even if they have never found an actual use for it. If you haven’t heard of Wingdings it’s a font that replaces letters for symbols, for example ‘U’ becomes a diamond shape.

In creating our own version of Wingdings for a website like Delightful Communications we’ve combined a set of icons that we can use with CSS and ensure our images are flexible enough for devices of differing pixel densities.

This method removes the need to duplicate an image for HiDPI displays as well as ensuring the images are future proof if any device pushes pixel densities even further. Though the images are limited by the capabilities of CSS there are still benefits to be had over keeping them as separate image files.

Simple SVG

Before combined into a single font file each individual image is a Scalable Vector Graphic (SVG) file. As an SVG the image is not constrained by the limitations of CSS and so can appear more colourful, the Delightful Communications logo is one such example where we can define different colours for different elements within the image.

This additional control might make it seem like having the images as SVG files rather than a font would be the better implementation but it all depends on the image and how you wish to use it.

For Delightful we’ve used some of the images more than once and with different colours, to do this without the font file would require multiple SVG files. Any changes to colour would also be much more time consuming when editing an image over editing CSS.

There are also gains in performance from using a font file in a similar way as there are in using CSS Sprites. By combining multiple images together you reduce the number of HTTP requests and at times the overall page weight.

Using a font file over SVG images also ensures compatibility with a wider range of browsers with more supporting @font-face (part of implementing the font files) than SVG.

A Messy Future

The web is getting somewhat messy and that won’t change any time soon. The best in the industry are moving away from pixel measurements as we adopt Responsive Web Design techniques as well as dealing with new technologies such as HiDPI displays.

While the industry is working hard to keep up, recent advances have the potential to turn the methods we use on their head and unfortunately the right tools aren’t always to hand. Eventually the websites we produce will be flexible enough for all and the Delightful Communications website is just another little advancement along the way.