Créer un template d’email responsive

Maintenant que nous avons découvert deux solutions concurrentes pour gérer des listes de diffusion et expédier des campagnes emailing, entrons dans le vif du sujet avec la rédaction de notre premier email, plus précisément avec la mise en place de sa structure, puisque notre but aujourd’hui ne sera pas de nous intéresser au contenu de l’email mais de créer un template responsive, c’est à dire qui va s’adapter à tous les écrans en offrant le même confort à tous. Enfin ce dossier spécial emailing devient concret technique !

smartphone

Pourquoi un email en responsive web design ?

D’après le site Email Client Market Share, près d’un email sur 4 est ouvert à partir d’un iPhone, plus qu’à partir du logiciel PC Microsoft Outlook. Si on ajoute les utilisateurs Android, on arrive à environ 1 email sur 3 lu à partir d’un smartphone. Si vous envoyez 10.000 emails à 0.01€ pièce, ne pas prévoir une version de votre campagne compatible avec les téléphones équivaut à jeter 31 euros directement à la poubelle !

Et pourquoi ne pas se contenter de faire un tableau sur toute la largeur de l’écran ? Parce que le Responsive Web Design ne se limite pas à redimensionner les éléments pour les faire tenir dans un écran, mais se soucie aussi du confort des internautes et de fournir un contenu agréable dans tous les cas. Un tableau qui prendra toute la largeur d’un écran 24 pouces sera complètement vide et probablement trop rempli sur un écran 3,5 pouces.

separateur

Un tableau dans un tableau dans un tableau …

La première règle quand on crée un gabarit de newsletter, c’est que toute la mise en forme doit se baser sur des tableaux imbriqués (l’erreur de beaucoup de jeunes webmasters est de s’acharner à utiliser des calques).

Ainsi le découpage en colonnes se fait de la façon suivante :

<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>1 colonne</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>2 colonnes</td>
          <td>2 colonnes</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>3 colonnes</td>
          <td>3 colonnes</td>
          <td>3 colonnes</td>
        <tr>
      </table>
    </td>
  </tr>
</table>

Voilà pour la base, nous allons maintenant construire un email sur ce modèle.

separateur

Deux méthodes pour rendre le contenu responsive

Nous allons partir du template ci-dessous pour découvrir deux façons d’adapter une newsletter à tous les formats d’écran, l’une concernera l’affichage sur une colonne, l’autre l’affichage sur 2 colonnes. Au passage nous pourrons nous occuper du logo en en-tête de la newsletter.

gabarit de newsletter non responsive

Qu’on soit bien d’accord, il s’agit d’un exemple, je le trouve moche moi aussi. Mais il regroupe suffisamment de pièges pour nous permettre de travailler un peu.

La question du jour est la suivante : comment partir de ça ↑ pour arriver à ça ↓ (cliquez sur les images pour afficher les templates dans une nouvelle page) ?

Newsletter responsive : vue mobile

Comme nous l’avons vu plus haut, nous avons bien des tableaux imbriqués les uns dans les autres et nous allons maintenant leur appliquer une couche de css pour redisposer les éléments de la façon qui nous plait.

Cacher les éléments inutiles

Vous aller certainement objecter que les descriptifs des articles ont totalement disparu de ma newsletter mais sur un l’écran d’un iPhone le troisième article n’est pas visible sans scroll alors j’ai préféré limiter la quantité de données affichées pour privilégier le confort de lecture et le call to action (le logo en rouge et le titre alarmiste ne sont-ils pas suffisants pour susciter l’envie de lire la suite ?). Pour cacher une ces descriptions, rien de plus simple, il suffit d’ajouter une classe css à la ligne que nous ne voulons pas voir sur un smartphone et de créer un style css qui prendra en charge cette disparition.

Ainsi ce code :

<tr>
  <td colspan="2">
    Texte à masquer
  </td>
</tr>

est remplacé par celui-ci :

<tr class="hideme">
  <td colspan="2">
    Texte à masquer
  </td>
</tr>

et voici la balise style qui cache les éléments sur les petits écrans grâce à un media query :

<style type="text/css">
  @media only screen and (max-width: 480px){
    table[class="hideme"], tr[class="hideme"]{
      display: none !important; 
    }
  }
</style>

 

Gérer les cellules comme des blocs

Attachons-nous maintenant à la partie d’en-tête de notre email : le logo et les liens vers les réseaux sociaux. Il s’agit d’un tableau d’une ligne contenant deux colonnes. L’astuce pour afficher les éléments les uns au dessus des autres va être de demander aux cellules de se comporter comme des blocs tout en leur donnant toute la largeur du tableau. Vous me suivez ? Pour ceux qui ont des doutes voici ce qui va se passer :

  • Nous allons définir la largeur du tableau à 320px
  • Les cellules <td> vont être affichées comme des blocs
  • La largeur des cellule va être elle aussi définie à 320px.

Ainsi le code :

<table width="640" align="center" bgcolor="#dddddd" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td><img src="http://www.responsive-mind.fr/wp-content/uploads/2013/01/responsive-mind-banniere1.png"></td>
    <td>
      <img src="http://www.responsive-mind.fr/wp-content/uploads/googleplus.png">
      <img src="http://www.responsive-mind.fr/wp-content/uploads/linkedin.png">
      <img src="http://www.responsive-mind.fr/wp-content/uploads/twitter.png">
    </td>
  </tr>
 </table>

deviendra :

<table width="640" align="center" bgcolor="#dddddd" cellpadding="0" cellspacing="0" border="0" class="table320">
  <tr>
    <td class="cell320" width="320" align="center"> 
      <img src="http://www.responsive-mind.fr/wp-content/uploads/2013/01/responsive-mind-banniere1.png" width="320"> 
    </td>
    <td class="cell320" width="320" align="right"> 
      <img src="http://www.responsive-mind.fr/wp-content/uploads/googleplus.png">
      <img src="http://www.responsive-mind.fr/wp-content/uploads/linkedin.png">
      <img src="http://www.responsive-mind.fr/wp-content/uploads/twitter.png"> 
    </td>
  </tr>
</table>

Avec encore une fois une feuille de style et un media-query :

<style type="text/css">
  @media only screen and (max-width: 480px){
    table[class="table320"] { 
      width:320px !important; 
    }
    td[class="cell320"] { 
      display:block !important; 
      width:320px !important; 
    }
  }
</style>

On retrouve bien les 3 propriétés css correspondant aux 3 actions listées plus haut.

Les mêmes procédés appliqués aux images

En décortiquant le code de la newsletter version Responsive Web Design, vous constaterez que les images aussi se voient appliquer un style (img80), parce qu’en 80×80 elles seraient trop petites pour l’affichage desktop et qu’en 150×150 elles seraient trop petites pour l’affichage sur smartphone. Afin d’être sur que les cellules qui contiennent les images soient bien redimensionnées, on leur applique le même traitement (cell80).

Si vous avez compris les deux chapitres précédents, il n’y a rien de nouveau…

separateur

Une infinité de possibilités

Vous l’aurez compris en voyant le rendu de ce gabarit, nous n’avons vu que les bases et il reste un long chemin à parcourir pour offrir la meilleure expérience possible, voici quelques pistes que je n’ai pas abordées :

  • Afficher / Masquer les paragraphes à la demande grâce à un bouton, plutôt que de les masquer purement et simplement, vous trouverez un exemple ici ;
  • Utiliser des largeurs relatives plutôt que des largeurs absolues pour éviter les marges si elles vous donnent des crises d’urticaire ;
  • Ajouter le support des tablettes et autres appareils offrant une largeur comprise entre 480 et 640 pixels ou une largeur inférieure à 320px (si si, il en reste), auquel cas il faudra 3 gabarits en plus du html “basique” ;
  • Utiliser des propriétés css communes pour une mise en forme un peu moins brute. Vous pouvez utiliser cet excellent tableau qui récapitule les propriétés supportées ou non par les différents clients email ;
  • Oublier tout ce que je viens d’écrire et utiliser un fluid layout sans aucune media-query, comme le propose Zurb

separateur

Vous voilà donc prêts, non pas à envoyer une belle newsletter optimisée pour tous les clients, mais à tester, lire, corriger, tester encore… pour obtenir un résultat qui soit à la fois bon techniquement et conforme à l’image que vous voulez donner de vous et de vos produits.

Comme je l’ai écrit plus haut, il y a une foule de possibilités plus ou moins simples à mettre en oeuvre mais vous connaissez peut-être vous même quelques astuces qui pourraient faciliter la tâche des autres lecteurs, alors n’hésitez pas, toutes vos suggestions sont les bienvenues.



Source : Crédit photo

5 réponses

  1. […] Alors que près d'un email sur 3 est lu à partir d'un smartphone, seule une minorité des emails est envoyée en responsive web design.  […]

  2. […] Créer un template d’email responsive | Responsive Mind […]

  3. Créer un template d’email responsive | Pratique digitale dit :

    […] See on http://www.responsive-mind.fr […]

  4. […] Alors que près d'un email sur 3 est lu à partir d'un smartphone, seule une minorité des emails est envoyée en responsive web design.  […]

  5. […] La première règle quand on crée un gabarit de newsletter, c'est que toute la mise en forme doit se baser sur des tableaux imbriqués (l'erreur de beaucoup de jeunes webmasters est de s'acharner à utiliser des calques).  […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *