Are you on the path to implement Engage, or an existing customer wanting to create a new design theme? This guide provides all the information you need to acquire a unique design theme making your brand easy to love.
Email is still one of the most important channels in CRM marketing so it might not come as a surprise that we take the crafting of email design themes very seriously. A theme is a module-based design package that consists of a set of modules adapted to your brand's design. Within each module it's possible to add and remove elements to customize it. This gives you the possibility to create a unique email design with just a small set of modules.
Starter pack
In all Engage customer implementations, a theme with eight essential modules is included. In most cases, these modules are enough to create a unique and flexible email design. The modules will be adapted to fit the look and feel of your brand. These are the adjustments that can be made:
- Specified font: one custom font and one fallback font
- Specified font size
- Specified padding
- Specified margins
- Choice of button design
- Added default colors to be used in the modules
- Added headings/subtitles, brands and text elements
- Setting whether the text and/or button should be aligned center or left
It is possible to add more modules to your design theme. Voyado offers a range of essential modules and you can always create tailor-made solutions by discussing it with our developers.
Tailor-made modules
If you have a request that is not covered by our standard modules, a tailor-made solution can be considered. In these cases, we'll need a sketch with exact pixels for text size, margins, padding, for both desktop and mobile.
- Desktop sketch – width 600px
- Mobile sketch – width 375px
- Font size and margin/padding definitions – always in px (not pt)
- Include all the modules in the sketch
Fonts
Historically, email clients have supported only the most common web-safe fonts that come with most computers. In the last few years, some email clients have started to support special web fonts, and allow you to use your own font. This, however, does not mean that it will work for all email clients, which is why you should always choose a fallback font that is supported by all email clients.
The standard web-safe fonts that are supported in 99 % of the email clients:
- Arial
- Georgia
- Helvetica
- Times New Roman
- Verdana
Other web fonts that are supported in about 90–95 % of the email clients:
Sans-serif:
- Arial Black
- Comic Sans MSImpact
- Tahoma
- Trebuchet MS
Serif:
- Palatino
Monospace:
- Courier New
Email clients that support special web fonts:
- Apple Mail
- iPhone iOS/native app (the email app that is included in the phone)
- Samsung Mail (Android 8.0)
- Gmail app in mobile only support the special web fonts Open Sans and Roboto besides the safe standard fonts listed in the previous section
- Android (default mail client, not Gmail app)
- Outlook 2000
- Outlook.com app
- Thunderbird
Can I have several custom web fonts?
Every font has its specific size, so if you have too many different fonts in your design theme, there’s a risk that your emails will be too heavy. This can affect the download time for the recipient and affect your deliverability and status as a sender. Therefore, we do not recommend using more than 2-3 fonts* in your design theme and the total size of all fonts should not be more than 500kb.
When sending the special fonts to us, it is important to use the format .woff2. In some cases we might need the font in .ttf, e.g. if you want NPS-buttons with your own font. The format .otf is not supported in email clients.
*The limit of 2–3 fonts it also includes different variations and weights of one font, for example, regular, italic, bold. It depends on how the font is built.
Dark mode
When designing your emails, you should also have Dark Mode in mind. For example, we strongly recommend you work with your design and use logos and icons that will work for both dark and light mode. In that way it will work in all email clients.
Voyado does not include any specific dark mode solutions in email templates. All email clients handle dark mode in different ways and the only reliable solution, since email clients do updates from time to time, is to create a design that will be readable in both light and dark mode. We know that it’s a pain point when the design does not look as you wish in dark mode, but keep in mind that dark mode is used a lot for accessibility reasons and overriding it is not a good solution.
Guarantee quality by testing
As a part of the production process, Voyado always tests your design theme in all major email clients and devices. Email clients handle the code differently and some of them need a lot of client-specific solutions in order to achieve some designs. Since the size of emails is a big factor for deliverability, we do not support some clients because we know that very few users open emails in those clients, and it doesn’t justify making exceptions and therefore having a lower quality of code for all email clients.
Voyado uses Litmus, one of the most reliable tools in email development, to render the email as if it was sent to the specific email clients.
About 65-75% of retail consumers use their phone to read marketing emails. When it comes to email clients the most popular are:
- 50-60% Gmail
- 30-40% Apple mail
- 5-7% Yahoo mail
- 2-4% Other android client
- 0.2% Outlook desktop client
- 0.5% Other client
Source: Voyado Engage emails February 2024
Proof your email design
Voyado's strong recommendation is to focus your proofing of emails on phones to Apple mail and Gmail, based on what we know about the market share (see above).
When it comes to Outlook desktop, it's a common email client for companies but it has many limitations when it comes to email rendering. Voyado therefore does not recommend it, based on the tiny number of customers reading marketing emails on that email client.
Comments
0 comments