Concevoir un template de newsletter responsive

Mis à jour le 27 février 2015 Laissez un commentaire

Votre newsletter est-elle adaptée au mobile ? Pour la rendre responsive, il va vous falloir l’optimiser avec des feuilles de style CSS. Elles vous permettront d’adapter la newsletter à la taille de l’écran du destinataire.

En l’occurrence, ce sont les Media Queries du CSS 3, et la balise @media, qui vont être mise en oeuvre. On peut par exemple forcer la largeur d’un tableau ou cacher des cellules via ce code :

@media only screen and (max-device-width: 480px) {
…
table[class=table], td[class=cell] { width: 320px !important;}
td[class=hide] { display:none !important;}
…
}

screen : s’adresse aux terminaux avec écran. Notez que la majorité des mobiles se considèrent comme média screen (et non handheld comme souhaité).
device-width : dimension en largeur du périphérique
!important : hack permettant d’imposer les valeurs indiquées, quelles que soient les spécifications CSS ultérieures.