Design themes

Follow

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.

Advanced modules

Our advanced modules require a bit more coding which is also reflected by a slightly higher pricing.

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: