Are you on the path to implement Voyado or an existing customer wanting to create a new design theme? Perfect! We have put together this guide to provide you with all the information you need to acquire a unique design theme that makes 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 is possible to add and remove elements in order 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 Voyado customer implementations, a theme with seven essential modules is included. For the majority of our customers, 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:

  • Specify font; one custom font and one fallback font
  • Specify font size
  • Specify padding
  • Specify margins
  • Choose button design
  • Add default colors to be used in the modules
  • Set if the text and/or button should be aligned centered/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.

Content modules
S01. Header Centered Logo
S01.1 Header Left Aligned Logo
S01.2 Header Centered Logo + Member info
S02. Menu 3 Links
S02.1 Menu 3 with pipes
S03. Campaign
S03.1 Campaign Hero
S03.2 Campaign Hero + Subtitle
S04. Text+Pic Left
S05. Text+Pic Right
S06. Two Columns
S07. Three Columns
S07.1 Three Columns + Subtitle
S08. Four Columns 2x2
S09. Separator Line
S09.1 Separator Line+Text
S09.2 Separator Line Below + Title and Subtitle
S16. Footer: SoMe icons + Contact information
S16.1 Footer: 3 links + Contact information
Personalized modules
S10. NPS
S11. Poll
S12. Member large module
S12.1 Member small module
S13. Nosto Four Columns
S14. Reward Voucher
S15. Promotion
Modules with Product feed connection
S03.3 Campaign PF
S06.2 Two Columns PF
S07.2 Three Columns PF
S08.1 Four Columns PF (2x2 mobile)
Module for Abandoned Cart
AC01. Abandoned Cart – image left + text right
Modules for transactional communication
T01. Shopping Order Intro
T02. Shopping Order Contact/Shipping Delivery Info
T03. Shopping Order Items
T04 Shopping Order Footer
 

Advanced modules

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

Content modules
S02. Menu 5 spread links (3x2 in mobile)
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)
Modules for transactional communication
T03.1 Shopping Order Items + extra fields
T04.1 Shopping Order Items – no image – extra fields
Modules with Product feed connection
S03.3 Campaign PF
S06.2 Two Columns PF
S07.2 Three Columns PF
S08.1 Four Columns 2x2 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 will need a sketch with exact pixels for text size, margins, padding, for both desktop and mobile.

  • Desktop sketch – width 640p
  • Mobile sketch – width 320px
  • 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 are:

  • Arial
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

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

If I want to use a special web font, how many can I use?

Every font has its specific size, which means that if you want to 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

As for today (April 2020) we are able to adapt design themes for dark mode in Apple Mail, Outlook app in iPhone, and Outlook app in Android. We can invert logos and icons, add a white border to the button links and make sure that the most part of the email design is presentable in dark mode. However, we cannot control how the email clients adapt colors in addition to black and white. Some clients show the colors correctly, and others show them in a darker version.

Please note: We will not add dark mode adaption to your design theme unless you specifically order it.

We guarantee by testing

As a part of the production process we will 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 will make sure everything work and look as it should. We use Litmus and Email on Acid as testing tools (the two most popular and reliable tool 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 that is used around the world:

Webmail clients
AOL(Chrome-Firefox)
Gmail (Chrome-IE11-Firefox)
Google apps (Chrome-IE11-Firefox)
Office365.com (Chrome-IE11-Firefox)
Outlook.com (Chrome-IE11-Firefox)
Yahoo (Chrome-Firefox)
Desktop clients
Apple Mail 10 (OSX 10.10)
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
Mobile clients iOS
iPhone SE Native app (iOS12)
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)
Mobile clients Android
Pixel Gmail app (Android 6-7-8)
Samsung SamsungMail app (Android 6-7)
Huawei P20 Pro Gmail app (Android 9)
Huawei P20 Pro Outlook app (Android 9)
Tablet clients iOS
iPad Air 3 Native (iOS13)
iPad Pro 12,9" Native (iOS13)
iPad Pro 9,7" Native (iOS13)
iPad Pro 11" Native (iOS13)
Dark mode (only if ordered)
iPhone XR Dark Mode (iOS3)
Huawei P20 Pro Outlook app Dark Mode (Android 9)
iPhone X Native app Dark Mode
iPhone X Outlook app Dark Mode

 

Next step: Read more about Email modules here

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.