Rich media en e-mail: impact maximaliseren (en deliverability)

8 min


119

Geen enkel ander marketingkanaal bouwt levenslange relaties op zoals e-mail. Het is een hoofdreden waarom e-mailmarketing het favoriete marketingkanaal is voor klantenwerving en klantenbehoud (respectievelijk 80% en 81% ).

Rich media is een van de grootste voordelen van e-mail, en transformeert e-mail – eenmalige tekstberichten die alleen geschikt zijn voor interdepartementale communicatie – in een robuust marketingkanaal.

Toch is rich media e-mail een tweesnijdend zwaard: voer het correct uit en het voegt visuele verrukking toe. Maak een foutje en uw e-mail wordt mogelijk niet afgeleverd of breng uw bericht over.

Deze post leidt je door elk type rich media in e-mail en hoe je het kunt inzetten voor maximale impact, deliverability en toegankelijkheid .

Welke soorten rich media zijn beschikbaar voor e-mail?

Rich media “bevat geavanceerde functies zoals video, audio of andere elementen die kijkers aanmoedigen om te communiceren en zich met de inhoud bezig te houden.” Rich media bevatten in e-mail statische afbeeldingen, geanimeerde GIF’s, video’s, audiofragmenten en zelfs CSS-animaties.

Rijke media-elementen kunnen de eentonigheid aan tekstblokken doorbreken en in bepaalde situaties effectiever uitleggen en overtuigen dan woorden alleen.

Richtlijnen en beperkingen voor rich media in e-mail

Ongeacht het type rich media zijn er overkoepelende richtlijnen voor het opnemen van rich media in uw e-mails:

Afbeeldingsafmetingen. E-mails zijn nog steeds ontworpen voor een breedte van 600px, dus om te voorkomen dat afbeeldingen of GIF’s worden bijgesneden, houdt u ze binnen 480-500px. (Bewaar het resterende gebied voor opvulling.) U kunt uw afbeeldingen / video’s met een breedte van 500px maken of in een container van 500px plaatsen.

Bestandsgrootte. Alle e-mailinhoud wordt gedownload van een externe site wanneer u de e-mail opent. Grote bestanden vertragen de downloadtijd en branden via mobiele gegevens.

Idealiter zouden afbeeldingen en GIF’s zo klein mogelijk moeten zijn. Aanbevelingen variëren , maar we stellen voor niet meer dan 400 KB te gebruiken. Als u de beeldkwaliteit kunt behouden, is kleiner beter. Video’s mogen niet langer zijn dan 1 minuut (om mogelijk gegevensgebruik te beperken en de aandacht van de gebruiker te houden).

Gmail is berucht voor het knippen van e-mailberichten als de onderliggende code een bestandsgrootte van meer dan 102 kB heeft. Aangezien CSS3-animaties extra coderegels bevatten, moet u ervoor zorgen dat uw HTML-sjabloon de limiet niet overschrijdt.

Compatibiliteit. Moderne e-mailclients ondersteunen de meeste rich media-indelingen. Voor niet-compatibele e-mailclients zoals Outlook (die geen GIF’s, achtergrondafbeeldingen of video’s ondersteunt), moet u de juiste fallback gebruiken. Daarover later meer.

Hier zijn zes soorten rich media en hoe deze in e-mails te gebruiken.

1. Statische afbeeldingen in e-mails

Elke vorm van afbeeldingen (foto’s, illustraties, enz.) Zonder beweging wordt gecategoriseerd als een stilstaand beeld, de basisvorm van rich media in e-mails. JPG (JPEG) en PNG zijn twee veelgebruikte bestandsindelingen voor statische afbeeldingen.

JPG’s hebben kleinere bestandsgroottes maar verliezen ook wat detail tijdens de compressie; PNG-bestanden behouden de details ten koste van een grotere bestandsgrootte. Voor afbeeldingen met scherpe contrasten (zoals tekeningen) of voor het behoud van ingesloten tekst, is PNG meestal de betere keuze.

Statische afbeeldingen zijn een geweldige manier om ideeën grafisch weer te geven in plaats van tekst te gebruiken. In plaats van dat abonnees lezen over een auto-ontwerp, kunnen afbeeldingen van de auto vanuit verschillende hoeken hen helpen begrijpen.

Consistentie in het gebruik van afbeeldingen kan ook helpen om uw merkidentiteit te bepalen. In de e-mail hieronder van Craftsman koppelt dezelfde rode tint dezelfde achtergrond, heldenafbeelding en productafbeeldingen aan elkaar:

vakman e-mail
Beeldbron )

U kunt ook afbeeldingen toevoegen als achtergrond voor uw e-mailexemplaar. Een achtergrondafbeelding verbetert de visuele impact en markeert, indien gekozen, de kop goed.

In de onderstaande e-mail van Quip voegt het hero-beeld een stimulus toe zonder afbreuk te doen aan of te concurreren met de kop:

quip email

beperkingen

Om veiligheidsredenen blokkeren de meeste e-mailclients afbeeldingen van onbekende afzenders. Tenzij uw abonnee uitdrukkelijke toestemming heeft gegeven om afbeeldingen automatisch te downloaden, ziet de e-mail die ze zien er als volgt uit:

vakman e-mail afbeeldingen uitgeschakeld

Een manier om deze beperking te beheren is ALT-tekst. Zelfs als de afbeelding niet wordt geladen, kan de abonnee lezen wat de afbeelding vertegenwoordigt; ALT-tekst verbetert ook de toegankelijkheid voor e-mailontvangers die vertrouwen op schermlezers.

afbeeldingen per e-mail uitgeschakeld / ingeschakeld met alt-tekst
In het bovenstaande e-mailbericht van Rubi wordt in het linkerdeel de e-mail met afbeeldingen uitgeschakeld en de juiste ALT-txt weergegeven.

Als je nog een stapje verder gaat, kun je pixelillustraties maken om afbeeldingen weer te geven, zelfs als afbeeldingsbestanden zijn uitgeschakeld. De kunst is om de afbeelding zo te snijden dat elke sectie kan worden gekleurd of gestileerd om prachtige afbeeldingen te maken die lijken op 8-bits afbeeldingen.

In een e-mail van Pizza Express is de cinemagraph in plakjes gesneden zodat een champagne-fluitglas nog steeds zichtbaar is als pixelafbeelding:

pizza express pixel art in html email

Hoewel een afbeelding kan helpen uw bericht te visualiseren, kan deze uw exemplaar niet vervangen. Idealiter moet u een 80: 20-tekst-naar-beeldverhouding behouden in uw e-mailopmaak om te voorkomen dat u wordt gemarkeerd als SPAM. (Als u een enkele afbeelding gebruikt als de volledige e-mailinhoud, wordt ook het vermoeden gewekt dat de e-mail SPAM is.)

Zelfs als SPAM geen overweging is, kan het gebruik van te veel afbeeldingen ervoor zorgen dat abonnees met beeldblokkers het bericht missen.

2. Geanimeerde GIF’s in e-mails

Door opeenvolgend frames te wijzigen met een vooraf ingestelde duur, een fenomeen dat de ‘ Persistence of Vision ‘ wordt genoemd, krijgen GIF’s de illusie om een ​​animatie te zien.

Met GIF’s worden bewegingen en complexe concepten gemakkelijker weergegeven dan met tekst of statische afbeeldingen, wat kan bijdragen tot meer conversies. Dell slaagde erin om een ​​conversieratio van 109% te scorendoor een GIF op te nemen die de beweging van hun converteerbare laptops liet zien:

dell email met gif
Beeldbron )

Aangezien een GIF tussen frames verandert, kunt u bovendien experimenteren met verschillende frametijden. In het onderstaande voorbeeld van Kate Spade geven verschillende frames verschillende kleuren van hetzelfde product weer:

gif e-mail voor productafbeeldingen

In een ander voorbeeld, door Moo Print, zou een statisch beeld voldoende zijn geweest, maar de beweging van de hand trekt onmiddellijk uw aandacht:

moo print e-mail met gif

Voorbeeld use cases

  • Breng variaties van een product in dezelfde ruimte onder de aandacht.
  • Laat zien hoe uw product werkt.
  • Maak een diavoorstelling om meerdere afbeeldingen weer te geven.
  • Zorg voor een 360-graden beeld van een product.

beperkingen

Vanwege de beperkingen van de renderengine ondersteunen Outlook en Lotus Notes geen GIF-animaties – alleen het eerste frame wordt weergegeven. Dit maakt het gebruik van GIF voor B2B-e-mails lastig; een groter segment van uw doelgroep maakt waarschijnlijk gebruik van Outlook. Houd vitale informatie in het eerste frame of gebruik de GIF om niet-essentiële informatie over te brengen.

Hoe meer frames in een GIF, hoe groter de bestandsgrootte. Dit is dubbelzinnig: u verhoogt het datagebruik voor abonnees op beperkte dataplannen en de abonnee ziet alleen een leeg vak totdat de GIF wordt geladen.

3. Cinemagraphs in e-mails

Cinemagraphs zijn GIF’s met een element dat alleen draait op de achtergrond en waarvan de rest geanimeerd is. Zoals dit voorbeeld van Netflix laat zien, kunnen cinemagraphs een opvallende visuele impact genereren:

cinemagraph in e-mail van netflix

Voorbeeld use cases

  • Mediabedrijven kunnen e-mails versturen die beter aansluiten op de esthetiek van het eindproduct, zoals een televisieserie of film.
  • Merken die nieuwe producten introduceren, kunnen een dramatisch effect toevoegen.

beperkingen

Cinemagraphs delen dezelfde beperkingen als andere GIF’s.

4. Video’s in e-mails

Video’s maximaliseren de hoeveelheid informatie die u verzendt in beperkt e-mailvastgoed. Een korte instructieve videoclip kan meer informatie overbrengen dan een e-boek.

Zoals elders op internet, is het automatisch afspelen van video’s geen ideale gebruikerservaring. (Met een click-to-play-knop kunt u ook de interesse van gebruikers in e-mailvideo’s meten.)

Het toevoegen van video’s aan e-mails vereist het uploaden van uw video naar een site van derden (bijv. YouTube, Wistia, Vimeo, etc.) en het insluiten van de URL in uw e-mail.

Airtable video in e-mail

Voorbeeld use cases

  • Een korte introductievideo in een onboarding-e-mail kan helpen bij het stellen van verwachtingen voor abonnees.
  • Een uitlegvideo kan laten zien hoe een fysiek product te gebruiken.
  • Makelaars, toeristische bedrijven of universiteiten kunnen virtuele rondleidingen aanbieden.
  • Bedrijven kunnen hun merk humaniseren met berichten van oprichters of werknemers.

beperkingen

Ingesloten video’s zijn een HTML5-eigenschap en worden alleen ondersteund door een paar e-mailclients, zoals Thunderbird, Apple Mail, iOS-mail en native Android (niet Gmail mobiel).

Je moet een geanimeerde GIF of afbeelding gebruiken met een link naar de video als een terugval. Plaats het onder het videoframe en maak het met voorwaardelijke codering alleen zichtbaar voor niet-ondersteunende e-mailclients.

Net als bij grote afbeeldingen of GIF’s voegen video’s toe aan de hoeveelheid gegevens die klanten nodig hebben om deel te nemen aan uw e-mail .

5. Audio in e-mails

Achtergrondmuziek bepaalt de toon in films; het kan hetzelfde doen in e-mail – als het op de juiste manier wordt gebruikt. (Er zijn redenen waarom websites niet langer automatisch muziek afspelen wanneer je op de startpagina terechtkomt …)

In de onderstaande e-mail speelt een instrumentale versie van het nummer “Closer” van The Chainsmokers op de achtergrond terwijl een geanimeerde GIF op een loop is.

audio in e-mail voorbeeld
Beeldbron )

Om de toon te helpen instellen, voegt de onderstaande e-mail griezelige geluiden toe. Ervaar het zelf hier .

Voorbeeld use cases

  • Als je all-in gaat op ‘tone’, voegt audio een ander element toe.
  • Voor audio-gerelateerde promoties (bijv. Muziekevenementen) kan een audioclip zinvol zijn.

beperkingen

E-mailaudio wordt alleen ondersteund in Apple Mail, iOS-mail, Native Android en Samsung Mail. Hoewel dit misschien geen groot probleem is – de e-visuals kunnen nog steeds worden weergegeven – zullen abonnees de audio misschien niet opmerken, tenzij je het bestaan ​​aangeeft.

Audioclips voegen een bestandsgrootte toe aan de e-mail, hoewel een kleine audiofragment dat in een lus wordt afgespeeld of op een platform van derden wordt gehost, de downloadtijd kan verkorten.

6. CSS-animatie in e-mails

Met behulp van JavaScript en (steeds minder vaak) Flash hebben websites visueel indrukwekkende animaties en overgangen om aandacht te trekken. E-mailclients ondersteunen om veiligheidsredenen geen JavaScript of Flash.

Maar met de acceptatie van CSS3-animaties kunnen e-mailontwikkelaars bepaalde webgebaseerde interactiviteit repliceren in e-mail:

Keyframe-animaties zijn mogelijk dankzij CSS. Keyframe-animaties transformeren en verplaatsen e-mailelementen op basis van een hoofdframe, waardoor een illusie ontstaat van een geanimeerd element:

css3 email voor interactief spel
In de bovenstaande e-mail van Penguin Random House blijft de bus gerepareerd terwijl de achtergrond schuift, waardoor de illusie ontstaat dat de bus over een vaste weg rijdt. ( Beeldbron )
e-mailspel met css3
De bovenstaande e-mail, getiteld ‘Super Mail Quest’, is een compleet spel binnen de e-mail: de scènes veranderen op basis van gebruikerskeuzes. (Je kunt hier je geluk beproeven .)
interactieve kortingscode e-mail met css
De bovenstaande e-mail repliceert een fietsslot en geeft een kortingscode weer wanneer een gebruiker de juiste combinatie instelt. ( Beeldbron )

Voorbeeld use cases

beperkingen

E-mailclients ondersteunen geleidelijk CSS3, maar slechts een handjevol ondersteunt volledig alle CSS3-effecten. Dit is beheersbaar zolang u een passende fallback voor de niet-ondersteunende e-mailclients biedt. Het toevoegen van een “Bekijk online” -link kan ervoor zorgen dat iedereen een (bijna) uniforme ervaring krijgt wanneer hij / zij met uw e-mail communiceert.

De onderstaande tabel bevat e-mailclients en de interactiviteit die ze ondersteunen:

functies ondersteund in e-mail per e-mailclient
CSS-animaties ondersteund door e-mailclient
Beeldbron )

Personalisatie: het volgende niveau in rich media-e-mail

Uit onderzoek van meer dan 7000 consumenten door Salesforce bleek dat consumenten steeds comfortabeler zijn in personalisatie :

  • 57% van de consumenten is bereid om persoonlijke gegevens te delen in ruil voor gepersonaliseerde aanbiedingen of kortingen;
  • 52% zou persoonlijke gegevens delen in ruil voor productaanbevelingen;
  • 53% zou hetzelfde doen voor gepersonaliseerde winkelervaringen.

Maar terwijl 58% van de e-mailmarketeers al enige vorm van personalisatie gebruiken, gaan maar een paar verder dan merge-tags. Naast het personaliseren van e-mailexemplaren, kunnen gepersonaliseerde afbeeldingen de perceptie van op maat gemaakte berichten helpen versterken:

lucozade-personalisatie in HTML-e-mail

In de bovenstaande e-mail van Lucozade is de afbeelding van de held gepersonaliseerd met de naam van de ontvanger.

Conclusie

Rijke media in e-mails vormen een integraal onderdeel van een visueel aantrekkelijke e-mail. Alle rich media worden geleverd met een aantal kosten – iets langere laadtijden, meer gegevensgebruik. Maar de juiste implementatie kan e-mails op merk houden, de betrokkenheid van gebruikers vergroten en helpen uw campagnes te differentiëren in een overvolle inbox.

Sommige van de meest geavanceerde functies, zoals ingesloten video’s en CSS3-animaties, vereisen nog steeds passende fallbacks, maar de ondersteuning voor e-mailclients neemt alleen maar toe.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format