Gmail permet aux utilisateurs de créer des emails responsive avec CSS

Mathieu Chartier Développement 0 commentaire

Google a annoncé le 21 septembre 2016 sur le blog officiel des applications que Gmail va permettre aux utilisateurs de créer des emails en responsive web design via des règles CSS tolérées par le webmail. C'est une nouvelle ère qui s'ouvre pour les usagers et le webmail de Google à l'heure du multi-écrans. En soi, créer des emails responsive était déjà possible, mais c'est surtout le fait de pouvoir les créer directement via Gmail qui rend la nouveauté intéressante et enthousiasmante.

Google indique avoir discuter avec des concepteurs de messagerie en ligne (webmail) mais la firme a dû certainement aussi s'intéresser aux intégrateurs HTML/CSS afin de parfaire leur solution. Grâce à ces échanges, Gmail permet d'ajouter de nombreuses règles CSS compatibles mais également des types de media queries variés. Tout est indiqué dans la documentation officielle et si vous recherchez les propriétés CSS utiles, un listing complet a été établi (certaines propriétés obsolètes comme "azimuth" sont compatible, c'est dire).

Gmail permet de créer des emails en responsive web design avec CSS

Ce qui est intéressant est la liste des media queries compatibles, quand on sait que la plupart d'entre eux ne le sont pas avec les mobiles en général :

  • min-width et max-width ;
  • min-device-width et max-device-width ;
  • orientation (portrait ou landscape) ;
  • min-resolution et max-resolution.

Voici un exemple simple d'email fourni par Google (et retouché par mes soins pour "changer" un peu ^^) créé à l'aide d'HTML et CSS avec utilisation de media queries pour le responsive. Vous pourrez profiter de la nouveauté dans les prochains jours, il ne reste qu'à être patient...

<html>
  <head>
    <style>
      .colored {color:green;}
      #body {font-size:.9em;}
      @media screen and (min-width:500px) {
        .colored {color:red;}
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Salut jeune lecteur intéressé,</p>
      <p class='colored'>Le texte est vert par défaut puis passe en rouge quand la fenêtre de résolution passe sous les 500px de largeur.</p>
      <p>Cordialement,<br/>Mathieu Chartier</p>
    </div>
  </body>
</html>