Comment sortir l'intégration d'e-mails de la préhistoire ?

PARIS WEB
16 OCTOBRE 2014

View Slide

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.

View Slide

Un e-mail
à intégrer
On a un méchant e-mail à
intégrer.

View Slide

un intégrateur
Un intégrateur qui s’enfuit
en courant.

View Slide

un chef
de projet
Et un chef de projet qui
prie pour que tout se passe
bien.

View Slide

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.

View Slide

Que ce soit un e-mail
commercial mettant en
avant les dernières
nouveautés de votre
boutique.

View Slide

Un e-mail de
conﬁrmation de
commande.

View Slide

Une lettre d’information
envoyée à vos abonnés
tous les mois.

View Slide

Ou un e-mail de mot de
passe oublié pour accéder
à un compte en ligne ou à
une administration de
site.

View Slide

Et surtout,
personnellement, ÇA
M’ÉNERVE de recevoir
des e-mails pas
consultables tant que les
images ne sont pas
chargées.

View Slide

ÇA M’ÉNERVE de recevoir
des e-mails du
gouvernement Français
qui ressemblent plus à
des spams nigériens.

View Slide

ÇA M’ÉNERVE de recevoir
des e-mails qui parlent de
qualité web et qui ne sont
pas agréables à lire sur
mobile.

View Slide

comment sortir
de la préhistoire
Voici donc quelques
réﬂexions personnelles
sur comment sortir
l’intégration d’e-mails de
la préhistoire.

View Slide

À 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.

View Slide

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…

View Slide

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.

View Slide

Mets ta tête entre les genoux.

View Slide

Heureusement il y a des
outils en ligne pour
faciliter tout ça. Par
exemple Litmus.
http:/
/www.litmus.com

View Slide

GetInbox (un service
français avec des tests
sur les webmails
français).
http:/
/www.getinbox.com

View Slide

Ou Email on Acid.
http:/
/www.emailonacid.com

View Slide

En faisant un test, on
obtient une palette de
captures d’écran sur
différents webmails,
navigateurs, appareils,
applications, …

View Slide

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…

View Slide

CERTAINS CLIENTS
ONT DES
CONTRAINTES DATÉES.
Par exemple…

View Slide

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.

View Slide

ON PEUT UTILISER
CSS DANS UN E-MAIL…

View Slide

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

View Slide

ON PEUT UTILISER

Donc on peut utiliser CSS
directement en ligne sur
un élément HTML. (Ça
marche bien sur Gmail par
exemple.)

View Slide

ON PEUT UTILISER
 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. 

View Slide

ON PEUT UTILISER

Ou avec une balise .
Ça marche bien sur
certaines applications
mail.

View Slide

CSS DANS UN E-MAIL, ÇA DÉPEND…
Mais comme souvent en
intégration, CSS dans un
e-mail, « ça dépend ».

View Slide

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.

View Slide

Des balises.
Mais ça dépend aussi
parfois des balises sur
lesquelles vous utilisez des
propriétés CSS.

View Slide

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.

View Slide

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, …

View Slide

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.

View Slide

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.

View Slide

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 signiﬁe 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.

View Slide

- Je hais les ordinateurs.
- C’est réciproque.

View Slide

Des webmails.

View Slide

CERTAINS WEBMAILS
ONT DES STYLES
TROP GÉNÉRIQUES.

View Slide

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.

View Slide

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.

View Slide

background:none; border:none;">
Bonjour Paris Web

Ça signiﬁe 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…

View Slide

C’est vraiment un gros tas de merde.

View Slide

CERTAINS WEBMAILS
PRÉFIXENT LES CSS.
Le préﬁxage 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.

View Slide

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éﬁxage de styles.

View Slide

.box {
width:600px;
}
Si on prend une règle CSS
basique comme celle-ci…

View Slide

#message .box {
width:600px;
}
… elle sera alors préﬁxée
comme ça. L’identiﬁant
«message» se trouve alors
plus haut dans le code
HTML. Tout fonctionne
correctement.

View Slide

.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.

View Slide

#message .box {
width:600px;
}
.box {
width:auto;
}
#message .box-‐title {
}
}
Ici les règles sont bien
préﬁxées, SAUF la première
règle à l’intérieur d’une
media query.

View Slide

#message .box {
width:600px;
}
.box {
width:auto;
}
}
}
+ 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.

View Slide

#message .box {
width:600px;
}
.box {
width:auto !important;
}
}
}
+ spéciﬁque
Pour éviter ça, on doit
sortir le bazooka CSS :
!important.

View Slide

La version mobile du
webmail de La Poste préﬁxe
aussi les règles CSS, mais
avec quelques bugs
supplémentaires.

View Slide

.box {
width:600px;
}
.box {
width:auto;
}
.box-‐title {
}
}
Si on reprend le même
exemple…

View Slide

.wrapper_pw161014 .box {
width:600px;
}
.box {
width:auto;
}
.wrapper_pw161014 .box-‐title {
}
Les règles sont bien
préﬁxé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.

View Slide

width:600px;
}
.wrapper_pw161014 @media only screen and (max-‐width:600px) {
.box {
width:auto;
}
}
}
Mais en plus, le webmail
mobile de La Poste préﬁxe
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é.

View Slide

.box {
width:600px;
}
@media only screen and (max-‐width:0) {
body {
margin:0;
}
}
.box {
width:auto;
}
.box-‐title {
}
}
Pour éviter ça, on peut
rajouter une media query
complétement bidon en
premier dans notre code.

View Slide

width:600px;
}
.wrapper_pw161014 @media only screen and (max-‐width:0) {
body {
margin:0;
}
}
.box {
width:auto;
}
}
Ainsi, c’est elle qui se
trouve préﬁxée (et
ignorée), mais les media
queries suivantes seront
bien prises en compte.

View Slide

Outlook.com aussi préﬁxe
les styles. Et ils font ça
vraiment bien.

View Slide

.box {
width:600px;
}
.box {
width:auto;
}
.box-‐title {
}
}
En reprenant toujours le
même exemple…

View Slide

.ExternalClass .ecxbox {
width:600px;
}
.ExternalClass .ecxbox {
width:auto;
}
.ExternalClass .ecxbox-‐title {
}
}
Les styles sont bien
préﬁxés par une classe
«ExternalClass», et les
classes renommés avec un
préﬁxe «ecx». La classe
«ExternalClass» est bien
présente plus haut dans le
HTML, et tout fonctionne
bien.

View Slide

Microsoft a utilisé le
même préﬁxage pour la
version mobile du webmail
d’Outlook.com. Sauf que, si
on inspecte le code…

View Slide

.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. 

View Slide

Je ne supporte pas ces conneries d’informaticien.
Meeeerde !

View Slide

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 !

View Slide

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.

View Slide

CERTAINS WEBMAILS
SUPPRIMENT VOTRE CODE.
Pour éviter qu’on utilise des
propriétés «dangereuses»,
comme «position», ou alors
des media queries…

View Slide

Par exemple, Yahoo.com ne
supporte pas les media
queries. Elles seront donc
ﬁltrées si vous en avez dans
votre code.

View Slide

.box {
width:600px;
}
.box {
width:auto;
}
.box-‐title {
}
}
On reprend toujours le
même exemple…

View Slide

#yiv6851014585 .yiv6851014585box {
width:600px;
}
#yiv6851014585 .yiv6851014585box {
width:auto;
}
#yiv6851014585 .yiv6851014585box-‐title {
}
} Yahoo.com va d’abord
préﬁxer les règles CSS,
comme les autres webmails.

View Slide

#yiv6851014585 .yiv6851014585box {
width:600px;
}
#yiv6851014585 .yiv6851014585box {
width:auto;
}
#yiv6851014585 .yiv6851014585box-‐title {
}
}
Et ensuite, pour ﬁltrer une
media query, ils vont
chercher ce qui se trouve
entre la première accolade
ouvrante et la première
accolade fermante.

View Slide

#yiv6851014585 .yiv6851014585box {
width:600px;
}
_filtered #yiv6851014585 {
}
#yiv6851014585 .yiv6851014585box-‐title {
}
}
Et ils vont ﬁltrer tout ça.

View Slide

#yiv6851014585 .yiv6851014585box {
width:600px;
}
}
#yiv6851014585 .yiv6851014585box-‐title {
}
}
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.

View Slide

.box {
width:600px;
}
*[class="box"] {
width:auto;
}
*[class="box-‐title"] {
}
}
Pour éviter ça, des petits
malins ont repéré que
Yahoo.com ﬁltrait 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…

View Slide

#yiv6851014585 .yiv6851014585box {
width:600px;
}
*[class="box"] {
width:auto;
}
*[class="box-‐title"] {
}
} Yahoo.com va bien préﬁxer
les règles supportées.

View Slide

#yiv6851014585 .yiv6851014585box {
width:600px;
}
#yiv6851014585 * .filtered99999 {
width:auto;
}
#yiv6851014585 * .filtered99999 {
}
} Puis il va ﬁltrer les règles
non supportées en les
remplaçant par un
sélecteur bidon.

View Slide

#yiv6851014585 .yiv6851014585box {
width:600px;
}
}
#yiv6851014585 * .filtered99999 {
}
}
Puis il va ﬁltrer les media
queries. Les autres règles
à l’intérieur de la media
query s’en trouvent
toujours sorties, mais
comme elles sont ﬁltré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.

View Slide

Petite futée.

View Slide

Outlook.com aussi ﬁltre
certaines propriétés CSS.

View Slide

margin
Par exemple, Outlook.com
va toujours ﬁltrer la
propriété margin (même
dans un attribut style
sur une balise).

View Slide

Margin
Mais pas la propriété
Margin.

View Slide

mArgin
Ou mArgin.

View Slide

maRgin
Ou maRgin.

View Slide

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.

View Slide

J’ai vomi.

View Slide

CERTAINS WEBMAILS
RETOUCHENT VOS IMAGES.
C’est le cas de Gmail par
exemple, qui pour afﬁcher
les images
automatiquement dans
un e-mail, les héberge sur
leurs serveurs, et les
recompresse au passage.

View Slide

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.

View Slide

Mais certaines vieilles
applications, comme Lotus
Notes 6 ou 7, ne
supportent pas le format
PNG.

View Slide

LES WEBMAILS UTILISENT
DIFFÉRENTS DOCTYPE.
Ensuite, différents
webmails utilisent
différents doctype.

View Slide

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

View Slide

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…

View Slide

Doctype HTML5
… peut s’afﬁcher
différemment avec un
doctype HTML5 car la
spéciﬁcation gère
différemment les images, et
un espace blanc peut
apparaître alors sous
chaque image.

View Slide

Pour éviter ça, on peut
ajouter un display:block sur
chaque image.

View Slide

Ou ajouter un élément
parent de type block avec
un font-size:0;

View Slide

Je préconise plutôt d’utiliser le
doctype HTML5. Mais dans
l’application Mail de Firefox OS…

View Slide

… le doctype sera afﬁché en
haut du mail si on l’écrit en
minuscules.

View Slide

TOUT PEUT CHANGER
DU JOUR AU LENDEMAIN.
Et le plus dur dans tout ça,
c’est que…

View Slide

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éciﬁcités, on va
regarder les stats et voir si tel navigateur est
encore beaucoup utilisé.

View Slide

Litmus diffuse des statistiques mensuelles des
applications et webmails les plus utilisés. Sauf
que pour avoir ces chiffres, ils se basent sur
l’afﬁchage d’une image de tracking à l’intérieur
du mail.
Du coup, ça avantage forcément toutes les
applications qui afﬁchent les images par
défaut.

View Slide

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.

View Slide

Décembre 2013
Afﬁchage des images par défaut
En décembre 2013, Gmail a
commencé a afﬁcher les images
par défaut.

View Slide

Janvier 2014
9,05 %
Le mois suivant, ils se sont
retrouvés à 9,05% de parts de
marché.

View Slide

Septembre 2014
15 %
Le mois dernier, après avoir
continuer à afﬁcher les images
par défaut dans leurs applications
mobiles, Gmail était estimé à 15%
de parts de marché.

View Slide

* Données basées sur 1,8 milliards d’ouvertures
de près de 22 milliards de destinataires d’e-mails.
Campaign Monitor afﬁche
ﬁè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…

View Slide

* Données basées sur 1,8 milliards d’ouvertures
de 22 milliards d’e-mails reçus.
Ça signiﬁe 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.

View Slide

En réalité, les chiffres de
Campaign Monitor ressemblent
plus à ça…

View Slide

Ça signiﬁe que le rendu d’un e-
mail sans images est super
important.

View Slide

background:#000; color:#fff; font:16px sans-‐serif;" />
Pour moi, il faut toujours
prévoir au minimum :
- une couleur de fond
- une police, couleur et taille de
texte

View Slide

Ça permet de faire des trucs
rigolos, comme ici dans un e-
mail envoyé par Nintendo
Australia pour un jeu LEGO.

View Slide

View Slide

Ou ici dans un e-mail envoyé
par Sony pour un jeu
Transformers.

View Slide

View Slide

L’OPTIMISATION
POUR MOBILES
Alors même si on n’a pas de chiffres
ﬁables 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 conﬁrmation que
je reçoive soit optimisé pour ce support.

View Slide

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éﬁnition.

View Slide

2. MOBILE FRIENDLY
Un autre approche consiste à
faire ce que certains
appellent du «Mobile
friendly», ou encore…

View Slide

2. MOBILE AWARE
Badumtss

View Slide

Par exemple, cet e-mail chez
Threadless n’a aucune
optimisation technique
particulière.

View Slide

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.

View Slide

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éﬁler le contenu
horizontalement et
verticalement.

View Slide

3. RESPONSIVE
Vient alors l’approche
responsive.

View Slide

VIEWPORT
✖
La première chose à faire sur un
site pour faire du responsive
est de déﬁnir 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.

View Slide

Par exemple, sur Blackberry 5,
un e-mail avec une meta
viewport ne s’afﬁchera pas.

View Slide

L’application mail de Windows Phone
8.1 utilise le moteur de rendu d’IE7
. Du
coup la meta viewport ne sert à rien.

View Slide

Mais on peut quand même arriver à
forcer un afﬁchage optimisé pour
mobile.

View Slide

@-‐ms-‐viewport { width:320px; } @viewport { width:320px; } 
Pour ça il faut préciser une meta X-UA-
Compatible, et déﬁnir le viewport de
façon standard en CSS.

View Slide

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.

View Slide

Desktop
Mobile
C’est à dire qu’ils vont intégrer
une version desktop, une
version mobile, et afﬁcher l’une
ou l’autre selon la résolution.

View Slide

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.

View Slide

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
afﬁchés l’un en dessous de l’autre.

View Slide

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’afﬁche à l’écran.

View Slide

3. RESPONSIVE
AVEC DES TABLEAUX
Par contre on peut faire des
trucs pratiques avec des
tableaux en responsive.

View Slide

A B C
Par exemple, si on a un
tableau d’une ligne avec trois
cellules A, B et C…

View Slide

A
B
C
On peut les passer les unes en
dessous des autres.

View Slide

A
B
C

Pour faire ça, il nous faut un
tableau.

View Slide

td {
display:block;
Margin-‐bottom:20px;
}
}
Et ensuite, dans une media
query, on va passer nos
cellules en display:block.

View Slide

C B A
On peut aussi inverser l’ordre
des cellules. Par exemple si on
veut cet ordre sur la version
desktop…

View Slide

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.

View Slide

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)

View Slide

A B
Alors plutôt que de jouer avec des
cellules, on peut jouer avec des
tableaux. Par exemple ici, on a
deux tableaux ﬂottants A et B.

View Slide

A
B
Sur mobile on pourra obtenir ce
rendu.

View Slide

A

B

Pour ça, il faut jouer avec
l’attribut align, et préciser un
«min-width» sur le tableau.

View Slide

A
B
Problème : sur des résolutions
intermédiaires, le rendu n’est pas
top.

View Slide

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.

View Slide

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 !

View Slide

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 ?

View Slide

SÉMANTIQUE
N’a-t-on pas appris des notions de…

View Slide

DÉGRADATION
GRACIEUSE
Ou des principes de…

View Slide

AMÉLIORATION
PROGRESSIVE
Ou encore d’…

View Slide

EST-CE QU’UNE PAGE WEB
DOIT AVOIR
LE MÊME RENDU PARTOUT ?
Et surtout, on a appris à répondre à
certaines questions. Par exemple :

View Slide

NON.

View Slide

EST-CE QU’UN E-MAIL
DOIT AVOIR
LE MÊME RENDU PARTOUT ?
Alors…

View Slide

NON.

View Slide

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.

View Slide

J’ai commencé par déﬁnir mes
éléments en HTML.

View Slide

position:relative;
J’ai ajouté un «position:relative»
sur un parent.

View Slide

position:absolute;
left:15px;
bottom:15px;
Ensuite j’ai positionné le texte par
dessus l’image.

View Slide

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».

View Slide

On n’obtient clairement pas le
même rendu partout.

View Slide

On aura le rendu souhaité sur les
applications qui supportent bien toutes
les propriétés utilisées, comme Apple
Mail.

View Slide

On aura un rendu sans support de box-
shadow, mais avec support de position.

View Slide

Un rendu sans le support de position, et
sans le support de box-shadow.

View Slide

Ou encore un rendu sans le support de
position, mais avec le support de box-
shadow.

View Slide

Et ce sera la même chose pour mobile.
Ici on supporte bien les media queries et
position, mais pas box-shadow.

View Slide

Et ici on supporte bien position, mais
pas box-shadow ni les media queries.

View Slide

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.

View Slide

C
A B
On va pouvoir les réagencer de manière
ﬂuide en s’assurant qu’elles restent
centrées.

View Slide

A
B
C
Pour avoir un rendu comme ça
sur mobile.

View Slide

A

B

C

Pour ça, on va jouer avec la
propriété display:inline-block.

View Slide

A

B

C

Sur un 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).

View Slide

A

Outlook ne supporte pas
display:inline-block. Pour avoir
une mise en page améliorée, on
peut utiliser des commentaires
conditionnels.

View Slide

A

B

C

Ça donne tout ce code au ﬁnal. Ça
permet d’allier une optimisation
mobile poussée (qui ne repose pas
sur des media queries), et le
support d’Outlook et le moteur de
Word.

View Slide

Et certains n’hésitent pas à tester
des effets encore plus poussés. Par
exemple, Litmus utilisent des
animations CSS dans leurs e-
mails.

View Slide

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.

View Slide

La marque B&Q fait carrément
des e-mails interactifs avec des
carousels. Encore une fois, ça ne
fonctionne pas partout, mais ça
afﬁchera un contenu statique
ailleurs.

View Slide

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.

View Slide

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 signiﬁe que rien n’a vraiment
changé depuis 2007
.

View Slide

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.

View Slide

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

View Slide

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…

View Slide

ET SI ON ARRÊTAIT DE
FAIRE N’IMPORTE QUOI ?
Développeurs d’applications mail
ou de webmails : arrêtez de
préﬁxer 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é.

View Slide

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…

View Slide

…n’est ﬁnalement pas si terriﬁant.

View Slide

Et que l’intégration d’e-mails
soit un jeu d’enfant.

View Slide

Rémi
@HTeuMeuLeu
[email protected]
http://www.hteumeuleu.fr
merci

View Slide

Comment sortir l'intégration d'e-mails de la préhistoire ?

Comment sortir l'intégration d'e-mails de la préhistoire ?

HTeuMeuLeu

More Decks by HTeuMeuLeu

Other Decks in Technology

Featured

Transcript