Mise à jour : Gmail déploie la prise en charge de la conception réactive, un style de police amélioré + CSS pour l'accessibilité
Publié: 2016-09-30Tôt le matin du 30 septembre, Gmail a commencé à déployer des changements pour prendre en charge ce que le monde de la messagerie réclame depuis si longtemps : des styles intégrés et un design réactif.
De quoi parle-t-on?
Historiquement, Gmail n'a pas pris en charge les classes ou les identifiants dans l'<head> d'un e-mail, ce qui a obligé les concepteurs d'e-mails à utiliser le CSS en ligne pour styliser leurs e-mails. Désormais, Gmail prendra en charge le CSS intégré avec des classes et des identifiants, ce qui élimine le besoin de CSS en ligne dans Gmail. Cela signifie également que Gmail prendra enfin en charge les requêtes multimédias et les e-mails réactifs.
Juste pour suivre l'actualité ? Suivez nos mises à jour dans le Live Ticker pendant que nous surveillons le déploiement, ou lisez un résumé de tous les changements attendus et ce qu'ils signifient pour les spécialistes du marketing par e-mail ci-dessous.
Le téléscripteur de mise à jour de Gmail
Voici une vue actuelle des clients de messagerie Gmail qui ont été mis à jour :
Client Gmail | Mise à jour déployée |
Webmail de bureau |  |
Webmail mobile |  |
Application Gmail Android (compte Gmail) | |
Application Gmail Android (compte Gmailified) | |
Application Gmail Android (compte POP/IMAP) | |
Application Gmail pour iOS | |
Boîte de réception par Gmail (webmail) | |
Boîte de réception par Gmail (iOS) | |
Boîte de réception par Gmail (Android) | |
G Suite Basic (anciennement Google Apps for Work) | |
Édition gratuite de Google Apps (ancienne version) | |
7 novembre à 11 h 30 HAE
Une mise à jour majeure de l'application Gmail iOS inclut la mise à jour du rendu pour prendre en charge <style> et les requêtes multimédias ! Toutes les applications mobiles Gmail prennent désormais en charge les e-mails réactifs. Nous voyons également tous les comptes G Suite avec la mise à jour du rendu.
12 octobre, 9 h HAE
Nous commençons à voir les comptes G Suite en dehors des États-Unis (ce qui inclut les aperçus Litmus) obtenir la mise à jour du rendu. Nous mettrons à jour le tableau de déploiement lorsque nous verrons que tous nos comptes ont la mise à jour.
4 octobre, 9 h 30 HAE
Nous avons publié un tableau de déploiement complet ci-dessus. Veuillez noter que Gmail a renommé les noms de ses plans de compte.
Pour les comptes G Suite Basic (anciennement Google Apps for Work), il semble que les mises à jour n'aient été éventuellement déployées que sur des comptes américains. Pour les utilisateurs de Litmus, veuillez noter que nos aperçus d'e-mails G Suite Basic (toujours actuellement intitulés Google Apps) utilisent des comptes basés au Royaume-Uni, qui n'ont actuellement pas reçu la mise à jour.
4 octobre, 4 h HAE
Le déploiement pour prendre en charge les requêtes multimédias semble maintenant être terminé dans les applications Gmail et Inbox by Gmail sur Android. Bien que certaines personnes aient remarqué des changements dans la prise en charge des requêtes multimédias sur leurs applications iOS, la prise en charge n'est pas encore cohérente sur tous les comptes.
30 septembre, 8 h HAE
Des modifications ont également été apportées à l'application Gmail sur Android. Les classes et les identifiants sont récupérés dans la tête de l'e-mail. Nous constatons également une prise en charge des requêtes multimédias pour certains comptes de l'application Gmail Android, mais la prise en charge n'est pas cohérente sur tous les comptes que nous avons testés. Le soutien pourrait être déployé progressivement dans toutes les régions.
Des mises à jour sont désormais également déployées dans Inbox by Gmail, avec la prise en charge des identifiants et des classes dans l'en-tête de l'e-mail.
30 septembre, 5 h 30 HAE
Gmail semble déployer progressivement des mises à jour de son moteur de rendu. Les clients Web Gmail prennent en charge les classes et les identifiants dans <head> sur tous les navigateurs (Chrome, Safari et Firefox) et les deux sont correctement référencés dans le code HTML.
Nous voyons également la prise en charge des requêtes multimédias sur les clients Web de Gmail :
Jusqu'à présent, cependant, ni les balises de style dans l'en-tête de l'e-mail ni les requêtes multimédias ne sont prises en charge par Inbox by Gmail ou l'application Gmail.
29 septembre, 23 h 55 HAE
C'est en train d'arriver ! Gmail a commencé à apporter des modifications à sa machine de rendu. Restez à l'écoute des mises à jour pendant que nous surveillons le déploiement.
Partagez l'actualité →
Ce que ces changements signifient pour les geeks des e-mails
Le 31 août 2016, Gmail a annoncé qu'il commencerait à prendre en charge l'affichage des propriétés CSS : aucune ; et la prise en charge de <style> et des requêtes multimédias.
Ceci n'est qu'une partie d'un effort global visant à étendre la prise en charge CSS dans Gmail et à donner aux concepteurs d'e-mails plus de contrôle sur la manière dont leurs messages sont rendus.
– Pierce Vollucci, chef de produit chez Google
Il s'agit d'une énorme nouvelle pour la communauté des e-mails, et cela aura des implications majeures sur la conception et le développement des e-mails.
GMAIL POUR SUPPORTER LES EMAILS RESPONSABLES ET <STYLE>
Historiquement, Gmail n'a pas pris en charge les classes ou les identifiants dans l'<head> d'un e-mail, ce qui a obligé les concepteurs d'e-mails à utiliser le CSS en ligne pour styliser leurs e-mails. Désormais, Gmail prendra en charge le CSS intégré avec des classes et des identifiants, ce qui élimine le besoin de CSS en ligne dans Gmail. Cela signifie également que Gmail prendra enfin en charge les requêtes multimédias et les e-mails réactifs.
En d'autres termes, le code suivant s'affichera désormais correctement dans Gmail :
<html> <head> <style> .colored { color: blue; } #body { font-size: 14px; } @media screen and (min-width: 500px) { .colored { color:red; } } </style> </head> <body> <div> <p>Hi Pierce,</p> <p class="colored"> This text is blue if the window width is below 500px and red otherwise. </p> <p>Jerry</p> </div> </body> </html>Vous pouvez afficher une liste complète des CSS pris en charge au bas de cet article ou dans la documentation officielle de Gmail. Voici une liste complète des prochaines prises en charge des requêtes multimédias :
Types pris en charge
- tous
- filtrer
Requêtes prises en charge
- min-largeur
- largeur maximale
- min-device-width
- max-device-width
- orientation
- résolution minimale
- max-résolution
Mots clés pris en charge
- et
- seul
CE QUE CELA SIGNIFIE POUR L'E-MAIL
Ces mises à jour marquent un tournant majeur dans le développement et le flux de travail des e-mails, permettant aux concepteurs et aux spécialistes du marketing de créer des campagnes d'e-mails plus accessibles sans avoir besoin d'intégrer CSS.
Impact sur le marché : les requêtes médias seront bientôt la norme
De nombreux e-mails reposent sur des requêtes multimédias pour affiner le contenu et la conception afin de créer une expérience plus utilisable sur une large gamme de tailles d'écran. Cependant, les requêtes média ne fonctionnent pas partout. Le manque de support le plus notable et le plus frustrant est historiquement venu de Gmail, qui est célèbre pour avoir supprimé le code du <head> ainsi que tous les styles et requêtes multimédias qu'il contient.
Grâce à la prise en charge par Gmail des requêtes multimédias, plus de 75 % des clients de messagerie prendront en charge la conception réactive . Nous espérons que cela deviendra la norme avec d'autres clients de messagerie comme Windows Phone.
Besoin réduit de structures de mise en page hacks comme Fab Four
Pour lutter contre le manque de prise en charge de Gmail pour les requêtes multimédias, les geeks des e-mails ont regardé haut et bas pour les solutions de contournement. Une de ces solutions de contournement est la technique Fab Four, qui implique la fonction CSS calc() et les trois propriétés width, min-width et max-width.
Concepteurs d'e-mails, il est temps de dire adieu à ces structures de mise en page compliquées. Mais gardez à l'esprit que vous avez toujours besoin de tables pour Outlook. (Nous n'avons pas encore créé de norme de courrier électronique… pour le moment).
Cependant, le développement hybride/spongieux a toujours sa place dans le développement de messagerie en tant que structure de base pour les clients problématiques comme Outlook.
Dites adieu à l'inline CSS
Les styles « Inlining » déplacent le CSS et les instructions de mise en forme associées du bloc de style dans le <head> de votre e-mail vers le <body> du HTML. Historiquement, si les styles n'étaient pas déplacés en ligne, le style dans le corps de votre e-mail ne s'affichait pas dans Gmail.
Avec ces mises à jour, l'inline CSS ne sera plus nécessaire. Les concepteurs d'e-mails peuvent désormais utiliser des styles intégrés placés dans l'<head> des documents HTML. Le CSS intégré sera pris en charge dans tous les principaux clients de messagerie.
Les e-mails deviendront plus accessibles
L'accessibilité par e-mail est essentielle au succès d'une campagne. Si un abonné ne peut pas lire et interagir avec votre e-mail, il n'a aucun moyen de prendre des mesures.
Avec la prise en charge CSS intégrée, les concepteurs d'e-mails peuvent séparer le style du contenu et utiliser un balisage sémantique et accessible pour leurs e-mails.
Alors que le texte de grande taille et les boutons tactiles contribuent à améliorer l'accessibilité, il en va de même pour la préparation de votre code HTML pour une utilisation avec un lecteur d'écran. Dans cet esprit, assurez un équilibre sain entre le texte et les images dans votre conception et adaptez le contenu écrit de votre e-mail pour transmettre le message principal.
Avec une prise en charge supplémentaire des paramètres de lecteur d'écran basés sur CSS, tels que le pitch, la plage de pitch, la ponctuation de la parole et le débit de parole, Gmail a permis aux spécialistes du marketing de rendre leurs e-mails encore plus accessibles.
La prise en charge de la typographie augmentera
Un autre changement majeur à venir avec ces mises à jour est la prise en charge supplémentaire des propriétés de police CSS. Par exemple, Gmail commencera à prendre en charge des attributs tels que le nombre de colonnes et l'écart de colonnes, ce qui permet la création de colonnes de texte sans tableaux. De plus, font-kerning et font-variant-caps permettront un style de police supplémentaire. Cependant, il ne semble pas que les polices Web soient prises en charge dans la prochaine version.
Un support supplémentaire pour l'arrière-plan est à venir
Gmail introduit une prise en charge supplémentaire des propriétés d'arrière-plan CSS telles que background-clip, background-position et, surtout, background-size. Avec la prise en charge de la taille d'arrière-plan, les e-mails peuvent avoir des images d'arrière-plan évolutives et réactives.
TESTEZ VOS E-MAILS DANS GMAIL
Quel sera l'impact de ces changements sur votre messagerie ? Utilisez Litmus pour prévisualiser instantanément votre e-mail dans Gmail et plus de 70 autres clients de messagerie. Notez que ces modifications ne sont pas encore en ligne, mais seront reflétées dans les aperçus instantanés Litmus dès que Gmail les publiera en direct.
Essayez Litmus gratuitement →
Documents officiels
Pour la première fois, un client de messagerie majeur a publié une documentation officielle de support CSS et HTML. Il s'agit d'une grande première dans l'industrie. Merci, Gmail !
Les propriétés CSS suivantes seront prises en charge dans Gmail et Inbox by Gmail :
- azimut
- Contexte
- mode de fusion d'arrière-plan
- fond-clip
- Couleur de l'arrière plan
- image de fond
- arrière-plan-origine
- position-arrière-plan
- Répétition du fond
- taille de l'arrière-plan
- frontière
- Bordure du bas
- border-bottom-color
- bordure-bas-gauche-rayon
- bordure-bas-droit-rayon
- border-bottom-style
- border-bottom-width
- effondrement de la frontière
- couleur de la bordure
- frontière-gauche
- bordure-gauche-couleur
- border-left-style
- border-left-width
- rayon-frontière
- frontière-droite
- bordure-droite-couleur
- border-right-style
- border-right-width
- espacement des frontières
- style de bordure
- bordure-haut
- border-top-color
- bordure-haut-gauche-rayon
- bordure-haut-droit-rayon
- border-top-style
- border-top-width
- largeur de la bordure
- dimensionnement de la boîte
- pause après
- pause avant
- effraction
- côté légende
- dégager
- Couleur
- nombre de colonnes
- remplissage de colonne
- espace-colonne
- règle-colonne
- couleur-règle-colonne
- colonne-règle-style
- colonne-règle-largeur
- colonne-envergure
- largeur de colonne
- Colonnes
- direction
- affichage
- élévation
- cellules-vides
- flotter
- Police de caractère
- famille de polices
- font-feature-settings
- crénage des polices
- taille de police
- ajuster la taille de la police
- étirement de la police
- le style de police
- font-synthèse
- police-variante
- font-variant-alternates
- police-variante-caps
- police-variante-est-asiatique
- police-variante-ligatures
- police-variant-numérique
- police-poids
- la taille
- orientation de l'image
- résolution de l'image
- isolation
- l'espacement des lettres
- hauteur de la ligne
- liste-style
- liste-style-position
- liste-style-type
- marge
- marge-bas
- marge-gauche
- marge-droite
- marge-haut
- hauteur maximum
- largeur maximale
- min-hauteur
- min-largeur
- mix-blend-mode
- ajustement à l'objet
- position-objet
- opacité
- contour
- contour-couleur
- contour-style
- contour-largeur
- débordement
- rembourrage
- rembourrage-bas
- remplissage-gauche
- rembourrage-droit
- rembourrage-dessus
- pause
- pause-après
- pause-avant
- terrain
- plage de hauteur
- devis
- richesse
- parlez
- parler-en-tête
- parler-chiffre
- parler-ponctuation
- débit de parole
- stress
- table-disposition
- aligner le texte
- text-combine-upwrite
- texte-décoration
- texte-décoration-couleur
- ligne de décoration de texte
- texte-decoration-sauter
- texte-decoration-style
- texte-accent
- texte-accent-couleur
- texte-accent-style
- retrait du texte
- orientation du texte
- débordement de texte
- transformation de texte
- texte-souligné-position
- unicode-bidi
- alignement vertical
- voix-famille
- largeur
- espacement des mots
- mode d'écriture
OBTENEZ LES DERNIÈRES LIVRAISONS DIRECTEMENT DANS VOTRE BOÎTE DE RÉCEPTION
Nous vous tiendrons au courant de tout changement supplémentaire dans le déploiement de Gmail et de la façon dont cela vous affectera. Abonnez-vous à notre newsletter hebdomadaire et recevez le dernier contenu pour les professionnels de la conception d'e-mails directement dans votre boîte de réception. Toutes les semaines.