Trends & Ontwikkelingen

Welkom!

Timon StijnsCampaign Developer | Moderator

Huishoudelijke mededelingen

Je staat op mute, dus we horen je niet ☺

Vragen kan je uiteraard stellen in de chat;

Dit webinar duurt +/- 35 min en wordt opgenomen;

Bonus: we sturen de presentatie ook na;

Wilbert HeinenLead Email Developer | Presentator

Campaign Services

Strategie Creatie Techniek

En voor wie

Sample Text

3.7

Sample Text

Sample Text

Sample Text

Maar ook, met wie

email.geeks.chat

caniemail.com

Agenda

E-mail Design

Darkmode

Interactiviteit en AMP

Animaties

Empathie

Toekomst

E-mail Design

E-mail Design | Jobs To Be Done

Mensen beslissen binnen 50 milliseconden na het openen van je e-mail beslissen of je als bedrijf

betrouwbaar bent.

E-mail Design | Broken Grid & Wiggly Blobs

E-mail Design | Beige is het nieuwe zwart

E-mail Design | 3D afbeeldingen & illustraties

E-mail Design | Donker Design

A design system is a collection of reusable components, guided by clear standards, that can be assembled

together to build any number of applications

E-mail Design | E-mail Design Systems

Maken het bouwen van e-mails schaalbaar, maar wel consistent in uiterlijk

Hierdoor meer tijd voor complexere zaken als marketing automation en interactieve e-mails

Beschikbaar in Clang!

Darkmode

Darkmode is een omgekeerd kleurenschema dat gebruik maakt van lichtgekleurde typografie, UI-

elementen en iconografie op donkere achtergronden

Mobile AppsGmail App (Android)

Gmail App (iOS)

Outlook App (Android)

Outlook App (iOS)

iOS Mail

Desktop ClientsApple Mail

Outlook 2019 (Mac OS)

Outlook 2019 (Windows)

Web ClientsOutlook.com

Darkmode | Welke clients?

Mobile AppsGmail App (Android)

Gmail App (iOS)

Outlook App (Android)

Outlook App (iOS)

iOS Mail

Desktop ClientsApple Mail

Outlook 2019 (Mac OS)

Outlook 2019 (Windows)

Web ClientsOutlook.com

Darkmode | Hoe gaan clients hiermee om?

Darkmode | Gmail App

https://github.com/hteumeuleu/email-bugs/issues/68

Darkmode | Tips

Maak gebruik van afbeeldingen met een transparante achtergrond

Heb je een donker logo? Zet hier een 1px of 2px stroke omheen in de kleur van je achtergrond

Maak gebruik van @media (prefers-color-scheme: dark)

Eventueel aangevuld met [data-ogsc] / [data-ogsb] om Outlook App in Android mee tenemen

Mobile AppsGmail App (Android)

Gmail App (iOS)

Outlook App (Android)

Outlook App (iOS)

iOS Mail

Desktop ClientsApple Mail

Outlook 2019 (Mac OS)

Outlook 2019 (Windows)

Web ClientsOutlook.com

Darkmode | @media (prefers-color-scheme: dark)

Darkmode | HTML en CSS

Darkmode | HTML en CSS

Interactiviteit

Een actie in een e-mail die een gebeurtenis in dezelfde e-mail activeert

Email Client Market Share

*Berekend op basis van 1.29 miljard opens door Litmus Email Analytics in maart 2020

1. Apple iPhone ▲ 37% +11%

2. Gmail ▲ 28% +2%

3. Outlook ▲ 9% +0%

4. Apple Mail ▲ 9% +1%

5. Yahoo! Mail ▼ 5% -2%

6. Apple iPad ▼ 2% -7%

7. Samsung Mail 2% +0%

8. Google Android ▼ 1% -1%

9. Outlook.com ▼ 1% -1%

10. Windows Live Mail 0% +0%

1. Apple iPhone 28%

2. Gmail 26%

3. Outlook 9%

4. Apple iPad 9%

5. Apple Mail 8%

6. Yahoo! Mail 7%

7. Outlook.com 2%

8. Google Android 2%

9. Samsung Mail 2%

10. Thunderbird 1%

Maart 2020* Maart 2019

Email Client Market Share

*Berekend op basis van 1.37 miljard opens door Litmus Email Analytics in april 2020

1. Gmail ▲ 38% +10%

2. Apple iPhone ▼ 30% -7%

3. Apple Mail 9% +0%

4. Outlook ▼ 8% -1%

5. Yahoo! Mail 5% +0%

6. Apple iPad 2% +0%

7. Samsung Mail ▼ 1% -1%

8. Google Android 1% +0%

9. Outlook.com 1% +0%

10. Windows Live Mail 0% +0%

1. Apple iPhone 37%

2. Gmail 28%

3. Outlook 9%

4. Apple Mail 9%

5. Yahoo! Mail 5%

6. Apple iPad 2%

7. Samsung Mail 2%

8. Google Android 1%

9. Outlook.com 1%

10. Windows Live Mail 0%

April 2020* Maart 2020

Wat betekent dit voor interactiviteit in e-mail?

43%Van de e-mail clients ondersteunt volledige

interactiviteit

86%Van de e-mail clients ondersteunt beperkte

interactiviteit

44%Van de e-mail clients ondersteunt* AMP for

Email

Interactiviteit | Tooltips

Interactiviteit | Image Gallery

Interactiviteit | Audio in e-mail

Interactiviteit | Video Faux

Interactiviteit | Popup in e-mail

Interactiviteit | Parallax

Interactiviteit | AMP for Email

Carrousels, Uitklap en Animaties

Interactieve UI in e-mail

Realtime up-to-date data op het moment van openen of refreshen in de e-mail

Realtime Updates

Verstuur informatie vanuit de e-mail door middel van eenformulier inclusief bevestiging

Formulier Afhandeling

Interactiviteit | AMP for Email

Interactiviteit | AMP for Email

Abandoned Cart

CloseAlert of Usabilla Feedback

Realtime Track & Trace

Nieuwsbrief inschrijving/uitschrijving

Preference center

RDW gegevens tonen als je kenteken invoert in formulier in amp e-mail

Funnel/Quiz

Poll

Etc.

Interactiviteit | AMP for Email

AMP for Email in Clang: e-village.nl/amp-email/

AMP for Email: go.amp.dev/learn-email

Gmail: g.co/dev/ampemail

Mail.ru: https://postmaster.mail.ru/amp

Outlook.com: https://docs.microsoft.com/en-us/outlook/amphtml/

Interactiviteit | AMP for Email

Interactiviteit | Voordelen

CTOHoger in interactieve e-mails

vs. reguliere e-mails

CTRHoger in interactieve e-mails

vs. reguliere e-mails

EngagementMeer in interactieve e-mails

vs. reguliere e-mails

Interactiviteit | Guidelines

Dient interactiviteit het doel van de e-mail en helpt het de ontvanger?

Kan de ontvanger nog steeds hetzelfde bereiken als interactiviteit niet werkt?

Houd je e-mail rekening met best practices rondom toegankelijkheid?

Animaties

91% van de consumenten ontvangt liever interactieve en visuele content in plaats van traditionele, statische

content

Animaties | aPNG

Animaties | aPNG

Animated Portable Network Graphic - 2008

Vaak lichter of niet veel zwaarder dan animated gif

Beter van kwaliteit dan animated gif

Transparantie beter mogelijk dan met animated gif

Minder code nodig dan CSS Animaties

Wordt ook beter ondersteund dan CSS Animaties

Animaties | aPNG

Werkt in:

Apple iPhone

Outlook for Mac

Apple Mail

Apple iPad

Samsung Mail

Outlook App

Outlook.com

Yahoo! Mail

Toont alleen eerste frame in:

Gmail

Outlook

Windows Live Mail

Animaties | aPNG

49%Van de e-mail clients

vertoont animated png

46%Van de e-mail clients

toont alleen eersteframe

Animaties | Tips

ezgif.com

Gebruik animaties verstandig en met een doel, zonder af te leiden van je uiteindelijke doel.

Empathie

Empathie | Waarom?

Empathie stimuleertmenselijke connecties

Menselijke connectiesleiden tot relaties

Relaties genererenloyaliteit

68% van de consumenten geeft aan geen aankopen te doen bij merken die negatieve emoties gebruiken in

hun marketing.

Goede relaties starten met goede gesprekken

Empathie | Tips?

Communiceer als mens; je praat tenslotte tegen mensen

Start met luisteren klantenservice

Behandel de ontvanger zoals je zelf behandeld wilt worden

Check regelmatig je geautomatiseerde campagnes op content en tone of voice

bloomandwild.com/thoughtful-marketing-pledge

Binnenkort

Binnenkort | Gmail Annotations

Binnenkort | Gmail Annotations

Brand Indicators for Messaging IdentificationToon je logo bij je e-mail

Valt meer op in de inbox

Wekt vertrouwen bij de ontvanger

Bimigroup.org

Yahoo! Mail ondersteunt het nu

Verder nog weinig over bekend hoe dit verder toegepast gaat worden

Binnenkort | BIMI

Mensen beslissen binnen 50 milliseconden na het openen van je e-mail beslissen of je als bedrijf

betrouwbaar bent.

Binnenkort | Outlook.com Inbox Tabs

Wij helpen je graag

Direct aan de slag?

Meer informatie en aanmelden: https://www.e-village.nl/verhoog-je-conversie/

Speciale aanbieding voor deelnemers van dit webinar:

Onderstaande interactieve objecten van - voor - per object!

Image Gallery object (hover, slider, thumbnail);

Tooltips object;

Video-Faux object.

Interesse? Laat het weten via onderstaande link of de aanmeldknop hiernaast:

Jullie accountmanager neemt contact met je op om de mogelijkheden te bespreken.

e-Village kan je hierbij helpen!

Merkbeleving

Realiseer samen met ons een soft opt-out campagne.

Animaties

Wij helpen je deze te creëren!

Hoge conversies door interactie in je e-mail!

Voeg deze objecten snel toe aan je e-mailtemplate via e-Village.

Vragen?

Meer weten?

e-village.nl

twitter.com/eVillageNL

twitter.com/wilbertheinen

linkedin.com/company/e-village

linkedin.com/wilbertheinen

caniemail.com

howtotarget.email

reallygoodemails.com

Bedankt!

The future of ClangCorona webinar #3 - 14 mei 16:00: https://www.e-village.nl/webinar-future-of-clang-aanmelden/