Si vous souhaitez créer votre template graphique de A à Z et customiser votre email, une condition deviendra nécessaire : il va vous falloir maîtriser les langages du web spécifiques à l’emailing.
La formation « créer son template d’email » vous donnera les clés pour traduire en langage HTML et CSS le modèle graphique que vous aurez préparé sous Photoshop. Au menu également : l’adaptation du mail aux tablettes et smartphones, ainsi que les fonctions de tracking, et les logiciels ou extensions leaders du marché.
Les Objectifs
de la formation créer son template d’email
ses éléments de design et de contenus images ;
sa page en HTML avec les tables ;
pour mettre en forme ;
avec les Media Queries (adaptable smartphones & tablettes) ;
Dans le logiciel et sur le serveur ;
sa campagne ;
La Formation créer son template d’email
en détails : contenus, dates et prix
Dernière actualisation le 16 septembre 2022
Toute personne souhaitant créer des emails personnalisés en recourant à Photoshop pour le template, puis à HTML pour l’intégration technique, compatible avec toutes les solutions actuelles d’emailing
Profils : webmasters, graphistes, webdesigners ou chargés de communication
Cette formation n’est ni certifiante, ni éligible au CPF, elle ne peut faire l’objet que d’une formation dite intra (prise en charge au titre du plan de formation entreprise – renseignements auprès de votre OPCO ou de votre conseil comptable)
- Avoir un bon niveau de pratique en informatique et avoir réalisé au préalable un zoning ou une maquette sous Photoshop ou Gimp.
- De 1 à 6 en intra
Les apports professionnels de la formation template emailing
La formation template emailing a pour objectif de transformer votre maquette Photoshop en emailing très personnalisé. Elle se tient sur 3 jours non contigus afin d’apprendre le code en douceur. Elle nécessite que vous construisiez, puis fassiez valider votre maquette graphique avant le 1er jour.
Jour 1 : immersion technique dans les langages du web
Le 1er jour de formation rappelle les bases de l’emailing classique et en expose les limites techniques. Seul le recours à HTML et CSS permettra de nouvelles libertés créatives. Le formateur présente alors l’environnement technique et logiciel pour apprendre à créer ses emails et les déployer simplement.
La 2e partie de matinée s’intéresse à la sémantique du code HTML spécifique aux emails. Les stagiaires assimileront toutes les notions avec des exercices d’application justement dosés, sous environnement logiciel Dreamweaver.
Après avoir dressé un bref rappel des règles du design, l’après-midi se consacre plutôt à l’analyse de templates. Les stagiaires apprendront à « découper » leurs conceptions graphiques pour anticiper le montage de l’email : images, arrière-plans et polices en seront les briques élémentaires.
Une fois les « briques » obtenues, le formateur fait le point sur la structure de page web dédiée à l’emailing. Il s’agit d’insérer les contenus et de les hiérarchiser dans des tableaux, tout en pensant aux comportements dits responsives.
Jour 2 : les CSS dédiés au template d’email
Au matin du 2e jour, les stagiaires sont toujours sur Dreamweaver. La 1re notion concerne l’hébergement de fichiers à distance via le protocole FTP. Puis les stagiaires s’initieront aux CSS en ligne pour commencer à mettre en page l’emailing et lui donner un aspect beaucoup plus graphique. Le formateur s’appuie sur son expérience pour conseiller les apprenants et leur éviter les pièges usuels du métier d’intégrateur.
L’après-midi est entièrement dédié à un « gros » morceau : l’apprentissage des média queries et l’affichage des informations selon la résolution d’écran. Le cours est ponctué de nombreux petits exercices permettant de monter petit à petit son email.
Jour 3 : configuration et envoi de l’email personnalisé
En début de journée, les participants entrent en formation avec le montage de leur email terminé. Une 1re plage horaire est dédiée aux retours d’expérience et à la levée des éventuelles difficultés rencontrées. Puis le cours se poursuit avec la publication de la page miroir, les tests navigateurs et l’insertion – absolument essentielle – d’un tracking pour le suivi statistique.
Au retour de la pause, les participants pourront utiliser un des outils pour envoyer leur emailing : Sarbacane, MailChimp, ou Sendblaster (à décider collégialement avant la formation). Ils configureront l’outil pour y importer leur template HTML et gérer les aspects légaux. La suite de la formation consiste à tester les envois et débugger les défauts d’affichage les plus courants.
En fin de journée, le formateur expose l’intérêt de faire de la « pub » pour son emailing, et indique comment insérer un formulaire d’inscription dans son site, sur Facebook etc.
Admission à la formation créer son template d'email :
- Entretien préalable avec le formateur, pour évaluer les besoins précis, ainsi que le niveau sur Photoshop ou Gimp
- Test d’entrée sur Photoshop via questionnaire, et analyse des fichiers templates, à envoyer avant la formation
- Disposer d’un logiciel d’emailing ou de messagerie, ainsi que de la licence Dreamweaver (le recours à Notepad ++ demandera une réadaptation du programme)
- Nécessité d’amener son ordinateur portable pour les séquences pratiques
Utilisez notre questionnaire pour faire le tour de vos acquis actuels et anticiper vos besoins de formation
- 3 jours, soit 21h00.
- 60% de théorie, 40% de pratique.
Pas de date programmée pour le moment
Horaires : 9h-12h30 / 14h-17h30
Formation inter déjà programmée :
- 10 jours ouvrés avec un auto-financement ;
- 4 semaines minimum avec un financement externe, selon délais d’instruction des dossiers de financement chez votre OPCO.
Formation intra :
- 4 semaines minimum avec un auto-financement ;
- 5 à 10 semaines en cas de financement avec votre OPCO.
- Formation inter-entreprise : 3 jours 1890€HT
6 places restantes - Formation intra-entreprise : 3 jours 3255€HT
Intégrez
votre design
La formation vous permet d’intégrer votre maquette de façon progressive, et de débusquer sous l’œil avisé du formateur toutes les difficultés en programmation front-end.
La mallette
pédagogique
Le support de cours projeté en formation est livré après chaque journée, puis complété à la fin des 3 jours par un cours rédigé, une liste de livres et la documentation officielle d’Adobe Dreamweaver.
Et Après ? On sera
toujours là !
Temps de support de 1h30 offert dans le mois qui suit la formation (intra) ; à utiliser pour des relectures, des corrections dans le code ou jouer le rôle de béta testeur.
Le programme de formation
créer son template d’emailing
Actualisé le 12 octobre 2020
Le mail professionnel avec HTML et CSS
- Abandonner Outlook ?
- Se mettre au HTML / CSS et aux Media Queries
- Disposer d’un hébergement
- Investir dans un logiciel d’emailing et de newsletter
Préparation du template de mail (avec Photoshop ou Gimp)
- Règles de design pour les templates de mail
- Faire la différence entre images de fond et images de contenu
- Créer les fonds graphiques puis les enregistrer au bon format
- Créer et retoucher les images de contenu
- Gérer les polices d’écriture fantaisistes
- Les formats Web lors de l’exportation
Évaluation Objectif 01 : découper sa maquette Photoshop et exporter les images pour le web
Les basiques du code HTML (Dreamweaver)
- Règles générales de la création de pages Web
- Comprendre la syntaxe du langage HTML
- Balises de structuration des textes
- Les attributs en HTML
Structurer le template avec les tables HTML
- Retour à la préhistoire…
- Créer une mise en page
- Structurer les parties / rubriques
- Règles et limites dans l’utilisation des tables
Évaluation Objectif 02 : commencer sa structure de mail dans une table
Héberger son modèle d’email grâce au FTP
- Comprendre la notion de FTP
- Charger ses images sur le site distant
- Appeler ses images à partir du serveur
- Créer des liens hypertextes vers des articles en ligne
- Proposer des ressources en téléchargement
Comprendre et utiliser les CSS / CSS3
- Où mettre les CSS et CSS3 ?
- Comprendre les sélecteurs de style
- Création de styles intégrés (CSS inline)
- Comprendre les spécificités liées à l’emailing
Évaluation Objectif 03 : mettre en forme son mailing avec CSS, en respectant sa maquette
Ajouter les Media Queries pour le responsive
- Définir les conditions de changement de mise en forme avec les Media Queries
– principe de fonctionnement de @media
– points de rupture pertinents - Modifier la structure de la mise en pages sur mobile : passer de 2 à 1 colonne ou de 3 à 1 colonne
- Améliorer la lisibilité du texte sur smartphone
- Masquer certains contenus sur mobile
- Remplacer une image par une autre sur smartphone
Évaluation Objectif 04 : rendre son emailing responsive
Créer une page miroir
- Mettre la page miroir sur son serveur Web
- Tester dans les navigateurs
- Insérer un traceur d’analytics
Évaluation Objectif 05 : envoyer sa page miroir sur le serveur
Paramétrer et envoyer sa campagne (Sarbacane, MailChimp ou Sendblaster)
- Créer et gérer sa mailing-list
- Importer son mail au format HTML
- Ajouter le lien de désinscription
- Ajouter le traceur
- Gérer l’envoi SMTP et traiter les retours
- Les risques de blacklistage
Évaluation Objectif 05 : intégrer son emailing dans le logiciel dédié
Tester et débugger
- Clients de courrier et webmails : leurs lacunes
- Bugs d’affichage courants
- Utiliser des templates tout prêts
- Outils pour le création d’emailings
Évaluation Objectif 06 : envoyer un test au formateur et débugger
Outils marketing
- Créer un formulaire d’inscription pour alimenter la mailing list
- Gérer les désabonnement dynamiquement
- Du côté des CMS et des plugins dédiés à l’emailing
- Formation sur 3 jours non contigus afin de laisser le temps aux participants de pratiquer les codes HTML, CSS / CSS3 et de préparer leurs questions d’une fois à l’autre.
- L'intervenant alterne découverte des notions, explications pédagogiques et travaux pratiques, permettant de s’approprier les notions et les méthodes.
- Formation sur-mesure : le formateur analyse la maquette Photoshop et la solution de mail marketing retenue par le client, étape préalable à la création des exercices personnalisés
- Formation-atelier permettant au stagiaire de produire son email pas à pas, et de travailler en réel sur ses outils de Mail marketing.
- Feuille d’émargement : les stagiaires émargeront par demi-journée de formation.
- Attestation remise aux stagiaires ayant suivi la formation avec assiduité.
- Une évaluation écrite portant sur l'atteinte des objectifs sera réalisée par les participants en fin de formation.
- Exercices créés en collaboration avec le client validant les acquis tout au long de la formation.
- Chez le client ou le centre de formation partenaire
- ou dans les locaux de Web Créatif : salle de formation de 33m² (6 stagiaires maximum) équipée de tableau blanc, internet en connexion Wifi et grand écran TV
- Notre salle de formation est accessible PMR et dispose d'une place de parking attenante, réservée PSH. Au besoin, nous pourrons délocaliser la formation dans une salle disposant de sanitaires accessibles PMR.
- N’hésitez pas à nous signaler tout besoin particulier en amont de la formation. Nous adapterons au mieux le programme et les exercices pour faciliter votre apprentissage.
- Une formation sur-mesure est fortement recommandée pour les professionnels malvoyants ou malentendants. N’hésitez pas à contacter notre centre de formation, nous réaliserons ensemble une session adaptée à votre situation.
- Le registre d'accessibilité est disponible sur simple demande.
La formatrice
d’emailing avec HTML & CSS
Sabrina Échappé
Sabrina crée régulièrement des campagnes d’emailing pour les besoins de l’agence et de ses clients. Le plus souvent, elle lie l’emailing au site internet via des plugins, afin d’automatiser l’inscription et le respect de la réglementation.
Les plugins d’emailing comme les logiciels leader du marché proposent bien sûr des templates. Mais le graphisme est souvent impersonnel, et la structure éditoriale pas toujours adaptée. Le recours au HTML / CSS est alors essentiel si on veut sortir des templates d’email proposés par défaut : cette formation vous permet de transformer vos maquettes Photoshop en emailings personnalisés.
Mémo et outils
pour créer son template d’emailing
- Prévoir l’indispensable kit de prise de notes : papier, crayon.
- Côté matériel : prévoir un ordinateur équipé de Dreamweaver et de Photoshop (ou Gimp si vous le connaissez déjà bien).
- Souscrire un abonnement pour un petit hébergement web et disposer des accès FTP.
- Penser à ses accès messagerie et site web : la création de compte sur les webservices d’emailing demanderont une confirmation par mail.
- Pré-requis : votre projet de template déjà réalisé sur Photoshop, avant le 1er jour de formation.
Formation
présentielle
100%
sur-mesure
Mise à jour
j-7 à J-1
Distanciel
non réalisable
