Faire une newsletter responsive se fait avec des media-queries, de la m\u00eame fa\u00e7on qu’une page web sauf que le code est inline. Vous mettez donc les media-queries<\/strong> dans la balise Autre astuce: il faut avoir recours aux <\/p>\n La premi\u00e8re chose \u00e0 faire est de red\u00e9finir la largeur des tableaux pour les adapter \u00e0 la taille d’un \u00e9cran de t\u00e9l\u00e9phone mobile. Dans l’exemple pr\u00e9sent\u00e9, on passe d’un tableau de 600px de large sur pc \u00e0 360px sur mobile.<\/p>\n Vous constatez que j’ai utiliser le s\u00e9lecteur d’attributs<\/strong> ([class=nom]<\/em>) plut\u00f4t que le s\u00e9lecteur de classe (.nom<\/em>). Ce dernier pose en effet quelques probl\u00e8mes avec Yahoo! qui applique la media-query m\u00eame si la condition de largeur max n’est pas respect\u00e9e !<\/p>\n <\/p>\n Si vous avez du contenu pr\u00e9sent\u00e9 en plusieurs colonnes, modifiez le comportement des <td> du tableau pour l’afficher en une seule colonne (plus commode sur mobile).<\/p>\n <\/p>\n Finalement, n’h\u00e9sitez pas \u00e0 cacher certaines parties du texte afin de r\u00e9duire la taille du message et d’aller droit au but.<\/p>\n <\/p>\n Pour faire une newsletter responsive basique, il y a deux choses \u00e0 mettre en place:<\/p>\n N’oubliez pas d’utiliser les <\/p>\n Les conseils donn\u00e9s ci-dessus ne sont qu’un d\u00e9part pour une newsletter responsive. Apr\u00e8s quelques gal\u00e8res, vous avez finalement une newsletter pr\u00e9sentable (\u00e0 peu pr\u00e8s) sur tous les clients mails. La prochaine \u00e9tape sera de la rendre responsive. Une newsletter responsive basique peut se mettre en place sans trop se prendre la t\u00eate. Voici quelques pi\u00e8ges \u00e0 \u00e9viter.<\/p>\n","protected":false},"author":15,"featured_media":688,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[],"_links":{"self":[{"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/posts\/664"}],"collection":[{"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/comments?post=664"}],"version-history":[{"count":37,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/posts\/664\/revisions"}],"predecessor-version":[{"id":711,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/posts\/664\/revisions\/711"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/media\/688"}],"wp:attachment":[{"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/media?parent=664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/categories?post=664"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.newave.be\/blog\/wp-json\/wp\/v2\/tags?post=664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<style><\/code> du <head><\/code><\/strong> de votre document.<\/p>\nclass<\/code> <\/strong>pour cibler les \u00e9l\u00e9ments. Le ciblage parent-enfant etc. ne fonctionnera pas.<\/p>\nLargeur des tableaux<\/h2>\n
![\"screen](\"http:\/\/www.newave.be\/blog\/wp-content\/uploads\/2015\/11\/screen-to-phone-1.png.png\")
<\/p>\n<head>
\n...<\/span>
\n<style><\/span>
\n@media screen and (max-width: 480px){<\/span>
\ntable[class=w360]{<\/span>
\nwidth: 360px !important;<\/span>
\n}<\/span>
\n[class=w320]{<\/span>
\nwidth: 320px !important;<\/span>
\n}<\/span>
\n}<\/span>
\n<\/style><\/span>
\n<\/head><\/code><\/p>\nAfficher sur une seule colonne<\/h2>\n
![\"screen](\"http:\/\/www.newave.be\/blog\/wp-content\/uploads\/2015\/11\/screen-to-phone-2.png\")
<\/p>\ntd[class=block]{<\/span>
\ndisplay:block !important;<\/span>
\n}<\/span><\/code><\/p>\nDroit au but<\/h2>\n
![\"screen](\"http:\/\/www.newave.be\/blog\/wp-content\/uploads\/2015\/11\/screen-to-phone-3.png\")
<\/p>\nspan[class=nodisplay]{<\/span>
\ndisplay:none;<\/span>
\n}<\/span>
\n<\/code><\/p>\n\u00c0 retenir<\/h2>\n
\n
<td><\/code><\/strong><\/li>\n<\/ul>\nclass<\/code> et de pr\u00e9f\u00e9rer le s\u00e9lecteur d’attribut<\/strong>.\n<\/div>\nPour en savoir plus<\/h2>\n
\nPour en savoir plus et pousser plus loin l’optimisation de votre responsive, je vous conseille le guide des emails mobiles de Campaign Monitor<\/a> (aussi en fran\u00e7ais sur pompage.net<\/a>)<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"