Responsive email


Responsive email

Responsive email

Après les sites web qui doivent être pensés « mobile first », voici venu le temps où les mails doivent être responsives.

Voici un article donnant des statistiques intéressantes sur l’usage des mails :
2015 Mobile-Friendly Email & Landing Page Trends [Infographic] (litmus.com)

On peut y lire que l’on approche les 50% de mails lus sur mobile et 56% des mails B2C sont mobile friendly (2015).

Il est donc grand temps de produire des mails qui puissent être lu sur toute les tailles d’écran et pour cela, d’utiliser des outils qui facilite la tâche.

Une société spécialisée du secteur (Mailjet) nous indique pourquoi elle a créé et mis en open source un framework pour faciliter le travail :
MJML: Why We Created A New Open-source Framework For Email Coding

Le framework en question s’appelle MJML : https://mjml.io/ « The only framework that makes responsive-email easy »

Pour la démo en live, voyons par exemple : https://mjml.io/try-it-live/kili ou bien https://mjml.io/try-it-live/basic
A noter la grosse différence entre la simplicité du MJML et la complexité du HTML généré ensuite par le moteur qui embarque tout le css nécessaire pour que le mail soit le mieux rendu, y compris sur Outlook.

Simple « Hello World » en MJML :

<mj-body>
   <mj-section>
     <mj-column>
      <mj-image src="/assets/img/logo-small.png"></mj-image>
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
    </mj-column>
   </mj-section>
 </mj-body>

La même chose générée en HTML :

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>undefined</title>
  <style type="text/css">
    
  #outlook a { padding: 0; }
  .ReadMsgBody { width: 100%; }
  .ExternalClass { width: 100%; }
  .ExternalClass * { line-height:100%; }
 body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
 table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
  img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }
  p {
    display: block;
    margin: 13px 0;
  }
  @media only screen and (min-width:480px) {
    .mj-2column, * [aria-labelledby="mj-2column"] { width:50%!important; }
    .mj-3column, * [aria-labelledby="mj-3column"] { width:33.3333%!important; }
    .mj-4column, * [aria-labelledby="mj-4column"] { width:25%!important; }
  }
  </style>
  <!--[if !mso]><!-->
  <style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300);
  </style>
  <style type="text/css">
    @media only screen and (max-width:480px) {
      @-ms-viewport { width:320px; }
      @viewport { width:320px; }
    }
  </style>
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300" rel="stylesheet" type="text/css">
  <!--<![endif]-->
<style type="text/css">
    @media only screen and (min-width:480px) {
    }</style></head>
<body id="YIELD_MJML" style=""><div class="mj-body"><!--[if mso]>
    <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td>
    <![endif]--><div style="margin:0 auto;max-width:600px;"><table class="" cellpadding="0" cellspacing="0" style="width:100%;font-size:0px;" align="center"><tbody><tr><td style="text-align:center;vertical-align:top;font-size:0;padding-top:20px;padding-bottom:20px;"><!--[if mso]>
      <table border="0" cellpadding="0" cellspacing="0"><tr><td style="width:600px;">
      <![endif]--><div style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;" class="mj-1column" aria-labelledby="mj-1column" data-column-width="NaN"><table width="100%"><tbody><tr><td style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="center"><table cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center"><tbody><tr><td><img alt="" src="/assets/img/logo-small.png" style="border:none;display:block;outline:none;text-decoration:none;max-width:NaN;"></td></tr></tbody></table></td></tr><tr><td style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;"><div style="height:0px;font-size:1px;border-color:#F45E43;border-style:solid;border-width:4px 0 0;margin-bottom:30px;margin-left:10px;margin-right:10px;margin-top:30px;"></div></td></tr><tr><td style="font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left"><div class="mj-content" style="cursor:auto;color:#F45E43;font-family:helvetica;font-size:20px;line-height:22px;">Hello World</div></td></tr></tbody></table></div><!--[if mso]>
      </td></tr></table>
      <![endif]--></td></tr></tbody></table></div><!--[if mso]>
    </td></tr></table>
    <![endif]--></div></body>
</html>

 

Voilà donc à mes yeux un projet tout à fait prometteur que l’on peut encourager avec un petit click pour le faire monter dans le classement de producthunt. com : https://www.producthunt.com/tech/mjml

Si vous n’êtes pas convaincu, voici 2 liens qui présentent un peu le sujet et diverses astuces pour contourner des problèmes sur divers lecteurs de mail :
http://www.alsacreations.com/tuto/lire/1533-un-e-mail-en-html-responsive-multi-clients.html
http://webdesign.tutsplus.com/fr/articles/creating-a-simple-responsive-html-email–webdesign-12978
On voit rapidemment que le sujet est complexe et évolue sans arrêt. D’où l’intérêt de se reposer sur un framework et si possible open source.

MAJ 2017 : Le tutoriel de Grafikart.fr

Laissez un commentaire

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