Share
Les e-mails HTML sont un excellent moyen de tenir les clients au courant des dernières mises à jour relatives à votre entreprise ou à votre produit, mais ils sont un peu difficiles. Le support CSS dans les clients de messagerie est incohérent. En conséquence, nous devons recourir à des techniques anciennes, telles que l’utilisation de tableaux et de CSS en ligne. Aujourd'hui, je vais vous guider dans le processus de création d'emails HTML simples..
En tant que développeur Web indépendant, le codage des courriers électroniques au format HTML est l’une des tâches les plus difficiles à laquelle je puisse faire face. Heureusement, lorsqu'un de mes premiers clients m'a demandé de concevoir et de coder son bulletin d'information par courrier électronique, il a été suffisamment patient pour me laisser passer par le processus long et frustrant de tout comprendre. Vous pourriez ne pas être aussi chanceux, alors préparez-vous avec ce tutoriel.
Vous pensez que IE est une douleur dans les fesses? Attendez de rencontrer Outlook 2007. En raison des grandes différences de rendu HTML / CSS entre les clients de messagerie, l'utilisation de techniques de codage modernes se traduira par un désastre catastrophique pour de nombreux clients de messagerie courants. Les clients de messagerie ne rendent tout simplement pas le rendu HTML de la même manière que les navigateurs - même pas fermer dans de nombreux cas. Des éléments tels que les flottants, les images d'arrière-plan et même les marges ne font plus partie de votre vocabulaire. Alors, quel est un codeur épris de norme à faire?
C'est vrai. Les tables. Cellpadding, Cellpacing, Colspan, toutes ces choses grossières que vous pensiez avoir laissées derrière vous. Les tableaux sont le seul moyen d'obtenir des mises en page cohérentes pour les courriels. Il est donc temps d'oublier (temporairement) vos habitudes en matière de CSS et d'adopter des tableaux désordonnés non sémantiques.
Lorsque vous concevez un e-mail HTML, gardez à l'esprit la simplicité. La conception que nous utilisons aujourd'hui a plusieurs dispositions de colonnes, principalement à des fins de démonstration, mais pensez à vous en tenir à deux colonnes lorsque vous codez votre propre bulletin d'information pour vous épargner beaucoup de maux de tête..
N'oubliez pas de ne pas trop vous intéresser à vos conceptions car Outlook ne prend pas en charge les images d'arrière-plan. En fait, selon les besoins de votre client, vous voudrez peut-être ignorer complètement le processus Photoshop pour vous forcer à garder le design pratique. Cela dit, nous allons utiliser Photoshop ici pour que vous puissiez avoir une meilleure idée de notre plan..
Vous pouvez utiliser des images d'arrière-plan à des fins décoratives, à condition que le courrier électronique soit lisible et ait un sens sans elles. Par exemple, nous allons ajouter un petit dégradé à notre en-tête, mais ce n'est pas grave si cela ne s'affiche pas.
Étant donné que les fenêtres de prévisualisation des clients de messagerie ne représentent souvent qu'une petite fraction de la largeur de l'écran, vous souhaitez généralement conserver votre conception sous environ 600 pixels. Personne n'aime les barres de défilement horizontales.
Rappelez-vous que nous allons utiliser des propriétés inflexibles telles que cellpadding et cellpacing pour espacer nos éléments. Il est prudent d'essayer de conserver l'espacement entre les éléments..
Cette conception est similaire à celle que j'ai utilisée pour une newsletter client l'été dernier, mais simplifiée. Ce n'est pas beau, mais ce n'est pas le problème ici. C'est simple et cohérent, et il y a un certain nombre d'options de disposition pour que vous puissiez voir en quoi elles diffèrent.
D'après mes expériences, le code de courrier électronique HTML devient très compliqué, très rapidement. C'est important d'avoir un plan d'attaque. Alors voici le plan (nous y reviendrons, ne vous inquiétez pas si vous ne suivez pas).
Premier, nous commençons avec une grande table 100% largeur avec un fond gris, ceci est notre table "wrapper".
Prochain up, Notez qu'il y a trois autres tables dans la table d'encapsulation: une en haut pour le lien "Voir dans le navigateur", une au milieu pour le contenu principal et une en bas pour le lien "désabonnement"..
finalement, Dans la table principale, chaque section horizontale du contenu se trouvera dans une ligne et une cellule. Ces cellules de tableau contiendront à leur tour une autre table pour héberger chaque section de contenu:
Au lieu d'utiliser le marge et rembourrage Propriétés CSS, nous allons utiliser le cellpadding et espacement cellulaire Attributs HTML. Pensez que cellpadding est à peu près identique à CSS padding - espace à l'intérieur d'un élément, autour du contenu. Cellspacing est l'espace entre les cellules de données sur une table.
Notre #principale la table va avoir 15px de cellulespacing, de sorte que nous aurons 15px des espaces autour de la section principale du contenu, et 15px entre chaque groupe horizontal. Cellpadding et cellpacing s'appliquent uniquement à la table parent, pas aux enfants. Si nous ne voulons pas de cellpadding ou de cellpacing, nous devons spécifier cela pour chaque table.
Nous pouvons maintenant commencer à coder notre bulletin d’information, section par section. Contrairement aux meilleures pratiques, nous allons créer un style et une structure. Nous allons commencer par la mise en page, y compris tout l'espacement et le remplissage, ainsi que les couleurs d'arrière-plan. Ensuite, nous allons faire la typographie et d'autres éléments CSS..
La configuration d’un email est très simple: seul le html, tête et corps les tags sont impliqués. Ajoutons dans la table wrapper et les trois tables principales dont nous avons parlé précédemment.
En ce qui concerne les doctypes, il existe quelques approches différentes, comme détaillé dans cet article. Dans notre cas, j’ai décidé de ne pas en utiliser un, car nous n’avions pas besoin de tout ce que nous aurions en déclarant un doctype. Dans la plupart des cas, il sera éventuellement retiré.
Nettuts Email Newsletter
| |
D'une manière générale, il est préférable d'attribuer des largeurs à des cellules individuelles plutôt qu'à la table elle-même..
Notez que les deux tables de messages ont des valeurs de cellpadding de 20px. Cela permettra d'espacer ces paragraphes du contenu principal. La table principale a 15px de cellulespacing. C'est pour établir un rythme vertical cohérent. Puisque chaque section est dans sa propre cellule de table, il y aura 15px entre tous.
Notez également que les tables sont toutes réglées sur align = "center", et nous avons explicitement défini leurs largeurs. Dans les e-mails HTML, il est généralement préférable de ne pas définir de largeur pour le retour à la ligne. Vous feriez mieux de définir des largeurs pour chaque cellule, mais dans ce cas, nous enfreindrons cette règle car nous devons nous préoccuper de cellpacing / cellpadding..
Ce sont super simples: juste des paragraphes dans les cellules alignées au centre.
| Vous avez du mal à voir cet email Voir dans le navigateur |
Ê
Le message du bas est exactement le même.
L'en-tête est assez simple, ce n'est qu'une colonne, avec trois lignes. Puisque nous avons ce joli fond bleu, nous allons avoir besoin de rembourrer chaque cellule pour éloigner le texte des bords..
Services Communitech Venture
Nouvelles et Evènements
Juillet 2010
N'oubliez pas de définir la largeur de chaque cellule, qui dans ce cas est 570px (600px-15px de cellulespacing de chaque côté). Nous avons également défini le aligner propriété pour la date à droite. Pour le moment, nous n’ajoutons pas l’image d’arrière-plan, nous le ferons plus tard. En attendant, utilisez un bleu plus clair.
Notez que nous utilisons bgcolor au lieu de style = "background:". En effet, les valeurs html sont mieux prises en charge dans les clients de messagerie que les propriétés CSS..
C’est ce que nous avons eu jusqu’à présent, cela semble assez mauvais, mais la mise en page est exactement ce que nous voulions.
Notre première section de contenu est une image alignée à gauche avec deux titres à côté. Au lieu d'utiliser les flottants CSS comme nous le ferions normalement, nous allons créer un tableau avec trois cellules:
Pour l'image avec la bordure, nous allons imbriquer un autre tableau dans la cellule et définir le cellpadding sur 5px et lui donner une couleur de fond gris. Cellpadding ajoute à la largeur de l'élément, nous devons donc réduire la largeur définie de la cellule de 10px.
Toute nouvelle conception de site
C'est 150% mieux et 40% plus efficace!
Accentsconagua
15px de cellspacing, on peut utiliser une cellule vide pour ajouter 15px d'espacement entre les éléments. Dans mes tests, cela fonctionne très bien à vide, mais vous pouvez toujours ajouter un espace insécable pour vous en assurer.v-align propriété à Haut. Ceci est important car il aligne chaque cellule avec le haut de la ligne. La valeur par défaut est middle, ce qui conduit à des résultats étranges.Ceci est une section très simple: juste un tableau d'une colonne avec un paragraphe à l'intérieur. N'oubliez pas de définir la largeur de la cellule et de définir l'alignement du tableau.
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Pour ajouter de l’espace vertical (plus que le 15px de l'espacement des cellules que nous avons), nous devons utiliser une image d'espacement. Tout comme les années 90! Nous pourrions utiliser un spacer gif et le télécharger, mais pour le moment, il est plus rapide d’utiliser une autre image fictive. Je vais le laisser gris pour que vous puissiez le voir, mais plus tard, nous pourrons le définir en blanc sur blanc.
Ce qui nous donne quelque chose comme ça:
Pour une section de 3 colonnes, nous utilisons cinq cellules de tableau, une pour chaque colonne et une entre les colonnes pour les séparer..
Assez simple, utilisez la même méthode pour la bordure que dans la section à 2 colonnes. N'oublie pas le v-align!
Les trois colonnes de texte sont exactement le même processus.
Nouveaux produits passionnants!
Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
Un bulletin chaque mois
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Forum nouveau et amélioré
Lorem ipsum dolor sit amet, consectetur elit adipisicing, séduit par le temps incididant temporairement et labouré et dolore magna aliqua.
Ajoutez un autre séparateur en bas, et nous y sommes presque:
Tout le reste ne fait que répéter ce que nous avons déjà fait: une section à 2 colonnes et une section à 1 colonne avec des séparations entre elles..
C'est une rubrique
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Il enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conséquat.
APPEL À L'ACTION
Et la mise en page principale est maintenant terminée:
Contrairement aux pages Web classiques, vous ne pouvez pas simplement placer toutes vos images dans un dossier, puis utiliser des chemins relatifs pour les lier.. Tous les liens doivent être absolus! Lorsque je développe un courrier électronique, je héberge généralement des images sur un sous-domaine ou sur Amazon S3. Lorsque je suis prêt à envoyer le courrier électronique à un client, je déplace toutes les images vers un sous-domaine de leur site Web..
Tous les liens d'image doivent être absolus!
Nous ne pouvons pas utiliser de feuille de style externe ni intégrer le code CSS dans l'en-tête de l'e-mail, car certains clients supprimeront l'intégralité de la balise head ou ignoreront les balises de style. Nous allons devoir utiliser des styles en ligne, ce qui est très pénible. Heureusement, il existe des services utiles qui prendront CSS intégré et le rendront en ligne. J'utilise un site Web appelé Premailer, où vous pouvez coller directement le code et générer la même chose avec CSS en ligne.
Nous allons faire du CSS intégré pour ce tutoriel, puis nous allons le rendre en ligne avec premailer.
Premailer prend CSS intégré et le rend inline!
Nous n'allons pas effectuer une réinitialisation matérielle avec le sélecteur * comme vous le feriez pour une page Web. L'utilisation des valeurs par défaut donnera des résultats plus cohérents. Les seuls éléments dont nous avons besoin de réinitialiser les marges / marges sont ceux qui seront entourés d'espace (à partir de cellpadding / cellspacing), comme nos en-têtes ou nos paragraphes..
Vous remarquerez également une marge autour de la table des enveloppes, qui est simplement le style par défaut sur l'élément body.
La typographie d’un email n’a rien de spécial, c’est à peu près la même chose, c’est la même chose pour une page Web. N'utilisez pas de déclarations abrégées (comme Police de caractère: ) parce que vous n'obtiendrez pas de résultats cohérents.
# top-message p, # bottom-message p color: # 3f4042; taille de police: 12px; font-family: Arial, Helvetica, sans serif; #header h1 color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans serif; taille de police: 24px; # en-tête h2 color: #ffffff; font-family: Arial, Helvetica, sans serif; taille de police: 24px; #header p color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans serif; taille de police: 12px; h3 font-size: 28px; couleur: # 444444; font-family: Arial, Helvetica, sans serif; h4 font-size: 22px; couleur: # 4A72AF; font-family: Arial, Helvetica, sans serif; h5 font-size: 18px; couleur: # 444444; font-family: Arial, Helvetica, sans serif; p taille de la police: 12px; couleur: # 444444; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans serif; hauteur de ligne: 1,5; h1, h2, h3, h4, h5, h6 marge: 0 0 0.8em 0;
Et regardez: c'est nettement mieux maintenant!
Les images d'arrière-plan fonctionnent à peu près de la même manière que dans une page Web, sauf que parfois elles ne fonctionnent pas! Assurez-vous d’avoir une couleur d’arrière-plan de secours attribuée à la cellule en tant que bgcolor, pour les clients qui ne prennent pas en charge les arrière-plans CSS.
