Pro Yearly is on sale from $80 to $50! »

Les campagnes inspirantes et les dispositifs innovants de demain

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#

A6201a057eac39e2b97a5a58d5f8601e?s=128

HTeuMeuLeu

June 20, 2017
Tweet

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

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

  14. None
  15. <img src="n_sah_h3.gif" /> ✘

  16. None
  17. <img src="n_sah_h3.gif" alt="" /> ✔

  18. None
  19. <img src="hero.jpg" alt="600px WIDE IMAGE" /> ✘

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

  27. None
  28. None
  29. None
  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

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

  51. None
  52. Interactivité Menu Hamburger

  53. Source : http://bit.ly/2ssqktx

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

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

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

  72. None
  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 ?