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.
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.
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.<br/>http:/<br/>/<br/>www.campaignmonitor.com/css<br/>
#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
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...
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...
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"]
Ç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...
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.
#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.
responsive aware 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...
À 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.
hteumeuleu
smt7174
niftycorp
codehex
yahiru
miyuki2203
nijieinfra
cer
masatoshiitoh
gregonnet
kishida
sachag
tanoku
thekraken
caitiem20
addyosmani
destraynor
afnizarnur
ddemaree
zenorocha
aarron
colly
lara