1485 sujets

Web Mobile et responsive web design

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

upload/50930-photo1.jpg
upload/50930-photo2.jpg

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é )

upload/50930-test.jpg

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à. Smiley ohwell
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 Smiley cligne
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.
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 Smiley fache

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 Smiley ohwell ( bien que ca marche parfaitement sous navigateur redimensionné)
Ou alors il y a une astuce caché...

Merci quand même. Smiley cligne
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é Smiley smile
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...
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
}
}
Sujet clos
Aller à