Email responsive

Bonjour à tous,

En ce moment je m'attaque à quelque chose que je qualifierais de laborieux : le responsive email !

J'ai un problème et j'avoue que je commence à ne plus rien comprendre. Mon soucis est que sur les appli Gmail et mail (celle d'origine) sur mon iphone 4s ne prennent pas en compte les media queries.

Regarder par vous même :
(j'ai repris exprès le l'email présenté en exemple sur l'article de Stéphanie W. )
http://www.alsacreations.com/tuto/lire/1533-un-e-mail-en-html-responsive-multi-clients.html




On remarque bien que le bloc avec le chat ne bouge pas d'un pouce.

Alors que cela devrait donner ça : ( image prise quand le navigateur est redimensionné )



Faut-il en conclure que un email responsive sur ces appli est impossible ? Du code manquant ?

Éclairez moi svp, j'avoue être un peu dépassé là.
Modifié par Szayell (27 Sep 2013 - 16:13)

Bonjour,

À priori ces deux clients mails supportent les media-queries, mais c'est effectivement un chantier laborieux !

La meilleure ressource que je connaisse à ce sujet est campaign monitor, qui documente régulièrement et précisément ce domaine. Si je ne me trompe pas, ils proposent même des templates pré-construits (l'équivalent de knacss ou röcssti pour les emails).

Bon courage !!

Bonjour,

Quelques bonnes ressources également du côté de MailChimp :
http://templates.mailchimp.com/
Ne pas hésiter à suivre les liens en fin d'article et dans les commentaires, penser à valider votre code et à visualiser le rendu dans l'un des nombreux outils spécialement conçu pour cela.

Bon courage

Merci pour ces réponses, je vais me pencher dessus.

"À priori ces deux clients mails supportent les media-queries, mais c'est effectivement un chantier laborieux !"

Je dirais plutôt à priori ils ne les supportent pas ou alors dans une autre syntaxe ?

N'hésitez pas si vous avez d'autres éléments de réponses.

Bonjour,

Tu peux voir ici les clients mails qui supportent les mediaqueries : http://www.campaignmonitor.com/guides/mobile/#mobile-support

L'appli gmail ne les supporte pas. En revanche, l'appli mail native sur iPhone oui, j'ai testé l'exemple dont tu parles sur un iPhone 4 avec iO6.
Modifié par NeOxY (01 Oct 2013 - 14:43)

C'est à n'y rien comprendre, j'ai testé plusieurs template déjà fait par des sites ( dont ceux cité plus haut ) ainsi que des créas perso.

AUCUN ne reconnait les média-queries, même l'application native mail de apple ( testé sous ios6 et 7 sur iphone 4 et 4s).

Est ce que cela pourrait venir du fait que j'utilise IE pour envoyer la page en mail ? ( fichier > envoyer - > page par courrier électronique ) puis qu'il me l'ouvre dans outlook ?

Tous les styles ne serait pas retranscrit ?

ps: D'ailleurs sous outlook, j'ai quelques problèmes pour faire flotter mes tableaux cote à cote, align="left" et float:left ne marche

Je vais finir par craquer... ^^

Verdict : Pas moyen de faire marcher les media queries sur les appli natif mail sur mobile. Elles ne sont pas reconnus ( bien que ca marche parfaitement sous navigateur redimensionné)
Ou alors il y a une astuce caché...

Merci quand même.
Modifié par Szayell (21 Oct 2013 - 16:44)

Bonjour,

Les Media Queries ne sont pas reconnus par l'ensemble des terminaux du marché : du côté des iPhones, les messageries natives reconnaissent les Media Queries, mais du côté Androïd, c'est un peu plus compliqué et ça dépendra du constructeur et de la version d'Androïd.

J'espère vous avoir quelque peu éclairé

Hello, l'application native d'Android, E-mail, supporte bien les media queries.

Concernant les screenshots, c'est plutôt curieux, car j'avais bien testé d'envoyer ce template sur mes terminaux et tout fonctionnait correctement. J'ai comme l'impression que les balises meta ont été mangées en cours de route...

Salut,
je suis dans le même cas que toi pour le responsive sur l'appli native mail des iphone

Voila ce que j'ai trouvé, a tester :
http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

Mais je ne comprends pas bien la mise en place. Si tu y arrive et comprends fais moi signe.

Je confirme que sur Gmail c'est mort (et dit dans l'article il me semble). Par contre ça m'étonne pour iPhone je me souviens d'avoir testé sur le téléphone d'un collègue et ça passait nickel.
Bon, depuis il y a eut iOS7 ça a peut-être changé. C'est pas très pratique tous les sites qui listent le support disent qu'elles sont supportées sur iOS mais donnent pas la version : https://litmus.com/help/email-clients/media-query-support/ http://stylecampaign.com/blog/2012/10/responsive-email-support/ .
Y aurait-il moyen que tu crées une page "juste" avec des media queries qui changent pas exemple de couleur, pour tester si elles sont supportées ou pas ?
Un truc bidon genre

body{
background:pink
}

@media (min-whidth: 10px){
body{
background:red
}
}