E-mail development has undeniably advanced in recent years. Litmus recently published its ‘State of the email’ report that highlighted changes in anti-spam laws, new email apps, and the introduction of different devices.

Below I have focused on the micro side, highlighting some key areas in which e-mail development has advanced, and how you can use them to bring to life a campaign or newsletter:

• Responsive emails

Apple’s iPhone range is the standout leader in email clients, with 28% market share last year. With so many people having easy access to their email accounts on their mobile device, adapting your design and layout to cater for this can effectively engage a reader.


Standard CSS media query in a <style> tag within the body. Any platform that supports CSS in email will recognise this.

• Retina-specific images

Mobile devices like the iPhone have a much higher pixel density (known as DPI, or ‘dots per inch’) than an average device. This can make images that look fine on a regular screen very blurry on a retina device. Targeting these with retina images makes an e-mail visually appealing and gives the impression that the message is specifically designed for that user’s phone.


Target specific resolutions using ‘min-device-pixel-ratio’. This can be used to target many types of screen quality, not just retina.

• CSS Animations

Platforms supporting CSS within e-mail also opens the door to CSS animations. Moving parts in an e-mail will always catch a reader’s attention and open up a whole world of possibilities for developers.

Case study: Nails inc

Nails inc recently launched its re-branded nail polish customiser ‘Styled by You’. As a one-off campaign it needed to differentiate itself from Nails inc’s regular image, as well as creating something that would truly grab its subscriber’s attention.

How was this achieved?

A revolving slideshow of imagery was created, entirely in CSS, to act as the e-mail’s banner. This worked on both desktop and mobile, with the slideshow adapting to fit both screen sizes. For those viewing the e-mail on a platform that didn’t support this, it would fallback to showing just the first image.

In what way?


Regular CSS animation rules within the <style> tag. Appended with ‘-webkit’ as they are currently only supported by Mac mail and Apple products.

It is worth noting that the points above are not globally supported by all email clients. It’s therefore important to have fallbacks for older versions of email platforms (Microsoft Outlook in particular) so that creating new features doesn’t inadvertently create a horrible experience for others. Campaign Monitor has created an excellent table so you can quickly see which features are supported by which email clients.

With this topic in mind, it is always worth looking at your campaign analytics to see what the majority of your users view your emails in. For Nails inc, its demographic largely used newer platforms and devices, meaning that creating something more complex was worth the time investment.

Whilst this slideshow is cool to look at, it needed something extra to really drive the message home: it’s ‘Styled by You’

Personalise it for the reader

A key part of ‘Styled by You’ is that you can monogram the polish cap with a single letter. Therefore the imagery in the slideshow was customised for the reader, as the monograms matched their first and last initials. The tag line was also changed to ‘Styled by [customer name] to hook them from the minute they saw it.

Whilst not a new concept in e-mail development, when used in a subtle way - and in this case merged with the product directly - it can really have an impact on how it’s received.

How could you do this?

There are many accessible tools to create this feature, MailChimp for example has ‘merge tags’ that let you integrate dynamic data from your subscribers into campaigns.


The response to this campaign was extremely positive, with several readers taking to social media to share not only the email campaign but, most importantly, the product itself that they could customise through the website.


Hopefully some of these concepts will inspire you to experiment with your campaigns. Put yourself in the shoes of the customer to ascertain what would capture your attention, and then give it a go. What have you got to lose?


By Ashley Firth, Front end developer at Tangent

PrivSec Conferences will bring together leading speakers and experts from privacy and security to deliver compelling content via solo presentations, panel discussions, debates, roundtables and workshops.
For more information on upcoming events, visit the website.

comments powered by Disqus