web-engineer labs, a think-tank of ideas, experiments and other stuff

2013 e-card design and a celebration of 30 years

07-Jan-2013

With this year’s Christmas e-card design we sought to highlight our extended team and the launch of our new website. With the 30th anniversary of the internet looming we thought this would be an interesting spin to base it on.

We started by sketching out an idea where the team would be illustrated and involved in a Christmas setting, playing out some sort of task tied in to the theme and concept. This year, for a change, the focus would mainly be on the message and quality of the illustration.

Often when you send an email with images that the recipient must click the "show remote content" button to see anything that’s not just text. With an image heavy email we wanted to incorporate a hidden message that would be shown instantly. So when we came to slicing up the illustration we did so in such a way as to spell out "MERRY XMAS". This way people had an inkling to what the email was before downloading the content and were not left staring at a blank email that may look like spam at a glance. Arguably you could say this makes the mail responsive. We also made sure the artwork was large enough to display as retina quality graphics on high pixel density displays such those popular mobiles.

Despite testing the email in a wide variety of browsers and our best efforts we did have a compatibility issue with the Outlook 2013 email client. Upon loading the remote content the receiver would see a merge of the sliced images and final illustration.

The solution to this is to ensure that image slices are of equal height, avoid spans and above all – just because it looks good in Outlook 2011, 2003 and live mail – don’t assume it looks good in 2013 – a specific test should be made if your trying something complex like this in your emails.

I hope some of you find this technique interesting, with emerging support for media queries in mobile email clients and no support in the common desktop clients responsive email is still in it’s infancy. Email is one world where you are constantly coding defensively to achieve a reasonable result in as many clients as possible it seems…