Aimez-les ou détestez-les, les e-mails HTML sont un outil de marketing extrêmement populaire et vous rencontrerez presque certainement des clients qui souhaitent les créer.
Si vous ne connaissez rien aux emails HTML, ils sont ennuyeux de développer et de casser toutes les règles que vous avez apprises en tant que concepteur web, mais être capable de les coder est une compétence précieuse à posséder. Aujourd'hui, nous allons examiner dix astuces simples et rapides pour que les débutants se lancent dans la création de courriels magnifiques et fonctionnels.
# 1 Utiliser les tables
Attends quoi? N'avons-nous pas abandonné les conceptions basées sur des tables non sémantiques? Oui, et maintenant, vous ressentez à nouveau la joie. Malheureusement, la plupart des clients de messagerie ne supportent pas une ancienne et simple mise en page CSS comme vous en avez l'habitude. Au lieu de cela, revenons aux années 90 et vous familiariser avec le Cellpacing.
Si vous ne connaissez pas les dispositions basées sur des tables, voici un exemple simple.
Chaque tableau est divisé en lignes avec des cellules. Chaque ligne est représentée par
L'extrait ci-dessus vous montre la syntaxe de base pour les CSS en ligne. Comme vous pouvez le constater, le code est essentiellement identique, il vous suffit de l'intégrer directement dans le code de votre code HTML plutôt que de le lier à un autre document.
Outils CSS intégrés
Si vous êtes plus à l'aise avec l'utilisation d'une feuille de style externe pendant le développement, utilisez simplement l'un des outils ci-dessous pour la convertir en style en ligne une fois que vous avez terminé.
- Premailer: convertit les styles CSS en styles intégrés et vérifie votre code par rapport aux normes de messagerie
- HTML Inline Styler: convertit les règles CSS en attributs de style inline
# 3 Nest Your Tables
Un autre problème avec les clients de messagerie est qu’ils interprètent assez mal les marges et les bourrages. Pour résoudre ce problème, utilisez des tables imbriquées autant que possible. Le code est un peu plus compliqué, mais vous aurez une conformité beaucoup plus grande dans tous les domaines.
Au nid? une table signifie simplement placer une table à l'intérieur d'une autre. Vous pouvez imbriquer plusieurs tables, juste méfiez-vous de la surenchère et créer un désordre énorme. Certains clients de messagerie commencent à avoir des problèmes autour de huit nids, mais vous devriez pouvoir entrer bien en dessous de ce nombre pour la plupart de vos créations.
# 4 Surveillez votre largeur
Plusieurs clients de messagerie ont une largeur assez limitée. Par exemple, considérons le client Gmail en ligne. Construire une page Web de taille normale, puis l'afficher dans la petite fenêtre de Gmail forcera l'utilisateur à faire un défilement horizontal gênant.
Il y a trop de clients possibles et de tailles d'écran à coder pour chaque scénario. Le consensus de la communauté Web consiste donc généralement à limiter la taille de vos courriels. En règle générale, essayez de conserver une largeur inférieure à 600 pixels dans chaque conception de courrier électronique que vous créez.
# 5 Soyez prudent avec les images
Il existe plusieurs complications à prendre en compte lors de l'utilisation d'images dans un courrier électronique HTML. Premièrement, certains clients ne prennent pas en charge les images d’arrière-plan, d’autres les prennent en charge mais les désactivent souvent par défaut. Ce n'est en aucun cas un argument selon lequel vous ne devriez pas utiliser d'images dans votre conception. Le principal argument de vente des e-mails HTML est qu’ils surpassent la qualité et les possibilités du texte enrichi déjà disponible dans la plupart des clients de messagerie. L'élimination totale des images peut réellement réduire les avantages.
Au lieu d'abandonner complètement les images, assurez-vous que votre message fonctionne correctement sans elles. Utilisez les couleurs d'arrière-plan comme solution de secours afin que tout texte reste lisible et testez votre mise en page avec les images désactivées.
Une autre chose dont vous devez être conscient avec les images est que vous ne pouvez pas (ou du moins ne devriez pas) les intégrer au courrier électronique. Au lieu de cela, vous devrez les héberger à long terme sur un serveur fiable, puis les lier à votre code.
Enfin, assurez-vous de surveiller vos temps de chargement. Les gens ont l'habitude de cliquer sur un courrier électronique et de voir le contenu sans attendre que les images se chargent. Si vous me faites supporter de longs temps de chargement, je vais appuyer sur Suppr plus rapidement que vous ne pourrez expliquer pourquoi cela vaudra la peine d'attendre.
# 6 Autoriser la désinscription facile
Les courriels HTML font le plus souvent partie d’un flot de lettres d’information auquel un utilisateur est abonné. Souvent, les utilisateurs s'inscrivent à un service et ne réalisent même pas que cela signifie qu'ils recevront un bulletin d'information. D'autres fois, ils décident consciemment de s'inscrire mais changent d'avis plus tard.
Dans les deux cas, la désinscription devrait être un processus simple que pratiquement toute personne consultant l'e-mail devrait pouvoir comprendre. Pour ce faire, incluez un lien de désinscription et assurez-vous qu'il est facile à repérer. Les concepteurs et les spécialistes du marketing qui tentent de cacher ce lien manquent d’intégrité et de respect pour leur public.
Si la personne ne veut pas de votre email, elle ne le lit pas quand même. Envoyer 10 000 courriels à des dossiers de courrier indésirable dans le monde entier n'a aucune valeur. Il est de loin préférable de savoir que les destinataires de votre newsletter sont réellement intéressés.
# 7 Considérez votre contenu avec soin
Les spécialistes du marketing et les propriétaires d'entreprise considèrent souvent qu'un bulletin électronique est la seule source de contact constant avec leur clientèle. Ils sont donc souvent tentés de le remplir avec autant de contenu et d’informations que possible. En tant que concepteur, aidez-les à résister à cette envie en concevant un modèle qui présente extrêmement bien quelques informations plutôt que de très mauvaises informations.
La clé ici est la qualité sur la quantité. Aucun ne lira un email marketing de mille mots. Au mieux, vous avez 3-5 secondes pour attirer l’attention du lecteur moyen avant qu’il n’appuie sur supprimer. Accomplissez ceci avec un chargement rapide, des graphismes attrayants, une copie concise et des en-têtes descriptifs clairs.
# 8 Inclure d'autres options de visualisation
En plus d'inclure une option de désinscription, vous devez présenter au moins deux manières alternatives d'afficher l'e-mail à toute personne ne recevant pas l'expérience souhaitée. Pour les minimalistes, une version texte simple est préférable.Il y a beaucoup de gens qui pensent que le courrier électronique doit rester simple et qui ne veulent tout simplement pas voir votre graphisme captiver l'attention.
À l'opposé, on trouve des utilisateurs qui souhaitent profiter d'une expérience riche et complète, mais qui sont retenus par un client de messagerie buggy. Pour ces utilisateurs, incluez un lien assez visible (souvent en haut) qui leur permet de visualiser le courrier électronique dans un navigateur. Parce que les navigateurs sont infiniment meilleurs pour l'affichage HTML et CSS, vous pouvez même renforcer la version basée sur le navigateur en la codant davantage comme une page Web normale (ou tout simplement, pour que le navigateur affiche la version originale).
# 9 Test complet
Lors de la conception d'une page Web, l'un des processus les plus ennuyeux à suivre est le test inter-navigateurs. Ce processus implique généralement de tester Webkit, Mozilla, IE et peut-être même Opera si vous êtes vraiment dédié. Si vous pouvez le croire, la conception pour les clients de messagerie est encore pire!
Il existe plus de 30 clients de messagerie populaires, chacun avec leurs propres normes et un support variable pour différentes commandes. Pour commencer, testez dans les clients de messagerie que vous avez sous la main. Inscrivez-vous pour des comptes avec des clients de messagerie Web populaires tels que Gmail, AOL et Yahoo. Assurez-vous également de tester les applications par défaut pour les Mac et les PC.
De toute évidence, vous ne pouvez pas tester chaque client. Si vous avez le budget, inscrivez-vous pour un mois de service comme Litmus lors de la phase de test. Cela vous permettra d'obtenir rapidement un aperçu du produit fini sur 33 clients de messagerie différents et constitue l'un des meilleurs moyens de garantir la couverture de tous.
Au cours de la phase de conception, veillez à consulter The Email Standards Project. C’est l’une des meilleures sources disponibles pour des rapports détaillés sur ce qui est supporté ou non par divers clients de messagerie.
# 10 Utiliser un modèle
Le meilleur moyen que j'ai trouvé pour commencer le processus de conception de votre premier e-mail HTML est de saisir un modèle. Même si vous avez une conception très spécifique à l’esprit, modifier un modèle développé par un professionnel plutôt que de repartir de zéro peut vous faire gagner un nombre incalculable d’heures de dépannage.
Cela vous donnera également un bon aperçu de la manière dont les autres développeurs structurent et stylisent leurs tables. Rappelez-vous simplement que si vous redistribuez ou vendez un modèle de courrier électronique en tant qu'art d'origine, vous ne devriez pas voler le travail de quelqu'un d'autre! Dans ces cas, vous voudrez vraiment savoir ce que vous faites et développer votre propre structure à partir de rien.
Modèles de courrier électronique gratuits
Heureusement, vous n'avez pas à payer un centime pour vous procurer des modèles gratuits de qualité à partir desquels commencer votre processus de conception. La plupart des services de messagerie premium proposent des téléchargements gratuits pour vous aider à démarrer, souvent sans aucune inscription requise. Découvrez les ressources ci-dessous:
- Moniteur de campagne: 30 modèles
- Mail Chimp: 4 modèles
- CakeMail: 21 modèles
Conclusion
Pour résumer, lors de la conception de modèles d'e-mail, commencez par un bon modèle de base, un code comme votre père l'avait fait il y a une décennie, maintenez votre contenu à la fois conceptuellement et physiquement maigre (moins de 600 pixels de large), facilitez-vous la désabonnement et consultez des versions alternatives. et test comme un fou.
Laissez un commentaire ci-dessous et laissez-nous savoir si vous avez trouvé l'article utile. Assurez-vous également de partager les éléments de sagesse que vous avez découverts au cours de la conception de courriers électroniques HTML.