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