Comment le code Bulletins électroniques HTML - SitePoint
Coder un e-mail HTML est un amusement, problème pratique pour les programmeurs à résoudre. Contrairement à coder une page web, e-mails HTML doivent afficher bien sur le vieux logiciel de messagerie - pensez Outlook ou Mac Mail, ainsi que d'adapter aux écrans de téléphone et tablette. Je vais vous montrer comment créer des e-mails HTML qui affichent bien sur tous les appareils, ainsi que des idées pour adapter votre code e-mail actuelle HTML pour afficher sur les téléphones et les tablettes.
Fundamentals HTML Email
La plus grande douleur lors du codage email HTML est que tant d'outils logiciels différents sont disponibles pour lire des emails, des logiciels de bureau tels que Eudora, Outlook, AOL, Thunderbird et Lotus Notes, aux services de messagerie Web tels que Yahoo. Hotmail et Google Mail, à l'email des applications sur les téléphones et les tablettes. Le logiciel utilisé pour rendre HTML pour chaque outil logiciel de courrier électronique détermine le code HTML et CSS fonctionne et ne fonctionne pas.
Plus de cet auteur
Si vous choisissez de coder votre e-mail HTML à la main (ma préférence personnelle) ou d'utiliser un modèle existant, il y a deux concepts fondamentaux de garder à l'esprit lors de la création email HTML:
Le plus rapide et plus simple pour voir comment les tableaux HTML et CSS en ligne interagissent dans un e-mail HTML est de télécharger des modèles de Campaign Monitor et MailChimp. Lorsque vous ouvrez un de ces modèles, vous remarquerez quelques choses que nous allons discuter plus en détail plus tard:
Étape 1: Utilisez les tableaux HTML pour la mise en page
Une seule colonne se compose généralement de:
e-mails à deux colonnes utilisent également un en-tête et pied de page. Comme une page Web à deux colonnes, ils utilisent généralement une étroite colonne latérale aux caractéristiques des maisons et des liens vers plus d'informations, tandis que la colonne plus large détient le contenu du corps de l'email. Pour obtenir une mise en page de courrier électronique à deux colonnes pour afficher bien sur un téléphone ou une tablette nécessite un code-fu, comme vous le verrez plus loin dans cet article.
e-mails promotionnels suivent des règles similaires mais contiennent beaucoup moins de la manière du contenu et des liens. Ils comprennent souvent un ou deux messages, et parfois utilisent une grande image avec un petit texte explicatif et quelques liens sous l'image.
Toutes ces possibilités de mise en page de courrier électronique peuvent être créés facilement, en utilisant des tables HTML pour diviser l'espace en lignes et colonnes. En fait, l'utilisation des tableaux HTML est la seule façon de parvenir à une mise en page qui rend cohérente entre les différents clients de messagerie.
Peu importe la façon dont votre email est conçu, il est important de se rappeler le contenu le plus important devrait apparaître à ou près du haut de l'e-mail, il est visible immédiatement lorsqu'un lecteur ouvre votre email. En haut à gauche d'un message e-mail est souvent le premier lieu les gens regardent quand ils ouvrent un e-mail.
Telle est l'approche que j'utilise pour créer des e-mails HTML:
Il y a quelques mises en garde, cependant; nous allons jeter un oeil à notre styling texte suivant.
Étape 2: ajouter des styles CSS
Ai-je dit soutien CSS était pauvre dans les clients de messagerie? Et bien ça l'est. Mais vous pouvez (et devez) toujours utiliser CSS pour les styles dans votre e-mail une fois votre mise en page de table imbriquée est en place. Il y a juste quelques petites choses à surveiller. Voici les étapes que j'utilise.
Tout d'abord, utilisez les styles en ligne pour stocker toutes vos informations de style, comme indiqué ici:
Cela comprend une table. td. p. une. etc.
Pour votre table de conteneurs - celui qui abrite l'en-tête, le contenu et les tables de bas de page - définir la largeur de la table à 98%. Il se trouve que Yahoo! courrier a besoin que 1% coussin de chaque côté afin d'afficher l'e-mail correctement. Si les gouttières latérales sont essentielles pour la conception de votre e-mail, définissez la largeur à 95%, voire 90% pour éviter des problèmes potentiels. Bien sûr, les tables à l'intérieur de la table des conteneurs doivent être fixés à 100%.
Alors que div s semblent être à peine utile, enjambent s semblent fonctionner presque à chaque fois, parce qu'ils sont des éléments en ligne. Dans certains cas, la durée de peut être utilisé pour plus que la coloration ou dimensionne le texte: ils peuvent être utilisés pour positionner le texte ci-dessus ou au-dessous du contenu.
Si vous avez téléchargé et étudié les modèles de courriel de Campaign Monitor et MailChimp, vous verrez qu'ils traitent la table des conteneurs comme si elle était la balise body html. L'équipe de Campaign Monitor se référer à ce tableau comme « BodyImposter », ce qui est une excellente façon de penser à la table de cadre ou un emballage. Du point de vue de CSS, la table de conteneur fait ce que l'élément de corps HTML ferait si des services comme Google Mail ne désactivez pas ou ignorer la balise body.
Étape 3: adopter les meilleures pratiques
Sachant que vous avez créé email HTML valide en utilisant les directives que je l'ai suggéré est seulement une partie de la solution - il y a plusieurs bonnes pratiques que vous devez suivre pour vous assurer que votre e-mail est bien reçu.
L'étape suivante consiste à tester votre e-mail HTML dans une variété de clients de messagerie. Souvent, cela permettra d'identifier les problèmes qui nécessitent des solutions de contournement.
Voici les réglages de code les plus courantes que j'ai trouvé nécessaire au cours de cette phase de test:
De plus, on recommande les meilleures pratiques suivantes:
Il est important de vous assurer que vos écrans de courrier électronique HTML avec des images acceptablement désactivées. De nombreuses applications de messagerie sélectionnez l'affichage des images « off » par défaut. Par exemple, si vous utilisez une image de fond pour fournir une couleur de fond avec la couleur de la police blanche au-dessus, assurez-vous que la couleur d'arrière-plan par défaut pour cette partie de la table HTML est sombre, pas blanc.
Quand je teste comment un email affiche avec des images au loin, je l'habitude d'utiliser mon éditeur de texte pour remplacer chaque attribut d'image src avec une combinaison unique de caractères tels que « xsrcx », avant de revenir en arrière à nouveau après le test.
De nombreux services de livraison de courrier électronique incluent la possibilité de voir comment vos affichages e-mail HTML dans une large gamme de logiciels de messagerie. Il vous aide à identifier ce que le code tweaks sont nécessaires avant de l'envoyer.
Le manque de soutien de Google Mail est un peu plus pardonnable - parce que l'application fonctionne dans un navigateur, il ne peut pas contrôler le contenu des e-mails qu'il affiche. Par conséquent, les ingénieurs de Google ont dû prendre des mesures pour assurer leur application affiche correctement quelle que soit la qualité du code HTML ou CSS dans les e-mails sont écrits.
D'une part, Google Mail supprime les styles CSS contenus entre les balises de style, peu importe où ils apparaissent dans l'e-mail. Et les polices affichées dans les tableaux HTML - la seule alternative à l'utilisation de styles - ont l'habitude étrange de paraître plus grand que prévu, peu importe comment l'e-mail HTML est structuré.
Les bonnes nouvelles, cependant, est que si vous le code pour expliquer les bizarreries de ces trois applications de courrier électronique, votre code email HTML est susceptible d'afficher bien dans la plupart, sinon tous, les clients de messagerie. Voici quelques techniques qui semblent bien fonctionner dans Google Mail et d'autres logiciels de messagerie plus:
En plus de Google Mail, il y a un autre, risque moins évident programmeur fait face lors de la création e-mail HTML: Lotus Notes. De nombreuses grandes sociétés continuent de soutenir et de mettre à jour leurs installations Notes.
Malheureusement, il est impossible de dire que les entreprises utilisent des billets. La meilleure approche est de suivre les directives décrites dans cet article - le code plus primitif, plus il fonctionnera bien, sinon parfaitement, avec des notes.
Cela dit, il est tout à fait possible Lotus Notes présenter à vos bizarreries de courrier électronique HTML qui sont presque au-delà de la croyance. Par exemple, les anciennes versions de notes peuvent convertir des images à leurs formats propriétaires, ou simplement ignorer HTML de base sans faille dans un e-mail, mais afficher d'autres fins HTML dans un autre e-mail.
Voici quelques conseils qui vous aideront à convaincre Notes afficher votre e-mail HTML correctement:
Campaign Monitor, un service de distribution de courrier, a une liste complète des éléments CSS support pour tous les mobiles populaires, web et client de messagerie de bureau.
Étape 5: codage pour les téléphones et les tablettes
Le secret pour coder un e-mail HTML à deux colonnes pour adapter aux petits écrans de téléphone et tablette? Mettez chaque colonne dans sa propre table. Ensuite, pour chaque table HTML, utilisez CSS en ligne flotter: gauche et HTML align = « left » flotter et aligner chaque table de colonne contenu à gauche. Ensuite, ajoutez class = "email" à la définition de votre table et class = "email-content" à vos cellules TD.
Cette approche peut être utilisée pour cibler les modifications de conception de mise en page pour fonctionner avec des téléphones et / ou tablettes.
Cette solution vient d'un excellent guide de Campaign Monitor, Design Email réactif. qui a encore plus de détails et des idées sur la façon de faire e-mail HTML répondant à différentes tailles d'écran.
Quelle est la meilleure idée de retirer de cet article? S'il y a un choix à faire entre un design simple e-mail et une solution plus complexe, la simplicité est toujours le pari le plus sûr.
Lectures complémentaires
Ces ressources offrent des informations précieuses qui vous aideront si vous voulez en savoir plus sur le codage email HTML.
Et voici plus ...
Guidelines Email Plain Text design
Cet article énumère un certain nombre de techniques simples pour faire des e-mails texte plus facile à analyser.
Email test HTML
Cet article explore les procédures d'essai à travers plusieurs clients de messagerie. D'autres articles connexes comprennent la création de mises en page de courrier électronique HTML et la compréhension des tests à plusieurs variables.
MailChimp Email codage HTML / Guide de livraison
Beaucoup de grandes informations sur tous les aspects de courrier électronique HTML, y compris comment fonctionnent les filtres de spam.
La série « Secrets of Email HTML »
Certaines de ces informations est vieux mais un bon morceau sur Lotus Notes est offert.
CSS et Email, Embrasser dans un arbre
Cette excellente approche CSS uniquement au courrier électronique HTML a été publié par A List Apart. NOTE: L'auteur a écrit une mise à jour de cet article, posté sur le blog de Campaign Monitor, Optimisation de la présentation CSS dans les emails HTML.