Créer un e-mail marketing ou une newsletter en html : niveau 1

Définir la place de l’intégration HTML dans le flux de production d’un e-mail marketing ou d’une newsletter  Connaître les bases du HTML Préparer et optimiser les images avec PhotoshopRéaliser une mise en pages élaborée

Définir la place de l’intégration HTML dans le flux de production d’un e-mail marketing ou d’une newsletter

• Identifier le flux de production (cahier des charges, wireframe, design visuel, intégration HTML, mise en ligne, tests, envoi)
• Appréhender les grandes contraintes de production et leur incidence sur la délivrabilité d’un e-mailing
• Connaître les principaux outils permettant de coder un e-mail
• Connaître les principaux outils permettant de tester l’affichage dans les messageries

 

Étude de cas : analyse d’e-mailings / Panorama d’outils

 

Connaître les bases du HTML

• Organiser et nommer ses fichiers
• Choisir l’encodage des caractères
• Choisir le Doctype HTML
• Connaître la syntaxe de base du langage HTML (élément, attribut et valeur)
• Coder la structure de base de l’e-mail
• Appréhender la structure HTML de base d’un tableau
• Insérer du texte et coder les caractères spéciaux
• Créer un lien
• Vérifier la validité du code HTML
• Identifier les techniques HTML à éviter dans un contexte d’e-mailing

 

Exercice : réaliser un e-mailing d’invitation (une colonne)

 

Préparer et optimiser les images avec Photoshop

• Connaître les formats d’image pour l’e-mailing
• Extraire les images avec la fonction Exporter sous
• Utiliser l’outil Tranche de Photoshop
• Optimiser le poids des images

 

Exercice : extraire des images à partir d’une maquette graphique créée dans Photoshop

 

Réaliser une mise en pages élaborée

Mettre en place la structure tabulaire

• Imbriquer les tableaux HTML
• Utiliser les tableaux en pourcentage
• Ajouter des fonds de couleur

 

Placer et enrichir le texte grâce aux styles intégrés (CSS inline)

• Choisir la police de caractère et sa taille
• Modifier la couleur du texte
• Modifier l’interlignage et l’alignement
• Modifier la couleur des liens

 

Intégrer les images

• Ajouter un texte alternatif et le styliser (attribut alt)
• Ajouter un lien et supprimer la bordure bleue
• Créer un “faux arrière-plan”

 

Créer des boutons en HTML

• Créer la structure tabulaire
• Styliser (bordure, arrondi, ombre)

 

Vérifier le code et tester le rendu

• Vérifier le code avec HTMLHint et HTML Validator

 

Optimiser un e-mailing pour les principaux clients de messagerie

• Résoudre les bugs de rendu dans les principaux clients de messagerie
• Rendre un e-mailing ou une newsletter “mobile friendly”

 

Mettre en ligne la page miroir et les images

• Utiliser un logiciel FTP
• Configurer le serveur distant
• Publier la page miroir et des images sur un serveur distant
• Modifier des liens relatifs en absolus

 

Envoyer la newsletter pour test

• Envoyer avec l’outil en ligne gratuit PutsMail
• Tester le rendu dans les principaux outils de messagerie grâce aux outils de test-rendering (E-mail on Acid, Litmus)

Exercice : réaliser une newsletter complète