What are Unsupported Features in Email Marketing?
In the context of
email marketing, unsupported features refer to elements or functionalities that do not work across all email clients. These can include certain types of
HTML and
CSS properties,
JavaScript, embedded media, and interactive elements. The lack of support can result in a broken user experience, which is why fallbacks are essential.
Why Do Fallbacks Matter?
Fallbacks are crucial for ensuring a consistent and
accessible user experience across different email clients. Since email clients like Gmail, Outlook, and Apple Mail each have their own rendering engines, what works in one might not work in another. Fallbacks provide an alternative that ensures your message is still conveyed even if the original feature is not supported.
What Kind of Features Often Require Fallbacks?
Custom Fonts: Not all email clients support web fonts. The solution is to use system fonts as a fallback.
Background Images: Some email clients do not support background images. A solid background color can be used as a fallback.
CSS Properties: Advanced CSS like flexbox or grid might not render properly in all email clients. Inline CSS and simpler layouts can serve as fallbacks.
Interactive Elements: Elements like accordions or carousels may not function in all email clients. Providing a simple static version as a fallback is a good practice.
How to Implement Fallbacks?
Here are some strategies: Conditional Comments: These are especially useful for targeting specific versions of Outlook. You can write HTML that only certain versions will read.
Inline Styles: Some clients strip out
embedded CSS, so using inline styles ensures that your styles are preserved.
Bulletproof Backgrounds: Using VML (Vector Markup Language) for background images ensures compatibility with Outlook.
Fallback Fonts: Always specify a web-safe font family in addition to your custom font.
Examples of Fallbacks in Action
Consider an email that uses a custom font. The CSS might look like this:code {
font-family: 'CustomFont', Arial, sans-serif;
}
If 'CustomFont' isn't supported, the email client will default to Arial or sans-serif.
For background images, you can use:
code {
background: url('background.jpg') no-repeat center center;
background-color: #ffffff;
}
If the image doesn't load, the background color will be displayed instead.
How to Test Fallbacks?
Testing is crucial for ensuring that your fallbacks work as intended. Use tools like
Litmus or
Email on Acid to preview your emails across different email clients and devices. These tools can show you how your email will render, allowing you to make necessary adjustments.
Best Practices
Keep it Simple: Simpler designs are more likely to be universally supported.
Progressive Enhancement: Start with a baseline that works everywhere and add enhancements for email clients that support them.
Fallback First: Design with fallbacks in mind from the beginning to ensure a smooth user experience.
Conclusion
Fallbacks are an integral part of
email marketing. They ensure that your emails look good and function well across all email clients, providing a consistent user experience. By understanding unsupported features and implementing effective fallbacks, you can enhance the reliability and effectiveness of your email campaigns.