L'intégration d'e-mails responsive

Slide 1

Slide 1 text

Kiwi Party 2013

Slide 2

Slide 2 text

Rémi Parmentier Intégrateur @HTeuMeuLeu

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

L’intégration d’e-mails responsive 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.

Slide 5

Slide 5 text

L’intégration d’e-mails tout court D’abord, commençons par faire un petit point sur l’intégration d’e-mails en général.

Slide 6

Slide 6 text

Une page web Un e-mail HTTP HTML CSS IE6 Universel Personnel Modiﬁable 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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Heureusement pour ça il y a des outils de screenshots de rendus, comme par exemple Litmus... http:/ /www.litmus.com

Slide 9

Slide 9 text

... GetInbox (un français qui teste aussi sur des webmails français) ... http:/ /www.getinbox.com

Slide 10

Slide 10 text

... et mon préféré, Email On Acid. http:/ /emailonacid.com

Slide 11

Slide 11 text

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 ou toute CSS externe. http:/ / www.campaignmonitor.com/css

Slide 12

Slide 12 text

Du coup, l’intégration d’e-mails, c’est comme le tout premier intégrateur égyptien. * badumtss *

Slide 13

Slide 13 text

La plupart du temps, votre code ressemble donc à de la soupe de tableaux. Et ça donne parfois lieu à des bugs assez particuliers...

Slide 14

Slide 14 text

#01 CODE À LA CON QUI DONNE ENVIE DE VOMIR Sur Outlook 2007 et 2010, un
est inséré tous les 1800px environ. Découpez votre e-mail en plusieurs . À lire : http:/ /www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010

Slide 15

Slide 15 text

« Si tu vomis, vomis là dedans... » http:/ /www.youtube.com/ watch?v=3WrfLY0Z7Yo

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Mobile friendly 1. La première méthode consiste à faire du «mobile friendly», ou comme certains l’appellent, du...

Slide 18

Slide 18 text

Mobile aware

Slide 19

Slide 19 text

Mobile aware •Grands visuels •Grandes tailles de texte •Grandes zones cliquables Pour être aware, il faut prévoir tout en grand.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

Responsive 2. Maintenant voyons comment faire du «responsive» (mot un peu fourre-tout) dans un e- mail...

Slide 23

Slide 23 text

Voici un exemple d’un tuto publié chez Net Magazine http:/ / www.netmagazine.com/ tutorials/build- responsive-emails

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

#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"]

Slide 26

Slide 26 text

http:/ /www.youtube.com/ watch?v=SLXnBI4ykVs

Slide 27

Slide 27 text

Responsive mais pas trop Certains e-mails adoptent une méthode que j’appelle du «responsive mais pas trop».

Slide 28

Slide 28 text

Ici, l’e-mail est totalement différent en version desktop et mobile.

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

#03 CODE À LA CON QUI DONNE ENVIE DE VOMIR Sur iOS, le doit contenir au moins 1000 caractères pour qu’un e-mail soit téléchargé totalement.

Slide 32

Slide 32 text

http:/ /www.youtube.com/ watch?v=PN0XRkSyhwM

Slide 33

Slide 33 text

x Cette technique ne fonctionne pas sur Lotus Notes 6.5 et 7, ou sur Gmail sur Android 2 avec autre chose que des . Les deux versions seront alors affichées.

Slide 34

Slide 34 text

x La technique présentée auparavant ne fonctionne pas non plus sur les apps tierces sur iOS (comme Sparrow ou Mailbox).

Slide 35

Slide 35 text

~ Pour éviter ça, on peut utiliser des tableaux flottants. Ça marche bien sur iOS, mais ça peut causer des bugs étranges sur Outlook.

Slide 36

Slide 36 text

#04 CODE À LA CON QUI DONNE ENVIE DE VOMIR Outlook 2007, 2010 et 2013 interprètent parfois mal les tableaux ﬂottants. Vos tableaux peuvent alors se retrouver les uns en dessous des autres.

Slide 37

Slide 37 text

CODE À LA CON QUI DONNE ENVIE DE VOMIR #04 Pour corriger ça, il y a une manipulation claire à suivre en 4 étapes...

Slide 38

Slide 38 text

CODE À LA CON QUI DONNE ENVIE DE VOMIR #04 1) Ajoutez un bgcolor sur chaque de vos tableaux flottants.

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

CODE À LA CON QUI DONNE ENVIE DE VOMIR #04 2) Ajoutez une bordure sur chaque tableau flottant.

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

CODE À LA CON QUI DONNE ENVIE DE VOMIR #04 3) Ajustez la taille de vos tableaux flottants

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

http:/ /www.youtube.com/ watch?v=4eYSpIz2FjU

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Fluide 3. Du coup, on va faire des e-mails fluides.

Slide 48

Slide 48 text

Ici un exemple chez Peepcode. La bannière principale et le corps du texte sont fluides, mais le logo reste à la même taille.

Slide 49

Slide 49 text

Dans le code, il suffit de jouer avec des tailles en pourcentage et des min-width / max-width bien placés.

Slide 50

Slide 50 text

responsive aware ﬂuide + + 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.

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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.

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

... et ici chez Sony pour un jeu Transformers.

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Soyez content de votre travail. Voire même hyper content.

Slide 59

Slide 59 text

Rémi @HTeuMeuLeu remi@hteumeuleu.fr http://www.hteumeuleu.fr merci