L'intégration d'e-mails responsive
-
Upload
hteumeuleu -
Category
Technology
-
view
6.073 -
download
2
description
Transcript of L'intégration d'e-mails responsive
![Page 1: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/1.jpg)
Kiwi Party 2013
![Page 2: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/2.jpg)
Rémi ParmentierIntégrateur@HTeuMeuLeu
![Page 3: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/3.jpg)
![Page 4: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/4.jpg)
L’intégration d’e-mailsresponsive
L’année dernière, j’ai commencé à faire des intégrations d’e-mails responsive.
Voici certains trucs que j’ai appris au passage.
![Page 5: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/5.jpg)
L’intégration d’e-mailstout court
D’abord, commençons par faire un petit point sur l’intégration d’e-mails en général.
![Page 6: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/6.jpg)
Une page web Un e-mail
HTTPHTMLCSSIE6
Universel Personnel
Modifiable Fixe
Ouvert Propriétaire
L’intégration d’e-mails, ce n’est pas du web. Il y a quelques ressemblances et points communs. Mais un e-mail ne répond pas aux mêmes contraintes qu’une page web.
![Page 7: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/7.jpg)
•Outlook 2003, 2007, 2010, 2013
• Lotus Notes 6.5, 7, 8, 8.5
•Apple Mail OS X, iOS
• Thunderbird Windows, OS X, Linux
•Sparrow iOS
•Mailbox iOS
• ...
Logiciels mail
•Gmail
•Outlook.com
•Yahoo!
•Orange
•SFR
•Zimbra
• ...
Webmails
• Internet Explorer
• Firefox
•Chrome
•Safari
•Opera
• ...
Navigateurs
Appareils
•Ordinateurs
• Téléphones
• Tablettes
• Liseuses
•Consoles de jeux
• ... On va devoir tester sur un paquet de combinaison d’appareils et de logiciels.
![Page 8: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/8.jpg)
Heureusement pour ça il y a des outils de screenshots de rendus, comme par exemple Litmus...
http://www.litmus.com
![Page 9: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/9.jpg)
... GetInbox (un français qui teste aussi sur des webmails français) ...
http://www.getinbox.com
![Page 10: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/10.jpg)
... et mon préféré, Email On Acid.
http://emailonacid.com
![Page 11: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/11.jpg)
Avec une si grande variété de logiciels et d’appareils à supporter, ça donne un support de CSS très inégal. Par exemple, Gmail supprime toute balise <style> ou toute CSS externe.
http://www.campaignmonitor.com/css
![Page 12: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/12.jpg)
Du coup, l’intégration d’e-mails, c’est comme le tout premier intégrateur égyptien.
* badumtss *
![Page 13: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/13.jpg)
La plupart du temps, votre code ressemble donc à de la soupe de tableaux.
Et ça donne parfois lieu à des bugs assez particuliers...
![Page 14: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/14.jpg)
#01CODE À LA CON QUI DONNE ENVIE DE VOMIR
Sur Outlook 2007 et 2010, un <br /> est inséré tous les 1800px environ.
Découpez votre e-mailen plusieurs <table>.
À lire : http://www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010
![Page 15: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/15.jpg)
« Si tu vomis, vomis là dedans... »
http://www.youtube.com/watch?v=3WrfLY0Z7Yo
![Page 16: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/16.jpg)
3 types d’optimisations
pour mobileAvec l’essor du mobile et de l’optimisation de sites pour mobile, c’est dans la logique des choses que de proposer à ses utilisateurs des e-mails adaptés.
Voyons comment faire...
![Page 17: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/17.jpg)
Mobile friendly1.
La première méthode consiste à faire du «mobile friendly», ou comme certains l’appellent, du...
![Page 18: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/18.jpg)
Mobile aware
![Page 19: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/19.jpg)
Mobile aware
•Grands visuels
•Grandes tailles de texte
•Grandes zones cliquables
Pour être aware, il faut prévoir tout en grand.
![Page 20: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/20.jpg)
Voici un exemple chez Threadless. Sur iPhone, l’e-mail est simplement mis à l’échelle et reste lisible et utilisable.
Et la bonne nouvelle, c’est que...
![Page 21: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/21.jpg)
Rien à faire en intégration
Mobile aware
... il n’y a rien à faire en intégration ! Le mobile friendly, c’est avant tout un travail de design.
![Page 22: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/22.jpg)
Responsive2.
Maintenant voyons comment faire du «responsive» (mot un peu fourre-tout) dans un e-mail...
![Page 23: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/23.jpg)
Voici un exemple d’un tuto publié chez Net Magazine
http://www.netmagazine.com/tutorials/build-responsive-emails
![Page 24: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/24.jpg)
Dans le code, ça donne quelque chose comme ça.
Des td avec une classe, qu’on passe en display:block dans une media query.
Vous remarquerez qu’on utilise pas de point pour une classe mais un sélecteur d’attributs...
![Page 25: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/25.jpg)
#02CODE À LA CON QUI DONNE ENVIE DE VOMIR
Yahoo! Mail interprète toutes les règles CSS même dans une media query.
.mobileBlocktd[class="mobileBlock"]
![Page 26: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/26.jpg)
http://www.youtube.com/watch?v=SLXnBI4ykVs
![Page 27: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/27.jpg)
Responsivemais pas trop
Certains e-mails adoptent une méthode que j’appelle du «responsive mais pas trop».
![Page 28: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/28.jpg)
Ici, l’e-mail est totalement différent en version desktop et mobile.
![Page 29: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/29.jpg)
Ça signifie que dans le code aussi, on a deux intégrations totalement différentes, qu’on affiche ou masque avec des styles et media query.
C’est un peu bourrin comme technique, surtout si on s’y prend mal...
![Page 30: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/30.jpg)
En l’occurrence ici, l’e-mail était tronqué sur iOS car seul le début du mail (avec la version desktop masquée) était téléchargé.
Pour éviter ça...
![Page 31: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/31.jpg)
#03CODE À LA CON QUI DONNE ENVIE DE VOMIR
Sur iOS, le <head> doit contenir au moins 1000 caractères pour qu’un e-mail soit téléchargé totalement.
![Page 32: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/32.jpg)
http://www.youtube.com/watch?v=PN0XRkSyhwM
![Page 33: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/33.jpg)
xCette technique ne fonctionne pas sur Lotus Notes 6.5 et 7, ou sur Gmail sur Android 2 avec autre chose que des <img>.
Les deux versions seront alors affichées.
![Page 34: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/34.jpg)
xLa technique présentée auparavant ne fonctionne pas non plus sur les apps tierces sur iOS (comme Sparrow ou Mailbox).
![Page 35: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/35.jpg)
~Pour éviter ça, on peut utiliser des tableaux flottants. Ça marche bien sur iOS, mais ça peut causer des bugs étranges sur Outlook.
![Page 36: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/36.jpg)
#04CODE À LA CON QUI DONNE ENVIE DE VOMIR
Outlook 2007, 2010 et 2013 interprètent parfois mal les tableaux flottants.
Vos tableaux peuvent alors se retrouver les uns en dessous des autres.
![Page 37: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/37.jpg)
CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
Pour corriger ça, il y a une manipulation claire à suivre en 4 étapes...
![Page 38: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/38.jpg)
CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
1) Ajoutez un bgcolor sur chaque <td> de vos tableaux flottants.
![Page 39: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/39.jpg)
![Page 40: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/40.jpg)
CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
2) Ajoutez une bordure sur chaque tableau flottant.
![Page 41: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/41.jpg)
![Page 42: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/42.jpg)
CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
3) Ajustez la taille de vos tableaux flottants
![Page 43: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/43.jpg)
![Page 44: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/44.jpg)
CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
4) Ajoutez un paragraphe dans chaque premier td de vos tableaux flottants avec ces styles propriétaires.
![Page 45: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/45.jpg)
http://www.youtube.com/watch?v=4eYSpIz2FjU
![Page 46: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/46.jpg)
xCODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
Tout ça c’est bien, mais ça ne marche pas sur Gmail puisque Gmail ne supporte pas de balise <style>.
![Page 47: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/47.jpg)
Fluide3.
Du coup, on va faire des e-mails fluides.
![Page 48: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/48.jpg)
Ici un exemple chez Peepcode. La bannière principale et le corps du texte sont fluides, mais le logo reste à la même taille.
![Page 49: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/49.jpg)
Dans le code, il suffit de jouer avec des tailles en pourcentage et des min-width / max-width bien placés.
![Page 50: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/50.jpg)
responsiveaware fluide+ +
aware, responsive et fluide ne sont pas trois techniques distinctes, mais bien complémentaires.
Pour arriver à faire des e-mails adaptés pour mobile, vous devrez jongler entre les trois.
![Page 51: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/51.jpg)
et après ?
On n’est pas à l’abri de changement de la part des webmails et logiciels mails. Alors il est important de faire de la veille pour l’intégration d’e-mails.
![Page 52: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/52.jpg)
Par exemple, dans iOS7, la largeur d’affichage d’un e-mail est réduite.
http://www.campaignmonitor.com/blog/post/4011/a-first-look-at-ios-7-mail-for-email-designers
![Page 53: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/53.jpg)
Gmail introduit des «Quick actions» pour faciliter les interactions de vos e-mails.
https://litmus.com/blog/quick-actions-allow-gmail-users-to-convert-before-opening
![Page 54: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/54.jpg)
amusez-vous
L’intégration d’e-mails est souvent perçue comme une tâche pénible et ingrate. Mais c’est en partie de notre faute à nous intégrateurs.
Rendons ça plus amusant.
![Page 55: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/55.jpg)
Par exemple en travaillant sur l’affichage de nos e-mails sans les images (qui sont bloquées sur pas mal de logiciels et webmails).
Ici un exemple chez Nintendo pour le jeu Lego City Undercover...
![Page 56: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/56.jpg)
... et ici chez Sony pour un jeu Transformers.
![Page 57: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/57.jpg)
À défaut de rendre ça vraiment amusant, essayons au moins de rendre ça moins pénible. Dans ma boîte on développe nos propres outils pour gagner du temps et automatiser certaines tâches répétitives d’intégration d’e-mails.
![Page 58: L'intégration d'e-mails responsive](https://reader034.fdocuments.net/reader034/viewer/2022052600/557dc8f3d8b42a93718b46d6/html5/thumbnails/58.jpg)
Soyez content de votre travail.
Voire même hyper content.