Pratiques exemplaires pour la présentation des courriels HTML [fermé]

je suis en train de concevoir un modèle HTML pour un bulletin électronique. J'ai appris que de nombreux clients de messagerie ignorent les feuilles de style liées, et beaucoup d'autres (y compris Gmail) ignorent complètement les déclarations de blocs CSS. Les attributs de style inline sont-ils mon seul choix? Quelles sont les meilleures pratiques pour concevoir des courriels HTML?

179
demandé sur Joe Mornin 2011-01-28 17:22:58
la source

7 ответов

Moniteur De Campagne ont un excellent matrice de soutien détaillant ce qui est pris en charge et ce qui ne l'est pas parmi divers clients de courrier.

vous pouvez utiliser un service comme Litmus pour voir comment un e-mail apparaît à travers plusieurs clients et s'ils se font attraper par des filtres, etc.

119
répondu Jim 2011-01-28 17:29:23
la source

j'ai déjà participé à la bataille des e-mails HTML. Voici quelques-uns de mes conseils sur le style pour une compatibilité maximale entre les clients de messagerie.

  • styles en ligne vous êtes meilleur ami. Ne liez absolument pas les feuilles de style et n'utilisez pas une étiquette <style> (GMail, par exemple, Raye cette étiquette et tout son contenu).

  • Contre votre meilleur jugement, utilisation et abus de table . <div> s ne suffit pas (surtout dans Outlook).

  • N'utilisez pas les images d'arrière-plan , elles sont confuses et vous agaceront.

  • rappelez-vous que certains clients de messagerie transformeront automatiquement les hyperliens dactylographiés en liens (si vous ne les ancrez pas vous-même <a> ). Cela peut parfois atteindre des effets négatifs (dire que si vous mettez un style sur chacun des hyperliens pour apparaître une couleur différente).

  • faites attention en hyperliant un lien réel avec quelque chose de différent. Par exemple, ne tapez pas http://www.google.com puis le lien https://gmail.com/ . Certains clients indiqueront que le message est du pourriel ou de la camelote.

  • Enregistrez vos images en tant que peu de couleurs que possible pour économiser sur la taille.

  • si possible, intégrez vos images dans votre courriel. Le courriel n'aura pas à communiquer avec un serveur web externe pour les télécharger et ils n'apparaîtront pas comme pièces jointes au courriel.

Et enfin, "1519100920 de" tester, tester, tester ! Chaque client de courriel fait les choses différemment qu'un navigateur ferait.

229
répondu Michael Irigoyen 2011-02-04 19:53:15
la source

les chimpanzés du courrier ont un bel article sur ce qu'il ne faut pas faire. ( Je sais, ça sonne dans le mauvais sens pour ce que vous voulez)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

en général, toutes les choses que vous avez appris qui sont de mauvaises pratiques pour le design web semblent être la seule option pour le courriel html.

Les principes de base sont:

  • ont des chemins absolus pour les images (par exemple. https://stackoverflow.com/random-image.png )
  • utiliser des tables pour la mise en page (jamais pensé Je recommande!)
  • utiliser des styles inline (et CSS old school) aussi, tout au plus 2.1, box-shadow ne fonctionne pas par exemple ;) )

il suffit de tester dans autant de clients e-mail que vous pouvez obtenir vos mains sur, ou utiliser Litmus comme quelqu'un d'autre suggéré ci-dessus! (crédit à Jim)

EDIT:

chimpanzé Mail ont fait un excellent travail en mettant cet outil à la disposition de la communauté.

il applique vos classes CSS à vos éléments html inline pour vous!

33
répondu SamMullins 2017-05-23 14:47:06
la source

en plus des réponses affichées ici, assurez-vous de lire cet article:

http://24ways.org/2009/rock-solid-html-emails

9
répondu Stephan Muller 2011-01-28 17:50:25
la source

la ressource à laquelle je reviens toujours à propos des courriels HTML est Campaignmonitor's CSS guide .

comme leur entreprise est axée uniquement sur la livraison par courriel, ils connaissent leurs affaires aussi bien que quiconque va à

6
répondu Gareth 2011-01-28 17:28:21
la source

J'en doute. Je ferais une page HTML avec une feuille de style, puis j'utiliserais jQuery pour appliquer la feuille de style à l'attr de style de chaque élément. Quelque chose comme ceci:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

copiez ensuite le DOM et utilisez-le dans l'email.

5
répondu Nathan MacInnes 2011-01-28 17:39:27
la source

je trouve que la cartographie d'image fonctionne assez bien. Si vous avez des en-têtes ou des pieds de page qui sont des images assurez-vous que vous appliquez un bgcolor="remplir le blanc" parce que outlook dans la plupart des cas ne chargera pas l'image et vous serez laissés avec un en-tête transparent. Si vous avez au moins désigner une couleur qui fonctionne avec la sensation de l'e-mail, il sera moins d'un choc pour l'utilisateur. Ne jamais essayer et utiliser n'importe quel style de feuilles. Ou CSS du tout! Simplement l'éviter.

selon si vous copiez du contenu à partir d'un mot ou d'un document google partagé assurez-vous de (commande+F) trouver tous les (') et (") et de les remplacer dans votre logiciel d'édition (en particulier dreemweaver) parce qu'ils apparaîtront comme du code et ce n'est tout simplement pas bon.

ALT est votre meilleur ami. utilisez la balise ALT pour ajouter du texte à toutes vos images. Parce qu'il y a des chances qu'ils ne se chargent pas correctement. Et ce texte ALT Est ce qui pousse les gens à cliquer sur le bouton (Voir les images). Définissez également vos images Largeur, Hauteur et faites le 0 de sorte que vous n'ayez pas de lignes bizarres autour de votre image.

envisagez d'éditer toutes les images dans Photoshop avec une barre de 15px de chaque côté (rendre le fond transparent et enregistrer comme un PNG 24) de l'image. Parfois, les clients de messagerie ne lisent pas les styles de rembourrage que vous appliquez sur les images afin qu'il évite tout formatage bizarre!

J'ai aussi trouvé la ligne sous les liens particulièrement gênant donc si vous appliquez < style= " texte-décoration: none; color:#quelle que soit la couleur que vous voulez ici!">il va supprimer la ligne et vous donner le regard désiré.

il y a beaucoup de choses qui peuvent vraiment nuire à l'aspect général et à la sensation.

1
répondu Stephen 2013-05-23 19:16:46
la source

Autres questions sur html css email