Concevoir des e-mails réactifs : Coder des e-mails pour les mobiles

Par Campaign Monitor

Lorsque les concepteurs de sites parlent de feuilles de style pour les mobiles, ils ne parlent pas de feuilles de styles totalement distinctes, mais des trucs sympas qui apparaissent entre les accolades des requêtes de média.

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 :

JPEG - 51.7 ko

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 !

Fiche technique

À propos de l'auteur

Campaign Monitor est une plate-forme d’e-mailing créée en 2004 par Ben Richardson et David Greiner, gérants d’une société de Web Design, à la suite de nombreuses demandes de la part de leurs clients pour gérer des campagnes d’envoi d’e-mails. Après avoir fait le tour des solutions existantes sur le marché, ils ont décidé de créer l’outil qui correspondait à leurs besoins.

Aujourd’hui, plus de 700 000 designers, agences et autres sociétés utilisent Campaign Monitor et de nouveaux clients les rejoignent régulièrement.
Ils continuent à ajouter de nouvelles fonctionnalités à leur produit et à le peaufiner mais leur objectif premier reste le même : rendre plus facile pour quiconque l’envoi et la gestion de jolies newsletters.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Web Mobile

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site