At the end of July I travelled to London along with Chris for the annual Litmus Email Design Conference. This is something I wanted to attend since it’s inception and hearing the positive words Laura and Dave had about last year’s conference I was eager to see what this year’s conference offered.
Over the two days I got to experience everything that makes our industry great and reaffirm that this is the go-to conference for people involved in email. The speakers brought ideas to the table that generally wowed me and the community was as always very supportive. None of this was more apparent than during the live optimisation section of the conference where our own email was received positively and got some big applause from the crowd (this on a personal level was my highlight).
Coming back to the office frankly buzzing from the conference I was keen to delve into some of the notes I’d taken to see what I had learnt from my fellow #emailgeeks.
Below are some of the key things I took away from the conference about all things email:
- Pre header text is still important
Pre header text in an email is still as important as ever. It gives a nice finish to the email and can be important in influencing a persons’ decision to read your email.
- A/B Test everything
Every change you make to your emails should be tested with an A/B test, whether it’s small or big. A/B testing will allow you to see what’s working and what’s not with your emails. Remember without the right testing to validate your changes you’re simply just changing your templates, not improving them.
- Role=”Presentation” on every table to help accessibility
Adding role=”presentation” on all content filled tables will aid accessibility within your email. Adding this will allow text-to-speech programs to get straight to the content of the email instead of wading through every blank table cell.
- Mobile first templates
In the age of portable devices building your templates to be ‘mobile first’ is the most important thing. Consider making your template work in the Gmail App before catering for other clients.
- Use calc() widths
Using the styling of calc() for widths in your email will allow you to get a truly responsive template, even for that pesky Gmail App. Rémi Parmentier, who spoke about this at the conference, explains how calc() works with email in this blog post.
- Test on live devices/multiple email clients
Nothing beats testing your emails on a live version of an email client. Having so many different email clients and portable devices available to the average reader means that simply testing on one device will not give you the true picture on how your email will render once live.
- CSS3 Animation is awesome
CSS3 animation is a great way to make your email pop and draw in new readers. However don’t overload the email with it, as support for animation is limited. Never use CSS3 animation on CTAs as some clients will strip the animation, taking the CTA with it, leaving your email void of links.
- No ‘Click here’ links
We live in a society where the majority of email is read via non-click based systems. Using click here on links and CTAs is just old-fashioned and can fool people into believing your links require a clicking action to work. Try to use more mobile-friendly text like “Find Out More” and “Read More”.
- Be Patient!
Emails can be tricky to work with so patience is key, whether it’s avoiding a complete meltdown when Outlook doesn’t render your template correctly or adding and linking 40 checkboxes in your new interactive templates. Making a good email takes time but once it’s done you’ll be delighted with the results.
Some of the speakers at the conference were also keen to talk about a few of the cooler aspects of email. Some of the things were generally eye-opening and will definitely be used in future work. I listed a few of these things below:
- Unicodes can be used as Classes and IDs
Unicodes such as ★ and † can be used as names for classes and IDs. Whilst it won’t revolutionise your coding it’s a nice Easter egg to pop in for those who are keen to browse your email’s source code.
- @supports is a thing
CSS @supports is a feature query that will only add the styles within its brackets if the web browser/email client supports the style named. It’s a great way to incorporate some modern day styling into your email but can be temperamental with email clients so be cautious before fully investing into using this.
- Put music and video into an email
Whilst support for music and video within email is limited it’s still possible to use in an email. It’s a great way to add character to an email and for people using a supported client you’ll be able to greet them with a unique experience. One slight downfall is that the play button for video doesn’t work in email clients so you’ll need to auto-play any videos added. Consider using an animated GIF or CSS3 animation to distract the reader whilst the video loads.
There were a couple of other points which I felt deserved their own blog post so will delve into them at a later date. This includes background images which as you know is a keen topic of mine.
The Email Design Conference was everything I had hoped for and it was generally amazing to meet so many people that are just as fascinated with email as I am. A quote that was being preached a lot at the conference was “Constraints Drive Creativity” and this couldn’t be truer of email. This conference proves that despite all the restrictions of modern email clients (and older ones) people can still create emails of awesome quality.
I look forward to investing what I learnt into our work over the next year whilst setting the countdown clock for #LitmusLive 2017!