Comment coder les mails au format HTML

Les newsletters au format HTML ont parcouru un long chemin depuis cet article a été publié pour la première fois en 2006. Le courriel est toujours un moyen de communication préférée des éditeurs et des lecteurs. Les éditeurs peuvent suivre les tarifs des courriers électroniques ouverts, les acheminés, et mesurer l’intérêt des lecteurs pour les produits et les sujets. Les lecteurs de mails présentent les informations qui sont disposés comme une page Web, d’une manière qui est plus attrayante visuellement, et beaucoup plus facile à numériser et à naviguer, que le courriel en texte simple.

Le codage d’un mail HTML est un problème majeur concernant la compatibilité entre le corps du message et les différents clients de messagerie et webmails. Contrairement au codage d’une page Web, les mails HTML doivent être bien affichés sur les anciens logiciels de messagerie comme Outlook ou Mac Mail. Sans compter qu’ils doivent s’adapter aux différentes tailles d’écrans de téléphones et de tablettes. Je vais vous montrer comment créer des courriels HTML qui s’affichent bien sur n’importe quel appareil, ainsi que des idées pour adapter votre code de courriel HTML à afficher sur les téléphones et les tablettes.

Les bases fondamentales du mail HTML

La plus grande difficulté lors du codage du courrier électronique HTML est le nombre de logiciels pour lire les courriels, allant des logiciels de bureau comme Eudora, Outlook, AOL, Thunderbird et Lotus Notes, jusqu’aux services de messagerie basés sur le Web tels que Yahoo !, Hotmail, et Google Mail, sans oublier les applications de messagerie électronique pour les appareils mobiles. Le moteur de rendu HTML de chaque client de messagerie détermine si le code HTML et CSS va fonctionner ou pas.

Si vous pensiez qu’il était difficile d’assurer la compatibilité inter-navigateurs de vos sites Web, sachez qu’il s’agit d’un tout nouveau jeu – chacun de ces outils de messagerie peut afficher le même courrier électronique de façon très différente. Et même lorsque ces outils affichent correctement un courrier électronique HTML, on peut encore observer des écarts dans le design, comme par exemple la largeur de leurs fenêtres lors de la lecture. Cela rend les choses encore plus délicate.

Que vous choisissiez de coder votre courrier HTML à la main ou d’utiliser un modèle existant, il existe deux concepts fondamentaux à garder à l’esprit lors de la création d’un courrier électronique HTML :

  1. Utiliser des tables HTML pour contrôler la mise en page et la présentation. Vous pouvez avoir l’habitude d’utiliser des mises en pages CSS pures pour vos pages Web, mais cette approche ne résistera pas dans un environnement de messagerie.
  2. Utiliser le CSS en ligne pour contrôler certains éléments de présentation dans votre courrier électronique, comme les couleurs d’arrière-plan et les polices.

Le moyen le plus rapide et le plus simple de voir comment les tables HTML et les CSS en ligne interagissent au sein d’un courrier électronique HTML consiste à télécharger certains modèles de Campaign Monitor et de MailChimp. Lorsque vous ouvrez l’un de ces modèles, vous remarquerez quelques choses que nous allons voir plus en détails plus loin :

  • Les déclarations de style CSS doivent être mise sous la balise body , et non entre les balises head .
  • N’utilisez pas les raccourcis CSS : au lieu d’utiliser « font: Arial, Helvetica 12px/16px", utilisez plutôt la méthode académique mais néanmoins efficace : « font-family:Arial, Helvetica;font-size:12px;line-height:16px« .
  • Les balises span et div sont à utiliser avec parcimonie pour obtenir des effets spécifiques, tandis que les tableaux HTML effectuent la majeure partie du travail de mise en page.
  • Les déclarations de style CSS sont très simples et ne font pas usage de fichiers CSS.

Étape 1 : utiliser des tableaux HTML pour la mise en page

Les tables sont de retour ! Les normes Web deviennent la norme pour le codage des pages à afficher dans les navigateurs, mais ce n’est pas que cela le Web. Quelques clients de logiciels de courrier électronique sont encore à des années-lumière derrière nous en termes de support CSS. Ce qui signifie que nous devons recourir à l’utilisation de tables pour la mise en page, si nous voulons vraiment que nos newsletters aient un affichage convenable pour chaque lecteur de mails.

Donc mettons de côté nos bonnes pratiques conformes aux normes et nos compétences de coté : nous allons nous salir les mains !

La première étape dans la création d’un courriel HTML est de décider du type de mise en page nous souhaitons utiliser. Pour les bulletins d’information, les mises en page à une colonne et à deux colonnes fonctionnent le mieux, car elles contrôlent le chaos naturel qui résulte lorsqu’une grande quantité de contenu est poussée dans un espace aussi petit qu’un courrier électronique.< Les conceptions avec une seule colonne facilitent également un bon affichage sur les téléphones et les tablettes. Une présentation à une colonne se compose généralement de :

  1. Un en-tête, contenant un logo et certains (ou tous) les liens de navigation du site Web parent pour renforcer l’image de marque et pour familiariser les visiteurs du site web, ou des liens vers le contenu.
  2. Le contenu, qui contient des offres promotionnels, des images, des vidéos…
  3. Un pied de page au bas du mail, qui contient souvent des liens qui sont identiques à la navigation du haut, ainsi que des instructions pour se désabonner.

Les courriels à deux colonnes utilisent également un en-tête et un pied de page. Comme une page Web à deux colonnes, ils utilisent généralement une colonne latérale étroite pour héberger des fonctionnalités et des liens vers plus d’informations, tandis que la colonne plus large contient le contenu corporel de l’e-mail. Pour obtenir une présentation de courrier électronique à deux colonnes pour bien afficher sur un téléphone ou une tablette.

Les mails promotionnels suivent des règles similaires mais contiennent beaucoup moins de contenu et de liens. Ils incluent souvent un ou deux messages et utilisent parfois une grande image avec un petit texte explicatif et des liens sous l’image.

Toutes ces possibilités de disposition de courrier électronique peuvent être créées facilement, en utilisant des tables HTML pour diviser l’espace en lignes et colonnes. En fait, l’utilisation de tables HTML est le seul moyen d’obtenir une mise en page qui restituera uniformément à travers les différents clients de messagerie.

Peu importe la façon dont votre courrier électronique est conçu, il est important de se rappeler que le contenu le plus important devrait se situer vers le haut du mail, il est visible immédiatement quand un lecteur ouvre son courriel. Le coin supérieur gauche d’un message électronique est souvent le premier endroit où les gens regardent lorsqu’ils ouvrent un courriel.

C’est l’approche que j’utilise pour créer des courriels HTML :

  • Pour une mise en page à deux colonnes, créez une table pour l’en-tête, une pour les deux colonnes du contenu et une autre pour le pied de page, c’est-à-dire trois tables.Enveloppez ces tables dans une autre table de conteneur. Utilisez la même approche pour les mises en page d’une seule colonne, mais donnez au tableau du contenu une seule colonne. Cette approche est particulièrement appropriée si la conception de votre courrier électronique contient des images qui sont réparties sur plusieurs cellules de table. Sinon, une seule table avec des lignes td pour son en-tête (avec colspan="2" si la conception utilise deux colonnes), le contenu et le pied de page devrait s’afficher correctement dans tous les logiciels de messagerie sauf pour Lotus Notes… :/
  • Utilisez les attributs des balises table et td pour contrôler l’affichage de la table. Par exemple, cellpadding="0", border="0", valign="top", align="left", etc. Cela aide principalement les anciens clients de messagerie à afficher le courrier électronique d’une manière acceptable.
  • Même si la conception de votre courrier électronique n’inclut pas de bordure autour de votre table, vous pouvez trouver utile pendant le développement de définir border="1" pour aider au débogage des problèmes qui surviennent avec l’alignement interne des tags tr et td . Remplacez-la par border="0" pour tester et pour la production.

Bien que cette approche puisse offenser les puristes qui préfèrent coder en utilisant les dernières normes, c’est la seule approche viable en ce moment. Mais le fait que nous utilisions des tableaux pour la mise en page ne signifie pas que nous devons recourir entièrement aux méthodes de la vieille école.Par exemple, peu importe la façon dont Lotus Notes affiche les courriels HTML, vous ne devriez jamais avoir à recourir à la balise font . Et tandis que le moteur de rendu HTML d’Outlook 2007 affiche très bien des tables HTML.

Il y a quelques réserves, cependant jetons un œil sur le style de notre texte.

Étape 2 : Ajouter des styles CSS

Ai-je dit que le CSS était mal interprété dans les clients de messagerie ? Et bien ça peut l’être. Mais vous pouvez et devriez toujours utiliser du CSS pour les styles dans votre courriel une fois que votre disposition de tables imbriquées est en place. Il y a juste quelques astuces à connaitre. Voici les étapes que j’utilise :

Tout d’abord, utilisons des styles en ligne pour stocker toutes vos informations de style, comme indiqué ici :

 <p style="color: red;">Notre texte...</p>

Cela inclut les balises table , td, p , a, et ainsi de suite…

N’utilisons pas la déclaration de style CSS dans l’en-tête head de notre fichier HTML, comme nous avons tendance à le faire lors de la création de pages Web. Au lieu de cela, plaçons notre déclaration de style juste en dessous de la balise body. Notons que Gmail recherche toute déclaration de style dans le courrier électronique et la supprime. En outre, n’utilisez pas l’élément link pour faire référence à une feuille de style externe : Google Mail, Hotmail et tout autre logiciel de messagerie ignorent, modifient ou suppriment ces références externes à une feuille de style.

Pour votre table conteneur – celle qui contient les tables d’en-tête, de contenu et de pied de page – définissez la largeur de table à 98%. Il s’avère que Yahoo! mail a besoin de 1% de marge de chaque côté afin d’afficher le courrier électronique correctement. Si les gouttières latérales sont essentielles à la conception de votre mail, fixez la largeur à 95% ou même à 90% pour éviter des problèmes potentiels. Bien sûr, les tables à l’intérieur de la table conteneur doivent être définies à 100%.

Mettez les informations générales sur le style de police dans la balise td la plus proche du contenu. Oui, cela peut entraîner des déclarations de style répétitives dans plusieurs cellules. Mettez les définitions de style de police dans le titre, par exemple h1, h2 ), p , ou a balise seulement si nécessaire.

Utilisez les div avec parcimonie pour placer le contenu et des liens vers la droite ou la gauche dans la cellule td du tableau. Google Mail semble ignorer la déclaration float, quand à Yahoo! et Hotmail les interprètent très bien. Parfois, il est préférable de coder une disposition de table plus complexe que de s’appuyer sur des déclarations flottantes. Ou, comme il est trop facile d’encombrer un e-mail, demandez à votre concepteur de mettre le contenu flotté dans la colonne latérale étroite à la place.

Alors que les div semblent être à peine utile, les span semblent fonctionner presque à chaque fois, parce que ce sont des éléments en ligne. Dans certains cas, le span peut être utilisé autrement que pour simplement agrémenter le texte : il peut être utilisé pour positionner le texte au-dessus ou au-dessous du contenu.

Notez que certains services de distribution de courrier électronique décompresseront les définitions de style pour les rendre plus explicites et, par conséquent, plus lisibles par tous les logiciels de messagerie. Par exemple, le raccourci CSS style="margin: 10px 5px 10px 0;" peut être étendue à la déclaration de style long indiquée plus haut. Testez un maximum de clients de messagerie et regardez pour voir ce qui arrive au code du courrier électronique. Commencez par les raccourcis CSS parce qu’il semble bien fonctionner avec tous les logiciels de messagerie.

Si vous avez téléchargé et étudié les modèles de courrier électronique de Campaign Monitor et de MailChimp, vous verrez qu’ils traitent la table de conteneur comme s’il s’agissait de la balise body html. L’équipe du moniteur de campagne se réfère à ce tableau comme «BodyImposter», ce qui est une excellente façon de penser à la table cadre ou wrapper. D’un point de vue CSS, la table conteneur fait ce que l’élément body html ferait si des services comme Google Mail ne désactivent pas ou ignorent la balise body.

Étape 3 : Adopter les meilleures pratiques

Sachant que vous avez créé un mail HTML valide en utilisant les lignes directrices que j’ai suggérées est seulement une partie de la solution – il existe plusieurs pratiques exemplaires que vous devez suivre pour vous assurer que votre mail garde un bel aspect.

L’étape suivante consiste à tester votre courrier électronique HTML dans une variété de clients de messagerie. Souvent, cela permettra d’identifier les problèmes qui nécessitent des solutions de contournement.

Les premiers outils de test à utiliser sont les navigateurs Web Firefox et Internet Explorer. Si le mail s’affiche bien ou parfaitement dans les deux navigateurs, il y a une bonne chance de tester l’email dans Outlook, Yahoo !, Google Mail, et d’autres services ne révèlent que des problèmes mineurs. Si possible, je recommande également de tester votre courrier électronique dans Internet Explorer 6 – cela devrait vous donner une bonne indication de la façon dont votre courrier électronique sera rendu dans Outlook 2003 (reportez-vous à la liste des ressources à la fin de cet article pour plus d’informations sur l’exécution d’Internet Explorer 6). Enfin, pour tester l’apparence d’un mail sur un iPhone ou un iPad, consultez votre courriel HTML dans un navigateur Web Safari.

Une fois que le courrier électronique apparaît bien dans ces deux navigateurs Web, utilisez un service de messagerie pour envoyer le courrier électronique à une gamme de comptes de messagerie de test. Idéalement, cela devrait inclure des comptes avec les services Yahoo !, Hotmail et Google Mail.
Les comptes de test que vous utilisez doivent, bien sûr, être déterminés par les noms de domaine dans la liste de diffusion des personnes qui recevront le courrier électronique. Par exemple, s’il n’y a pas d’abonnés AOL sur cette liste, c’est probablement une perte de temps et d’argent à mettre en place et à tester avec un compte de messagerie AOL.

Voici les ajustements de code les plus courants que j’ai trouvés nécessaires pendant cette phase d’essai:

  • Parfois, un changement de largeur de pourcentage à largeur fixe est nécessaire. Bien que ce ne soit pas idéal – parce que les lecteurs peuvent et redimensionnent leurs fenêtres de mail tout en lisant – parfois, employer une largeur fixe est la seule manière d’avoir un affichage de disposition correctement dans de multiples clients de courrier électronique.
  • S’il y a un problème de cellpadding avec les colonnes dans la cellpadding de cellspacing électronique, d’abord modifier les cellpadding et cellspacing des tables HTML. Si cela ne fonctionne pas, appliquez le margin de CSS et les attributs de remplissage. L’espacement HTML fonctionne mieux avec les anciens logiciels de messagerie.
  • Le déplacement d’image peut se produire lorsqu’une cellule td est fermée juste en dessous d’une étiquette img . C’est un ancien problème HTML. Mettre la </td> juste après (sur la même ligne que) la balise img élimine l’intervalle ennuyeux et mystifiant de 1 pixel.

En outre, les meilleures pratiques suivantes sont recommandées:

  • Évitez d’utiliser JavaScript. La plupart des logiciels de messagerie vont le désactiver de toute façon.
  • Si une image est découpée et répartie sur plusieurs cellules de table HTML, testez le courrier électronique en utilisant plusieurs comptes de test. Parfois, il peut sembler grand dans Outlook, mais être déplacé par un ou plusieurs pixels dans Hotmail et d’autres services. Pensez également à faire de l’image une image d’arrière-plan sur une nouvelle table HTML qui encase toutes les lignes de la table et les colonnes qui afficheraient des parties de votre image de fond; Cela produit souvent le même effet que le découpage d’une image, mais utilise moins de code et peut fournir de meilleurs résultats (voir ci-dessous). Notez que Outlook 2007 n’affiche pas les images d’arrière-plan; N’oubliez pas de tester votre code de messagerie avec votre logiciel de messagerie cible.
  • Pour les images d’arrière-plan, utilisez l’ background background de la table au lieu d’utiliser CSS. Cela fonctionne de manière plus cohérente dans les logiciels de messagerie électronique que les autres solutions possibles.
  • Stockez les images de courrier électronique sur un serveur Web – de préférence dans un dossier distinct des images de votre site Web (par exemple, dans un dossier appelé /images/email ) et ne les supprimez pas. Certaines personnes ouvrent des emails semaines ou mois plus tard, de la même façon que les gens utilisent des signets pour revenir aux sites Web.
  • Assurez-vous que toutes vos images utilisent les attributs alt , height et width . La définition de valeurs pour ces attributs améliore les résultats dans Google Mail, ainsi que le maintien de votre mise en page lorsqu’un lecteur a ses images désactivées. Notez toutefois que Outlook 2007 ne reconnaît pas l’attribut alt .
  • Utilisez l’attribut target="_blank" pour les balises a, de sorte que les personnes qui lisent avec les services webmail n’ont pas la page demandée apparaissent dans leur interface webmail.
  • Alors qu’une image de 1 × 1 pixel peut être utilisée pour forcer l’espacement pour créer une disposition précise de courrier électronique, les spammeurs utilisent souvent des images de 1 × 1 pixel pour déterminer si leur email a été ouvert. L’utilisation de cette pratique augmentera la probabilité que votre email soit classé comme spam.
  • De même, évitez d’utiliser une grande image « au-dessus du pli » dans le courrier électronique. Il s’agit d’une autre pratique classique de spammer et peut causer votre courrier électronique à être interprété comme du spam.

Il est important de vous assurer que votre courriel HTML s’affiche de manière acceptable avec les images désactivées. De nombreuses applications de messagerie définissent l’affichage des images comme «désactivées» par défaut. Par exemple, si vous utilisez une image d’arrière-plan pour fournir une couleur d’arrière-plan avec une couleur de police blanche, assurez-vous que la couleur d’arrière-plan par défaut de cette partie de la table HTML est sombre et non blanche.

Lorsque je teste le déploiement d’un courrier électronique avec des images désactivées, j’utilise généralement mon éditeur de texte pour remplacer l’attribut src chaque image par une combinaison unique de caractères tels que «xsrcx», puis le rétablir après le test.

Une fois que l’email HTML a été modifié pour qu’il s’affiche bien dans vos comptes de messagerie de test, la prochaine étape est de passer par une liste de contrôle. Par exemple, vérifiez les éléments suivants:

  • L’adresse From s’affiche-t-elle correctement (sous la forme d’un nom, et non d’une adresse de courriel nu)?
  • La ligne d’objet est-elle correcte?
  • Les informations de contact sont-elles correctes et visuellement évidentes?
  • Est-ce que le haut de l’email affiche le texte, « Vous avez reçu cet email parce que … Les instructions de désabonnement sont au bas de cet email. »?
  • Votre e-mail contient-il des textes demandant aux lecteurs d’ajouter votre adresse From à leur carnet d’adresses?
  • Le haut de votre courriel contient-il un lien vers la version Web du message?

Beaucoup de services de livraison de courrier électronique incluent la capacité de voir comment votre email de HTML affiche dans une large gamme de logiciel de courrier électronique. Il vous aide à identifier quels réglages de code sont nécessaires avant l’envoi.

Étape 4 : Code pour Google Mail, Lotus Notes et Outlook 2007

Google Mail, Lotus Notes et Outlook 2007 présentent leurs propres défis de codage. Outlook 2007, croyez-le ou pas, a beaucoup moins de soutien pour CSS que les versions précédentes d’Outlook!

Le manque de support de Google Mail est un peu plus pardonnable – parce que l’application s’exécute dans un navigateur, il ne peut pas contrôler le contenu des courriels qu’il affiche. Par conséquent, les ingénieurs de Google ont dû prendre des mesures pour s’assurer que leur application affiche correctement indépendamment de la qualité du HTML ou CSS dans lequel les courriels sont écrits.

En conséquence, Google Mail agit comme un artefact du début des années 1990, lorsque les standards Web étaient primitifs. Il faut un peu de travail, mais il est possible de déchiffrer une page de Google Mail et de voir à quel point leur approche du rendu du courrier HTML est compliquée.

D’une part, Google Mail supprime les styles CSS contenus entre tous les tags de style, peu importe où ils apparaissent dans le courrier électronique. Et les polices affichées dans les tables HTML – la seule alternative à l’utilisation de styles – ont l’étrange habitude d’apparaître plus grand que prévu, peu importe comment le courriel HTML est structuré.

La bonne nouvelle, cependant, c’est que si vous codez pour tenir compte des bizarreries de ces trois applications de messagerie, votre code de messagerie 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 anciens logiciels de messagerie:

  • Définissez la couleur d’arrière-plan dans une cellule td avec l’attribut bgcolor , et non pas le style CSS.
  • Comme indiqué ci-dessus, utilisez l’ background background dans la cellule td pour les images d’arrière-plan au lieu d’utiliser CSS. Un effet secondaire de cette approche est que l’image d’arrière-plan peut être faite aussi grand que nécessaire – si le contenu utilisé dans votre modèle de courrier électronique est susceptible de varier en taille, en utilisant une image d’arrière-plan de haute taille de cette façon permet la hauteur de la Le courrier électronique diminue ou augmente, selon la taille de la copie, d’un email à l’autre. Rappelez-vous cependant que Outlook 2007 ignore complètement les images d’arrière-plan.
  • Si cela fonctionne mieux, utilisez la déclaration padding pour contrôler les marges dans une cellule td. Le style de margin ne fonctionne pas dans ces cellules, mais le padding ne.
  • Si vous avez besoin d’une bordure autour d’une cellule td , gardez à l’esprit que Google Mail affiche une bordure autour d’une cellule td quand elle est définie dans une div , mais pas quand elle est définie comme un style de bordure dans une balise td .
  • Si vous avez besoin d’un lien de couleur claire sur une couleur d’arrière-plan foncée, mettez la définition de police dans la cellule td (donc elle s’applique à p et a balises également) puis ajoutez une color: style à la balise a.
  • Si les polices p et a apparaissent être de tailles différentes, enveloppez la balise a dans une balise p .
  • Google Mail utilise de manière agressive la colonne de droite de l’interface utilisateur de Google Mail, qui comprime l’email HTML dans le panneau central. Assurez-vous que le style de rembourrage dans le contenu tds est défini sur 10 pixels tout autour, de sorte que le texte ne touche pas les bords gauche et droit.
  • Lorsque vous testez un courrier électronique HTML avec un compte Google Mail, il est probable que vous constaterez qu’un ou plusieurs styles de police sont manquants dans les balises td , h1 , h2 , p , a et autres. Vérifiez soigneusement toutes les polices pour vous assurer que Google Mail affiche correctement les polices.

Outre Google Mail, il existe un autre danger moins évident pour un programmeur lorsqu’il crée un courriel HTML: Lotus Notes. De nombreuses grandes entreprises continuent de prendre en charge et de mettre à niveau leurs installations Notes.

Malheureusement, il est impossible de dire quelles entreprises utilisent Notes. La meilleure approche est de suivre les lignes directrices décrites dans cet article – plus le code est primitif, plus il est probable qu’il fonctionnera bien, sinon parfaitement, avec Notes.

Cela dit, il est tout à fait possible Lotus Notes va introduire à vos fautes de courriel HTML qui sont presque incroyables. Par exemple, les anciennes versions de Notes peuvent convertir des images à leurs formats propriétaires, ou tout simplement ignorer le HTML de base impeccable dans un seul e-mail, mais afficher d’autres corrections HTML dans un autre courrier électronique.

Voici quelques conseils qui vous aideront à convaincre Notes d’afficher correctement votre courriel HTML:

  • Comme nous l’avons déjà mentionné, utilisez une table de conteneur qui contient toutes les tables de mise en forme internes (par exemple, pour l’en-tête, le contenu et le pied de page). Cela maintient le courrier électronique ensemble dans un morceau de HTML, de sorte que les morceaux de la mise en page sont moins susceptibles de se promener lorsque affiché dans Notes.
  • Créer une gouttière autour de la table conteneur en définissant la largeur à un pourcentage et / ou en utilisant un cellpadding d’au moins 5.
  • Comme je l’ai mentionné précédemment, évitez d’utiliser une déclaration de style dans la balise de head votre e-mail. C’est peut-être l’approche qui respecte les standards Web, mais les Notes (comme Google Mail) peuvent supprimer vos styles. Utilisez plutôt des styles en ligne dans les table , td , h1 , h2 , p , a et autres balises.
  • Utilisez des URL absolues pour les images stockées sur un serveur Web. Vous ne pouvez pas faire beaucoup de choses sur les conversions de photos, mais l’utilisation d’images distantes pourrait vous aider.
  • Les liens intra-e-mail, utilisant des ancres nommées, ne fonctionnent que rarement (ou jamais) dans Notes. Il est tout simplement préférable d’éviter les liens qui sautent le courrier électronique à un morceau de contenu spécifique.
  • Évitez les colspan s dans vos tableaux HTML. Notes – en particulier ses versions antérieures – ne peut traiter que des dispositions de table de base.
  • Assurez-vous que les largeurs de vos cellules td sont exactes. Contrairement aux navigateurs Web, qui définit automatiquement toutes les cellules sur la largeur la plus large, Notes calcule chaque cellule td fonction de sa largeur définie.
  • Le centrage d’une présentation de courrier électronique ne fonctionnera généralement pas dans Notes. Les plans de courrier électronique doivent généralement être alignés à gauche.

L’utilisation de ces techniques pour obtenir un rendu réussi dans Google Mail et Lotus Notes garantira que vos courriels s’affichent également très bien dans Outlook 2007, qui utilise un ancien moteur de rendu HTML. Microsoft a publié des détails sur ce que son logiciel de messagerie va et ne s’affichera pas correctement; Plus de détails peuvent être trouvés dans la section Ressources à la fin de cet article).

Campaign Monitor, un service de livraison de courrier électronique, dispose d’une liste exhaustive d’éléments CSS pour tous les clients de messagerie mobile, Web et de bureau.

Étape 5 : Codage des téléphones et des tablettes

Un nombre incroyable de personnes lisent des courriels HTML sur leurs smartphones et tablettes, ainsi que leur logiciel de messagerie de bureau. Adaptation de vos tableaux HTML pour bien afficher sur ces dispositifs se révèle être un peu facile. Il aide le support CSS est très bon pour les moteurs de rendu HTML utilisés sur les nouveaux téléphones et tablettes.

La solution consiste à utiliser la définition CSS @media pour cibler les cellules TD de la table HTML et augmenter la taille des polices nécessaires pour bien afficher. Par exemple, les polices sur un iPhone doivent être de 13 pixels pour être lisibles. La meilleure partie? Le Webmail et le logiciel de courrier électronique de bureau supprimeront ou ignoreront vos définitions @media alors que votre téléphone et votre tablette liront le code et afficheront tout parfaitement.

Voici un ensemble d’exemples de définitions @media pour afficher une table HTML de présentation d’une seule colonne pour les téléphones et les tablettes:

 @media only screen and (max-width: 480px) { /* mobile-specific CSS styles go here */ table[class=email], table[class=email-content] { clear: both; width: 320px !important; font-size: 13px !important; } }

Placez ce @media code directement sous votre body tag class="email" à votre définition de table et class="email-content" à vos cellules TD. Lorsque votre email HTML est visualisé avec un périphérique (ou un navigateur Web redimensionné horizontalement) de moins de 480 pixels, ces définitions seront activées.

Le secret pour coder un email HTML à deux colonnes pour s’adapter aux petits écrans de téléphone et de tablettes? Mettez chaque colonne dans sa propre table. Ensuite, pour chaque table HTML, utilisez CSS en ligne pour float: left et HTML align="left" pour flotter et aligner chaque table de colonne de contenu vers la gauche. Ensuite, ajoutez class="email" à votre définition de table et class="email-content" à vos cellules TD.

Avec le code @media ci-dessus, pour les écrans de moins de 480 pixels de large, les tables de colonnes, vos colonnes gauche et droite, la même largeur que la colonne de contenu gauche et les diapositives sous la colonne principale.

Cette approche peut être utilisée pour cibler n’importe quel changement de conception de mise en page pour fonctionner avec les téléphones et / ou les tablettes.

Cette solution vient d’un excellent guide de Campaign Monitor, Responsive Email Design , qui contient encore plus de détails et d’idées sur la façon de rendre le courrier HTML réponde aux différentes tailles d’écran.

Résumé

Beaucoup de gens qui reçoivent l’email préfèrent HTML au-dessus du texte pour un certain nombre de raisons. Pour les programmeurs, cependant, la tâche de créer un email HTML qui s’affiche régulièrement apparaît à la fois simple et horriblement complexe. Cet article a décrit beaucoup des questions et des stratégies pour créer le balisage qui fonctionnera à travers le logiciel d’email.

Quelle est la meilleure idée à prendre de cet article? S’il ya un choix à faire entre une conception simple d’email et une solution plus complexe, la simplicité est toujours le pari le plus sûr.

Auteur original : Tim Slavin / Traduction : Frédéric Monamy

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *