Websites technology currently has reached a very high level where the email contains not only HTML, CSS, and images, but also JavaScript, audio, different kinds of animations, video, Flash format, iframe, forms, etc.
Which of these should work for all email clients? This article will help you to create your perfect email template avoiding incompatible formats.
First of all, you should understand that email clients are different from each other, and may have their own limitations, such as:
-
Gmail trims emails that are larger than 82 KB
-
Outlook does not support background images*
*For Visual Editor blocks, where inline CSS is supported, you can try adding Outlook-specific CSS directly within the HTML tags of your email template. This may help ensure that the CSS is recognized by Outlook.
<!--[if mso]>
<style>
.example-class {
/* Outlook-specific CSS goes here. */
}
</style>
<![endif]-->
So the main recommendation here is always thoroughly preview and test your email campaigns before sending it to your entire audience.
iOS devices may resize your email based on the largest element and therefore force all the elements to become proportionally smaller.
In order to format your ESP campaign for mobile devices, you could use media queries with iOS devices in your custom CSS.
@media only screen and (max-device-width: 480px) {
}
To prevent font enlargement by default on iOS mobile devices, you could add the following lines to your CSS:
<style>
* {-webkit-text-size-adjust: none}
</style>
or can also control the text on a case-by-case basis by adding the following inline CSS:
<font style="-webkit-text-size-adjust: none">
Example
</font>
Use without limitations
ESP template builder provides a huge number of options on how to customize your email template. Here is a list of the elements that are allowed in different email clients:
-
template width of 600px-800px
-
inline CSS - this is the most effective and widely used method for including CSS in HTML emails
-
GIF images (can be used as an alternative to Flash animation)
-
HTML tables and nested tables
-
table-based layouts
-
web fonts
Use carefully
Some of the visual elements could be added via ESP template builder, but in the various email clients may be rendered in a different way. Use such elements carefully and check how your newsletter looks before you send it to your entire audience.
-
background images - via ESP template builder you can add background image for the whole template and also inner/outer background image for each block. But you should remember that background images could be rendered not in every email client (e.g. it's not available in Outlook), as well it could be differently displayed in mobile clients
-
custom web fonts - you can use custom fonts in the newsletters and forms widgets. But, please note, that email clients (in particular Gmail) could not support particular custom fonts. In this case, we will use a fallback font which is substituted instead of the custom font.
-
wide layouts - we recommend sticking to the 600px-800px limit while creating an email template because on mobile clients wide layouts could be cut off and rendered in an undesirable way
-
image maps - is an image that contains areas that map to distinct links. This HTML construction could be added to your template via visual editor block. Major email clients support image maps, but not all of them. When an image is blocked by the client, all you see is a single alt text of the image and not the individual links.
-
embedded CSS - embedded CSS codes are determined in one place of an email, generally in the <head> section as a <style>. This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets.
Do not use
The following content elements are better to avoid in your newsletters, for the reason it could be forbidden in major clients, and moreover, adding such content may lead to your emails being considered as spam
This means that most email clients will not allow you to send iframes and block the messages before they ever reach their intended recipient. Because of that, it means that it would be best if you find ways to link to the content you want to display to your customer because if you include the content directly, less than half of the messages will be received.
-
JavaScript - avoid all JavaScript, because the vast majority of email clients block scripts since they can hide malicious content
-
<iframe> - is an HTML element that allows an external webpage to be embedded in an HTML document. Inline frames are often used to insert advertisements, video, audio, or forms in other websites. But iframes could bring security risks, so most email clients will not allow you to send iframes and block the messages before they ever reach their intended recipient.
-
Flash - using Flash in your templates should be avoided, as it just doesn't properly work in email clients. As an alternative, you can consider GIF images in your email templates.
-
embedded audio/video - watching a video or listening to audio at the email could be really unexpected and irritating for your end-users. So we recommend avoiding embedded media, even considering that the Apple Mail client supports HTML5 <video> and <audio> tags.
-
forms - support of forms in email clients could be quite different: some clients will display security warnings when the subscriber intends to fill the form, and others will just disable the form so it's unable to be sent. We recommend adding a link to a form on your website, where it definitely will work
-
<div> layering - some email clients might not be able to interpret it, so it's better to use CSS tables