The event kicked off at Oddfellows with an ideas jam which looked to establish product and service ideas inspired by the jam’s set theme of ‘Grow’.  Participants spent some time writing down their own ideas before a swapping and scoring ‘speed dating’ style process helped establish the stronger ideas. By the end of the evening three ideas were rising to the top. The next two days looked to develop these whittled down ideas using service design thinking in a variety of forms.

As you can tell from the video below, it was great fun, and I look forward to the upcoming Government XJAM that I will be helping facilitate. 

X Jam 2013 from Redfront on Vimeo.

You can find out more about the products and services we developed on our GlobalServiceJam page. 

I love the picture above, it really sums up the advances in display resolutions over the last twenty years, showing an iPad icon using more pixels than the entire original MacOS desktop. We are now in the next phase of screen resolution – the move to HIDPI or ‘retina’ displays. The first HIDPI display was the iPhone4, which quadrupled the number of pixels from the previous iPhone – from 320 x 480 to 640 x 960. Apple did this in an elegant way, by displaying 4 pixels instead of 1. So when displaying an image in a simple box, the retina display will be showing you 4 times the visual data.

That device was eventually followed by a few HIDPI tablets (most notably the iPad 3 with its dense 2048 x 1536 display) and we now have a couple of laptops from Apple with this very high resolution. It will probably only be a few years before all devices are HIDPI, so at Breadcrumb, starting with our own site – we have decided to make all our sites HIDPI by default.

Before I share our HIDPI workflow for WordPress, its worth asking a question, is this super high resolution worth the fuss ? Well HIDPI displays have an analogy with real HIFI equipment; when first listening it sounds good, but you are not that impressed, until you go back to listening to mediocre equipment again – eeek, its all wrong, it sounds bad, and you want back. Retina displays are the same, and as pixel obsessives we love them!

Here are a couple of examples;

This image shows normal resolution on the left & HIDPI on the right.

Unfortunately you will only be able to see the difference on HIDPI or ‘retina’ screens, so I have created this image;

This image show a HIDPI simulation, but goes the other way round – the image on the left is a ‘normal’ image, the image on the right is one quarter the resolution (half the width & half the height)

Pragmatic Guide to HIDPI (Retina) on WordPress

There are a couple of ways to adapt images for HIDPI web sites, and it would seem that a combination of both approaches works best. Generally you need to create two separate images, one in normal resolution, and one in HIDPI with twice the width and twice the height, however for smaller images only one need be created.

Big/Main Images

HIDPI images require about three times more the data (as JPEG files) so it would be a mistake to make all your images at a very high resolution as it would slow down user interaction (which we don’t want!) So the answer is to install a wordpress plug-in for retina images.

So far we have used wp-retina, a free plug-in that has worked great, and has been very easy to use. Once activated, you need to upload two images with the same name and simply append the HIDPI image with ‘-2x’. Then you add the normal resolution image to the page – then when a HIDPI device calls the site, the java script detects the device and serves the appropriate image – simples!

Small Images & Icons

For small images and icons you don’t need to create two versions of image files, you just need to make sure that you specify the image display size. A HIDPI icon may only be a few KB more that its fuzzy brother, so there really is no need to create two versions.
The small breadcrumb icon in the footer (bottom left) is a HIPDPI image

A word of warning to fellow designers

Although the future will clearly be swamped in millions of un-discernable pixels, there is a danger in designing in HIDPI today when a very small number of devices have the display capability.
While working on designs for recent client Argand Solutions, a complex diagram which looked great on the MacBook Pro Retina, just didn’t work on a normal display and so needed to be reworked to be suitable for both. There clearly needs to be some adaptation between the two worlds, and I would certainly recommend that anyone lucky enough to design on a MacBook Pro Retina, have a normal resolution display hooked up too.

We are now looking to expand our Digital Training programme, and have recently applied to the Arts Council for funding to help deliver an in-depth ongoing digital training programme for Artists and Creatives in the South West.

If you are interested in Digital Training, get in touch