Style html dans le courriel
j'envoie des e-mails avec une version HTML pour des clients compétents (n'est-ce pas pratiquement tout de nos jours?). Mon souci est de savoir comment le style. Est-ce que j'utilise des css inline? Puis-je inclure la feuille de style dans le html? Le html commence-t-il par <html> ou <body> ? Y a-t-il une norme que je puisse lire à ce sujet?
Jusqu'où puis-je aller dans le style? J'ai bord-rayon, gradients de fond, etc qui ont des mécanismes de repli naturel pour les navigateurs qui ne le prennent pas en charge (IE). Pour IE, j'utilise de la TARTE.htc, je suppose que ça va trop loin...
6 réponses
en ce qui concerne le client de messagerie le HTML dans un email commence par <body> . Tout le style doit être fait en ligne, malheureusement les clients email ne se comportent pas de la même façon que les navigateurs. Il ya quelques bonnes informations disponibles ici:
en ce qui concerne le type de style que vous pouvez et ne pouvez pas utiliser, jetez un oeil à cet excellent article qui détaille ce que chacun des 10 Clients email les plus populaires soutiennent:
http://www.campaignmonitor.com/css /
en ce qui concerne l'utilisation de feuilles de style, vous pouvez le faire si vous le souhaitez, mais vous devrez créer un lien vers une feuille de style hébergée ailleurs, autant que je sache. Cela pourrait présenter un problème si quelqu'un veut lire leurs e-mails Offline.
enfin, j'essaie de toujours envelopper mes e-mails HTML dans la balise <html> , car il semble faire apparaître l'e-mail plus" valide " à de nombreux filtres de messagerie.
, Pour citer quelque chose que j'ai lu dans un magazine récemment code comme en 1996'.
essayer de coder avec élégance et efficacité ne semble pas rapporter des résultats cohérents lorsque vous testez votre newsletter avec plusieurs clients mail. Lorsque vous testez assurez-vous d'obtenir vos testeurs faire un plaisir de le message que parfois fabuleux codage pause dans l'avenir.
bien que je déteste utiliser des tables pour l'affichage, ils rendront plus uniformément à travers envoyer des clients que des DIVS flottants ou à plusieurs colonnes (en particulier si le bulletin, etc est transmis sur du destinataire original à quelqu'un d'autre).
voir aussi: http://www.netmag.co.uk/zine/discover-culture/create-the-perfect-newsletter
Heeeeelllooooo 1996!!
j'envoie des e-mails avec un HTML version pour des clients compétents (isn't que pratiquement tous aujourd'hui?).
par expérience, "capable "ne signifie pas"activé". Je ne pense pas qu'il y ait quelque chose de mal à avoir un courriel HTML très attrayant, mais assurez-vous que vous avez une contingence textuelle si votre auditoire le demande.
j'ai travaillé avec plusieurs entreprises qui ont été techniquement progressive jusqu'à ce qu'il je suis venu à l'e-mail riche, qui d'une certaine façon a réussi à rester dans les temps préhistoriques (j'aime le commentaire "code like it's 1996" dans ce fil). Vous êtes potentiellement en concurrence avec d'anciennes installations Lotus, Outlook Web Access 2003 tournant en mode "down level", ou des serveurs mandataires qui vont munge le contenu HTML avant la réception.
plus difficile à gérer est le fait que les clients de messagerie modernes comme Gmail et Outlook 2007/2010 sont "intelligents" et ne téléchargez pas d'images à moins que explicitement permettre.
pour répondre à votre question initiale, ne vous fiez pas à quoi que ce soit, même à la pointe (comme CSS 3) ou complexe (mises en page imbriquées, marges négatives, etc.). Si vous décidez de lancer les dés sur les images, vous pouvez mettre plus dans votre image et moins dans votre HTML, vous permettant de devenir plus créatif avec vos dessins.
les meilleurs e-mails que je reçois sont ceux qui ont un texte clair et simple qui est si intéressant que je permets à Outlook de télécharger le images, et je pardonne toutes les erreurs de formatage mineures. Contenu, comme toujours, est le roi.
je pourrais probablement parler des choses à faire et à ne pas faire de email codage pendant un certain temps, mais si vous considérez juste quelques principes de base, vous en saurez plus que la plupart..
gmail (et MS Outlook) sont les deux Clients email les plus difficiles à coder, mais il est possible de développer un responsive email avec un niveau élevé de conception qui s'affichera bien parmi les clients. Sur Gmail, il sera juste affichez votre disposition de bureau sans la réactivité.
vous devez utiliser Très peu ou pas CSS du tout lorsque vous commencez à coder un e-mail. Pensez à une approche "de bureau d'abord" et codez-le aussi simple que possible comme vous aimeriez qu'il apparaisse lorsque vu à 600 pixels de large. Je ne me soucie pas si les gens disent que cela fonctionne dans le courrier électronique ou non, s'il y a une façon plus dépréciée d'accomplir la même chose, la méthode plus dépréciée sera toujours plus compatible avec les clients de courrier électronique.
d'Oublier "les 1519160920" css et html que vous utilisez habituellement. Vous devriez essayer de limiter vos tags à xhtml1.0 étiquettes valides seulement. Vous pouvez en fait faire beaucoup de mise en page avec la palette limitée de tags, Vous avez juste à penser à des façons plus rondes de le faire.
pour un exemple très simple:
plutôt que d'utiliser un rembourrage ou une marge ou une image transparente espaceurs pour obtenir l'espacement vertical à l'intérieur d'un bouton CTA vous pouvez utiliser une table emboîtée une table profonde, XHTML étiquettes d'attribut valides et zéro CSS pour obtenir une étiquette centrée verticalement à l'intérieur d'un bouton de couleur capitonnée avec du texte coloré.
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#00cc66" width="200">
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
</tr>
<tr>
<td align="center"><font color="#ffffff"><b>Click Here</b></font></td>
</tr>
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
</tr>
</table>
Étape 1
coder votre e-mail sans CSS et le faire paraître bien.
a ce point votre alphabet ne devrait être composé de rien d'autre que 151960920"
html,body, table , tbody ,tr,td,span,a,b,nobr,src,alt,target, cellpadding , cellspacing ,la frontière,à l'alignement,bgcolor,la couleur,la hauteur et la alphanumérique contenu à l'intérieur de ces balises.
Vous pouvez être tenté d'utiliser valign,le style,le fond,la classe...... NON.. pas encore
si vous voulez la plus haute compatibilité croisée possible, accepter que certains clients vont le voir de cette façon, donc il vous incombe de rendre cela aussi propre et présentable que possible.
l'Étape 2
une fois que vous avez cette structure de base qui semble bon et présentable, vous pouvez envisager de le faire paraître mieux. Vous pouvez commencer à ajouter quelques étiquettes CSS et HTML4 pour améliorer le style pour les clients qui le verront. Mais ne va pas à la sauvage, essayer de maintenir le minimaliste approche.
une Fois que vous avez votre CSS en place, quelle que soit la CSS que vous souhaitez utiliser (caniuse.com est une excellente ressource si vous voulez vous faire une idée de ce à essayer de l'utiliser). Une fois que tout est en place, supprimez tout ça brusquement et sans préjugé, supprimez simplement ces nouvelles étiquettes, rien d'autre. Maintenant, regardez l'e-mail. Si la suppression de ces étiquettes n'a pas cassé votre disposition, puis votre bon à aller. Vous pouvez les annuler en toute sécurité et bien dormir sachant que vous avez un e-mail cross compatible. Si quoi que ce soit j'ai cassé votre mise en page, votre meilleur de ne pas l'avoir là parce que beaucoup de clients vont faire exactement cela et l'effacer et vous allez avoir une très mauvaise journée si vous le laissez là.
l'Étape 3
une fois que cela est fait, vous pouvez ajouter un couple [tag:media queries]. J'ai des requêtes Médias pour 600 et 400 et je les double pour obtenir une meilleure compatibilité. En utilisant CSS dans la tête, vous pouvez ensuite définir l'écrasement de l'un de vos layout dans le HTML avec important balises. Ainsi, les clients qui le lisent ignoreront le style inline que vous avez utilisé et adhéreront au nouveau style que vous ajoutez. C'est idéal pour ajuster la largeur des éléments, cacher ou Afficher des éléments, etc..
.mobile {display:none;}
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
*[class="desktop"]{display:none !important;}
*[class="mobile"]{display:block !important;width:auto !important;max-height:none !important;overflow:visible !important;float:none !important;}
avec ces 4 lignes vous pouvez faire presque toute votre structuration responsive.
* * note: l'utilisation de la classe bureau nécessite un effort supplémentaire
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr style="mso-display:none;">
<td align="center" class="mobile" style="width:0;max-height:0;overflow:hidden;float:left;mso-display:none;">
<a href="" target="_blank">
<img class="banner" alt="o" src="logo-wide.gif" border="0" width="0">
</a>
</td>
</tr>
</table>
C'est probablement le plus CSS important dans mon code. La table d'exemple ne s'affichera pas sur les appareils de bureau (y compris Gmail), mais s'affichera sur les appareils mobiles. Le seul client avec lequel cela ne fonctionne pas correctement est Windows Mobile 7.
j'utilise ces deux classes pour supprimer des éléments de la disposition mobile pour obtenir le design responsive. La classe desktop est évitée et n'est utilisée que dans de rares circonstances car cela signifie que votre e-mail perdra sa compatibilité avec Windows Mobile 7.
Étape 4
test test test test test. C'est ridiculement fou à quel point un e-mail peut se casser facilement. Ne faites pas confiance à Litmus ou à toute suite de tests parce qu'ils ne sont exacts que dans une certaine mesure. Vous devriez avoir un appareil de test pour chaque appareil qui vous intéresse. Si vous n'avez pas passé beaucoup plus de temps à tester l'email que le temps qu'il vous a fallu pour coder, alors vous n'avez pas testé suffisamment..
ne faites pas confiance à ce que les gens disent codage email sauf si vous l'avez essayé, testé, et prouvé vous-même. Parce que beaucoup plus de gens pensent qu'ils savent de quoi ils parlent que ceux qui le font, surtout quand il s'agit de lire des blogs et des articles sur le codage de courrier électronique.
il est intéressant de noter.. Lorsque j'ai travaillé pour une start-up, j'ai dû coder plusieurs e-mails par semaine et nous avons choisi de le faire de la manière la plus difficile possible: compatibilité client insensée et en utilisant le moins d'images possible. Pas de texte dans les images, j'ai plutôt dû coller autour du texte, et faire des choses comme les images de fond derrière le texte fonctionnent bien parmi les clients.. Les fonds derrière le texte dans un e-mail sont incroyablement difficiles à rendre le travail bien pour certains clients de messagerie.. Possible, mais frustrant que de la merde. Lorsque j'ai quitté ce travail et que j'ai commencé à travailler pour de grandes marques, pendant une courte période, j'ai dû coder quelques e-mails supplémentaires (je ne coder plus les e-mails).. mais pour ces grandes marques.. ils ne voulaient pas que je perde des heures à coder des emails. Ils ont préféré juste en faire une grande image, texte et tous les.. Facile peezy. Sur cette note, quand j'ai travaillé au démarrage.. nous avons fait un test une fois, en comparant le taux de clic sur les e-mails codés hautement Polis vs e-mails textuels vs tous les e-mails d'image.. Les différences étaient tout au plus négligeables.
est-ce que j'utilise des css inline?
Oui,
- dans Un et la POLICE les éléments de couleur, taille de police // face/font-family sont égaux pour l'email parser
- dans les éléments IMG pour display:block; //gmail utilise display:inline; si vous avez besoin de le remplacer
- dans la première TABLE pour arrière-plan-image; arrière-plan-répétition; //pour afficher bg-images dans Outlook 2007/10.
puis-je inclure la feuille de style dans le html?
Oui, la TÊTE et le CORPS de la balise sont toutes deux nécessaires, parce que la plupart des web mailer analyser seulement le contenu du CORPS
est-ce que le html commence par <html> ou <body> ?
Html commence par la déclaration DOCTYPE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
c'est mon préféré, parce que vous pouvez faire usage de la police élément. (utile pour le style stable link colors dans l'élément A)