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 of course possible to add more modules to your design theme. We offer a range of Essential modules, Advanced modules, and Tailor-made solutions.
Essential modules
Our essential modules are our most commonly used ones.
01.1 Header Left
01.2 Header Center + Member Info
02. Menu 3 Links + Pipes
02.1 Menu 5 Links
03. Campaign
03.1 Campaign Hero
03.2 Campaign Background Image
04. Text + Image Left Responsive
04.1 Text + Image Left
05. Text + Image Right Responsive
05.1 Text + Image Right
06. Two Columns Responsive
06.1 Two Columns
07. Three Columns Responsive
07.1 Three Columns
09. Divider Default
09.1 Divider Full Width
09.2 Divider Header + Subtitle
09.3 Divider + Text
17. Footer
11. Promotion
12. Member
14. Reward Voucher
06.3 Two Columns + PF
07.3 Three Columns + PF
08.1 Four Columns + PF
T02. Order Contact Information
T03. Order Items
Advanced modules
Our advanced modules require a bit more coding which is also reflected by a slightly higher pricing.
S04.1 Text vertical centered + Image left (fixed)
S05.1 Text vertical centered + Image right (fixed)
S06.3 Two Columns Fixed
S06.4 Two Columns Fixed + Subtitle
S06.5 Two Columns Fixed PF
S07.3 Three Columns Fixed
S07.4 Three Columns Fixed + Subtitle
S07.5 Three Columns Fixed PF
S16. Product recommendation (four column)
06.3 Two Columns + PF
07.3 Three Columns + PF
08.1 Four Columns + PF
Tailor-made modules
If you have a request that is not covered by our essential or advanced modules, we can have a look at a tailor-made solution. 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 not supported web fonts, only the most common web-safe fonts that come with most computers. However, the last couple of years a few email clients have started to support special web fonts, and you are now able to use your own font. This still does not mean that it will work for all email clients, that is why you always need to choose a fallback font that is supported for all 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 ~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
- Outlook app for Mac
- 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 as listed in the previous paragraph
- Android (default mail client, not Gmail app)
- Outlook 2000
- Outlook.com app
- Thunderbird
If I want to use special web fonts, how many can I use?
Every font has its specific size, which means that if you have too many different fonts in your design theme, there’s a risk that your emails will be too heavy. It can affect the uploading 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 higher than 500kb.
When sending the special fonts to us, it is important that you send it in the format .woff2 and .ttf. The format .otf is not supported in email clients.
*With 2–3 fonts it also includes different variations 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.
You can get some tips on how to adapt your design to Dark Mode in this article. You'll also learn how Voyado can help you adapt your email design theme.
Guaranteed quality by testing
As a part of the production process, we always test your design theme in different email clients and devices to make sure that your modules will look great for all recipients. Before we ask you to test the final design, we'll make sure everything works and looks as it should. We use Litmus and Email on Acid as testing tools (the two most popular and reliable tools in email development) to render the email as if it was sent to the specific email clients.
We test the most popular and updated email clients and devices used around the world:
Gmail (Chrome-IE11-Firefox)
Google apps (Chrome-IE11-Firefox)
Office365.com (Chrome-IE11-Firefox)
Outlook.com (Chrome-IE11-Firefox)
Yahoo (Chrome-Firefox)
Apple Mail 11 (OSX 10.11)
Outlook 2007 (Win7-Win10)
Outlook 2010 (Win7)
Outlook 2011 (OSX 10.8)
Outlook 2013 (Win7)
Outlook 2016 (OSX 10.8)
Outlook 2016 (Win7-W10)
Outlook 2016 (Win10)
Outlook 2019 (Win10)
Outlook Office365 (Win10)
Windows Mail Native (Win10)
Thunderbird
iPhone 6 Gmail app (iOS10)
iPhone 6+ Gmail app (iOS10)
iPhone 7 Native app (iOS12)
iPhone 7+ Native app (iOS12)
iPhone 7 Outlook app (iOS11)
iPhone 8 Native app (iOS12)
iPhone 8 Native app (iOS13)
iPhone 8+ Native app (iOS12)
iPhone 8+ Native app (iOS13)
iPhone 11 Native app (iOS13)
iPhone 11 Pro Native app (iOS13)
iPhone 11 Pro Max Native app (iOS13)
iPhone X Native app (iOS12)
iPhone XR Native app (iOS13)
iPhone XS Native app (iOS13)
iPhone XS Max (iOS13)
Samsung SamsungMail app (Android 6-7)
Huawei P20 Pro Gmail app (Android 9)
Huawei P20 Pro Outlook app (Android 9)
iPad Pro 12,9" Native (iOS13)
iPad Pro 9,7" Native (iOS13)
iPad Pro 11" Native (iOS13)
Huawei P20 Pro Outlook app Dark Mode (Android 9)
iPhone X Native app Dark Mode
iPhone X Outlook app Dark Mode
Comments
0 comments