Emails Responsive & viewport: y’a du nouveau !

Emails Responsive: viewport ou pas viewport

Il y a a pas si longtemps, je statuais pour l’inutilité, voir les risques, de l’utilisation du meta viewport dans l’intégration d’emails responsive… mais comme toujours avec le web, ce qui est vrai ne l’est jamais très longtemps !

Les emails ne dérogent pas à la règle, et il y a bien du nouveau avec la sortie de WindowsPhone 8.1. Alors oui, je vois le troll accourir à grandes pattes sur la présence … disons marginale que représente cette plateforme dans les stats d’ouverture. Certes. Mais vu le pointt de non retour que semble avoir touché Blackberry et le rail a peine retentissant de l’AmazonPhone (le quoi ?!), il semble bien que WindowsPhone soit le seul à encore pouvoir prétendre à le troisième place des OS mobiles “du futur”.

“Mais pourquoi diable s’intéresser à WindowsPhone et au viewport vu que de toute façon il ne gère pas le responsive ?”

Très bonne question Jean-Mich’, et voici une réponse toute trouvée: parce qu’il peut le gérer !

Grande découverte, il suffit d’ajouter un tag X-UA Compatible (oui oui ce vieux truc sorti avec IE8) pour que la magie opère.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Et oui, c’est aussi simple que ça. Bien qu’IE11 soit le navigateur par défaut, c’est IE7 qui est utilisé par défaut par le client email de WindowsPhone. Aucune idée du pourquoi. Mais en forçant l’application mail a utiliser la version la plus récente d’IE disponible via le X-UA, c’est bien IE11 qui est utilisé, et la magie opère. Enfin presque, parce qu’avec leurs gigas écrans, les WindowsPhone ont oublié de forcer l’affichage des emails au device-width (comme le fait l’iPhone et la plupart des Android). Résultat, sans meta viewport, le mail s’affiche comme une page web, soit à la taille réelle des pixels, et non de l’écran. Sur mon Lumia920, c’est du 720px de large.

Et comme il y a encore moins de Blackberry 5 ouvrant les emails que les WindowsPhone 8.1, entre la peste et le choléra, je vous recommande donc l’inverse de mon précédent article, soit de ne pas oublier d’ajouter ce meta viewport dans vos emails.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

EDIT du 8 octobre (bravo à @HTeumeuleu pour y avoir pensé)

Pour conjuguer le meilleur des deux mondes, soit faire fonctionner le responsive sous WindowsPhone sans utiliser le meta viewport, on peut tout simplement utiliser la version CSS de viewport, qui se veut désormais la norme officielle (le tag viewport ayant été défini par Apple à la sortie de l’iPhone en 2007, allant à l’encontre total de la séparation contenu/contenant du web).

Pour définir le viewport, il suffit de commencer sa feuille de style avec la définition du viewport:

@viewport { width: 320px; }

Simple ! Et oui… mais non. C’était sans compter sur les vendor prefixes 🙂

@-ms-viewport { width: device-width; }
@viewport { width: device-width; }

Wow ! Bah oui… mais non, device-width n’est pas pris en compte, ni extend-to-zoom :(. Il va donc falloir en rester à un viewport fixe pour le moment, et laisser l’écran “zoomer” la version 320px dans son viewport de 320px, 360px ou 480px.

En faisant le test sur un email existant, ça fonctionne plutôt pas mal ! (sauf image non @2x, d’où le rendu flou/pas propre)

En boilerplate, ça donne quelque chose comme:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
@-ms-viewport { zoom: 1.0; width: 320px; }
@viewport { zoom: 1.0; width: 320px; }

</style>
</head>

Posted in Uncategorized

Leave a Reply

Your email address will not be published. Required fields are marked *