Communiqué de presse,
actualité et interview...

Depuis quelque temps, Google fait de son mieux pour améliorer l’expérience de l’email. Ils ont introduit les onglets, la boîte de réception prioritaire, les prévisualisations d’images… et plus récemment ils ont sorti la messagerie Inbox. Google innove et améliore l’expérience utilisateur.

Cependant, nous nous étonnons que Google n’est pas encore intégré la lecture des Media Queries. Cette spécification CSS permet l’optimisation automatique du contenu de l’email pour une lecture sur mobile. Les Media Queries permettent de :

• Mettre en page simplement le contenu en une seule colonne
• Adapter la taille des textes et des images par rapport à la largeur du mobile
• Afficher un contenu spécifique et différent sur mobile
• …

Les utilisateurs de ces applications savent-ils ce qu’ils manquent ?

Lorsque l’on recherche des avis d’utilisateurs sur Internet, on trouve des utilisateurs satisfaits de l’application et des fonctionnalités mises en place : interface ergonomique, flux d’actualités, classification des emails, aperçu du contenu…
Par contre, aucune remarque sur la lecture des emails sur mobile. Il est à se demander si les utilisateurs lisent le contenu de leurs emails sur leur mobile avec cette application.

Comment peut-on contourner cela ?

Les Media Queries sont très utilisés pour optimiser le contenu d’un email. Si la messagerie ne les supporte pas, il vous est possible de créer un email fluide.

L’email fluide est une mise en page qui s’adapte aux petits et grands écrans. Le contenu est automatiquement redimensionné selon la largeur du support de lecture sans modifier la structure de la page. Pour appliquer cette technique, votre email doit être déjà composé en une seule colonne.

Pour commencer, vous définissez une largeur fixe du contenu sur ordinateur, elle dépasse rarement les 600 à 700 pixels pour que le contenu soit lisible facilement dans toutes les messageries. Pour que l’email s’adapte aux formats et résolutions inférieurs à 600 pixels, il est conseillé de définir les dimensions de chaque élément en pourcentage.

Le code à utiliser :

style = “width : 80%; max-width : 600px; height : auto;”

width : la largeur de l’image en pourcentage pour les petits écrans
max-width : la largeur maximum de l’image pour les grands écrans et ordinateurs
height : la hauteur en automatique pour garder la proportion de l’image

Quand Google prévoit-il d’intégrer la spécificité CSS Media Query ?

“We are interested in supporting media queries but we need to make sure we do it right. Our changes last year to show images by default in Gmail last year were similar: there was a ton of complicated security work that had to happen behind the scenes before we could make this seemingly simple feature safe for the whole world” … “ – Jason Cornwall, Designer

“Inbox and Gmail use the same HTML sanitizer and media queries etc. aren’t supported. This is one of our top feature requests from developers though and we’re looking into adding it.” – Taylor, Software Engineer

www.sarbacane.com