Slide 1
Slide 1 text
PARIS WEB
16 OCTOBRE 2014
Slide 2
Slide 2 text
RÉMI PARMENTIER
INTÉGRATEUR
Il m’arrive d’intégrer des
e-mails. Et comme
beaucoup de mes
confrères et consoeurs,
j’ai envie de m’enfuir.
L’intégration d’e-mails ça
ressemble un peu à ça.
Slide 3
Slide 3 text
Un e-mail
à intégrer
On a un méchant e-mail à
intégrer.
Slide 4
Slide 4 text
un intégrateur
Un intégrateur qui s’enfuit
en courant.
Slide 5
Slide 5 text
un chef
de projet
Et un chef de projet qui
prie pour que tout se passe
bien.
Slide 6
Slide 6 text
Bienvenue dans le monde
de l’intégration d’e-mails.
J’ai voulu en parler parce
que c’est un monde qui va
mal. Et pourtant on
trouve des e-mails dans
quasiment chaque projet
web.
Slide 7
Slide 7 text
Que ce soit un e-mail
commercial mettant en
avant les dernières
nouveautés de votre
boutique.
Slide 8
Slide 8 text
Un e-mail de
confirmation de
commande.
Slide 9
Slide 9 text
Une lettre d’information
envoyée à vos abonnés
tous les mois.
Slide 10
Slide 10 text
Ou un e-mail de mot de
passe oublié pour accéder
à un compte en ligne ou à
une administration de
site.
Slide 11
Slide 11 text
Et surtout,
personnellement, ÇA
M’ÉNERVE de recevoir
des e-mails pas
consultables tant que les
images ne sont pas
chargées.
Slide 12
Slide 12 text
ÇA M’ÉNERVE de recevoir
des e-mails du
gouvernement Français
qui ressemblent plus à
des spams nigériens.
Slide 13
Slide 13 text
ÇA M’ÉNERVE de recevoir
des e-mails qui parlent de
qualité web et qui ne sont
pas agréables à lire sur
mobile.
Slide 14
Slide 14 text
comment sortir
de la préhistoire
Voici donc quelques
réflexions personnelles
sur comment sortir
l’intégration d’e-mails de
la préhistoire.
Slide 15
Slide 15 text
À la base, l’intégration
d’e-mails n’est pas si
différente que sur le web.
On va devoir travailler
pour différents types
d’appareils et différents
navigateurs.
Slide 16
Slide 16 text
Mais en plus, on va
devoir travailler pour
différents webmails et
applications mail. Ça rend
les tests encore plus
compliqués. D’autant que
certaines applications
ont différentes versions…
Slide 17
Slide 17 text
Par exemple, Outlook
2003 utilise le moteur de
rendu d’IE. Mais d’IE
présent lors de
l’installation d’Outlook.
Si vous installez Outlook
2003 avec IE6 présent,
puis que vous mettez à
jour IE6 vers IE8, Outlook
2003 sera toujours
coincé sur le moteur d’IE6.
Slide 18
Slide 18 text
Mets ta tête entre les genoux.
Slide 19
Slide 19 text
Heureusement il y a des
outils en ligne pour
faciliter tout ça. Par
exemple Litmus.
http:/
/www.litmus.com
Slide 20
Slide 20 text
GetInbox (un service
français avec des tests
sur les webmails
français).
http:/
/www.getinbox.com
Slide 21
Slide 21 text
Ou Email on Acid.
http:/
/www.emailonacid.com
Slide 22
Slide 22 text
En faisant un test, on
obtient une palette de
captures d’écran sur
différents webmails,
navigateurs, appareils,
applications, …
Slide 23
Slide 23 text
TOUT LE MONDE
FAIT
N’IMPORTE
QUOI
Mais quelque chose qu’il
faut bien avoir en tête
dans l’intégration d’e-
mails, c’est que…
Slide 24
Slide 24 text
CERTAINS CLIENTS
ONT DES
CONTRAINTES DATÉES.
Par exemple…
Slide 25
Slide 25 text
pas d’images de fond !
pas de balises h1 !
pas de styles ! On m’impose parfois ce
type de contrainte. Mais
c’est totalement désuet
et faux aujourd’hui.
En particulier le dernier
point.
Slide 26
Slide 26 text
ON PEUT UTILISER
CSS DANS UN E-MAIL…
Slide 27
Slide 27 text
Campaign Monitor maintient depuis
plusieurs années un guide de ce qui
marche ou ne marche pas en CSS selon
les applications et webmails.
http:/
/www.campaignmonitor.com/css
Slide 28
Slide 28 text
ON PEUT UTILISER
CSS DANS UN E-MAIL…
Donc on peut utiliser CSS
directement en ligne sur
un élément HTML. (Ça
marche bien sur Gmail par
exemple.)
Slide 29
Slide 29 text
ON PEUT UTILISER
CSS DANS UN E-MAIL…
h2 {
color:#f60;
font:1em sans-‐serif;
}
Ou alors dans une balise
dans le <head> d’un
e-mail. Ça marche bien sur
les autres webmails.
Slide 30
Slide 30 text
ON PEUT UTILISER
CSS DANS UN E-MAIL…
Ou avec une balise .
Ça marche bien sur
certaines applications
mail.
Slide 31
Slide 31 text
CSS DANS UN E-MAIL, ÇA DÉPEND…
Mais comme souvent en
intégration, CSS dans un
e-mail, « ça dépend ».
Slide 32
Slide 32 text
CSS DANS UN E-MAIL, ÇA DÉPEND…
Du moteur
de rendu.
Si vous utilisez des
propriétés CSS3 mais que
vous testez sur le moteur
de rendu d’IE6, vos effets
ne seront pas pris en
compte.
Slide 33
Slide 33 text
CSS DANS UN E-MAIL, ÇA DÉPEND…
Des balises.
Mais ça dépend aussi
parfois des balises sur
lesquelles vous utilisez des
propriétés CSS.
Slide 34
Slide 34 text
Par exemple, Outlook
2007 utilise le moteur de
rendu de Word. C’est
surement bien pour écrire
un e-mail, mais c’est
horrible pour du rendu
HTML.
Slide 35
Slide 35 text
OUTLOOK 2007/2010/2013
SUPPORT DE CSS DANS
CORE
,
color
font
text-align
background-color
Outlook 2007 a trois
niveaux de support de CSS
correspondant à certains
éléments HTML et
certaines propriétés CSS.
Le premier niveau, CORE, ne
concerne que les balises
ou , sur
lesquelles on peut
uniquement utiliser
certaines propriétés comme
color, font, …
Slide 36
Slide 36 text
OUTLOOK 2007/2010/2013
SUPPORT DE CSS DANS
CORE COREEXTENDED
,
color
font
text-align
background-color
,
text-indent margin Le deuxième niveau, COREEXTENDED, concerne les balises
et
, sur lesquelles on peut utiliser les propriétés text-indent et margin, en plus des propriétés du niveau CORE.
Slide 37
Slide 37 text
FULL
OUTLOOK 2007/2010/2013
SUPPORT DE CSS DANS
CORE COREEXTENDED
,
color
font
text-align
background-color
, ,
text-indent margin
, ,, , …
width
height
padding
border-left
Le dernier niveau, FULL,
concerne les autres balises
supportées sur lesquelles on
peut utiliser les propriétés
width, height, …, en plus des
propriétés des autres
niveaux.
Slide 38
Slide 38 text
FULL
OUTLOOK 2007/2010/2013
SUPPORT DE CSS DANS
CORE COREEXTENDED
,
color
font
text-align
background-color
, ,
text-indent margin
, ,, , …
width
height
padding
border-left
Ça signifie que sur Outlook
2007
/2010/2013, on
peut utiliser la propriété
padding sur un , mais
pas sur un . Ce qui
nous pousse à
principalement utiliser
des tableaux.
. Ce qui
nous pousse à
principalement utiliser
des tableaux.
Slide 39
Slide 39 text
- Je hais les ordinateurs.
- C’est réciproque.
Slide 40
Slide 40 text
CSS DANS UN E-MAIL, ÇA DÉPEND…
Des webmails.
Slide 41
Slide 41 text
CERTAINS WEBMAILS
ONT DES STYLES
TROP GÉNÉRIQUES.
Slide 42
Slide 42 text
Balise
Par exemple, sur le
webmail mobile
d’Outlook.com, si j’utilise
une balise
Par exemple, sur le
webmail mobile
d’Outlook.com, si j’utilise
une balise sans aucun
style, je vois qu’elle hérite
déjà de certains styles.
Slide 43
Slide 43 text
Balise
Si j’inspecte le code, je vois
qu’effectivement, il y a des
règles génériques sur la
balise
Si j’inspecte le code, je vois
qu’effectivement, il y a des
règles génériques sur la
balise avec des
propriétés background-
color, border-bottom.
Slide 44
Slide 44 text
Bonjour Paris Web
Ça signifie que si je veux utiliser une balise, il faudra à chaque fois que je surcharge ces propriétés. En étant habitué à faire du web, vous aurez tendance à regarder le code d’un e- mail et à vous dire…
Slide 45
Slide 45 text
C’est vraiment un gros tas de merde.
Slide 46
Slide 46 text
CERTAINS WEBMAILS
PRÉFIXENT LES CSS.
Le préfixage des styles est
plutôt une bonne idée de la
part des webmails pour
éviter qu’un intégrateur
mal intentionné ne vienne
surcharger des styles
propres au webmail.
Slide 47
Slide 47 text
C’est ce que font les
webmails français comme
ceux d’Orange, SFR, La
Poste, ou Voila, qui
utilisent tous le même
moteur de webmail et de
préfixage de styles.
Slide 48
Slide 48 text
.box {
width:600px;
}
Si on prend une règle CSS
basique comme celle-ci…
Slide 49
Slide 49 text
#message .box {
width:600px;
}
… elle sera alors préfixée
comme ça. L’identifiant
«message» se trouve alors
plus haut dans le code
HTML. Tout fonctionne
correctement.
Slide 50
Slide 50 text
.box {
width:600px;
}
@media only screen and (max-‐width:600px) {
.box {
width:auto;
}
.box-‐title {
font-‐size:1.25em;
}
}
Ça se complique avec des
media queries.
Slide 51
Slide 51 text
#message .box {
width:600px;
}
@media only screen and (max-‐width:600px) {
.box {
width:auto;
}
#message .box-‐title {
font-‐size:1.25em;
}
}
Ici les règles sont bien
préfixées, SAUF la première
règle à l’intérieur d’une
media query.
Slide 52
Slide 52 text
#message .box {
width:600px;
}
@media only screen and (max-‐width:600px) {
.box {
width:auto;
}
#message .box-‐title {
font-‐size:1.25em;
}
}
+ spécifique
Pas préfixé
Mais du coup ça signifie la
première règle est plus
spécifique (id + classe >
classe). Du coup, les
propriétés surchargées
dans la media query ne
seront pas prises en
compte.
Slide 53
Slide 53 text
#message .box {
width:600px;
}
@media only screen and (max-‐width:600px) {
.box {
width:auto !important;
}
#message .box-‐title {
font-‐size:1.25em;
}
}
+ spécifique
Pour éviter ça, on doit
sortir le bazooka CSS :
!important.
Slide 54
Slide 54 text
La version mobile du
webmail de La Poste préfixe
aussi les règles CSS, mais
avec quelques bugs
supplémentaires.
Slide 55
Slide 55 text
.box {
width:600px;
}
@media only screen and (max-‐width:600px) {
.box {
width:auto;
}
.box-‐title {
font-‐size:1.25em;
}
}
Si on reprend le même
exemple…
Slide 56
Slide 56 text
.wrapper_pw161014 .box {
width:600px;
}
@media only screen and (max-‐width:600px) {
.box {
width:auto;
}
.wrapper_pw161014 .box-‐title {
font-‐size:1.25em;
}
Les règles sont bien
préfixées, cette fois-ci par
une classe. Il y a toujours
le même bug concernant la
première règle à l’intérieur
d’une media query.
Slide 57
Slide 57 text
.wrapper_pw161014 .box {
width:600px;
}
.wrapper_pw161014 @media only screen and (max-‐width:600px) {
.box {
width:auto;
}
.wrapper_pw161014 .box-‐title {
font-‐size:1.25em;
}
}
Mais en plus, le webmail
mobile de La Poste préfixe
la première media query
qu’il trouve. Du coup, tout
le code qui suit n’a plus de
sens en CSS, et est ignoré.
Slide 58
Slide 58 text
.box {
width:600px;
}
@media only screen and (max-‐width:0) {
body {
margin:0;
}
}
@media only screen and (max-‐width:600px) {
.box {
width:auto;
}
.box-‐title {
font-‐size:1.25em;
}
}
Pour éviter ça, on peut
rajouter une media query
complétement bidon en
premier dans notre code.
Slide 59
Slide 59 text
.wrapper_pw161014 .box {
width:600px;
}
.wrapper_pw161014 @media only screen and (max-‐width:0) {
body {
margin:0;
}
}
@media only screen and (max-‐width:600px) {
.box {
width:auto;
}
.wrapper_pw161014 .box-‐title {
font-‐size:1.25em;
}
Ainsi, c’est elle qui se
trouve préfixée (et
ignorée), mais les media
queries suivantes seront
bien prises en compte.
Slide 60
Slide 60 text
Outlook.com aussi préfixe
les styles. Et ils font ça
vraiment bien.
Slide 61
Slide 61 text
.box {
width:600px;
}
@media only screen and (max-‐width:600px) {
.box {
width:auto;
}
.box-‐title {
font-‐size:1.25em;
}
}
En reprenant toujours le
même exemple…
Slide 62
Slide 62 text
.ExternalClass .ecxbox {
width:600px;
}
@media only screen and (max-‐width:600px) {
.ExternalClass .ecxbox {
width:auto;
}
.ExternalClass .ecxbox-‐title {
font-‐size:1.25em;
}
}
Les styles sont bien
préfixés par une classe
«ExternalClass», et les
classes renommés avec un
préfixe «ecx». La classe
«ExternalClass» est bien
présente plus haut dans le
HTML, et tout fonctionne
bien.
Slide 63
Slide 63 text
Microsoft a utilisé le
même préfixage pour la
version mobile du webmail
d’Outlook.com. Sauf que, si
on inspecte le code…
Slide 64
Slide 64 text
.ExternalClass ?
✖
La classe ExternalClass ne
se trouve nulle part dans le
HTML. Du coup, tous les
styles présent dans une
balise seront
ignorés par Outlook.com
sur mobile.
Slide 65
Slide 65 text
Je ne supporte pas ces conneries d’informaticien.
Meeeerde !
Slide 66
Slide 66 text
QUIZ
Comment s’appelle le responsable
d’Outlook.com chez Microsoft ?
A. Bryan D. Gueulasse
B. Jason Abject
C. Jeff Ed Lamherd
D. Richard Craddock
Trop bien, un quiz !
Slide 67
Slide 67 text
Bon, ok, les blagues sur les
noms de famille c’est un peu
facile. Par exemple moi je
m’appelle Parmentier, et on
n’en fait pas tout un plat.
Slide 68
Slide 68 text
CERTAINS WEBMAILS
SUPPRIMENT VOTRE CODE.
Pour éviter qu’on utilise des
propriétés «dangereuses»,
comme «position», ou alors
des media queries…
Slide 69
Slide 69 text
Par exemple, Yahoo.com ne
supporte pas les media
queries. Elles seront donc
filtrées si vous en avez dans
votre code.
Slide 70
Slide 70 text
.box {
width:600px;
}
@media only screen and (max-‐width:600px) {
.box {
width:auto;
}
.box-‐title {
font-‐size:1.25em;
}
}
On reprend toujours le
même exemple…
Slide 71
Slide 71 text
#yiv6851014585 .yiv6851014585box {
width:600px;
}
@media only screen and (max-‐width:600px) {
#yiv6851014585 .yiv6851014585box {
width:auto;
}
#yiv6851014585 .yiv6851014585box-‐title {
font-‐size:1.25em;
}
} Yahoo.com va d’abord
préfixer les règles CSS,
comme les autres webmails.
Slide 72
Slide 72 text
#yiv6851014585 .yiv6851014585box {
width:600px;
}
@media only screen and (max-‐width:600px) {
#yiv6851014585 .yiv6851014585box {
width:auto;
}
#yiv6851014585 .yiv6851014585box-‐title {
font-‐size:1.25em;
}
}
Et ensuite, pour filtrer une
media query, ils vont
chercher ce qui se trouve
entre la première accolade
ouvrante et la première
accolade fermante.
Slide 73
Slide 73 text
#yiv6851014585 .yiv6851014585box {
width:600px;
}
_filtered #yiv6851014585 {
}
#yiv6851014585 .yiv6851014585box-‐title {
font-‐size:1.25em;
}
}
Et ils vont filtrer tout ça.
Slide 74
Slide 74 text
#yiv6851014585 .yiv6851014585box {
width:600px;
}
_filtered #yiv6851014585 {
}
#yiv6851014585 .yiv6851014585box-‐title {
font-‐size:1.25em;
}
}
Sauf que du coup la
deuxième règle qui se
trouvait dans ma media
query s’en trouve sortie, et
donc appliquée quelque soit
le media.
Slide 75
Slide 75 text
.box {
width:600px;
}
@media only screen and (max-‐width:600px) {
*[class="box"] {
width:auto;
}
*[class="box-‐title"] {
font-‐size:1.25em;
}
}
Pour éviter ça, des petits
malins ont repéré que
Yahoo.com filtrait aussi les
règles basées sur des
sélecteurs d’attributs. Donc
si on les utilise pour les
règles dans une media
query…
Slide 76
Slide 76 text
#yiv6851014585 .yiv6851014585box {
width:600px;
}
@media only screen and (max-‐width:600px) {
*[class="box"] {
width:auto;
}
*[class="box-‐title"] {
font-‐size:1.25em;
}
} Yahoo.com va bien préfixer
les règles supportées.
Slide 77
Slide 77 text
#yiv6851014585 .yiv6851014585box {
width:600px;
}
@media only screen and (max-‐width:600px) {
#yiv6851014585 * .filtered99999 {
width:auto;
}
#yiv6851014585 * .filtered99999 {
font-‐size:1.25em;
}
} Puis il va filtrer les règles
non supportées en les
remplaçant par un
sélecteur bidon.
Slide 78
Slide 78 text
#yiv6851014585 .yiv6851014585box {
width:600px;
}
_filtered #yiv6851014585 {
}
#yiv6851014585 * .filtered99999 {
font-‐size:1.25em;
}
}
Puis il va filtrer les media
queries. Les autres règles
à l’intérieur de la media
query s’en trouvent
toujours sorties, mais
comme elles sont filtrées,
elles ne s’appliquent plus.
C’est souvent grâce à ce
genre de bidouille qu’on va
pouvoir s’en sortir en
intégrant un e-mail.
Slide 79
Slide 79 text
Petite futée.
Slide 80
Slide 80 text
Outlook.com aussi filtre
certaines propriétés CSS.
Slide 81
Slide 81 text
margin
Par exemple, Outlook.com
va toujours filtrer la
propriété margin (même
dans un attribut style
sur une balise).
Slide 82
Slide 82 text
Margin
Mais pas la propriété
Margin.
Slide 83
Slide 83 text
mArgin
Ou mArgin.
Slide 84
Slide 84 text
maRgin
Ou maRgin.
Slide 85
Slide 85 text
marGin
Ou marGin. En gros, on
peut très bien utiliser la
propriété margin sur
Outlook.com, tant qu’on
ne l’écrit pas tout en
minuscule.
Slide 86
Slide 86 text
J’ai vomi.
Slide 87
Slide 87 text
CERTAINS WEBMAILS
RETOUCHENT VOS IMAGES.
C’est le cas de Gmail par
exemple, qui pour afficher
les images
automatiquement dans
un e-mail, les héberge sur
leurs serveurs, et les
recompresse au passage.
Slide 88
Slide 88 text
On constate une
recompression un peu
forte en JPG, et
complétement déformée
en GIF.
Du coup il vaut mieux
utiliser du PNG quand
c’est possible.
Slide 89
Slide 89 text
Mais certaines vieilles
applications, comme Lotus
Notes 6 ou 7, ne
supportent pas le format
PNG.
Slide 90
Slide 90 text
LES WEBMAILS UTILISENT
DIFFÉRENTS DOCTYPE.
Ensuite, différents
webmails utilisent
différents doctype.
Slide 91
Slide 91 text
HTML 5
YAHOO, GMAIL, OUTLOOK.COM, ORANGE, LA POSTE MOBILE
HTML 4 TRANSITIONAL
LA POSTE, SFR, FREE
PAS DE DOCTYPE
SPARROW (iOS)
Le plus courant est le
doctype HTML5. Mais on
retrouve un peu de
HTML4. Et parfois le
doctype sera supprimé.
Slide 92
Slide 92 text
Pas de doctype
Ça peut être génant parce
qu’on peut avoir des
différences de rendu selon
le doctype. Un e-mail sans
doctype…
Slide 93
Slide 93 text
Doctype HTML5
… peut s’afficher
différemment avec un
doctype HTML5 car la
spécification gère
différemment les images, et
un espace blanc peut
apparaître alors sous
chaque image.
Slide 94
Slide 94 text
Slide 95
Slide 95 text
Slide 96
Slide 96 text
Je préconise plutôt d’utiliser le
doctype HTML5. Mais dans
l’application Mail de Firefox OS…
Slide 97
Slide 97 text
… le doctype sera affiché en
haut du mail si on l’écrit en
minuscules.
Slide 98
Slide 98 text
TOUT PEUT CHANGER
DU JOUR AU LENDEMAIN.
Et le plus dur dans tout ça,
c’est que…
Slide 99
Slide 99 text
Par exemple, l’application Mailbox sur iOS 8,
dans une récente mise à jour, a un bug où l’e-
mail au chargement va petit à petit rétrécir,
sans raison.
Alors en général dans le web, quand on est
confronté à ce genre de spécificités, on va
regarder les stats et voir si tel navigateur est
encore beaucoup utilisé.
Slide 100
Slide 100 text
Litmus diffuse des statistiques mensuelles des
applications et webmails les plus utilisés. Sauf
que pour avoir ces chiffres, ils se basent sur
l’affichage d’une image de tracking à l’intérieur
du mail.
Du coup, ça avantage forcément toutes les
applications qui affichent les images par
défaut.
Slide 101
Slide 101 text
Novembre 2013
3,02 %
C’est le cas notamment de Gmail. En
novembre 2013, Litmus estimait
que Gmail avait 3,02% de parts de
marché. Gmail bloquait alors les
images par défaut.
Slide 102
Slide 102 text
Décembre 2013
Affichage des images par défaut
En décembre 2013, Gmail a
commencé a afficher les images
par défaut.
Slide 103
Slide 103 text
Janvier 2014
9,05 %
Le mois suivant, ils se sont
retrouvés à 9,05% de parts de
marché.
Slide 104
Slide 104 text
Septembre 2014
15 %
Le mois dernier, après avoir
continuer à afficher les images
par défaut dans leurs applications
mobiles, Gmail était estimé à 15%
de parts de marché.
Slide 105
Slide 105 text
* Données basées sur 1,8 milliards d’ouvertures
de près de 22 milliards de destinataires d’e-mails.
Campaign Monitor affiche
fièrement que 41% des e-mails
reçus depuis leurs serveurs l’an
dernier était ouvert sur mobile.
Mais si on regarde la petite ligne
en bas, on peut lire…
Slide 106
Slide 106 text
* Données basées sur 1,8 milliards d’ouvertures
de 22 milliards d’e-mails reçus.
Ça signifie que pour 20,2
milliards d’e-mails, on ne sait
pas où ils ont été ouverts. Peut-
être qu’ils ont été lus avec les
images désactivées sur desktop.
Slide 107
Slide 107 text
En réalité, les chiffres de
Campaign Monitor ressemblent
plus à ça…
Slide 108
Slide 108 text
Ça signifie que le rendu d’un e-
mail sans images est super
important.
Slide 109
Slide 109 text
Slide 110
Slide 110 text
Ça permet de faire des trucs
rigolos, comme ici dans un e-
mail envoyé par Nintendo
Australia pour un jeu LEGO.
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
Ou ici dans un e-mail envoyé
par Sony pour un jeu
Transformers.
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
L’OPTIMISATION
POUR MOBILES
Alors même si on n’a pas de chiffres
fiables pour se convaincre d’optimiser
ses e-mails pour mobile, c’est dans la
continuité de l’expérience utilisateur.
Si je peux commander sur mobile, c’est
normal que l’e-mail de confirmation que
je reçoive soit optimisé pour ce support.
Slide 115
Slide 115 text
1. Texte brut
Une première approche c’est de
faire du text brut. Ça veut dire
pas de mise en forme, pas
d’images, pas de liens. Mais ça
marche partout, optimisé pour
toute taille d’écran, peu
importe la définition.
Slide 116
Slide 116 text
2. MOBILE FRIENDLY
Un autre approche consiste à
faire ce que certains
appellent du «Mobile
friendly», ou encore…
Slide 117
Slide 117 text
2. MOBILE AWARE
Badumtss
Slide 118
Slide 118 text
Par exemple, cet e-mail chez
Threadless n’a aucune
optimisation technique
particulière.
Slide 119
Slide 119 text
Mais simplement en étant
redimensionné
automatiquement à la taille de
l’écran sur iPhone, j’arrive à
bien lire les principaux titres, à
comprendre de quoi ça parle.
Slide 120
Slide 120 text
Malheureusement certaines
applications, comme
l’application Mail par défaut
d’Android, ne redimensionnent
pas l’e-mail, et on se retrouve à
devoir faire défiler le contenu
horizontalement et
verticalement.
Slide 121
Slide 121 text
3. RESPONSIVE
Vient alors l’approche
responsive.
Slide 122
Slide 122 text
VIEWPORT
✖
La première chose à faire sur un
site pour faire du responsive
est de définir la meta viewport.
Et bien pas pour un e-mail. Soit
ça n’est pas utile, soit ça n’est
pas pris en compte, ou alors ça
peut poser de gros problèmes.
Slide 123
Slide 123 text
Par exemple, sur Blackberry 5,
un e-mail avec une meta
viewport ne s’affichera pas.
Slide 124
Slide 124 text
L’application mail de Windows Phone
8.1 utilise le moteur de rendu d’IE7
. Du
coup la meta viewport ne sert à rien.
Slide 125
Slide 125 text
Mais on peut quand même arriver à
forcer un affichage optimisé pour
mobile.
Slide 126
Slide 126 text
@-‐ms-‐viewport { width:320px; }
@viewport { width:320px; }
Pour ça il faut préciser une meta X-UA-
Compatible, et définir le viewport de
façon standard en CSS.
Slide 127
Slide 127 text
3. RESPONSIVE
MAIS PAS TROP EN FAIT
Chose curieuse dans le monde de
l’intégration d’e-mails, c’est
qu’il y a pas mal de monde qui
font ce que j’appelle du
responsive mais pas trop en
fait.
Slide 128
Slide 128 text
Desktop
Mobile
C’est à dire qu’ils vont intégrer
une version desktop, une
version mobile, et afficher l’une
ou l’autre selon la résolution.
Slide 129
Slide 129 text
C’est ce que fait Apple par exemple. C’est
bien parce que graphiquement ça n’impose
aucune contrainte. Mais c’est terrible
parce que ça veut dire qu’on envoie à tout
le monde deux intégrations.
Slide 130
Slide 130 text
Certaines vieilles applications Mail
(comme Lotus Notes 6 et 7) ne
supportent pas cette méthode, et du coup
on se retrouve avec les deux e-mails
affichés l’un en dessous de l’autre.
Slide 131
Slide 131 text
On risque aussi de se heurter à des
limitations comme ici sur iOS où seuls les
x premiers Ko de l’e-mail sont téléchargés.
La version desktop est donc téléchargée,
mais comme elle est masquée en CSS, rien
ne s’affiche à l’écran.
Slide 132
Slide 132 text
3. RESPONSIVE
AVEC DES TABLEAUX
Par contre on peut faire des
trucs pratiques avec des
tableaux en responsive.
Slide 133
Slide 133 text
A B C
Par exemple, si on a un
tableau d’une ligne avec trois
cellules A, B et C…
Slide 134
Slide 134 text
A
B
C
On peut les passer les unes en
dessous des autres.
Slide 135
Slide 135 text
A
B
C
Pour faire ça, il nous faut un
tableau.
Slide 136
Slide 136 text
@media only screen and (max-‐width:600px) {
td {
display:block;
Margin-‐bottom:20px;
}
}
Et ensuite, dans une media
query, on va passer nos
cellules en display:block.
Slide 137
Slide 137 text
C B A
On peut aussi inverser l’ordre
des cellules. Par exemple si on
veut cet ordre sur la version
desktop…
Slide 138
Slide 138 text
A
B
C
On va jouer avec l’attribut
«dir=rtl». L’attribut sera bien
respecté sur desktop, mais
ignoré sur mobile puisqu’on passe
les cellules en display:block.
Slide 139
Slide 139 text
Problème : sur WebKit sur une
page sans doctype, tout ça ne
fonctionne plus. (Comme ici sur
Sparrow sous iOS, ou sur Android
Mail 4.4)
Slide 140
Slide 140 text
A B
Alors plutôt que de jouer avec des
cellules, on peut jouer avec des
tableaux. Par exemple ici, on a
deux tableaux flottants A et B.
Slide 141
Slide 141 text
A
B
Sur mobile on pourra obtenir ce
rendu.
Slide 142
Slide 142 text
A
B
Pour ça, il faut jouer avec
l’attribut align, et préciser un
«min-width» sur le tableau.
Slide 143
Slide 143 text
A
B
Problème : sur des résolutions
intermédiaires, le rendu n’est pas
top.
Slide 144
Slide 144 text
En CSS2.1, l’effet de ‘min-width’ et ‘max-width’
sur des tableaux est indéfini.
Et surtout : les propriétés min-
width et max-width ne
s’appliquent pas sur des tableaux
sur d’anciens WebKit.
Slide 145
Slide 145 text
En CSS2.1, l’effet de ‘min-width’ et ‘max-width’
sur des tableaux est indéfini.
C’est dans la spec ! Merci la spec !
Slide 146
Slide 146 text
Alors comment optimiser des e-mails
pour mobile ?
Ne peut-on pas s’inspirer de tout ce qu’on a
appris sur le web ces dix dernières
années ?
Slide 147
Slide 147 text
SÉMANTIQUE
N’a-t-on pas appris des notions de…
Slide 148
Slide 148 text
DÉGRADATION
GRACIEUSE
Ou des principes de…
Slide 149
Slide 149 text
AMÉLIORATION
PROGRESSIVE
Ou encore d’…
Slide 150
Slide 150 text
EST-CE QU’UNE PAGE WEB
DOIT AVOIR
LE MÊME RENDU PARTOUT ?
Et surtout, on a appris à répondre à
certaines questions. Par exemple :
Slide 151
Slide 151 text
NON.
Slide 152
Slide 152 text
EST-CE QU’UN E-MAIL
DOIT AVOIR
LE MÊME RENDU PARTOUT ?
Alors…
Slide 153
Slide 153 text
NON.
Slide 154
Slide 154 text
Récemment j’ai eu à intégrer un e-
mail avec une présentation
comme celle-ci. Un texte HTML
avec un effet «comme dans la
presse» placé sur une image.
Slide 155
Slide 155 text
J’ai commencé par définir mes éléments en HTML.
Slide 156
Slide 156 text
position:relative;
J’ai ajouté un «position:relative»
sur un
parent.
Slide 157
Slide 157 text
position:absolute;
left:15px;
bottom:15px;
Ensuite j’ai positionné le texte par
dessus l’image.
Slide 158
Slide 158 text
box-‐shadow:-‐4px 0 0 4px #e8a433,
4px 0 0 4px #e8a433;
box-‐decoration-‐break:clone;
Et puis j’ai rajouté l’effet «comme
dans la presse».
Slide 159
Slide 159 text
On n’obtient clairement pas le
même rendu partout.
Slide 160
Slide 160 text
On aura le rendu souhaité sur les
applications qui supportent bien toutes
les propriétés utilisées, comme Apple
Mail.
Slide 161
Slide 161 text
On aura un rendu sans support de box-
shadow, mais avec support de position.
Slide 162
Slide 162 text
Un rendu sans le support de position, et
sans le support de box-shadow.
Slide 163
Slide 163 text
Ou encore un rendu sans le support de
position, mais avec le support de box-
shadow.
Slide 164
Slide 164 text
Et ce sera la même chose pour mobile.
Ici on supporte bien les media queries et
position, mais pas box-shadow.
Slide 165
Slide 165 text
Et ici on supporte bien position, mais
pas box-shadow ni les media queries.
Slide 166
Slide 166 text
A B C
On peut alors commencer à se
dispenser de tableaux pour faire de la
mise en page. Par exemple ici on a trois
div A, B et C.
Slide 167
Slide 167 text
C
A B
On va pouvoir les réagencer de manière
fluide en s’assurant qu’elles restent
centrées.
Slide 168
Slide 168 text
A
B
C
Pour avoir un rendu comme ça
sur mobile.
Slide 169
Slide 169 text
A
B
C
Slide 170
Slide 170 text
A
B
C
parent, on va ajouter
un text-align:center (qui va
centrer les trois blocs) et font-
size:0 (qui évite des marges entre
les blocs).
Slide 171
Slide 171 text
A
Outlook ne supporte pas
display:inline-block. Pour avoir
une mise en page améliorée, on
peut utiliser des commentaires
conditionnels.
Slide 172
Slide 172 text
A
B
C
Slide 173
Slide 173 text
Et certains n’hésitent pas à tester
des effets encore plus poussés. Par
exemple, Litmus utilisent des
animations CSS dans leurs e-
mails.
Slide 174
Slide 174 text
Ils ont aussi fait un e-mail avec
une vidéo dans le header. Ça ne
marchait que sur Apple Mail, mais
avec un rendu statique pour les
autres applications et webmails.
Slide 175
Slide 175 text
La marque B&Q fait carrément
des e-mails interactifs avec des
carousels. Encore une fois, ça ne
fonctionne pas partout, mais ça
affichera un contenu statique
ailleurs.
Slide 176
Slide 176 text
L’INTÉGRATION D’E-MAILS,
C’EST COMPLIQUÉ.
En résumé, c’est compliqué. Et ce
qui me fait peur, c’est que ça ne
bouge pas beaucoup.
Slide 177
Slide 177 text
En 2007 s’est tenue à Paris une
réunion de travail du W3C sur les
e-mails HTML. Et il s’est dit a peu
près ce que je raconte aujourd’hui.
Ça signifie que rien n’a vraiment
changé depuis 2007
.
Slide 178
Slide 178 text
Campaign Monitor avait lancé un
projet de standardisation, mais
pas très ambitieux (ils voulaient
uniquement le support de quelques
propriétés CSS), et surtout ça ne
visait que des webmails ou
applications américains.
Slide 179
Slide 179 text
En 2014, un groupe communautaire a
été lancé au sein du W3C. Ça avait bien
démarré, mais il n’y a eu quasiment
aucun message depuis. Et certains
venaient uniquement pour réclamer le
support de MathML (qui, j’en suis sûr
est très utile, mais on est tellement
loin de ça aujourd’hui).
Slide 180
Slide 180 text
Cette année j’ai ouvert un blog pour
commencer à parler de tout ça. Mais
ce n’est pas en étant tout seul que je
vais arriver à faire bouger les
choses…
Slide 181
Slide 181 text
ET SI ON ARRÊTAIT DE
FAIRE N’IMPORTE QUOI ?
Développeurs d’applications mail
ou de webmails : arrêtez de
préfixer des styles n’importe
comment, arrêter d’utiliser des
moteurs supportant mal CSS.
Intégrateurs : arrêtez de ne
faire que des tableaux. Sortez de
votre zone de confort. Faites
des tests. Expérimentez.
En 7 ans, quasiment rien n’a
changé. J’espère que dans 7 ans,
les choses auront changé.
Slide 182
Slide 182 text
J’espère que dans 7 ans, on
pourra regarder dans le
rétroviseur, et se dire que ce
méchant e-mail à intégrer…
Slide 183
Slide 183 text
…n’est finalement pas si terrifiant.
Slide 184
Slide 184 text
Et que l’intégration d’e-mails
soit un jeu d’enfant.