Email HTML: tableaux ou divs?
Est-ce que le code HTML/CSS pour un bulletin électronique html doit être au format tableau, ou puis-je utiliser des DIV avec la même assurance qu'il s'affichera bien sur le client de messagerie? J'ai téléchargé un certain nombre de modèles pour voir comment ils se font, sur lesquels baser les miens, et ils semblent tous utiliser des tableaux.
Toute idée très appréciée, merci!
En ce qui concerne le courrier électronique HTML, notez que toutes les meilleures pratiques de développement Web disparaissent. Pour rendre le look cohérent, vous devez:
- Utiliser des dispositions basées sur des tableaux
- Utiliser le style d'attribut old-school pour les tableaux
- Utilisez UNIQUEMENT des styles en ligne, et seulement très simples.
<style>- les balises sont ignorées par de nombreux clients. - Ignorer l'utilisation de
<html>,<head>et<body>- De toute façon, ils seront rejetés par la plupart des clients. - Si vous incorporez des images, essayez de vous assurer que l'e-mail est correct même si les images ne sont pas chargées. De nombreux clients exigent que l'utilisateur marque l'e-mail comme "sûr" avant d'afficher des images.
Vous pouvez lire des versions plus détaillées des points ci-dessus ici:
Comme tout le monde ici l'a dit, utilisez des tableaux et insérez tous vos CSS ... mais il existe un écosystème d'applications de messagerie pour vous aider à créer des e-mails.
J'ai utilisé Mailrox ( https://www.mailrox.com/ ) pour la plupart de mes versions de courrier électronique récemment et il semble être assez bon et produire une sortie parfaite E-mails HTML, si vous en créez un à partir d'un design, même s'il est en version bêta.
Vous pouvez également essayer des modèles prédéfinis de Mailchimp ou Campaign Monitor , mais il semble que vous ayez un design pour votre e-mail, alors peut-être que Mailrox serait le meilleur.
Si vous voulez vraiment vous lancer dans la création d'e-mails, je dirais que vous devez oublier la plupart de ce que vous savez sur la conception Web moderne et les dispositions de table principale et utiliser les liens de PatrikAkerstrand.
Litmus est également idéal pour tester vos conceptions codées à la main. Ils vous donnent des aperçus de votre e-mail dans (à peu près) tous les clients de messagerie.
J'espère que cela t'aides.
De nombreux clients de messagerie ne sont pas en mesure de rendre le CSS. J'utiliserais des tableaux pour formater votre courrier et utiliser des images pour autre chose.
Comme cela a déjà été mentionné - vos e-mails HTML doivent être créés à l'aide de tableaux (et non de divs). Vous pouvez également ajouter du CSS - les deux utilisant une feuille de style externe, mais cela ne sera pas récupéré par tous les clients de messagerie, il est donc plus fiable d'ajouter votre CSS en ligne. Même en faisant cela, certains attributs peuvent être ignorés par certains clients de messagerie, donc votre meilleur pari est toujours d'utiliser des attributs HTML lorsqu'ils sont disponibles. "Vous devez le faire car certains clients, tels que Gmail, ignoreront ou supprimeront le contenu de votre balise, ou les ignoreront." Source: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
Cela mis à part, j'ai également appris par essais et erreurs que même les images doivent être recadrées à la taille exacte que vous souhaitez qu'elles s'affichent dans votre e-mail. Outlook si terrible à ramasser des attributs HTML pour la largeur/hauteur des images, et j'ai vu quelques courriels étirés méchants, uniquement parce que ces attributs ont été ignorés et les images ont été affichées en taille réelle.