L'outil d'Emailing d'Adictiz Box vous permet d'envoyer des communications personnalisées (e.g., email de confirmation de participation, annonce de gain, relance). Pour garantir un rendu optimal sur toutes les messageries, il est impératif de respecter les spécifications de création et d'intégrer un code HTML "email-friendly".

Conception de l'Email dans Photoshop

Pour une compatibilité maximale, il est nécessaire de concevoir votre email en respectant des contraintes strictes, spécifiques aux clients de messagerie (Outlook, Gmail, etc.).

🖥️ Spécifications du Fichier de Conception (.psd)

Caractéristique	Spécification Recommandée	Objectif
Largeur Max. de la zone de contenu	600 pixels	Standard de l'emailing pour un affichage parfait sur bureau (éviter le débordement).
Hauteur	Libre	La hauteur s'adaptera au contenu (via le scroll).
Résolution	72 dpi	Standard web.
Format du fichier de travail	Photoshop (.psd)	Permet un découpage et une réutilisation facilités.
Polices de caractère	Utiliser des polices "Web Safe" (Arial, Verdana, Times New Roman, Tahoma, Georgia) pour le texte dynamique. en savoir plus	Assure que le texte s'affiche même si la police n'est pas supportée.
Images	Toutes les images doivent être découpées (pas d'images de fond).	Les clients de messagerie gèrent mal les images de fond et le CSS avancé.

✍️ Si vous avez plusieurs emails à produire, vous devrez avoir un fichier .psd séparé pour chaque email.

Conseils de Conception (Design)

Structure en blocs

Concevez l'email comme une série de blocs horizontaux (header, corps, call-to-action, footer) pour faciliter la découpe et l'intégration en tableau HTML.

Pour faciliter la découpe et optimiser le rendu sur toutes les boîtes mails voici les contraintes graphiques des emails :

Un bandeau en haut sur fond uni avec un texte de visualisation en ligne
Un visuel de header qui reprend la créa de l’opération
Un corps de mail sur fond uni, en utilisant une font web safe. Il est possible d’y inclure des images
Un visuel de footer qui reprend la créa de l’opération
Un bandeau en bas sur fond uni avec un texte de désabonnement

Boutons

Le meilleur moyen d'assurer que votre Call-to-Action soit cliquable et visible est d'utiliser un bouton découpé en image qui sera ensuite intégré avec un lien HTML.

Éviter les colonnes complexes

La mise en page doit être simple. Évitez les mises en page complexes à plusieurs colonnes, qui se déforment facilement sur mobile ou Outlook.

L'Intégration HTML : L'étape cruciale

Après la conception dans Photoshop, le fichier doit être découpé et intégré en HTML pour l'email.

Découpage et Codage

Le principe : Le code HTML des emails doit être basé sur des tableaux (`<table>`) et non sur des `<div>` (méthode de codage web moderne).

CSS en ligne (Inline CSS) : Toutes les propriétés de style (couleur, police, taille...) doivent être appliquées directement dans les balises HTML (ex: <td style="font-size: 14px; color: #333333;">...</td>). Les clients de messagerie ignorent souvent les feuilles de style externes.
Version Mobile : L'emailing moderne utilise un code hybride ou des requêtes média simples, mais la meilleure pratique est de s'assurer que votre design 600px s'affiche correctement sur mobile (il sera simplement réduit).
Hébergement des images : Les images devront être découpées et seront hébergées directement dans l'éditeur Emailing d'Adictiz Box.

Intégration dans la Plateforme Adictiz Box

Une fois votre code HTML finalisé et vos images hébergées :

Rendez-vous dans la section "Emailing" de votre campagne.
Collez votre code HTML dans l'éditeur de l'outil.
Chargez vos images / visuels dans la partie prévue à cet effet dans l'éditeur Emailing
Vérifiez l'affichage dans l'aperçu.
Testez l'email en l'envoyant à différentes boîtes de messagerie pour valider le rendu final.