Splite Documentation Française
Share
Explore

Designer un bon email

Les clients mails (Outlook, gmail, etc) imposent certaines contraintes techniques. Splite s’efforce pour que ces contraintes n’impactent pas votre créativité. Découvrez dans ce guide les conséquences directes de ses contraintes.
Visual.png
Taille de l'email
Il est recommandé d'avoir une taille comprise entre 450 et 600px (maximum) pour le desktop et entre 250 & 350px pour le mobile.
Vos artboards doivent donc respecter cette norme.
Artboard.png
L'utilisation de typographies non natives
Une partie des clients mails (les clients mails sur PC & Android globalement) ne savent pas gérer correctement les polices non natives. C’est-à-dire les polices différentes de "Arial", "Times New Roman", "Georgia", "Tahoma", "Courier New" & "Verdana".
Si vous utilisez une typographie non native, Splite mettra de l'Arial en typographie de secours pour ces clients mails. Splite vous propose aussi de transformer automatiquement TOUS les textes en typographies non natives en image. Pour cela rendez-vous sur la section "Configurer l’algorithme"
Designer un bouton
Certains clients mails ne savent pas gérer les boutons complexes avec un pictogramme à l'intérieur.
Les boutons simples (c’est-à-dire une forme rectangulaire avec du texte) sont intégrables en HTML. Splite les détecte automatiquement et génère un code optimisé pour tous les clients mails.
Les boutons complexes (c’est-à-dire avec un pictogramme à l’intérieur) ne sont pas reconnus par toutes les boîtes mails. Splite ne les intègre donc pas en CSS. Il est nécessaire de les transformer en image sur Sketch ou Figma en utilisant la fonction “FUSION”.
button.png
Les styles à éviter
Les clients mails ne reconnaissent pas certaines balises de styles. Si vous les utilisez, Splite devra transformer l'élément (du texte ou un bloc) en image pour garantir un rendu identique au design.
Nous vous conseillons donc d'éviter au maximum les styles suivants :
› Les bordures sur les textes
› Les dégradés (background radiant)
› L'opacité sur une couleur ou un élément (opacity)
Pour l’ombre portée, Splite laisse le choix à l'utilisateur depuis la page "Configuration l'algorithme" : une intégration en HTML (ombre pas visible sur les clients mails ne reconnaissant pas la balise) ou en image.
Le cas du double background
Le background-image est compliqué à gérer pour un email. En effet, la balise n'est pas reconnue par certains clients mails encore une fois.
Pas d'inquiétude, Splite a trouvé la parade pour gérer les background-image à tous les coups ! 🔥🔥🔥
Si cette technique est magique, elle a une limite. Elle ne peut pas gérer le cas d'un background dans un background.
Double_Background01_5962479b61.png
Les éléments 1 & 2 sont des images & ont des enfants. Ils sont donc normalement tous les deux générés en background-image 🤯. L’élément 3 est généré en HTML.
Dans ce cas, Splite doit générer une seule image avec les éléments 2 et 3.
Pour éviter cela, attention aux doubles backgrounds

Share
 
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.