Concevoir des e-mails réactifs : Coder des e-mails pour les mobiles
Par Campaign Monitor
Voici à quoi cela ressemble :
<style type="text/css">
@media only screen and (max-device-width: 480px) {
/* placer les CSS conçues pour les mobiles ici */
}
/* les CSS classiques sont à placer ici */
</style>Voyons à quoi sert cette déclaration @media. Premièrement, afin d’en faire un élément spécifique au mobile, il faut respecter certains critères avant que le client de messagerie de l’utilisateur n’applique les styles déclarés à l’intérieur. La déclaration @media only screen signifie que l’e-mail sera présenté sur un écran (et non pas sur une plage braille ni sur une feuille imprimée).
En plus de cela, la zone de visualisation du périphérique ne peut être supérieure à 480px (largeur maximum). C’est important, parce que tous les terminaux mobiles n’ont pas une zone de visibilité de 480px maximum. Même si la règle max-device-width: 480px est couramment utilisée (dans la mesure où c’est la largeur d’un écran d’iPhone en mode paysage), vous pouvez la bidouiller pour vous adapter à des écrans plus larges comme ceux des tablettes. Vous pouvez même vous la raconter à mort en écrivant ceci :
@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... }Maintenant, il est temps de regarder notre premier essai d’e-mail qui a été réduit pour un terminal mobile. Voici le design dans iPhone Mail :
Dans cet exemple, nous avons appliqué la classe tableaudecontenu aux tableaux HTML qui contiennent le texte et les images. Voici un extrait du code :
<style type="text/css">
@media only screen and (max-device-width: 480px) {
/* placer les CSS conçues pour les mobiles ici */
table[class=tableaudecontenu] {
width: 320px !important;
}
}
/* les CSS classiques sont à placer ici */
table.tableaudecontenu {
width: 640px;
}
</style>La classe tableaudecontenu a un effet vraiment intéressant ici : quand l’e-mail est consulté sur un terminal dont l’écran est de 480px ou plus, rien ne se passe. Cependant, lorsque l’écran est de 480px ou moins, cela réduit les tableaux à 320px de large. Les sélecteurs d’attribut ont été utilisés afin d’éviter un comportement surprenant dans Yahoo ! Mail.
Nous avons également ajouté !important ; aux règles de styles spécifiques au mobile pour nous assurer qu’elles prennent le pas sur toutes les autres. En dehors de ça, c’est une CSS tout ce qu’il y a de plus ordinaire. De la même manière, vous pourriez la doter d’autres déclarations telles que :
@media only screen and (max-device-width: 480px) {
/* placer les CSS conçues pour les mobiles ici */
table[class=tableaudecontenu] { width: 325px !important; }
img[class="imagedentete"] { width: 325px !important; }
p[class="date"] { display: none !important; }
}Maintenant que vous avez un avant-goût de la manière dont le code fonctionne, nous vous recommandons de télécharger notre gabarit d’e-mail pour l’étudier de près. En espérant que ces quelques exemples vous ont parlé, nous allons à présent étudier quelques techniques plus avancées pour adapter votre newsletter aux terminaux mobiles. Attachez vos ceintures !
« Concevoir des e-mails réactifs » est une série de huit articles :
http://www.campaignmonitor.com/guides/mobile/coding/