Design a good email

Mail clients (Outlook, gmail, etc) impose some technical constraints. Splite strives to ensure that these constraints do not impact your creativity.
Discover in this guide the direct consequences of these constraints.
Visual.png
Email size

It is recommended to have a size between 450 and 600px(maximum) for the desktop and between 250 &350px for the mobile.
Your artboards must therefore respect this standard.
Artboard.png
The use of non-native typography

Some mail clients (PC & Android mail clients globally) do not know how to handle non-native fonts correctly.
That is, fonts other than "Arial", "Times New Roman", "Georgia", "Tahoma", "Courier New" & "Verdana".
If you use a non-native font, Splite will set Arial as a backup font for these email clients.
Splite also allows you to automatically transform ALL non-native text into images. To do so, go to the "Algorithm configuration" section
Design a button

Some mail clients cannot handle complex buttons with a pictogram inside.
Simple buttons (i.e. a rectangular shape with text) can be integrated in HTML. Splite automatically detects them and generates an optimized code for all mail clients.
Complex buttons (i.e. with a pictogram inside) are not recognized by all mailboxes. Splite does not integrate them in CSS. It is necessary to transform them into an image in Sketch or Figma using the "FUSION" function.
button.png
Styles to avoid

Some style tags are not recognized by email clients. If you use them, Splite will have to transform the element (text or a block) into an image to guarantee an identical rendering to the design.
We therefore advise you to avoid the following styles as much as possible:
' Borders on texts
' Gradients (radiant background)
' Opacity / transparency on a color or an element (opacity)
For the drop shadow, Splite leaves the choice to the user from the page "Algorithm configuration": an integration in HTML (shadow not visible on email clients that do not recognize the tag) or in image.
The case of the double background

The background-image is complicated to manage for an email. Indeed, the tag is not recognized by some email clients again.
Don't worry, Splite has found a way to handle background-image every time! 🔥🔥🔥
While this technique is magical, it has a limit. It can't handle the case of a background within a background.
Double_Background01_5962479b61.png
Elements 1 & 2 are images & have children. So they are both normally generated in background-image 🤯. Element 3 is generated in HTML.

In this case, Splite should generate a single image with elements 2 and 3.
To avoid this, be careful with double backgrounds.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.