How to Design Email Templates, So That We Can Slice Them
For some time now, the world of web design and development has been little short of a land of dreams, where a spirit of "it can be done!" prevails. With myriads of JavaScript plugins, galaxies of CSS effects and constellations of available coding solutions, virtually everything is possible, and here at Chop-Chop.org we like to think that if something can be designed - it can be coded.
Except, I'm afraid, when it comes to email templates.
You see, unfortunately for you, creatives, and for us, coders, developing email templates comes with quite a heavy set of limitations. There are obstacles that come into play here, which we simply don't experience when developing a standard website.
It's all about the mailing clients
The main reason for that is rather simple. To protect the privacy and security of their users, the producers of mailing clients restrict the kinds of remote content that can be displayed in an email, and the kind of code that is supported. And thus, while all of the websites and WordPress themes we create are coded using HTML5, email templates need to be coded using XHTML 1.1.
If you access this page, you can view a list of CSS parameters that are supported by specific mailing clients. Even if you are not into coding, and couldn't be bothered by what specific parameters mean, you can probably see there is a lot of holes in there.
Email templates' design don'ts...
Sadly, this means that while coding your template, the developer will have a much narrower range of attributes at their disposal, and styling some elements may turn out to be much more difficult, if not entirely impossible. Do not despair, though. To help you create an attractive, but easy-to-code email template, we have worked out a comprehensive list of features which you are better off avoiding when preparing the designs.
1. Custom fonts
Though implementing custom fonts in email templates is not altogether impossible, most clients will not process custom webfonts or typology from Google Fonts. There is a possibility to implement custom fonts specially designed for email templates, which will be visible in the iOS Mail and Thunderbird clients, but for the remaining clients a fallback to a websafe font (i.e. Arial) will be necessary. One more thing to consider is that including custom fonts in the template increases the amount of remote content, which in turn makes it more likely for the email to be marked as spam. That is why it's good to consider using so-called websafe fonts, which will be present on the recipient's device, and will thus render properly in the template.
2. Background images
Most mailing clients have limited or no support for background images. Because of that, it makes little sense to design a template with a text field going over an image. There are two ways to go about this problem. One of them is to merge the image and text into one flat layer. The problem with this solution is that the flattened text will not be editable in the newsletter client (e.g. MailChimp). The other solution is to simply replace the background image with a plain color background. The text will then remain easily editable.
3. Shadows
Most mailing clients do not support the box-shadow attribute, so adding shadows below buttons and images with CSS will not be possible. If you feel your template just won't be the same without shadows here and there, adding them as part of the actual image is still an option.
4. CSS animations
The reason why you have never seen a CSS animation included in an email template is because it cannot be done. Anyone who is into UX, web design or development knows that CSS animations are a great way to breathe life into an otherwise static website, but unfortunately the same trick will not work here.
5. Rounded corners
Otherwise widely used, the border radius attribute is not supported in email templates. If a rectangle with rounded corners is to be used as a box or button, it will have to be included in the template as an image.
...and do's
All of this sounds rather discouraging, I admit. Don't worry though, fortunately there is good news as well. Here is a handful of things that can by all means be implemented in email templates:
1. Responsiveness
Just two of the popular mailing clients support real responsive email templates (iOS Mail, Mozilla Thunderbird). Others, such as Outlook, Gmail or Yahoo, by definition display static templates only. However, there is a way to make the templates 'appear' responsive in other mailing clients. This is done by making the XHTML tables resize and reorder properly on lower screen widths.
2. GIF animations
As I wrote earlier, mailing clients will not support CSS animations. However, you can still sneak some animations into your mailing campaigns using GIF files. Animated GIFs are supported by all major mailing clients except Outlook.
3. Retina display
Despite the many restrictions, it is possible to implement retina optimization for email templates. You can take this fact into consideration when planning a mailing campaign directed at Apple device users.
To sum things up, coding email templates is not as straightforward as coding a website which utilizes HTML5/ CSS 3.0 code. However, we hope that by keeping in mind these few dos and don'ts you'll be able to design even more new exciting email templates.
