Créer un email HTML

Comment créer soi-même sa newsletter ?
Règles fondamentales et astuces pour créer des emails HTML

La structure et le contenu sont les aspects primordiaux de la conception d’une newsletter. Sur ces deux points, il existe des règles importantes à suivre et des astuces bien utiles, qui vous permettront de créer des emails HTML efficaces et une campagne emailing performante !

 

Règle numéro 1 : la taille

  • Créez vos emails HTML avec une largeur maximale de 600 pixels, afin de les rendre visibles pour la majorité des webmails et logiciels de messagerie.

  • Limitez le poids de votre e-mail à 150 ko, images comprises, afin d’éviter des temps de téléchargement trop longs.

 

Règle numéro 2 : Utilisez des tableaux

Les webmails tels que Gmail ou les logiciels tels que Outlook gèrent mal les balises HTML telles que « float », « margin » ou « padding ». Présenter les informations en tableaux est la meilleure stratégie pour organiser la structure de votre newsletter et vous assurer un bon rendu. Pour un résultat optimal, gardez ces 3 conseils à l’esprit :

  • Editez la taille de chaque cellule, et non celle du tableau dans son intégralité.

  • Utilisez un tableau « conteneur » pour la couleur d’arrière-plan.

  • Eviter les espaces blancs inutiles dans vos cellules.

 

Règle numéro 3 : Utilisez un code CSS inline

Gmail est particulièrement concerné par ce conseil, car il supprime tout lien vers un code CSS dans un email. Dès lors, tout code CSS doit être « inline ». La bonne nouvelle, c’est que cela peut être fait presque automatiquement. Grâce à certains services tels que Premailer, vous pouvez placer tout votre contenu CSS en inline, simplement en cliquant sur un bouton.

 

Règle numéro 4 : Concentrez le plus important sur les 300 premiers pixels du haut de votre mail

Les outils de prévisualisation de nombreux logiciels et webmails n’affichent que la partie haute de l’email. Si vous placez une information fondamentale trop bas dans votre email, l'utilisateur risque de ne pas la lire et de ne pas ouvrir votre newsletter. Aussi, assurez-vous que votre message soit suffisamment explicite dans les 300 pixels du haut de votre newsletter.

 

Règle numéro 5 : Prévoyez que vos images puissent ne pas s'afficher

De nombreux webmails et logiciels de messagerie bloquent le téléchargement des images par défaut. Pour pallier ce problème, voici quelques règles à suivre :

  • Réglez la hauteur et la largeur de vos images afin que votre email garde sa structure même si les images ne s’affichent pas.

  • N’utilisez jamais d’images pour diffuser un message important comme les titres ou les liens.

  • Utilisez des messages alternatifs à vos images (balise « alt text »). ils s'afficheront à la place de vos images si celles-ci sont bloquées. Vos lecteurs sauront ainsi de quoi elles retournaient.

  • Testez votre présentation dans une fenêtre de prévisualisation, en plein écran et sans les images, et ajustez votre structure en conséquence.

 

Images : Trucs et astuces

  • Créez vos images en .gif ou en .jpg (jamais en .png) et incluez les paramètres de hauteur et de largeur pour que leur taille reste correcte.

  • Pour vos destinataires utilisant Gmail, il est important de se souvenir que Gmail affiche le texte du début de votre email dans la ligne de prévisualisation. Si vous n'utilisez pas de snippet et que le début de votre email est une image, c’est le texte de la balise « alt text » (message alternatif) qui sera affiché.

  • Utilisez une couleur d’arrière-plan à la fois dans le body et dans vos tableaux, afin de vous assurer que votre couleur s’affiche dans tous les webmails et logiciels.

  • Outlook 2007 ne gère pas les images d’arrière-plan. Si vous souhaitez utiliser une image d’arrière-plan dans votre présentation, incluez également une couleur d’arrière plan. Cela résout simultanément le problème du blocage d’images et le problème d’Outlook 2007.

 

HTML : Trucs et astuces

  • Vérifiez bien tout votre code pour vous assurer de sa validité.

  • Evitez les CSS externes car beaucoup de webmails les négligent ou les modifient. Préférez-y les CSS inline. N’utilisez pas Java, JavaScript, ActiveX, ASP, PHP. N’utilisez pas non plus de caches ou de frames, ni d'HTML dynamique, car de nombreux webmails ne supportent pas ces langages.

  • N’utilisez pas de formulaires car ils pourraient être supprimés de vos emails par les webmails, et ne peuvent de toutes façons pas collecter de données via un webmail.

  • N’incluez pas de Flash ou autres medias ou vidéos dans vos emails. Vous pouvez toutefois insérer des liens qui redirigeront vos destinataires vers des pages contenant ces fichiers.

  • Supprimez les méta-balises de votre code, ils ne sont pas pris en compte par les webmails.

  • Supprimez tout code HTML superflu. L’utilisation de programme tels que Dreamweaver ou autres éditeurs WYSIWYG peuvent générer du code inutile, qui peuvent causer des problèmes d’affichage. Si vous avez des balises de personnalisation, vérifiez leur code. S’il est incorrect, les utilisateurs verront un mauvais message s’afficher.... ce serait dommage !

 

Vous voilà au courant du plus important... à vous de jouer !

Consultez notre blog ou contactez notre support si vous rencontrez des problèmes dans la création de votre newsletter à partir de notre éditeur, nous serons ravis de vous aider.

 

 

Créer mon compte