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. Par Rémi Parmentier, Développeur Email et Web et auteur du blog Hteumeuleu.fr https://www.eventbrite.fr/e/billets-lemail-aujourdhui-et-demain-34978984083# Cabestan Eric Pierson - Dir Commercial pierson@pro.cabestan.com

1. Les Insights Mornings
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 MailGmail 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 MailGmail 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 57Safari 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 MailGmail 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 ?