Emails Responsive : viewport ou pas viewport?

Depuis bientôt un an, les emails, et donc les newsletters, sont plus souvent ouverts depuis une tablette ou un smartphone que depuis un ordinateur de bureau. Alors oui, cela varie selon l’annonceur ou la segmentation mais globalement, c’est le cas. Côté intégration HTML, on me pose (très très) souvent la même question: viewport ou pas viewport ?!

ATTENTION, IL Y A DU NOUVEAU !!

Pourquoi cette question ?

Côté web responsive, la question ne se pose pas: viewport ! C’est d’ailleurs la seule et unique façon de faire qu’un site responsive se comporte correctement.

Mais comme c’est plus ou moins le point de départ de tout site web responsive, les intégrateurs web partent souvent du fait que pour un email responsive, il faut évidement partir de la même base. Et puis y’a ceux qui savent, et donc ne l’utilise surtout pas.

Et donc depuis 2 ans que je crée des emails responsive pour des clients ou forme des intégrateurs d’agences web ou chez l’annonceur, mon discours est le même: jamais de viewport !

Alors pourquoi ce poser la question ?

En gros, partez du fait que de toute façon, dans la majorité des cas, il ne sert à rien car il sera tout bêtement ignoré. Testez le vous même en plaçant le fameux “user-scalable=no”, l’utilisateur peut zoomer comme si de rien. Et bizarrement, bien qu’il n’y est pas de viewport, la magie des choses (aka une raison que j’ignore) fait que tout fonctionne comme si de rien n’était. En gros un peu comme si il y avait déjà un viewport défini par défaut dans les clients de messagerie, et que celui que l’on indique est ignoré.

Seulement évidemment, quand tout marche bien, y’a toujours un trouble fête pour venir nous pourrir la vie avec ses softs moisis. Et quand on parle softs moisis sur smartphone, Samsung & Android c’est quand même globalement le top du top… et évidemment ça n’a pas loupé, voila un bon gros bug bien naze sur Galaxy S4: pas de viewport par défaut. Ce qui évidemment pour résultat d’avoir un email ridicule qui réagit à une media-query en 1920px de large (bah oui c’est un DPI 3x, sinon ça serait pas drôle).

Alors autant y’a 2 ans les Blackberry 5 y’en avait encore pas mal, autant mi 2014 ça se fait un peu plus rare. Blackberry a fait un très long chemin depuis et son dernier OS10 est une pure tuerie qui endort tout le monde niveau web et HTML5 (oui oui iOS7 & Android 4.4 inclus, et de loin). Certes, 3 ans trop tard, et donc les Blackberry ça court plus vraiment les rues. Vu que ça ne change pas grand chose pour les autres, il était temps de se refaire un bon gros test-drive viewport/pas viewport.

Le test

J’ai donc utilisé 3 fois le même email, et simplement ajouter/enlever la déclaration de viewport. Le premier sans meta viewport, le second avec le meta viewport width=device-width, initial-scale=1, user-scalable=no, et le troisième sans meta viewport mais avec la déclaration CSS @viewport { width:device-width; zoom:1; }. Pour une explication plus en détails sur les viewport via la balise méta ou les CSS, je vous conseille cette petite lecture.

Et voici donc les résultats

Conclusion

Globalement, ça change rien à part sur WindowsPhone 8.1 et la Galaxy Tab. Regardez dans vos stats mais de mon côté, ce sont deux beaux fantômes totalement inexistants. Comme pour les autres ça ne change rien (aucune différence non plus sur les applications Gmail ou Yahoo sur mobile et tablettes ni les webmail). Côté WindowsPhone, cela ne change quelque chose que pour WindowsPhone 8.1 (et +), les versions précédentes utilisent le moteur de rendu d’IE7 (!!) dans l’application Mail donc pas de viewport ni media-query (même si IE10 est le navigateur installé comme sur WP 8.0 par ex). Et non, même pour WP 8.1, @-ms-viewport ça marche évidemment pas non plus…

Si vous avez d’autres périphériques a tester, contactez-moi et je vous balancerais les 3 emails de test mais globalement, vu que ça ne change rien pour personne, Galaxy S4 Advanced inclus, je vous dirais bien de ne toujours pas l’utiliser pour éviter l’écran blanc des malheureux possesseurs de Blackberry 5 (dans certaines entreprises, y’en a encore) et le dézoom complètement improbable de la Tab (Samsung strikes again).

NDLR: l’image est en background CSS sans être également présente dans le DOM, et donc sur BB et WP ça marche pas alors que même sous Outlook 2007 ou Lotus oui (!!). D’où le fond bleu…

Posted in Uncategorized

Comments are closed.