Réaliser un template mail responsive 100% compatible avec les clients mails et navigateurs mobiles

De nos jours, de plus en plus d'emails sont lus sur les terminaux mobiles. Avec une évolution de la lecture sur mobile aussi marquée , les campagnes d'e-mailing se doivent d'être compatibles avec le plus grand nombre de terminaux.

Templates email responsive par Zurb

Le studio Zurb l’a bien compris et a donc décidé de réaliser une série de 5 templates mail responsive. Les fêtes de fin d’année approchant, ils sont disponibles en téléchargement gratuit sur le Zurb’s playground.

Fonctionnement d’un template mail responsive

Étonnamment, les media queries ne sont pas nécessairement requises.
La cause ? Une compatibilité médiocre des clients mails et navigateurs mobiles.

Voici le résultat d’un test de compatibilité des media queries au sein de divers clients mails mobiles effectué par Email on acid :

Mobile Client min-device-width max-device-width
Android Mail Non supporté. Seulement max-device-width 480px and device-width 480px sont supportés à chaque fois.
Android Gmail
iPhone Mail >=320px <= 480px
iPhone Gmail
iPad Mail Oui si min-device width >= 768 Oui si la valeur est <= 1024
iPad Gmail
Blackberry 8000

Source

Zurb n’a pas complètement omis les media queries de ses templates, elles sont implémentées pour les clients mails compatibles.

Magie du tag viewport

Même si les media queries ne sont pas utilisées, il est nécessaire de recourir au tag viewport afin de s’assurer que la largeur du template corresponde à celle du device. Sans cela, certains supports dont iOS implémenteraient une largeur de 980px par défaut.

<meta name="viewport" content="width=device-width" />

Mise en place du template mail fluide

L’un des challenge a été de contraindre la largeur du template mail sur les supports desktop et de donner une largeur 100% sur les terminaux mobiles.

La solution est de fixer la largeur maximale des cellules à 600px. Lorsqu’une résolution inférieure à 600px pointe le bout de son nez, la largeur des cellules s’ajuste progressivement.

<table>
  <tr>
    <td></td>
    <td class="container"><!-- CONTENU --></td>
    <td></td>
  </tr>
</table>

.container {
  max-width:600px!important;
  display:block!important;
  margin:0 auto!important; /* centrer */
  clear:both!important;
}

Astuce pour un template mail responsive à deux colonnes

Certains templates proposés par Zurb contiennent deux colonnes. Cela est sympa sur desktop mais sur mobile, il nous faut un template 1 colonne.

Zurb a trouvé l’astuce en attribuant une largeur et un float à chacune des 2 colonnes. Si le conteneur .column-wrap a une largeur supérieure à 600px, les deux colonnes s’affichent côte-à-côte, si la largeur est inférieure, elles s’afficheront l’une en-dessous de l’autre.

<pre><div class="column-wrap">

  <div class="column">
    <table>
      <tr>
        <td>
          <!-- CONTENU -->
        </td>
      </tr>
    </table>
  </div>

  <div class="column">
    <table>
      <tr>
        <td>
          <!-- CONTENU -->
        </td>
      </tr>
    </table>
  </div>

</div>
.column-wrap {
  padding:0!important;
  margin:0 auto;
  max-width:600px!important;
}

.column {
  width: 300px;
  float:left;
}

Liste des clients et navigateurs testés avec les templates mail responsive

Client/Browser Tested ?
Gmail (Desktop)
Gmail (Mobile)
Gmail (iOS)
Gmail (Android)
Yahoo Mail (Desktop)
Yahoo Mail (Mobile)
Mail (iOS)
Mail (OSX)
Email (Android)
Outlook 2000-2003
Outlook 2007
Outlook 2012
Hotmail (Desktop)
Hotmail (Mobile)
Thunderbird
Sparrow (iOS)
Sparrow (Desktop)

Merci Zurb

Zurb nous offre l’opportunité d’optimiser facilement nos templates mail mobile pour que l’expérience utilisateur soit la plus homogène sur tous les écrans. Ne vous en privez pas, téléchargez les templates mail responsive.

Par Guillaume Palayer Un chasseur-cueilleur et un curieux avant tout des dernières avancées du monde des Internets. Fondateur du Magazine du Webdesign, un blog-cerveau à propulsion humaine, ayant pour mission de faire le tri dans le bruit du Web afin de proposer les meilleurs contenus à la communauté du Magazine du Webdesign.

Inscrivez-vous à la newsletter du Magazine du Webdesign

Inscrivez-vous à notre newsletter afin de recevoir chaque mois une sélection des meilleurs articles et ressources.

Commentaires (9)

  1. Ping : Réaliser un template email responsive 100% compatible avec les clients mails et navigateurs mobiles | Webdesign et développement Web | Scoop.it

  2. Ping : Réaliser un template email responsive 100% compatible avec les clients mails et navigateurs mobiles | Webdesign et magie des Internets | Scoop.it

  3. Ange

    Super ce post ! Te voilà maintenant propulsé au rang de CP Email Responsive ;)

    • Guillaume Palayer

      Merci… J’espère, la techno est là ! il ne reste plus qu’à trouver le bon timing. Ça va venir :)

  4. Thib

    N’est-il pas mieux de placer le CSS de manière inline ? J’ai déjà eu pas mal de blocks CSS ignorés sous outlook.

    • Guillaume Palayer

      Zurb fournit les templates email avec le CSS dans un fichier séparé afin de facilité l’édition. Lors du routage de l’email, le CSS doit être inline. Voici quelques outils pour faire le job facilement CSS inliner :) .

  5. Looper

    @beber : un ou pour remplacer le float :left/right ? Je ne suis pas sûr mais je crois que cela fonctionne. Merci à l’auteur de l’article pour ce partage de compétences .

  6. Looper

    @beber : un table align=left ou table align= right pour remplacer le float :left/right ? Je ne suis pas sûr mais je crois que cela fonctionne. Merci à l’auteur de l’article pour ce partage de compétences .

    Désolé pour le doublon : les balises table avaient été supprimé.

Laisser un commentaire

Yep, vous souhaitez poster un commentaire... complétez les trois champs ci-dessous. Pas de spams, protégeons les Internets.

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

↑ Haut de page