Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 ?