Le design d’email responsive / hybride, comment ça marche ?

Aujourd’hui, la moitié des emails sont ouverts depuis un appareil mobile (smartphone, tablette…). Lorsque vous concevez vos campagnes emailing, vous devez le prendre en compte et veiller à ce que vos emails s’affichent correctement sur tous les devices : ordinateur, mobile ou tablette. Les designers utilisent deux principales techniques pour garder le contrôle sur la conception des emails et assurer un affichage optimisé : le responsive design d’une part, les codes hybrides d’autre part. Or, la manière dont ils utilisent ces techniques révèlent parfois un manque de compréhension.

Dans cet article, nous vous proposons d’entrer dans les arcanes de ces deux techniques pour mieux comprendre comment elles peuvent être utilisées (efficacement) dans vos campagnes email. Pour rédiger les lignes qui suivent, nous nous sommes inspirés d’un article très intéressants (en anglais) publié sur le blog de Litmus.

Email responsive design

Vous avez surement déjà croisé l’expression « email responsive » ou « responsive email ». Pourtant, si cette expression est beaucoup utilisée depuis quelques années, il y a encore beaucoup de confusion autour de ce qu’elle signifie réellement. L’email responsive design, c’est le fait d’utiliser des tables et des images fluides, ainsi que des media queries (module CSS3) pour contrôler l’affichage des emails quelque soit la taille des écrans utilisés pour les lire. Un email responsive, c’est un email dont le design se redimensionne et se restructure en fonction de la grandeur de l’écran de lecture.

Le design responsive a initialement été conçu pour les sites web et popularisé par Ethan Marcotte, un designer américain, dans son livre Responsive Web Design. Le principe du responsive (l’adaptabilité du design) a ensuite été étendu à l’email. Au niveau de l’intégration technique, il y a quelques différences entre le web responsive et l’email responsive. Mais le principe est exactement identique.

Le responsive est basé sur les media queries, qui utilisent le langage CSS3. Le rôle des modules media queries est de permettre de transformer les tableaux HTML et les images dont la largeur est fixe sur les ordinateurs, en éléments fluides capables de s’adapter à la taille des écrans.

Découvrez les meilleurs outils et techniques pour tester son template email.

Qu’est-ce qu’un email non responsive ?

Pour bien comprendre l’importance du responsive email, regardons à quoi ressemble un email classique, non responsive. Voici à quoi ressemble le code traditionnel d’un email, avec une image, un titre et du texte :

  <table border="0" cellpadding="0" cellspacing="0" width="100%">       <tr>          <td bgcolor="#00a9f7" align="center">              <table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table">                                  <tr>                      <td align="center" valign="top" style="padding: 40px 0px 40px 0px;">                          <!-- IMAGE -->                          <img alt="Example" src="http://placehold.it/600x300" width="600" style="display: block;" border="0" class="responsive-image">                      </td>                  </tr>                  <tr>                      <td align="center" valign="top" style="padding: 0px 10px 20px 10px;">                          <!-- HEADLINE -->                          <p style="color: #ffffff; font-family: sans-serif; font-size: 24px; font-weight: bold; line-height: 28px; margin: 0;">Announcing Some News</p>                      </td>                  </tr>                  <tr>                      <td align="center" valign="top" style="padding: 0px 10px 60px 10px;">                          <!-- COPY -->                          <p style="color: #b5e2f7; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>                      </td>                  </tr>               </table>          </td>      </tr>  </table>  

La largeur de l’image est de 600 pixels, ce qui correspond à la largeur du tableau conteneur. Sur un ordinateur, cette section de l’email ressemblera à ça :

Si vous lisez cet email sur un mobile, vous obtiendrez plutôt ça :

La largeur de la table et la largeur de l’image sont fixées à 600 px. Ce qui signifie qu’elles ne s’adaptent pas en fonction de la largeur des écrans, ce qui aboutit à un mauvais affichage sur mobile : l’email est sévèrement tronqué. Lorsque tous les emails étaient lus sur ordinateur, le responsive n’avait pas de raison d’être. Maintenant que plus de la moitié des emails sont lus sur mobile ou sur tablette, le responsive permet de résoudre les problèmes d’affichage.

La largeur (et la taille) des emails est un aspect essentiel à prendre en compte pour optimiser l’affichage de vos emails sur tous les clients de messagerie. Sur ce sujet, lire notre « La largeur et la taille idéales de vos emailings« .

Comment rendre un email responsive ?

On l’a vu, rendre un email responsive consiste à rajouter des media queries dans le code de l’email. Les media queries permettent de rendre les éléments de l’email fluides. Les media queries doivent être placées dans la partie supérieure de l’email, c’est-à-dire entre la balise <head> et la balise </head ». Les media queries permettent d’attribuer des propriétés CSS en fonction de conditions particulières, c’est-à-dire de spécifier comment les éléments doivent être mis en forme en fonction des circonstances. En l’occurrence, ces conditions sont la largeur de l’écran.

  <!DOCTYPE html>  <html>  <head>  <title></title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta name="viewport" content="width=device-width, initial-scale=1">  <meta http-equiv="X-UA-Compatible" content="IE=edge" />  <style type="text/css">  	@media screen and (max-width: 600px) {  		  	}  </style>  </head>  

La largeur maximale est fixée ici à 600 px (max-width: 600px). Ce qui signifie que la largeur ne pourra pas dépasser 600 px, quelque soit la taille de l’écran utilisé pour lire l’email. Pour les écrans plus petits que 600 px, la largeur des éléments variera proportionnellement à la largeur de l’écran. Plus loin dans le code de cet email responsive, on peut voir qu’une CSS-class « responsive-table » est appliquée à la table, et une CSS-class  « responsive-image » à l’image.

@media screen and (max-width: 600px) {    .responsive-table {      display: block;      width: 100% !important;    }         .responsive-image {      height: auto;      max-width: 100% !important;    }  }  

Si le client de messagerie supporte les media queries, notre email sera fluide et s’adaptera à l’écran :

Cette technique peut aussi être appliquée au niveau de la structure de l’email. Dans une structure en deux ou trois colonnes, vous pouvez cibler les colonnes et choisir une largeur de 100% sur mobile pour rendre l’email plus facile à lire, avec un affichage sur une seule colonne. Vous pouvez aussi utiliser les media queries pour ajuster la taille du texte, des liens et des boutons sur mobile, en réduisant ou en augmentant la taille de chacun.

Les avantages et les inconvénients du responsive email

Le principal avantage du responsive email est qu’il permet aux designers d’avoir un contrôle absolu sur l’affichage du contenu en fonction des devices. Les media queries sont une technologie puissante, quand elle est bien utilisée. L’inconvénient principal de cette technologie, c’est qu’elle n’est pas supportée partout. Certains clients de messagerie ne gèrent pas les media queries. En particulier, Gmail ne supporte pas complètement les styles dans le head de l’email. De fait, il est rare qu’un email responsive s’affiche correctement sur cette messagerie. Quand un client de messagerie ne supporte pas le responsive, le rendu visuel de l’email peut être…désastreux.

Dans ces cas-là, comment faire ? Utiliser l’approche hybride.

Pour prévisualiser vos emails et s’assurer qu’ils s’affichent correctement quel que soit le client de messagerie ou le device, nous vous conseillons d’utiliser un outil comme Litmus (la référence du marché). Pour en savoir, nous vous invitons à découvrir notre test complet de Litmus.

L’approche hybride pour le codage des emails

L’approche hybride est une technique de codage HTML qui a été développée en réaction au fait que certains clients de messagerie comme Gmail ne supportait pas les media queries. C’est Fabio Carneiro de MailChimp qui est à l’origine de cette nouvelle technique. Elle a plus tard été popularisée par Mike Ragan (Action Rocket) et Nicole Merlin (Email Wizardry).

Découvrez notre guide complet sur l’art de coder un email en HTML / CSS.

En quoi consiste le design hybride ? En fait, cette approche reprend quelques éléments du responsive design. Le codage hybride utilise aussi des tableaux et des images fluides mais, la grande différence par rapport au responsive, c’est que ces tableaux et ces images sont fluides par défaut. Dans le design hybride, on n’utilise pas de media queries pour rendre ces éléments fluides. Cela revient à faire du responsive sans media queries. Le design hybride repose sur trois principes :

• L’utilisation de tableaux et d’éléments fluides par défaut.
• L’utilisation de la propriété CSS « max-width » pour limiter la largeur sur ordinateur.
• L’utilisation des commentaires conditionnels de Microsoft pour limiter la largeur sur Outlook.

Les bases du design email hybride

Reprenons l’exemple précédent et regardons attentivement le code qui est placé derrière le tableau hybride :

  <table border="0" cellpadding="0" cellspacing="0" width="100%">      <tr>          <td bgcolor="#00a9f7" align="center">              <table border="0" cellpadding="0" cellspacing="0" width="100%">                                <tr>                      <td align="center" valign="top" style="padding: 40px 0px 40px 0px;">                          <!-- IMAGE -->                          <img alt="Example" src="http://placehold.it/600x300" width="600" style="display: block; width: 100%;" border="0">                      </td>                  </tr>                  <tr>                      <td align="center" valign="top" style="padding: 0px 10px 20px 10px;"a>                          <!-- HEADLINE -->                          <p style="color: #ffffff; font-family: sans-serif; font-size: 24px; font-weight: bold; line-height: 28px; margin: 0;">Announcing Some News</p>                      </td>                  </tr>                  <tr>                      <td align="center" valign="top" style="padding: 0px 10px 60px 10px;">                          <!-- COPY -->                          <p style="color: #b5e2f7; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>                      </td>                  </tr>              </table>          </td>      </tr>  </table>  

On peut constater qu’on a repris exactement la même structure. La seule différence, c’est qu’au lieu d’utiliser une valeur fixe de pixels pour la largeur du tableau et de l’image, on a utilisé des valeurs avec pourcentage fluide. C’est cela qui permet au contenu de l’email de se couler dans différentes tailles d’écran.

Toutefois, si on en restait là, il y aurait un problème au niveau de l’affichage sur les très grands écrans (ordinateurs), car il n’y a pas de largeur maximum définie. Il ne faut pas oublier d’ajouter la propriété CSS « max-width », à la fois pour l’image et pour le tableau :

<table border="0" cellpadding="0" cellspacing="0" width="100%">       <tr>          <td bgcolor="#00a9f7" align="center">              <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >                                <tr>                     <td align="center" valign="top" style="padding: 40px 0px 40px 0px;">                          <!-- IMAGE -->                          <img alt="Example" src="http://placehold.it/600x300" width="600" style="display: block; width: 100%; max-width: 100%;" border="0">                      </td>                 </tr>                  <tr>                      <td align="center" valign="top" style="padding: 0px 10px 20px 10px;">                          <!-- HEADLINE -->                          <p style="color: #ffffff; font-family: sans-serif; font-size: 24px; font-weight: bold; line-height: 28px; margin: 0;">Announcing Some News</p>                      </td>                  </tr>                  <tr>                      <td align="center" valign="top" style="padding: 0px 10px 60px 10px;">                          <!-- COPY -->                          <p style="color: #b5e2f7; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>                      </td>                  </tr>              </table>          </td>      </tr>  </table>  

Dans la plupart des cas, cela fonctionne très bien. Seule petit problème : Microsoft Outlook ne gère pas la propriété « max-width ». Vous devez, pour remédier à cet inconvénient, utiliser les conditional comments de Microsoft. Les conditional comments, ce sont des bouts de code qui ne sont lus et interprétés que par Outlook. En l’occurrence, le but est de fixer une largeur pour le tableau qui ne sera prise en compte que sur Outlook :

<table border="0" cellpadding="0" cellspacing="0" width="100%">      <tr>          <td bgcolor="#00a9f7" align="center">              <!--[if (gte mso 9)|(IE)]>              <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">              <tr>              <td align="center" valign="top" width="600">              <![endif]-->              <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;" >                                  <tr>                      <td align="center" valign="top" style="padding: 40px 0px 40px 0px;">                          <!-- IMAGE -->                          <img alt="Example" src="http://placehold.it/600x300" width="600" style="display: block; width: 100%; max-width: 100%;" border="0">                      </td>                  </tr>                  <tr>                      <td align="center" valign="top" style="padding: 0px 10px 20px 10px;">                          <!-- HEADLINE -->                          <p style="color: #ffffff; font-family: sans-serif; font-size: 24px; font-weight: bold; line-height: 28px; margin: 0;">Announcing Some News</p>                      </td>                  </tr>                  <tr>                      <td align="center" valign="top" style="padding: 0px 10px 60px 10px;">                          <!-- COPY -->                          <p style="color: #b5e2f7; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 24px; margin: 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>                      </td>                  </tr>               </table>              <!--[if (gte mso 9)|(IE)]>              </td>              </tr>              </table>              <![endif]-->          </td>      </tr>  </table>  

Ces morceaux de codes « fantômes » ajoutés sont lus aussi bien par les anciennes versions d’Outlook (IE) que par les nouvelles (mso). Ils permettent d’encadrer le contenu dans le cadre de la largeur fixe du tableau. Puisque tous les éléments utilisés sont fluides par défaut, l’email s’affiche correctement sur presque tous les petits écrans. Comme cette technique hybride n’utilise pas les media queries, finis les problèmes rencontrés sur des clients comme Gmail. Bien sûr, il ne s’agit ici que d’un aperçu très basique de l’approche hybride.

Les avantages et inconvénients du design hybride

Le design hybride est idéal lorsqu’on souhaite que l’affichage de l’email soit optimal quelque soit le client email. Puisque tout se passe à l’intérieur du corps de l’email, on ne rencontrera jamais des problèmes du type de ceux qui se produisent avec les media queries. En plus, cette approche hybride n’exclut pas les media queries. Vous pouvez tout à fait combiner les deux techniques, en ajoutant des media queries dans vos emails. Celles-ci ne seront interprétées que par les clients de messagerie qui les gèrent et permettront d’améliorer encore plus l’affichage des emails sur les clients qui les supportent.

L’inconvénient du design hybride, c’est qu’il est plus compliqué à mettre en place, surtout lorsque vous utilisez des structures d’email complexes (en plusieurs colonnes). Il y a des techniques pour utiliser l’approche hybride sur deux, trois et même quatre colonnes, mais c’est beaucoup plus compliqué à intégrer comparé au responsive classique.

Responsive email ou design hybride : quelle technique choisir ?

On vient de le voir, les deux techniques ont leurs avantages et leurs inconvénients. Pour faire votre choix entre les deux, vous devez répondre à ces trois questions :

• Est-ce que j’ai besoin que mes emails soient supportés par Gmail ?
• La structure de mon email est-elle complexe (==> nombre de colonnes) ?
• Est-ce que je suis à l’aise avec les codes complexes ?

Le codage hybride est relativement nouveau dans le secteur de l’email. Beaucoup de designers et de développeurs sont encore dans la phase de découverte et de prise en main. Il faut de la pratique et des expérimentations derrière soi pour maîtriser efficacement l’approche hybride. Si vous n’avez pas les connaissances techniques requises ou le temps nécessaire pour l’apprentissage, il est absolument déconseillé d’opter pour le design hybride. Si votre design est très complexe, la technique hybride est également déconseillée.

Si, après avoir consulté les clients de messagerie de vos inscrits, vous vous rendez compte que beaucoup d’entre eux utilisent l’application Gmail ou Gmail InBox, le design hybride est surement la solution la plus pertinente. Cela suppose d’investir du temps pour l’apprentissage de cette approche et les phases d’expérimentations, mais ce sera payant à long terme.