Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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#

HTeuMeuLeu

June 20, 2017
Tweet

More Decks by HTeuMeuLeu

Other Decks in Technology

Transcript

  1. Les Insights Mornings
    Cabestan
    Le 20 juin 2017

    View full-size slide

  2. Rémi Parmentier
    @HTeuMeuLeu

    View full-size slide

  3. !
    CAMPAGNES
    INSPIRANTES
    DISPOSITIFS
    INNOVANTS
    DE DEMAIN
    LES
    ET LES

    View full-size slide

  4. Rien ne fonctionne
    partout pareil.

    View full-size slide

  5. Rendu sans images

    View full-size slide

  6. Images Off
    Source : https://twitter.com/flcarneiro/status/568116082835361792

    View full-size slide

  7. Source : https://twitter.com/HTeuMeuLeu/status/598446088614445056

    View full-size slide

  8. Source : https://twitter.com/nannerb/status/552130097214672897

    View full-size slide

  9. Source : https://litmus.com/community/discussions/271-inspired-by-the-image-blocking-guide-by-litmus-i-decided-to-go-all-out

    View full-size slide

  10. Source : https://twitter.com/carey_mercier/status/636926210589728768

    View full-size slide

  11. Source : https://twitter.com/HTeuMeuLeu/status/327700310783053824/photo/1

    View full-size slide

  12. Accessibilité

    View full-size slide

  13. Source : https://twitter.com/HTeuMeuLeu/status/870259798574551040

    View full-size slide

  14. Source : https://twitter.com/HTeuMeuLeu/status/870259798574551040

    View full-size slide

  15. Source : http://www.accessible-email.org/

    View full-size slide

  16. Nouveautés CSS

    View full-size slide

  17. Nouveautés CSS
    Effets au survol

    View full-size slide

  18. Support
    Effets au survol
    Apple Mail
    Gmail Thunderbird Orange AOL Yahoo

    View full-size slide

  19. Nouveautés CSS
    Animations et transitions

    View full-size slide

  20. Source : https://stigmortenmyre.no/uploads/netflix-narcos.html

    View full-size slide

  21. Source : https://medium.com/@ka.robinson82/https-medium-com-ka-robinson82-fargo-email-6907f00fed16

    View full-size slide

  22. Source : https://litmus.com/scope/ymsph5vzzfqf

    View full-size slide

  23. Support
    Animations et transitions
    Apple Mail Thunderbird Orange AOL

    View full-size slide

  24. Nouveautés CSS
    Modes de fusion

    View full-size slide

  25. Source : http://emails.hteumeuleu.fr/wp-content/uploads/2016/10/blend-modes.html

    View full-size slide

  26. Source : https://codepen.io/SaraSoueidan/pen/e90334f6ffdbb2a2cdd5604e769054e4

    View full-size slide

  27. Source : https://codepen.io/SaraSoueidan/pen/e90334f6ffdbb2a2cdd5604e769054e4
    Sans mode de fusion

    View full-size slide

  28. Support
    Modes de fusion
    Apple Mail
    Gmail Thunderbird Orange AOL

    View full-size slide

  29. Nouveautés CSS
    CSS Grid

    View full-size slide

  30. Source : https://litmus.com/community/discussions/6489-using-css-grid-for-the-latest-litmus-newsletter-layout

    View full-size slide

  31. Source : http://emailweekly.co/

    View full-size slide

  32. Support
    CSS Grid
    Apple Mail
    10.3
    Orange AOL Firefox 52 Chrome 57
    Safari 10.1

    View full-size slide

  33. Interactivité

    View full-size slide

  34. Interactivité
    Vidéo

    View full-size slide

  35. Source : https://litmus.com/blog/how-to-code-html5-video-background-in-email

    View full-size slide

  36. Support
    Vidéo
    Apple Mail 10

    View full-size slide

  37. Source : https://www.emailonacid.com/blog/article/email-marketing/5-brands-that-are-using-gifs-to-elevate-their-email-marketing

    View full-size slide

  38. Interactivité
    Menu Hamburger

    View full-size slide

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

    View full-size slide

  40. Support
    Menu Hamburger
    Apple Mail Thunderbird Orange AOL Yahoo

    View full-size slide

  41. CSS
    HTML
    #myCheckbox:checked ~ * #myBox {
    display: block!important;
    }









    View full-size slide

  42. Interactivité
    Carousel

    View full-size slide

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

    View full-size slide

  44. Source : http://freshinbox.com/resources/tools/carousel/

    View full-size slide

  45. Support
    Carousel
    Apple Mail
    Gmail
    (:hover)
    Thunderbird Orange AOL Yahoo

    View full-size slide

  46. Interactivité
    Scroll fixe

    View full-size slide

  47. Source : https://www.emailonacid.com/blog/article/email-development/tutorial-css-fixed-positioning-in-interactive-email

    View full-size slide

  48. Source : http://tacobell.mkt7706.com/breakfastjourneyA

    View full-size slide

  49. Support
    Scroll fixe (pour un background)
    Gmail Orange AOL Yahoo

    View full-size slide

  50. Interactivité
    3D

    View full-size slide

  51. Support
    3D (en images)
    Apple Mail
    Gmail Thunderbird

    View full-size slide

  52. Source : https://codepen.io/M_J_Robbins/full/XpQZOG/

    View full-size slide

  53. Support
    3D (en CSS)
    Apple Mail

    View full-size slide

  54. Interactivité
    Webcam

    View full-size slide

  55. Mini-site
    Quiz

    View full-size slide

  56. Source : https://litmus.com/litmus-live-2017-tickets-sale-soon

    View full-size slide

  57. Source : http://email-ritzcarlton.com/H/2/v20000015ad2fe14fda0e908f4bbe5be68/HTML

    View full-size slide

  58. Source : http://bit.ly/2hQCKoB

    View full-size slide

  59. Mini-site
    Panier

    View full-size slide

  60. Source : https://litmus.com/blog/embracing-the-fear-our-litmus-live-email-story

    View full-size slide

  61. Source : https://litmus.com/blog/embracing-the-fear-our-litmus-live-email-story

    View full-size slide

  62. Source : https://www.rebelmail.com/shop.html

    View full-size slide

  63. Source : https://www.rebelmail.com/shop.html

    View full-size slide

  64. Source : http://codepen.io/M_J_Robbins/full/aOdKJX/

    View full-size slide

  65. Support
    Mini-site
    Apple Mail Thunderbird Orange AOL Yahoo

    View full-size slide

  66. Les contraintes
    poussent
    à la créativité.

    View full-size slide

  67. Des questions ?

    View full-size slide