Les modèles d'email Emarsys vous permettent de créer vite et bien des campagnes email magnifiques et efficaces. Basés sur vos designs, ces modèles sont créés avec un contenu varié, des éléments codés en dur tels que les en-têtes ou les pieds de page aux sections standards pré-formatées, en passant par les zones libres disponibles pour une édition complexe.
Introduction
Les modèles Emarsys sont construits dans un cadre conçu pour assurer l'affichage correct de vos emails dans tous les services de messagerie standards, qu'ils soient basés sur le Web, un appareil de bureau ou un appareil mobile.
Cet article vise à vous familiariser avec la structure du modèle, ainsi qu'à vous expliquer la raison de certaines des limitations, pour assurer que vos designs sont adaptés dès le départ. Certaines considérations de délivrabilité sont aussi inclues.
Ici vous pouvez télécharger un bon exemple de design d'email comme référence.
Format du fichier de livraison
Vous pouvez soumettre votre design d'email comme images dans un fichier Photoshop (.psd) file, ou bien nous envoyer directement le code dans un fichier HTML (.html or .htm).
Fichiers Photoshop
Si vous concevez un nouveau modèle, ou avez gardé les fichiers de design de vos modèles existants, veuillez nous envoyer une maquette de votre email dans un fichier .psd
En plus du fichier .psd vous devrez nous envoyer un fichier texte avec les dimensions générales, les polices et les couleurs. Il est utile que vous incluiez une image de l'email et indiquiez clairement quels éléments de design correspondent à quelles spécifications, comme dans cet exemple :
Dans le fichier .psd, il est important que le tramage et l'anticrénelage soient réglés sur Aucun pour tout le contenu du texte, et que vous ne fusionniez ni n'aplatissiez aucune couche.
Vous devrez aussi utiliser la définition de couleur RBGet 72 dpi pour un rendu web optimal.
Etant donné la mode de fonctionnement des images, il ne peut y avoir de chevauchement dans notre modèle, donc veuillez vous assurer que les images de votre .psd sont soigneusement placées côte à côte.
Fichiers HTML
Si vous voulez baser votre modèle sur un email existant, vous pouvez simplement nous envoyer le code HTML. Nous reconstruirons alors l'email selon ces standards, et nous assurerons qu'il a la même apparence sur tous les navigateurs et services de messagerie supportés.
Le fichier HTML doit contenir votre feuille de style entière, de sorte que vous n'ayez pas besoin de fournir de précisions concernant les dimensions, la police ou les couleurs. Toutefois, vous devez fournir les éléments suivants :
- Une capture d'écran de l'email tel que vous aimeriez qu'il apparaisse, en précisant les versions du service de messagerie et du navigateur qui l'affichent.
- Indiquez clairement les images ou les liens dont vous ne souhaitez pas qu'ils soient modifiables.
Veuillez nous envoyer le code dans un fichier .html ou .htm, et non en code HTML copié/collé dans un .txt ou autre format de fichier.
Avant de commencer
Il faut considérer un certain nombre de choses importantes avant de vous pencher sur l'apparence et l'effet de votre modèle.
Le message
Tout d'abord, assurez-vous que vous êtes absolument au point sur la nature du message que l'email véhiculera. Cela aura des répercussions sur le reste de vos décisions.
Les questions à examiner comprennent :
- Votre campagne est un canal direct entre vous et la boîte de réception de vos clients; reflète-t-elle votre image de marque ?
- Sa présentation globale correspond-elle aux normes de votre secteur d'activité ?
- S'agit-il d'une campagne saisonnière (telle que les soldes de Noël), ponctuelle (telle qu'un email de bienvenue), ou encore récurrente et qui vous demandera des changements de contenu réguliers ?
Personnalisation et contenu dynamique
Quelle dose de personnalisation utiliserez-vous ? Et prévoyez-vous d'utiliser le ciblage de bloc ?
A chaque fois que vous intégrez du contenu dynamique comme cela, il y a toujours une chance que certains contacts ne soient pas qualifiés pour le voir et votre design doit être assez flexible pour compenser cela. En d'autres termes, évitez un design susceptible de montrer un espace blanc en l'absence du contenu dynamique.
Mobile First?
L'éditeur d'email Emarsys facilite beaucoup la création d'emails réactifs et magnifiques sur les appareils mobiles aussi bien que de bureau. Toutefois, il existe une si grande variété de tailles et de formes d'écran qu'il n'est pas toujours évident de savoir quelle version s'affichera sur quel appareil.
Lorsque vous préparez votre design de modèle, il vaut la peine de vous demander si vous êtes une entreprise mobile first ou pas.
Si c'est le cas, vous devez baser votre design sur les écrans mobiles standard (c'est-à-dire avec une mise en page à colonne unique et de grands CTAs). Le contenu sera agrandi à l'ouverture sur appareil de bureau, mais aura un effet magnifique garanti sur n'importe quel appareil mobile.
Éléments du panneau d'aperçu
Vous avez une zones de 2-3 pouces (5-8 cm) visible dans les panneaux d'aperçu de la plupart des services de messagerie. Dans cet espace très limité, la valeur ajoutée - votre image de marque et personnalisation éditoriale - devrait être visible, même sans l'affichage des images.
Si rien d'intéressant ne s'affiche ici, essayez d'améliorer le design. Consultez quelques exemples de bonnes pratiques si vous êtes en manque d'inspiration. Pour les très gros emails, vous devriez envisager d'utiliser une table des matières (TOC). Demandez aux Consultants Emarsys de vous expliquer comment cela peut affecter le comportement du modèle.
Variables
Voulez-vous avoir la possibilité de changer les styles globaux tels que font et bgcolor facilement ? Le cas échéant, spécifiez les et nous les ajouterons aux variables.
Langues
Si vous souhaitez que le modèle soit créé en plus d'une langue, vous devrez aussi fournir les informations suivantes :
- Spécifiez clairement quels textes doivent être traduits.
- En plus des fichiers d'oeuvres de création artistique, envoyez nous aussi un tableur contenant tous les segments traduits.
Esquisse de design
Avant de fournir vos spécifications définitives, c'est une bonne idée de nous fournir une esquisse du design en image (fichier .jpeg ou .png). Nous pourrons alors vous donner un premier feedback susceptible de vous faire gagner du temps.
Guide de style général
Certaines de nos lignes directrices s'appliquent à toutes les partis de l'email.
Les dimensions générales, la police et les couleurs
Vous devrez spécifier les éléments suivants :
- La largeur totale du design, qui ne doit pas dépasser 650 px.
- L'espacement horizontal et vertical entre les blocs et les colonnes (qui doit suivre une logique uniforme).
- Les tailles et largeurs d'image maximum.
- Le type de police à utiliser (éviter les polices personnalisées ou non compatibles Web - vous pouvez vérifier si votre police est conforme ici).
- La couleur de police désirée sous forme de code hexadécimal à 6 chiffres (par exemple #dd15as).
- La taille de police désirée en pixels. Tenez-vous en à des tailles de police comprises entre 10 px et 19 px (8 pt 14 pt) et évitez les demi-pixels.
- Le style pour le texte lié à l'intérieur du corps du texte (par exemple souligné, de couleur différente etc.).
- Le style pour le texte lié dans les en têtes, s'il est différent.
Si vous avez des besoins supplémentaires, tels que des liens ou des images dont vous ne souhaitez pas qu'ils soient modifiables, veuillez également en faire état.
Ceci s'applique à tous les éléments du texte !
Evitez d'utiliser des hauteurs de ligne et un emplacement de lettre définis. Ces derniers ne sont pas (ou seulement partiellement) affichés par certains services de messagerie (par exemple Outlook). Ces services de messagerie afficheront une hauteur de ligne trop grande, perturbant votre mise en page. Si vous avez besoin d'utiliser des hauteurs de ligne définies, laissez un espace supplémentaire dans le design pour vous assurer que les sections s'affichent correctement.
Exposant et indice ne sont pas bien supportés et doivent être évités.
Images de fond
Les images de fond doivent être évitées puisque certains services de messagerie, par exemple Outlook 2007 et 2010, ne les affichent pas (ou pas complètement).
- Si vous voulez vraiment créer un bloc de contenu avec du texte par-dessus une image, intégrez le texte à l'image et nous ferons de l'ensemble une image bannière.
- Si vous avez absolument besoin que le texte soit modifiable, vous devez alors fournir une couleur de remplacement qui sera affichée à la place de l'image par les services de messagerie qui ne le permettent pas.
Styles de liste
Evitez d'utiliser des styles de liste, car de nombreux services de messagerie ne les supportent pas. On ne peut pas utiliser de symboles spéciaux pour les listes à points : seuls les disques noirs sont supportés.
ilDe plus, une liste est habituellement entourée d'une marge ou d'un remplissage qui ne s'accordera probablement pas à vos style et mise en page généraux.
Codé en dur vs modifiable
Si vous voulez coder en dur des liens dans l'en-tête ou le pied de page, exprimez clairement comment vous souhaitez que ces derniers soient tracés, de sorte que nous puissions inclure les paramètres de traçage.
De la même manière, spécifiez quelles images ou liens doivent être modifiables, ou pas, pendant la création de l'email.
Conformité délivrabilité
Un certain nombre de styles sont à éviter parce qu'ils affecteront négativement votre délivrabilité, y-compris :
- Aucun Flash ou Rich Media embarqué
- Utilisation minimale des polices rouges (même si votre CI est rouge)
- Aucun JavaScript utilisé
- Aucun formulaire embarqué dans la campagne
Vous devez aussi vous assurer que votre modèle, ainsi que les emails que vous envoyez sont conformes aux standards de délivrabilité Emarsys, pour assurer une livraison et des taux de réponse optimaux.
Design d'Email : Ligne de flottaison
La partie supérieure de votre email contient l'en-tête, la bannière et l'éditoriale. C'est ce que vos clients verront dans l'aperçu et lorsqu'ils l'ouvriront pour la première fois. C'est là qu'il vous faut faire l'impact le plus fort, en termes de confiance comme d'engagement.
- Toujours inclure un lien vers la version en ligne. Si vous utilisez le lien Emarsys par défaut pour la version en ligne, cela changera en fonction de la langue sélectionnée dans les Paramètres d'Email. Si vous codez cela en dur, vous devrez créer un modèle séparé pour chaque langue.
Vous n'avez pas besoin d'inclure un pré-en tête. Ceci est pris en charge dans le champ Texte d'aperçu de l'onglet Bases de l'email .
Design d'Email : Contenu principal
Le corps principal de l'email est là où vous pouvez utiliser la plus grande variété de styles de bloc.
- Les blocs multi-colonnes se contracteront en une seule colonne sur mobile. Ne pas utiliser plus de quatre colonne.
- L'espacement entre colonnes doit être identique.
- Utilisez des colonnes symétriques partout où c'est possible.
- Indiquez l'en-tête, le corps du texte, l'image et/ou le CTA dans chaque bloc.
- Intégrez tous les séparateurs dans le design du bloc de contenu lui-même, plutôt que de les mettre dans leur propre bloc. Cela vous dispensera de l'effort de les inclure dans quelque ciblage de bloc que vous utilisiez, et rendra aussi bien mieux lorsque diverses colonnes seront superposées sur mobile.
- N'incluez qu'un exemplaire de chaque design de bloc. Ceux-ci peuvent être dupliqués dans l'éditeur de modèle pour créer diverses mises en pages de modèle.
Design d'Email : Pied de page
Le contenu du pied de page a moins d'impact marketing mais peut s'avérer critique pour la conformité de délivrabilité.
- Toujours afficher l'adresse physique de votre entreprise dans le pied de page.
- Affichez clairement votre lien de désinscription.
- Incluez un lien vers la Politique de confidentialité de votre entreprise.
De plus, voici les obligations légales supplémentaires pour certains marchés :
- Droits d'auteur / Marques déposées
- Lien vers impression (avec le nom du PDG)
Réseaux sociaux
Si vous voulez inclure des liens vers les réseaux sociaux, spécifiez si les icônes Emarsys standards doivent être utilisées, ou si vous allez fournir votre propre jeu d'icônes.