Le support mediaquery pour l’emailing

newsletter

Actuellement, nous sommes obligés de nous confronter à des contraintes responsives non seulement sur l’intégration html mais aussi sur l’emailing.

Pour ceux qui n’ont jamais utilisé le media query auparavant, le media query vous permet de contrôler la mise en page de votre e-mail par rapport au support mobile que vous utilisez.
Ils peuvent être soit liés ou intégrés directement dans le style de vos blocs.

Voici un exemple:

Les requêtes mediaquery se basent sur les instructions conditionnelles booléennes en fonction du type, de la résolution et / ou la taille de l’appareil.

Par exemple, screen et print sont des requêtes de types de médias, tandis que ‘device-width’, ‘min-device-width’ et ‘max-device-width’ sont chacun des requêtes de propriétés qui contrôlent la largeur ou la surface du support cible ( ou device ).

Quelles sont les clients webmail qui supportent le mediaquery ?

Voici dans le tableau ci-dessous le résultat de nos tests :

Client webmail Native Non native min-device-width max-device-width Types de support

Android Mail

oui
(bug)

oui
(bug)

Ne supporte pas tout le temps
(resultat alterner, des fois ca marche, des fois ca marche pas)

Seulement max-device-width 480px and
device-width 480px sont supportés indefiniment

tout,écran

Android Gmail

non

non




iPhone Mail

oui

oui

>=320px

<= 480px

tout,écran

iPhone Gmail

non

non

     

iPad Mail

oui

oui

oui quand la valeur de min-device width >= 768

oui quand la valeur est <= 1024

tout,écran

iPad Gmail

non

non

     

Blackberry 8000

non

non

     

Conclusion

Ce qu’on peut dire pour Gmail que techniquement la prise en charge est quasi nulle vu qu’il ne prend pas en charge les styles incorporés sur les blocs et dans sa suite logique ne prend pas aussi en charge les mediaquery contrairement à yahoo qui s’adapte correctement sur les media query.

Cependant, les applications de messagerie natif iPhone et iPad montrent un soutien fort et cohérent vu qu’ils remplissent les conditions énoncées ci-dessus.

Malheureusement, notre test a prouvé que l’application de messagerie natif Android bug sur plusieurs points.
Au début, il semblait que les requêtes des médias sont bien prise en charge mais à la deuxième tentative poufff plus rien ne s’affiche correctement.

Au moment où nous publions ce billet ( Juillet 2015) et après réflexion en concertation avec plusieurs développeurs front end tout en sachant qu’il n’est pas dans notre nature d’abandonner,
on est arrivé à la conclusion que les requêtes mediaquery sont sûrs à utiliser seulement pour l’optimisation sur l’iPad ou iPhone et dans certains cas sur les applications natives et pour les autres la compatibilité ne sera pas assurés, à vous de voir.

Répondre