Les campagnes inspirantes et les dispositifs innovants de demain

Des e-mails accessibles aux e-mails interactifs, en passant par les dernières nouveautés CSS utilisables dans un e-mail, cette présentation vous propose un tour d'horizon du champ des possibles en matière d’email.

https://www.eventbrite.fr/e/billets-lemail-aujourdhui-et-demain-34978984083#

Transcript

1. Les Insights Mornings Cabestan Le 20 juin 2017
2. Rémi Parmentier @HTeuMeuLeu
3. ! CAMPAGNES INSPIRANTES DISPOSITIFS INNOVANTS DE DEMAIN LES ET LES
4. Rien ne fonctionne partout pareil.
5. Rendu sans images
6. Images Off Source : https://twitter.com/flcarneiro/status/568116082835361792
8. Source : https://twitter.com/HTeuMeuLeu/status/598446088614445056
9. Source : https://twitter.com/nannerb/status/552130097214672897
10. Source : https://litmus.com/community/discussions/271-inspired-by-the-image-blocking-guide-by-litmus-i-decided-to-go-all-out
11. Source : https://twitter.com/carey_mercier/status/636926210589728768
12. Source : https://twitter.com/HTeuMeuLeu/status/327700310783053824/photo/1
13. Accessibilité
15. <img src="n_sah_h3.gif" /> ✘
17. <img src="n_sah_h3.gif" alt="" /> ✔
19. <img src="hero.jpg" alt="600px WIDE IMAGE" /> ✘
21. <img src="hero.jpg" alt="Let's play a game" /> ✔
22. Source : https://twitter.com/HTeuMeuLeu/status/870259798574551040
23. Source : https://twitter.com/HTeuMeuLeu/status/870259798574551040 ✘
24. Source : http://www.accessible-email.org/
25. Nouveautés CSS
26. Nouveautés CSS Effets au survol
30. Support Effets au survol Apple Mail Gmail Thunderbird Orange AOL Yahoo
31. Nouveautés CSS Animations et transitions
32. Source : https://stigmortenmyre.no/uploads/netflix-narcos.html
33. Source : https://medium.com/@ka.robinson82/https-medium-com-ka-robinson82-fargo-email-6907f00fed16
34. Source : https://litmus.com/scope/ymsph5vzzfqf
35. Support Animations et transitions Apple Mail Thunderbird Orange AOL
36. Nouveautés CSS Modes de fusion
37. Source : http://emails.hteumeuleu.fr/wp-content/uploads/2016/10/blend-modes.html
38. Source : https://codepen.io/SaraSoueidan/pen/e90334f6ffdbb2a2cdd5604e769054e4
39. Source : https://codepen.io/SaraSoueidan/pen/e90334f6ffdbb2a2cdd5604e769054e4 Sans mode de fusion
40. Support Modes de fusion Apple Mail Gmail Thunderbird Orange AOL
41. Nouveautés CSS CSS Grid
42. Source : https://litmus.com/community/discussions/6489-using-css-grid-for-the-latest-litmus-newsletter-layout
43. Source : http://emailweekly.co/
44. Support CSS Grid Apple Mail 10.3 Orange AOL Firefox 52 Chrome 57 Safari 10.1
45. Interactivité
46. Interactivité Vidéo
48. Source : https://litmus.com/blog/how-to-code-html5-video-background-in-email
49. Support Vidéo Apple Mail 10
50. Source : https://www.emailonacid.com/blog/article/email-marketing/5-brands-that-are-using-gifs-to-elevate-their-email-marketing
52. Interactivité Menu Hamburger
53. Source : http://bit.ly/2ssqktx
55. Support Menu Hamburger Apple Mail Thunderbird Orange AOL Yahoo
56. CSS HTML #myCheckbox:checked ~ * #myBox { display: block!important; } <input type="checkbox" id="myCheckbox" /> <label for="myCheckbox"></label> … … <div id="myBox" style="display:none;"> … </div> … …
57. Interactivité Carousel
58. Source : http://bit.ly/2ssqktx
59. Source : http://freshinbox.com/resources/tools/carousel/
60. Support Carousel Apple Mail Gmail (:hover) Thunderbird Orange AOL Yahoo
61. Interactivité Scroll fixe
63. Source : https://www.emailonacid.com/blog/article/email-development/tutorial-css-fixed-positioning-in-interactive-email
64. Source : http://tacobell.mkt7706.com/breakfastjourneyA
65. Support Scroll fixe (pour un background) Gmail Orange AOL Yahoo
66. Interactivité 3D
68. Support 3D (en images) Apple Mail Gmail Thunderbird
69. Source : https://codepen.io/M_J_Robbins/full/XpQZOG/
70. Support 3D (en CSS) Apple Mail
71. Interactivité Webcam
73. Mini-site
74. Mini-site Quiz
75. Source : https://litmus.com/litmus-live-2017-tickets-sale-soon
76. Source : http://email-ritzcarlton.com/H/2/v20000015ad2fe14fda0e908f4bbe5be68/HTML
77. Source : http://bit.ly/2hQCKoB
78. Mini-site Panier
79. Source : https://litmus.com/blog/embracing-the-fear-our-litmus-live-email-story
80. Source : https://litmus.com/blog/embracing-the-fear-our-litmus-live-email-story
81. Source : https://www.rebelmail.com/shop.html
82. Source : https://www.rebelmail.com/shop.html
83. Source : http://codepen.io/M_J_Robbins/full/aOdKJX/
84. Support Mini-site Apple Mail Thunderbird Orange AOL Yahoo
85. Les contraintes poussent à la créativité.
86. Des questions ?