Après mes 2 premiers articles pour créer et générer un tableau CSS design, voici un article sur :
Comment insérer un tableau design en CSS dans un mail
En effet, vous devez savoir que faire un email design est assez complexe : le rendu peut être différent en fonction des clients de messagerie.
En bref, si vous préparez un beau email qui sera parfaitement compatible avec Outlook, et que vous l’envoyez à un client qui le lit sur iPhone ou sur Gmail, alors, le rendu peut être complètement différent (un tableau énorme, des liens qui se baladent sur toute la page…)
Personnellement, ma plus grande difficulté est pour réaliser un beau tableau qui sera compatible pour tous les clients de messagerie.
Services en lignes pour supprimer les « class » et « id »
Après des dizaines de tests sur plusieurs clients de messagerie (notamment outlook et gmail), j’ai remarqué que le code CSS inclus dans les balises <style></style> est mal (ou pas) interprété. Ainsi, si le tableau ou une cellule appelle une class, le code CSS ne sera pas interprété à 100%. Vu que je me voyais mal transformer tout mon code et supprimer les class manuellement, j’ai listé pour vous 8 services en ligne (service appelé CSS inliner) qui le feront gratuitement à votre place :
- Inliner : http://inliner.cm/
- Mailchimp inline css : http://beaker.mailchimp.com/inline-css
- Dialect.ca : http://premailer.dialect.ca/
- Inlinestyler : http://inlinestyler.torchboxapps.com/
- Emogrifier : http://www.pelagodesign.com/sidecar/emogrifier/
- Mailermailer : http://www.mailermailer.com/labs/tools/magic-css-inliner-tool.rwp
- Tikku : http://tikku.com/css-inline-transformer-simplified
- Sign-up.to (mally) : http://labs.sign-up.to/mally/
- Si vous savez coder, voici des scripts que vous pouvez utiliser : CssToInlineStyles (php), PreMailer.Net (.net), Styliner (javascript), et le script utilisé par le service Tikku (javascript)
Voici donc ma technique pour faire un tableau CSS compatible à intégrer dans un email :
- Je crée un tableau à l’aide d’un de ces 2 générateurs à tableaux CSS design
- Je copie le code et le colle dans l’un de ces services en lignes gratuits pour supprimer les « class » et « id »
- Je colle le résultat dans mon email, et le tour est joué…simple non ?
Pour finir, pour les codeurs, voici un tableau qui liste la compatibilité de certains code CSS pour chaque client mobile, web et messagerie de bureau populaire (Outlook 2007/2013, iPhone, Android, Outlook.com,Yahoo mail, Google mail,…)
http://www.campaignmonitor.com/css/
Enfin, voici un guide très bien fait et détaillé pour réaliser un email sur le site email-a-table.fr
