SlideShare une entreprise Scribd logo
1  sur  59
Télécharger pour lire hors ligne
Kiwi Party 2013
Rémi Parmentier
Intégrateur
@HTeuMeuLeu
L'intégration d'e-mails responsive
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.
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.
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.
•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.
Heureusement pour ça il y
a des outils de screenshots
de rendus, comme par
exemple Litmus...
http://www.litmus.com
... GetInbox (un français
qui teste aussi sur des
webmails français) ...
http://www.getinbox.com
... et mon préféré, Email On
Acid.
http://emailonacid.com
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
Du coup, l’intégration d’e-mails,
c’est comme le tout premier
intégrateur égyptien.
* badumtss *
La plupart du temps, votre code
ressemble donc à de la soupe de
tableaux.
Et ça donne parfois lieu à des bugs
assez particuliers...
#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
« Si tu vomis, vomis là dedans... »
http://www.youtube.com/
watch?v=3WrfLY0Z7Yo
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...
Mobile friendly
1.
La première méthode
consiste à faire du
«mobile friendly», ou
comme certains
l’appellent, du...
Mobile aware
Mobile aware
•Grands visuels
•Grandes tailles de texte
•Grandes zones cliquables
Pour être aware, il faut
prévoir tout en grand.
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...
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.
Responsive
2.
Maintenant voyons
comment faire du
«responsive» (mot un peu
fourre-tout) dans un e-
mail...
Voici un exemple d’un tuto
publié chez Net Magazine
http://
www.netmagazine.com/
tutorials/build-
responsive-emails
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...
#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"]
http://www.youtube.com/
watch?v=SLXnBI4ykVs
Responsive
mais pas trop
Certains e-mails adoptent
une méthode que j’appelle du
«responsive mais pas trop».
Ici, l’e-mail est totalement différent
en version desktop et mobile.
Ç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...
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...
#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.
http://www.youtube.com/
watch?v=PN0XRkSyhwM
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.
x La technique présentée
auparavant ne
fonctionne pas non plus
sur les apps tierces sur
iOS (comme Sparrow ou
Mailbox).
~Pour éviter ça, on peut utiliser
des tableaux flottants. Ça
marche bien sur iOS, mais ça
peut causer des bugs étranges
sur Outlook.
#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.
CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
Pour corriger ça, il y a une
manipulation claire à suivre en
4 étapes...
CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
1) Ajoutez un bgcolor sur chaque
<td> de vos tableaux flottants.
L'intégration d'e-mails responsive
CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
2) Ajoutez une bordure sur
chaque tableau flottant.
L'intégration d'e-mails responsive
CODE À LA CON QUI DONNE ENVIE DE VOMIR
#04
3) Ajustez la taille de vos
tableaux flottants
L'intégration d'e-mails responsive
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.
http://www.youtube.com/
watch?v=4eYSpIz2FjU
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 <style>.
Fluide
3.
Du coup, on va faire des
e-mails fluides.
Ici un exemple chez Peepcode. La
bannière principale et le corps du
texte sont fluides, mais le logo reste
à la même taille.
Dans le code, il suffit de jouer avec
des tailles en pourcentage et des
min-width / max-width bien placés.
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.
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.
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
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
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.
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...
... et ici chez Sony pour un jeu
Transformers.
À 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.
Soyez content de votre travail.
Voire même hyper content.
Rémi
@HTeuMeuLeu
remi@hteumeuleu.fr
http://www.hteumeuleu.fr
merci

Contenu connexe

En vedette

SRI - OBSERVATOIRE DE L’E-PUB - 9ème ÉDITION
SRI - OBSERVATOIRE DE L’E-PUB - 9ème ÉDITIONSRI - OBSERVATOIRE DE L’E-PUB - 9ème ÉDITION
SRI - OBSERVATOIRE DE L’E-PUB - 9ème ÉDITIONAd6 Media
 
Compu training powerpoint
Compu training powerpoint Compu training powerpoint
Compu training powerpoint Daria Arenberg
 
Trabajo final diseño de proyectos
Trabajo final diseño de proyectosTrabajo final diseño de proyectos
Trabajo final diseño de proyectoswolfnight02
 
Secretarias de Gobierno y Su Relación Informática
Secretarias de Gobierno y Su Relación InformáticaSecretarias de Gobierno y Su Relación Informática
Secretarias de Gobierno y Su Relación InformáticaFelipe Saldaña Manzano
 
Crear lazos con el medio ambiente
Crear lazos con el medio ambienteCrear lazos con el medio ambiente
Crear lazos con el medio ambienteNancy A.
 
La gestión de ambientes de aprendizaje
La gestión de ambientes de aprendizajeLa gestión de ambientes de aprendizaje
La gestión de ambientes de aprendizajeedithgar
 
Corrigé quizz général
Corrigé quizz généralCorrigé quizz général
Corrigé quizz généralEmilie Barbier
 
Baromètre consommation média
Baromètre consommation médiaBaromètre consommation média
Baromètre consommation médiaAyoub HAKDAOUI
 
Alx mc lean / matafi
Alx mc lean / matafiAlx mc lean / matafi
Alx mc lean / matafifglowacki
 
Bibliographie gourmandise-2014-complète
Bibliographie gourmandise-2014-complèteBibliographie gourmandise-2014-complète
Bibliographie gourmandise-2014-complèteNicolas Boulesteix
 

En vedette (20)

SRI - OBSERVATOIRE DE L’E-PUB - 9ème ÉDITION
SRI - OBSERVATOIRE DE L’E-PUB - 9ème ÉDITIONSRI - OBSERVATOIRE DE L’E-PUB - 9ème ÉDITION
SRI - OBSERVATOIRE DE L’E-PUB - 9ème ÉDITION
 
Reinado de isabel ii
Reinado de isabel iiReinado de isabel ii
Reinado de isabel ii
 
Compu training powerpoint
Compu training powerpoint Compu training powerpoint
Compu training powerpoint
 
Trabajo final diseño de proyectos
Trabajo final diseño de proyectosTrabajo final diseño de proyectos
Trabajo final diseño de proyectos
 
Secretarias de Gobierno y Su Relación Informática
Secretarias de Gobierno y Su Relación InformáticaSecretarias de Gobierno y Su Relación Informática
Secretarias de Gobierno y Su Relación Informática
 
Crear lazos con el medio ambiente
Crear lazos con el medio ambienteCrear lazos con el medio ambiente
Crear lazos con el medio ambiente
 
Motogp
MotogpMotogp
Motogp
 
A2 co
A2 coA2 co
A2 co
 
La gestión de ambientes de aprendizaje
La gestión de ambientes de aprendizajeLa gestión de ambientes de aprendizaje
La gestión de ambientes de aprendizaje
 
Neslihan M 2Frans
 Neslihan M 2Frans Neslihan M 2Frans
Neslihan M 2Frans
 
Corrigé quizz général
Corrigé quizz généralCorrigé quizz général
Corrigé quizz général
 
Baromètre consommation média
Baromètre consommation médiaBaromètre consommation média
Baromètre consommation média
 
Boletin mayo 2012
Boletin mayo 2012Boletin mayo 2012
Boletin mayo 2012
 
Alx mc lean / matafi
Alx mc lean / matafiAlx mc lean / matafi
Alx mc lean / matafi
 
1 jaienvie.de
1 jaienvie.de1 jaienvie.de
1 jaienvie.de
 
Jd 29 coordinations
Jd 29 coordinationsJd 29 coordinations
Jd 29 coordinations
 
Cap restaurant
Cap restaurantCap restaurant
Cap restaurant
 
M2 anne
M2 anneM2 anne
M2 anne
 
Secuencia didáctica
Secuencia didácticaSecuencia didáctica
Secuencia didáctica
 
Bibliographie gourmandise-2014-complète
Bibliographie gourmandise-2014-complèteBibliographie gourmandise-2014-complète
Bibliographie gourmandise-2014-complète
 

Similaire à L'intégration d'e-mails responsive

Faire du mailing efficace, c'est pas si simple
Faire du mailing efficace, c'est pas si simpleFaire du mailing efficace, c'est pas si simple
Faire du mailing efficace, c'est pas si simpleThomas P
 
Emailing Et Newsletter 10 Erreurs a eviter
Emailing Et Newsletter 10 Erreurs a eviterEmailing Et Newsletter 10 Erreurs a eviter
Emailing Et Newsletter 10 Erreurs a eviterMediaventilo
 
Dossier de Presse Outlook.com
Dossier de Presse Outlook.comDossier de Presse Outlook.com
Dossier de Presse Outlook.comAgence Hopscotch
 
15 tendances et actualités de l’emailing ces 15 derniers mois
15 tendances et actualités de l’emailing ces 15 derniers mois15 tendances et actualités de l’emailing ces 15 derniers mois
15 tendances et actualités de l’emailing ces 15 derniers moisJonathan Loriaux
 
Création de blog et sites internet
Création de blog et sites internetCréation de blog et sites internet
Création de blog et sites internetpiera5
 
E-commerce Paris 2012 - Anatomie d'un email
E-commerce Paris 2012 - Anatomie d'un emailE-commerce Paris 2012 - Anatomie d'un email
E-commerce Paris 2012 - Anatomie d'un emailContactlab
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
 
Formation Email Marketing - Toulouse - 30 mars 2017
Formation Email Marketing - Toulouse - 30 mars 2017Formation Email Marketing - Toulouse - 30 mars 2017
Formation Email Marketing - Toulouse - 30 mars 2017Jonathan Loriaux
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueGoulven Champenois
 
Réaliser une signature personnalisée d’entreprise avec exchange 2010 « blog d...
Réaliser une signature personnalisée d’entreprise avec exchange 2010 « blog d...Réaliser une signature personnalisée d’entreprise avec exchange 2010 « blog d...
Réaliser une signature personnalisée d’entreprise avec exchange 2010 « blog d...Ahmed Benhamida
 
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...Email responsive : dopez vos performances emailing en adaptant vos campagnes ...
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...Sarbacane
 
Extrait chap1
Extrait chap1Extrait chap1
Extrait chap1mvaudano
 
16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsive
16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsive16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsive
16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsiveClic et Site
 
Office_2019_pour_les_Nuls.pdf
Office_2019_pour_les_Nuls.pdfOffice_2019_pour_les_Nuls.pdf
Office_2019_pour_les_Nuls.pdfOpenWorld
 
Comment mettre à jour automatiquement vos tables des matières Word ?
Comment mettre à jour automatiquement vos tables des matières Word ?Comment mettre à jour automatiquement vos tables des matières Word ?
Comment mettre à jour automatiquement vos tables des matières Word ?Votre Assistante
 
Compte rendu chaberge2 ts1_sio
Compte rendu chaberge2 ts1_sioCompte rendu chaberge2 ts1_sio
Compte rendu chaberge2 ts1_sioshiruh
 
Compte rendu chaberge ts1_sio
Compte rendu chaberge ts1_sioCompte rendu chaberge ts1_sio
Compte rendu chaberge ts1_sioshiruh
 

Similaire à L'intégration d'e-mails responsive (20)

Faire du mailing efficace, c'est pas si simple
Faire du mailing efficace, c'est pas si simpleFaire du mailing efficace, c'est pas si simple
Faire du mailing efficace, c'est pas si simple
 
Html 5
Html 5Html 5
Html 5
 
Emailing Et Newsletter 10 Erreurs a eviter
Emailing Et Newsletter 10 Erreurs a eviterEmailing Et Newsletter 10 Erreurs a eviter
Emailing Et Newsletter 10 Erreurs a eviter
 
Dossier de Presse Outlook.com
Dossier de Presse Outlook.comDossier de Presse Outlook.com
Dossier de Presse Outlook.com
 
FOF Spécial Webinaire.pdf
FOF Spécial Webinaire.pdfFOF Spécial Webinaire.pdf
FOF Spécial Webinaire.pdf
 
Optimiser ma relation client par l'email
Optimiser ma relation client par l'emailOptimiser ma relation client par l'email
Optimiser ma relation client par l'email
 
15 tendances et actualités de l’emailing ces 15 derniers mois
15 tendances et actualités de l’emailing ces 15 derniers mois15 tendances et actualités de l’emailing ces 15 derniers mois
15 tendances et actualités de l’emailing ces 15 derniers mois
 
Création de blog et sites internet
Création de blog et sites internetCréation de blog et sites internet
Création de blog et sites internet
 
E-commerce Paris 2012 - Anatomie d'un email
E-commerce Paris 2012 - Anatomie d'un emailE-commerce Paris 2012 - Anatomie d'un email
E-commerce Paris 2012 - Anatomie d'un email
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Formation Email Marketing - Toulouse - 30 mars 2017
Formation Email Marketing - Toulouse - 30 mars 2017Formation Email Marketing - Toulouse - 30 mars 2017
Formation Email Marketing - Toulouse - 30 mars 2017
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
 
Réaliser une signature personnalisée d’entreprise avec exchange 2010 « blog d...
Réaliser une signature personnalisée d’entreprise avec exchange 2010 « blog d...Réaliser une signature personnalisée d’entreprise avec exchange 2010 « blog d...
Réaliser une signature personnalisée d’entreprise avec exchange 2010 « blog d...
 
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...Email responsive : dopez vos performances emailing en adaptant vos campagnes ...
Email responsive : dopez vos performances emailing en adaptant vos campagnes ...
 
Extrait chap1
Extrait chap1Extrait chap1
Extrait chap1
 
16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsive
16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsive16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsive
16h45 EMDay 2014 - Cas client concret de mise en place d'une créa responsive
 
Office_2019_pour_les_Nuls.pdf
Office_2019_pour_les_Nuls.pdfOffice_2019_pour_les_Nuls.pdf
Office_2019_pour_les_Nuls.pdf
 
Comment mettre à jour automatiquement vos tables des matières Word ?
Comment mettre à jour automatiquement vos tables des matières Word ?Comment mettre à jour automatiquement vos tables des matières Word ?
Comment mettre à jour automatiquement vos tables des matières Word ?
 
Compte rendu chaberge2 ts1_sio
Compte rendu chaberge2 ts1_sioCompte rendu chaberge2 ts1_sio
Compte rendu chaberge2 ts1_sio
 
Compte rendu chaberge ts1_sio
Compte rendu chaberge ts1_sioCompte rendu chaberge ts1_sio
Compte rendu chaberge ts1_sio
 

Dernier

Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapInstallation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapMaxime Huran 🌈
 
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Infopole1
 
Mes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensMes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensErol GIRAUDY
 
Les Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleLes Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleErol GIRAUDY
 
KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311Erol GIRAUDY
 
The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)IES VE
 

Dernier (6)

Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapInstallation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
 
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
 
Mes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensMes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examens
 
Les Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleLes Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence Artificielle
 
KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311
 
The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)
 

L'intégration d'e-mails responsive

  • 4. 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.
  • 5. 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.
  • 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...
  • 17. Mobile friendly 1. La première méthode consiste à faire du «mobile friendly», ou comme certains l’appellent, du...
  • 19. Mobile aware •Grands visuels •Grandes tailles de texte •Grandes zones cliquables Pour être aware, il faut prévoir tout en grand.
  • 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.
  • 22. Responsive 2. Maintenant voyons comment faire du «responsive» (mot un peu fourre-tout) dans un e- mail...
  • 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"]
  • 27. Responsive mais pas trop Certains e-mails adoptent une méthode que j’appelle du «responsive mais pas trop».
  • 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.
  • 46. 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 <style>.
  • 47. Fluide 3. Du coup, on va faire des e-mails fluides.
  • 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.
  • 58. Soyez content de votre travail. Voire même hyper content.