Email marketing is hot and happening and anything but old-fashioned. In fact, the future of email marketing looks promising where we make (even) greater use of personalization and segmentation, automation and AI, integration with other toolings such as a Customer Data Platform (CDP) and a bit of interaction in your mailbox.
In this blog, we share technical tips and tricks on how to optimize your email template for an extra touch of impact. Your email, like your website, acts as a business card. Show that your email not only looks good, but also shows a focus on the user experience, as well as a focus on innovation and creativity in design.
The examples we show are unique examples from a wide range of options for enriching your emails. They only illustrate a fraction of what is technically possible. By making smart use of technical capabilities such as dynamic content and interactive elements such as forms or polls, you can not only make your emails more visually appealing, but also increase engagement and conversions. Take advantage of it!
The use of dark mode in applications is becoming increasingly common, including email templates. By optimizing your email template for dark mode, you ensure that it automatically switches to a dark color scheme when dark mode is enabled on your device or email application. This ensures a seamless user experience. However, it's important to remember that not every email client supports this feature. In some cases, email clients can adjust colors themselves by swapping light and dark tones.
Below is the basic code that you can integrate into the head of your email template, with which you can activate the necessary classes at specific locations within your template.
<830 - Place both sections in the one <head> of your email. -->
<!-- Ondersteuning voor Donkere Modus Inschakelen -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark only">
<style type="text/css">
:root {
color scheme: light dark;
supported color schemes: light dark;
}
<!-- Gebruik deze media query om stijlen aan te passen voor Donkere Modus. -->
@media (prefers-color-scheme: dark) {
<!-- Richt je op elementen zoals gewoonlijk binnen de media query. -->
}
</style>
On the Litmus site you can find more information, code snippets and email client support https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers
One of my favorites, animations. CSS animations add a visually appealing layer to emails, making them not only more fun to receive, but also increasing engagement. By highlighting key elements such as call-to-action buttons or other elements, they can significantly improve conversions. Additionally, CSS animations are relatively lightweight and compatible with most modern email clients, making them an efficient way to add interactivity without impacting performance.
A big advantage of using CSS animations in emails is that, should the email client not support the animations, your text or elements will still be visible, although not animated. This ensures that the essential information always comes across, regardless of the technical possibilities of the recipient's email environment. This makes CSS animations an excellent choice for giving your email communication more dynamism, while improving the user experience and ensuring a consistent display of your message.
much email service providers (ESPs) use a template engine such as Smarty or Twig. For now, we're focusing on Smarty. As a marketer, you're always looking for ways to take your email marketing to the next level. Personalization is crucial here, but what if your ESP doesn't offer all the personalization options you need? Here comes Smarty as a lifesaver. Smarty is a programming language that you can use directly in your email templates, allowing you to personalize your emails in a more advanced way, beyond the standard capabilities of your ESP.
With Smarty, you can create dynamic content, such as showing the recipient's name, displaying products they've previously viewed using a product feed, making calculations based on your data, formatting dates, and much more. All of this happens automatically, by integrating smart code into your email templates. It's like having a personal wizard who adapts each email to the recipient's specific needs and interests, even if your ESP doesn't offer those options directly.
Below are 2 examples of how you can create a personalized salutation with Smarty:
{if $firstname! = “}
Dear {capitalize ($firstname)},
{else}
Dear customer,
{/if}
{if $gender == 'M' and $lastname! = “}
Dear Mr. {$lastname|capitalize},
{elseif $gender == 'F' and $lastname! = “}
Dear Mrs. {$lastname|capitalize},
{elseif $lastname! = “}
Dear Mr/Mrs {$lastname|capitalize},
{else}
Dear Sir/Madam,
{/if}
Let's take a look at another option from Smarty. If your email template contains elements that you only use occasionally, you can make them more flexible by automatically adapting the content to different seasons using Smarty. This way, you can easily integrate a 'standard' item into your email, while still seamlessly matching the current season.
In the code, we use $smarty.now to get the current time, which we convert to the month with date_format: '%m'. We store this result in $date, which we then use in an if-else statement to determine different actions based on the month.
<!-- Verkrijg de huidige maand -->
{assign var= 'date' value=$smarty.now|date_format:' %m '}
<!-- Bepaal welke ‘winter’ content je wilt tonen. Als er niet wordt voldaan aan de ingestelde conditie dan tonen we de ‘zomer’ content -->
{if $date == '10' or $date == '11' or $date == '12' or $date == '01' or $date == '02' or $date == '03'}
Show winter content
{else}
Show summer content
{/if}
There are many ways to segment your audience within your ESP, including on the basis of purchase history, browsing behavior, or interests expressed by your newsletter readers. Unfortunately, in 2024, these segmentation options are still being used too little, even though it doesn't have to be complicated. You don't have to overload your subscribers with long profile-enhancing forms or surveys, which is often a deterrent.
For example, check out the embedded form below in an email. The big advantage of this?
You can easily insert such a compact form into your existing content, making it very easy for the recipient to share their interests. You won't be redirected to a web browser except for the thank you page. This makes it as easy as possible for your newsletter readers to share their interests. Win win!
Note: In some e-mail clients, such as Outlook, this functionality does not work. In your ESP, you can set the form to exclude Outlook addresses and addresses of other unsupported clients.
In the digital age in which we live, artificial intelligence (AI) plays an indispensable role. While many ESPs haven't fully integrated AI technology yet, it's possible to take advantage of AI via an alternative route, such as using innovative tools such as Brainvine. This fascinating topic is so rich and multifaceted that it undoubtedly deserves its own blog. So be sure to stay tuned for an in-depth exploration of this in the near future!
