6. Une page web Un e-mail
HTTP
HTML
CSS
IE6
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.
7. •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.
8. Heureusement pour ça il y
a des outils de screenshots
de rendus, comme par
exemple Litmus...
http://www.litmus.com
9. ... GetInbox (un français
qui teste aussi sur des
webmails français) ...
http://www.getinbox.com
10. ... et mon préféré, Email On
Acid.
http://emailonacid.com
11. 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
12. Du coup, l’intégration d’e-mails,
c’est comme le tout premier
intégrateur égyptien.
* badumtss *
13. La plupart du temps, votre code
ressemble donc à de la soupe de
tableaux.
Et ça donne parfois lieu à des bugs
assez particuliers...
14. #01
CODE À 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-mail
en plusieurs <table>.
À lire : http://www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010
15. « Si tu vomis, vomis là dedans... »
http://www.youtube.com/
watch?v=3WrfLY0Z7Yo
16. 3 types
d’optimisations
pour mobile
Avec 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...
20. 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...
21. 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.
23. Voici un exemple d’un tuto
publié chez Net Magazine
http://
www.netmagazine.com/
tutorials/build-
responsive-emails
24. 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...
25. #02
CODE À LA CON QUI DONNE ENVIE DE VOMIR
Yahoo! Mail interprète
toutes les règles CSS même
dans une media query.
.mobileBlock
td[class="mobileBlock"]
28. Ici, l’e-mail est totalement différent
en version desktop et mobile.
29. Ç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...
30. 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...
31. #03
CODE À 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.
33. 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.
34. x La technique présentée
auparavant ne
fonctionne pas non plus
sur les apps tierces sur
iOS (comme Sparrow ou
Mailbox).
35. ~Pour éviter ça, on peut utiliser
des tableaux flottants. Ça
marche bien sur iOS, mais ça
peut causer des bugs étranges
sur Outlook.
36. #04
CODE À 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.
37. CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
Pour corriger ça, il y a une
manipulation claire à suivre en
4 étapes...
38. CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
1) Ajoutez un bgcolor sur chaque
<td> de vos tableaux flottants.
40. CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
2) Ajoutez une bordure sur
chaque tableau flottant.
42. CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
3) Ajustez la taille de vos
tableaux flottants
44. 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.
48. Ici un exemple chez Peepcode. La
bannière principale et le corps du
texte sont fluides, mais le logo reste
à la même taille.
49. Dans le code, il suffit de jouer avec
des tailles en pourcentage et des
min-width / max-width bien placés.
50. 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.
51. 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.
52. 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
53. 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
54. 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.
55. 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...
56. ... et ici chez Sony pour un jeu
Transformers.
57. À 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.