1973 Ltd

Email in 2015 – What works and what doesn’t

email-client-comparison

In the world of email not all interactive elements and embedding capabilities are incompatible with email clients. To push the boundaries of what can be achieved it’s important to know what works and where. Below we look at three areas of design and coding and their compatibility with modern email clients, as well as a couple of old ones (can’t be forgetting those pre 2007 Outlook/Lotus Notes users).

Embedding Forms and Videos

  Embed Form Embed Video
Desktop        
Lotus Notes   yes     no  
Outlook 2000-03 some Not Functional no  
Outlook 2007-13 no   no  
Outlook for Mac yes   no  
Thunderbird yes   some Only .mp4 files
Apple Mail yes   some Only .mp4 files
Web        
Gmail yes   no  
Yahoo some Not Functional no  
Outlook.com some Not Functional no  
AOL some Not Functional no  
Mobile        
iPhone, iPad yes   some Only .mp4 files
Gmail Mobile yes   no  
Android Mobile yes   no  
Windows Mobile yes   no  

When it comes to embedding forms, with the exception of Outlook, most email clients are very friendly towards their inclusion in your email and will respond as they would on a webpage.

The one main drawback of embedding your form into the email rather than an external webpage is that most of the form-friendly email clients will ignore the ‘required’ command on an input or text area. This is obviously not ideal as the form can be submitted with key areas of data missing. Another drawback we found was that an alert like the below was shown when submitting the form:

Whilst not a non-starter and less important than the ‘required’ issue, it does enable the user to cancel their form submission, losing the submitted data, as well as generally making the whole form submitting process less user-friendly and fast than using a webpage.

In conclusion, whilst forms do indeed work in emails we think it’s currently still more reliable to link through to a form on an external webpage.

With embedding video, the results are unfortunately no better. It’s clear to see from the table above that the support for embedded video is non-existent in email clients, with only iOS email clients and Thunderbird offering some sort of support for video embedding.

However, with modern bandwidth speeds animated GIFs can increasingly be used to great effect to achieve a multimedia aspect to your emails, allowing enough frames to replicate a short video clip. We did this recently using video screen capture software and then converting to a gif:

As you can see the animated GIF works nicely and as long as you keep the file size as low as possible it can be implemented easily into an email. We feel this is the best fall-back option if you’re looking to explore video in your emails. This talk of animated GIFs also leads nicely to our next area of research…

Images – Animated and Rollover

  Animated GIF Rollover Images
Desktop      
Lotus Notes        
Outlook 2000-03 Only hover works
Outlook 2007-13  
Outlook for Mac  
Thunderbird Only hover works
Apple Mail  
Web      
Gmail  
Yahoo Only hover works
Outlook.com Only hover works
AOL Only hover works
Mobile      
iPhone, iPad  
Gmail Mobile  
Android Mobile  
Windows Mobile  

Where support for the more advanced functionality in today’s coding world is lacking in email clients, it is made up for with support for images and some of the little tricks that come with images.

As talked about in my previous blog post background images are becoming easier to implement into email (and by easier I mean viable) and this is the case with both animated GIFs and rollover images.

Animated GIFs have been a staple of the web community for years but have never featured prominently in email due to their lack of support and file sizes. Thankfully this is changing and as the support for animated GIFs has increased so has their use in emails. The guys over at Litmus have compiled some nice looking GIFs in their emails as well as notes on how to use them in your email in this blog post.

In our research one area we were particularly interested in was whether rollover images would work in emails. The good news is that they do, although with some drawbacks. Getting a working example of rollover images was key for us to be able to understand where the support for them ended and thanks to this handy web tool and some tweaking of the code we were able to get a working example.

Below is the section of the email with the rollover images –

The code required to get the rollover images working in our email is this:

I mentioned that there are some problems with cross-platform support for rollover images and this became apparent in the tests we did. As with most things, Outlook post 2003 just straight up ignores the rollover image and will instead just display the standard image with no rollover. This can certainly make or break the theme of the email if you were reliant on the rollover images. A fallback plan where the key messaging is delivered on the main images is necessary, but if your target audience are mostly Outlook users it may not be worth using rollover images just yet.

Another problem we found was that some of the email clients, mainly the web based ones, would not support the :focus state on the rollover. Whilst still functional without this feature it’s worth taking into account.

CSS3

  CSS3
Desktop    
Lotus Notes   no  
Outlook 2000-03 Partial support – mainly text decoration
Outlook 2007-13  
Outlook for Mac  
Thunderbird Partial support – mainly text decoration
Apple Mail  
Web    
Gmail  
Yahoo Partial support – mainly text decoration
Outlook.com Partial support – mainly text decoration
AOL Partial support – mainly text decoration
Mobile    
iPhone, iPad  
Gmail Mobile  
Android Mobile  
Windows Mobile  

The final thing we looked at was the support for CSS3 in email. Many of us have experienced the wonder of CSS3 – from animations to the simple bit of text decoration like a ‘drop shadow’ or a ‘gradient’ and these design techniques have largely been limited to the web and not us email coders.

We hoped this would have changed with advancement in coding languages and software but from our research we found out this is unfortunately not the case with only Apple supporting CSS3 in a reliable manner. Some web clients, like Outlook.com and Yahoo, do offer a bit of CSS3 support but frankly it’s not enough to warrant getting excited over.

Conclusion

Through our research it’s clear to see that email doesn’t have the support that it deserves as a vital part of a business’ marketing and communication plan that shows no sign of going away or being replaced.

However, despite the limited support there are increasing exceptions and developments taking place which keep the pressure on the main email clients, as well as their users to switch or upgrade so as not to miss out.

Things will improve as long as we in the email design community continue to push the boundaries and find clever workarounds. So don’t be afraid to experiment with your emails and make them as engaging as the rest of your marketing assets!

Comments  -  0 Comments

There are no comments yet.

Follow our blog!

Recent Posts

Categories

Our latest tweets

Archives

Authors