Korte vraag: hoe heet de taal die webontwikkelaars gebruiken om de structuur te maken van de sites die je elke dag bezoekt? Het antwoord is Hypertext Markup Language (HTML), die eigenlijk altijd al de standaard geweest, al aanwezig was bij de geboorte van het web. Dit geldt echter niet alleen voor webpagina’s. Ook je inbox is een vruchtbare voedingsbodem voor HTML, namelijk voor het ontwerp van e-mails.

Dit is logisch als je bedenkt hoeveel afbeeldingen, GIF’s, video’s en brandingcontent je bijna elk uur in je e-mails ziet. Hoewel je een e-mail in alleen tekst zou kunnen aanbieden, biedt een HTML versie meer voordelen en meer mogelijkheden om jezelf en je bedrijf te profileren en op de markt te brengen.

Voor dit artikel gaan we bespreken hoe je met HTML e-mails kunt maken en verzenden, en waarom je dat zou moeten doen. Op sommige punten gaan we dieper in op hoe je een e-mail codeert, maar je hebt deze kennis niet nodig om je eigen e-mail te maken.

Wat Is een HTML e-mail?

De e-mails die in je inbox terechtkomen, kunnen in twee soorten in je inbox belanden:

  • Platte tekst: dit is bijna als een telegram, maar dan in de moderne tijd. Er is geen styling of minimale opmaak en de ontvanger ziet uitsluitend woorden.
  • HTML: dit is een contrast in vergelijking met platte tekst, en staat vol met design. Het gebruikt HTML code om een e-mail te presenteren, hoewel het, zoals we zullen bespreken, niet altijd gebruik zal maken van moderne webstandaarden.

Je weet bijvoorbeeld als je een e-mail met platte tekst ontvangt, omdat deze er precies uitziet als een document met alleen tekst. Daarentegen ziet een HTML e-mail er bijna hetzelfde uit als een moderne webpagina (afgezien van een paar styling en opmaakproblemen):

Een HTML e-mail in de browser
Een HTML e-mail in de browser.

In de meeste gevallen zal een HTML e-mail er niet naar streven om de ultieme interactiviteit of dynamische betrokkenheid te bieden. Nogmaals, het is iets dat we later zullen bespreken, maar HTML e-mail loopt wat betreft standaarden achter op het web. Als zodanig is HTML meer een ontwerpgestuurde tool dan een om een ervaring te bieden. Dit roept echter een vraag op: waarom zou je HTML e-mail willen gebruiken als de enige reden visueel is? We zullen dit hierna proberen te beantwoorden.

Waarom je HTML e-mail zou gebruiken in plaats van platte tekstopmaak

Het komt om een aantal redenen zelden voor dat je een e-mail in platte tekst van een bedrijf ziet. Platte tekst is echter niet per se verkeerd, maar meer dat het geen van de voordelen biedt van HTML e-mailopmaak. Bijvoorbeeld:

  • Je kunt de inherente visuele elementen gebruiken om de aandacht te vestigen in de verschillende delen van je e-mailcontent.
  • Een HTML e-mail is een rijker format voor het presenteren van je content. Dit betekent dat je gebruik kunt maken van de elementen die gebruikers inmiddels wel verwachten met als doel ze te boeien, zoals afbeeldingen, video en meer.
  • Gecombineerd kunnen beide aspecten je een uitstekende mogelijkheid bieden om je content te branden, net zoals je zou doen met je hoofdwebsite.

De beslissing om een HTML e-mail te gebruiken kent echter niet alleen maar voordelen. Er zijn ook een paar nadelen om te overwegen. Ten eerste moet je rekening houden met de ervaring van de gebruiker, net zoals je zou doen wanneer je een website ontwerpt. Dit kan niet alleen een browser zijn – veel gebruikers lezen ook liever e-mails in een speciale client.

Bovendien moet je ook rekening houden met enkele van de privacy- en beveiligingskwesties die de webontwikkeling domineren. Dit is met name het geval als je JavaScript wilt opnemen, externe lettertypen en andere aspecten wilt gebruiken.

Daarom moet je strijd tegen toegankelijkheid en standaarden voeren op meer fronten dan alleen het web. Het is moeilijk om een HTML e-mail te maken die werkt op zowel browser- en clientbasis. Het is natuurlijk mogelijk om dit te doen, en we zullen het technische aspect in een later gedeelte behandelen. Voor nu wil je de verschillende elementen van je e-mail bepalen en vervolgens proberen deze te implementeren.

De essentiële elementen (en typische praktijken) van een HTML e-mail

Dit artikel zal op een aantal plaatsen verwijzen naar webdesign, vanwege de inherente overeenkomsten. Een aspect dat een vergelijkbare workflow biedt, is hoe je beslist over de facetten en secties van je HTML e-mail.

Net als het web zijn er enkele elementen die praktisch niet onderhandelbaar zijn voor je e-mails. Natuurlijk heb je content nodig. Er zijn een paar typische elementen waarmee je rekening moet houden:

  • Je header is belangrijk omdat dit de eerste indruk is die je e-mail aan lezers zal bieden.
  • Net als bij webdesign, is het ook nuttig om na te denken over welke elementen above the fold worden weergegeven.
  • De eigenlijke content is van vitaal belang, want dit is tenslotte de reden waarom de lezer zich op je e-mails zal abonneren.
  • De footer van je HTML e-mail biedt ook veel waarde voor jou en je abonnees, en kan een ondergewaardeerd element van je e-mails zijn.

Er zijn een paar punten waarop we verder ingaan. Bedenk eerst hoeveel emoji’s ons dagelijks internetgebruik doordringen. Hoewel ze geen strikt HTML element zijn, kan een smaakvolle toepassing van emoji’s wonderen doen voor je content, vooral je header:

Een selectie van emoji's die in de titelheader worden gebruikt
Een selectie van emoji’s die in de titelheader worden gebruikt.

De footer is ook de beste plaats voor een aantal essentiële juridische informatie. Twee van de grootste problemen met betrekking tot e-mails zijn spam en of een e-mail in de juiste inbox terechtkomt (of helemaal niet). Dit is iets waar we in een later gedeelte naar zullen kijken, omdat het een essentieel onderdeel is van het maken en verzenden van HTML e-mails.

Enkele typische praktijken voor je HTML e-mails overwegen

Er is veel crossover met e-mailmarketing als het gaat om enkele van de meest optimale werkwijzen die je in je ontwerpen en lay-outs zult gebruiken. Er is er een die je bijna als een niet-onderhandelbaar element wilt opnemen: een dubbele opt-in.

Een van de grootste e-mailmarketing hacks is dat je je e-mails naar de lezer wilt brengen. Met andere woorden, zorg voor een opt-in formulier op een website, omdat dit een hoge conversion rate heeft. Het zou echter niet de enige keer moeten zijn dat je om bevestiging vraagt. Het is een uitstekende gewoonte om een tweede opt-in ook als e-mail te verzenden:

Een dubbele opt-in e-mail
Een dubbele opt-in e-mail.

Hier zijn een paar redenen voor:

  • Ten eerste bouwt het vertrouwen op bij je lezer, omdat je uitdrukkelijke toestemming krijgt om hen e-mails te sturen.
  • Hierdoor heb je ook expliciete toestemming in het geval van een spammelding (hierover later meer).
  • Je helpt e-mail en spammisbruik te stoppen, omdat mensen zich specifiek moeten aanmelden voor een abonnement op je e-mails.

Omdat een dubbele opt-in inhoudt dat je een e-mail naar het betreffende adres stuurt, is dit de beste manier om het e-mailadres te valideren.

Er zijn ook een paar andere good practices om te overwegen. De volgende zijn echter meer optioneel, omdat je fantastische resultaten krijgt, maar er zullen momenten zijn waarop je deze richtlijnen niet wilt volgen:

  • Je onderwerpregel moet perfect zijn en je e-mailcontent moet to the point zijn. Gezien de opkomst en nu dominantie van mobiel browsen, is dit vooral belangrijk.
  • Daarover gesproken, je wilt ervoor zorgen dat je HTML e-mail probleemloos wordt gelezen op kleinere schermen – dit betekent geen overdreven banners of te grote logo’s.
  • Als je in elke e-mail een sterke call-to-action (CTA) opneemt, heb je een goede kans op een betere gebruikersbetrokkenheid.
  • Tracking is een controversieel onderwerp, maar dit zal je helpen te doorgronden wat je gebruikers doen wanneer je ze een e-mail stuurt. Sommige providers bieden standaard een solide set analyses aan.

Net zo belangrijk als hoe je je e-mail presenteert en instelt, is hoe je het ontwerp en de lay-out maakt. In de volgende paragrafen zullen we bekijken hoe je een HTML-e-mail kunt maken en eindigen met enkele tips om ze te verzenden.

De technische aanpak die je moet volgen om een HTML e-mail te maken

Als je enige ervaring met webontwikkeling hebt, zul je ongetwijfeld HTML5 als je opmaaktaal gebruiken. Dit is een wereld apart van eerdere instanties van HTML en XHTML en bevat meer een scheiding tussen styling (waarvan er praktisch geen geldige elementen zijn) en structuur.

Voor een voorbeeld van het laatste biedt HTML5 een aantal verschillende tags om contentgebieden van je site te definiëren.

Een aantal HTML structurele tags.
Een aantal HTML structurele tags.

HTML voor e-mail is echter van een ander kaliber, waarbij het enigszins achterloopt. Daarom wil je al die oude HTML4 tabellen en inline styling gebruiken om je lay-out te maken. Waarom dit zo is, moet je met de ontwikkelaars van e-mailclients bespreken, omdat zij vaak de HTML e-mail wijzigen wanneer deze in je inbox komt. Een van de meest voorkomende handelingen is het verwijderen van CSS en JavaScript uit e-mails om (onder andere) veiligheidsredenen.

Dit betekent dat je een andere manier moet bieden om stijl toe te voegen aan je HTML e-mails – inline is de enige optie voor compatibiliteit. Over compatibiliteit gesproken: dit is een belangrijke overweging. Je moet jouw wensen wat betreft styling balanceren met de mogelijkheden van de e-mailclient van de eindgebruiker. Als zodanig zijn er een paar andere technische overwegingen die je wilt opmerken:

  • Als je systeemlettertypen gebruikt in plaats van externe, bespaar je een HTTP verzoek, laadt de e-mail snel voor de gebruiker en lever je een consistent ogende e-mail.
  • Je kunt nog verder gaan en een platte tekstversie van je e-mail verstrekken voor degenen die geen HTML e-mail in hun client kunnen bekijken. Veel sites bieden een HTML versie die je online kunt openen, zowel om deze reden als backup.
  • Alt-tekst is net zo belangrijk voor HTML e-mails als voor het web. Gebruik daarom alt-tekst overal waar je een afbeelding aan je content toevoegt voor toegankelijkheid.

Er is één technisch aspect van een HTML e-mail waar je meer over moet nadenken, omdat het de grens kan overschrijden tussen inline styling, CSS en andere factoren. Laten we “conditionals” in het kort bespreken.

Conditionals gebruiken

Een overblijfsel van HTML e-mails die zich vroeger in de toolkit van een HTML webontwikkelaar bevond, is die van conditionals. Hier geef je aan welke browser een bepaald codefragment zal gebruiken.

Eerlijk gezegd is dit bijna altijd een op Microsoft gebaseerd probleem. Voor webontwikkelaars was Internet Explorer (IE) eigenlijk een verschrikkelijke browser om mee te werken. Voor HTML e-mails is dit echter Outlook. Je ziet vaak dat je stijl wordt weergegeven op een manier die je niet had verwacht.

Hierdoor kun je condition blokken aan je code toevoegen en die elementen definiëren. Je kunt bijvoorbeeld zowel op Word gebaseerde als op IE gebaseerde versies van Outlook targeten.

Ten eerste, Word:

<!--[if mso]>

Dit is voor Word gebaseerde versies van Outlook:

<![endif]-->

Voor Internet Explorer gebruik je een andere tag:

<!--[if (IE)]>

Dit is voor IE gebaseerde versies van Outlook:

<![endif]-->

Als de browser die je target op WebKit is gebaseerd (zoals Apple Safari, de PlayStation browser, Amazon’s Kindle en meer), kun je een mediaquery gebruiken om een specifieke stijl te bieden:

.html-email-webkit {
  display: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ..html-email-webkit {
    display: block !important;
  }
}

Dit geeft je een iets betere manier om je HTML e-mail aan te passen aan de weergave van de eindgebruiker. Over het algemeen is HTML styling voor e-mails niet perfect, maar er is genoeg power onder de motorkap van elke e-mailclient om je te helpen een aantal verbluffende lay-outs te maken.

Je opties voor het maken van HTML e-mails

Ondanks wat we al hebben besproken, heb je een aantal flexibele opties om je te helpen bij het maken van HTML e-mails. Je kunt bijvoorbeeld helemaal opnieuw bouwen met een mooie teksteditor en HTML.

Er zijn echter nog andere opties die we kunnen overwegen:

  • Je kunt een speciale dienst gebruiken, zoals een app voor e-mailmarketing, om je e-mails te maken. Veel apps bieden een visuele builder, maar geven je ook de ruimte om je eigen code te schrijven en je eigen template te maken.
  • Daarover gesproken, je zou een template voor je HTML e-mails kunnen downloaden. Dit lijkt veel op een WordPress thema, in die zin dat het een basis vormt voor de rest van je ontwerp. Van daaruit kun je het naar wens aanpassen. Het is een goede middenweg tussen de coderings- en bouwopties.

Later zullen we onze e-mail bouwen met HTML. Laten we echter eerst eens kijken naar enkele van de e-mailserviceproviders die je misschien wilt overwegen, ongeacht de door jou gekozen methode voor het maken van je e-mails.

Drie e-mailserviceproviders die perfect zijn voor het maken van HTML e-mails

Omdat de focus van dit bericht ligt op het maken van HTML e-mails, hoeven we niet al te diep in te gaan als het gaat om e-mailserviceproviders. Toch zijn er een paar die je waarschijnlijk zult overwegen.

We kunnen ze niet allemaal behandelen, dus we gaan drie van de meest populaire noemen. Laten we ze eens bekijken.

1. Mailchimp

Het Mailchimp logo.
Het Mailchimp logo.

Deze e-mailserviceprovider is een go-to oplossing – voor velen bijna een reflexmatige beslissing. Mailchimp is in de ogen van velen de gouden standaard in e-mailmarketing apps, en daar zijn veel goede redenen voor:

  • Het bevat veel typische features die je in veel andere vergelijkbare apps zult vinden.
  • Er is veel hulp als het gaat om het promoten van een bedrijf, zoals marketingautomatisering, tools voor doelgroepbeheer en meer.
  • Je hebt een eersteklas reeks creatieve tools om je te helpen HTML e-mails te maken.

Dat laatste willen we hier natuurlijk onder de loep nemen. De Creative Assistant is een manier voor Mailchimp om meer te weten te komen over je merk en je te helpen bij het bouwen en personaliseren van je e-mails. Je kunt ook externe apps, zoals Adobe Photoshop, aansluiten om je te helpen de perfecte e-mail samen te stellen.

Het is ook eenvoudig om met bestaande HTML te werken, vooral als je de Classic Builder van Mailchimp gebruikt. Hoe dan ook, je hebt manieren om HTML templates te importeren als je ze nodig hebt.

Mailchimp gebruikt een ingewikkelde combinatie van maandelijkse abonnementslagen en het aantal contacten om tot een uiteindelijke prijs te komen. We raden aan dat kleine bedrijven een abonnement van ongeveer $35 per maand nodig hebben, tot 2500 contacten. Je moet echter het beste abonnement voor jou onderzoeken op basis van de features die je nodig hebt en het aantal contacten dat je denkt mee te nemen.

2. AWeber

Voor sommigen vertegenwoordigt AWeber het toppunt van e-mailmarketing. Het is een fantastisch en krachtig platform en bevat een aantoonbaar meer gerichte featureset dan Mailchimp.

Het AWeber logo.
Het AWeber logo.

Het bevat een aantal essentiële features die je nodig hebt om e-mails te verzenden:

  • De mogelijkheid om berichten, campagnes en meer te automatiseren en in te plannen.
  • Je hebt geweldige organisatorische tools, zoals het taggen en segmenteren van abonnees.
  • Met AWeber kun je ook de content die je voor je e-mails maakt, automatiseren. Zo kun je met een minimum aan werk blogposts omzetten in mailings.

Als het gaat om het maken van je e-mails, heeft AWeber een paar trucjes in petto. Het maakt gebruik van een visuele drag-and-drop builder en bevat een bibliotheek met aangepaste templates om mee te beginnen. Bovendien kun je AWeber verbinden met je Canva account en deze laatste gebruiken om je e-mails te ontwerpen.

Er is ook een speciale HTML editor, wat niet het geval is bij Mailchimp. Je krijgt dit zelfs bij het gratis abonnement van AWeber. Daarover gesproken, de prijzen zijn hier eenvoudiger. Je betaalt ongeveer $25 per maand voor maximaal 2500 contacten.

3. Constant Contact

Constant Contact is een uitbijter als het gaat om e-mailserviceproviders, maar ziet het als een geheim wapen. Het biedt een fantastisch scala aan features en functionaliteit, en laat je ook met HTML werken wanneer dat nodig is.

Het Constant Contact logo.
Het Constant Contact logo.

Net als AWeber richt Constant Contact zich op e-mailmarketing boven andere bedrijfsgerichte gebieden. Als zodanig heeft het een featureset waar je van zult genieten:

  • Je beschikt over tools voor het beheren van klantenlijsten en functionaliteit voor marketingautomatisering.
  • Er zijn uitgebreide rapportagemogelijkheden.
  • Je kunt advertentieprogramma’s van Facebook, Instagram en Google integreren.
  • Er zijn veel manieren om nieuwe abonnees op je lijsten te betrekken en aan te trekken.

De ontwerpfunctionaliteit van Constant Contact is ook goed. Je kunt een template kiezen en met een visuele editor werken om het hele ontwerp te bouwen. Je kunt echter ook met HTML werken – soms op geavanceerde manieren in relatie tot andere tools.

De prijs is ook redelijk. Je betaalt ongeveer $35 per maand voor het Core abonnement en 2500 contacten, of $70 voor het Plus abonnement.

Wat je nodig hebt om een HTML e-mail te maken

Voordat je begint met het maken van je HTML e-mails, heb je een aantal tools en vaardigheden nodig. Dit is wat je moet regelen voordat je je knokkels kraakt en begint:

  • Je wilt een code editor gebruiken die je prettig vindt, omdat deze je tijdens het proces moet ondersteunen. Als je niet weet welke je moet kiezen, kiezen veel gebruikers voor Visual Studio Code, hoewel Brackets ideaal zou zijn voor deze specifieke taak. We gaan Onivim2 gebruiken, een editor in Vim-stijl op basis van de kerninfrastructuur van VS Code.
  • Hoewel je HTML vaardigheden nodig hebt, heb je niet dezelfde kennis nodig als een moderne webontwikkelaar (hoewel het je uiteraard wel van pas kan komen).
  • Je hebt een manier nodig om je e-mails te testen – MailHog is een oplossing die we elders op de Kinsta blog bespreken.
  • Hoewel we geen kant-en-klaar template gaan gebruiken, wil je er in de toekomst misschien wel een gebruiken.
  • Je hebt ook een e-mailprovider nodig, omdat je een manier nodig hebt om je voltooide HTML e-mail te verzenden.

Met dit alles op zijn plaats, ben je klaar om een teksteditor te openen en te beginnen. Vervolgens zullen we het proces doorlopen om een eenvoudige HTML e-mail te maken.

Zo maak je een HTML e-mail vanuit het niets

Voordat we beginnen, is het vermeldenswaard dat we geen speciale dienst zoals Mailchimp of AWeber gaan gebruiken. In plaats daarvan gaan we een geheel nieuwe template maken die je kunt importeren waar je maar wilt.

We splitsen het proces op in een paar verschillende secties, want hoewel een HTML e-mail gewoon vergelijkbaar is met een website, moet er nog veel worden overwogen.

1. Creëer de basis voor je HTML e-mail

Het is een goed idee om te beginnen met het frame van je e-mailtemplate. Dit zal enkele typische best pracices voor HTML in het algemeen volgen:

<!DOCTYPE PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
  </head>
  <body>
  </body>
</html>

Er zijn hier een paar dingen aan de hand die we moeten noemen. Eerst specificeren we een “doctype” voor Transitional XHTML 1.0, wat een gangbare praktijk is onder e-mailontwikkelaars. Van daaruit specificeren we een XML namespace, die later belangrijk zal zijn.

Je zult ook enkele metatags opmerken, en deze definiëren de charset en hoe de browser de HTML die volgt in zijn viewport moet weergeven.

De rest van het skelet is eenvoudig – er zijn de titel- en body-tags die we hierna zullen gebruiken.

2. Voeg de structuur toe voor je e-mailtemplate

Terugkomend op onze discussie over welke HTML tags je moet gebruiken, zul je je herinneren dat we geen <div> of andere typische structurele elementen willen gebruiken. In plaats daarvan willen we tabellen gebruiken, omdat dit goed werkt binnen e-mailclients en diensten.

Alles begint met een eenvoudige set <table> tags in de body:

<body>
  <table role="presentation">
    <tr>
      <td>
      </td>
    </tr>
  </table>
</body>

Het kenmerk dat we in de <table> tag instellen, helpt schermlezers om de tekst erin te ontleden, dus het is goed voor de toegankelijkheid.

Vanaf hier moet je nieuwe rijen en kolommen aan je tabel toevoegen om de HTML e-mailtemplate te bouwen. Hoe je dit doet, is aan jou, maar het is goed om te beginnen met een basis van header, footer en bodysecties. We zullen ze hier niet kort herhalen, maar we zullen ze vermelden naarmate we verder komen.

Het goede nieuws is dat je door kunt gaan met het toevoegen van nieuwe rijen aan je tabel als je nog meer secties moet toevoegen. Vanaf hier wil je echter beginnen met het introduceren van styling en andere elementen.

3. Voeg styling toe aan je elementen

Het mooie van HTML is dat je vrijwel alles kan doen wat betreft styling. De opmaak is eenvoudig, maar de stijlen die je toepast, zijn dat misschien niet. Hier zie je je HTML e-mail tot leven komen.

Als richtlijn bij het ontwerpen voegen we een <style> tag toe aan de <head> om een algemene rand weer te geven:

<style>
  table, td {border:2px solid #000000 !important;}
</style>

Om te beginnen gaan we ervoor zorgen dat er geen onverwachte ruimte in de body of de hoofdtabel is (die hier fungeert als onze body omdat sommige e-mailclients die tag zullen verwijderen):

<body style="margin:0;padding:0;">
  <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
</body>

We gaan ook wat centrering toevoegen en extra opvulling verwijderen uit onze verschillende sectiecellen:

<tr>
  <td align="center" style="padding:0;">Header
  </td>
</tr>

Als je dit in je browser bekijkt, ziet het er niet super uit:

Een browservenster dat het skelet van de HTML e-mail toont.
Een browservenster dat het skelet van de HTML e-mail toont.

Vanaf hier kun je je e-mailtemplate echter verder ontwikkelen met behulp van tabellen en stylingtags. We hebben bijvoorbeeld een hero sectie gemaakt voor onze header en de footer en body uitgebreid:

Een mockup e-mailtemplate tijdens het maken
Een mockup e-mailtemplate tijdens het maken (Bron afbeelding: Settergren).

Je zult waarschijnlijk een betere en meer geschikte template voor je behoeften maken, maar met behulp van geneste tabellen en enkele elementaire HTML vaardigheden kun je een responsieve en aangepaste HTML e-mailtemplate maken die het doel bereikt.

4. Test je e-mail

Voordat je klaar bent, wil je je e-mail testen om er zeker van te zijn dat deze goed wordt weergegeven op verschillende apparaten. Er zijn een paar verschillende diensten die hierbij kunnen helpen.

E-mail on Acid bevat bijvoorbeeld een volledige checklist vóór de implementatie om je te helpen ervoor te zorgen dat je template geen problemen veroorzaakt:

De Email on Acid website.
De Email on Acid website.

Litmus gebruikers kennen PutsMail, maar het is voor iedereen toegankelijk:

De Litmus website.
De Litmus website.

Je moet je aanmelden voor een account om de dienst te gebruiken, maar het is eenvoudig te gebruiken. Je maakt gebruik van de functionaliteit om e-mails te bekijken in een aantal verschillende browsers en op verschillende apparaten.

Mailgun biedt ook een fantastische dienst die aansluit bij het hoofdaanbod. Je kunt e-mailclients, browsers en meer testen via de interface. Daarnaast kun je elementen zoals onderwerpregels testen om ervoor te zorgen dat je open rates hoog blijven.

Mailgun's e-mailtester tool.
Mailgun’s e-mailtester tool.

Als je je e-mail eenmaal hebt getest, moet je ervoor zorgen dat deze in de inbox van de ontvanger terechtkomt. In het laatste gedeelte zullen we dit meer bespreken.

Een HTML e-mail verzenden: wat je moet weten

Een voordeel van het gebruik van een e-mailmarketingservice die we nog niet hebben genoemd, is hoe deze omgaat met het juridische aspect van het verzenden van e-mails. Dit is belangrijk, want als je hier iets fout doet, bereik je niet alleen een ontvanger niet, maar kom je ook in de problemen.

Een e-mailmarketingdienst heeft al een goede werkrelatie met de organisaties die spam en aanverwante facetten van het verzenden van een e-mail behandelen. Als zodanig is het vaak een goed idee om een van deze te kiezen als je je geen zorgen wilt maken over het bezorgen van spam.

Er zijn echter een paar tips die we kunnen geven, ongeacht het platform dat je gebruikt:

  • Zorg ervoor dat je alle richtlijnen van de CAN-SPAM wet volgt, vooral als je belangrijkste publiek zich in de VS bevindt. Natuurlijk zullen verschillende landen hun eigen wettelijke richtlijnen hebben.
  • Voeg een dubbele opt-in toe voor abonnees. Hier vraag je om een abonnement te bevestigen, maar stuurt ook een tweede bevestiging. Dit beschermt jou en de abonnee als er een later spamverzoek of privacyverzoek is.

Afleverbaarheid is een belangrijk element van je e-mails, en dit is iets dat we in een ander artikel uitgebreid behandelen. Dit concept is echter een mix van verschillende aspecten, zoals het gebruik van goede code, het verkrijgen van het juiste niveau van toestemming en meer.

Dit sluit aan bij een ander facet: je verzendscore. Dit is vergelijkbaar met een kredietscore en is uiteindelijk een maatstaf voor je reputatie. Er zijn hier een paar verschillende componenten die het geheel maken:

  • De bounce rate van je site.
  • Het aantal klachten dat je site ontvangt met betrekking tot de e-mails die je verzendt.
  • De reputatie van je IP-adres.
  • Je domeinnaam handtekening.

Dit laatste heeft betrekking op je DomainKeys Identified Mail (DKIM) en Sender Policy Framework (SPF). Daarnaast kun je de reputatie van je IP controleren via diensten zoals SenderScore of IPQualityScore.

Als je in eerste instantie de juiste simple mail transport protocol (SMTP) provider kiest, kun je een aantal van deze vakjes in één keer afvinken. Net zoals je keuze voor een e-mailmarketingoplossing, begrijpt deze service wat je nodig hebt om je afleverbaarheid hoog te houden, en aan de juiste kant van de bevoegdheden die er zijn.

Mailgun is een oplossing die we eerder noemden, en dit zou ideaal kunnen zijn. Er zijn echter andere, zoals Mailjet, Sendinblue en zelfs de eigen service van Gmail.

Samenvatting

E-mail is nog lang niet op zijn einde. Als zodanig is het gebruik van e-mail voor je eigen behoeften – zoals promotie en marketing – een fantastische en kosteneffectieve manier om potentiële abonnees, gebruikers en klanten te bereiken.

Hoewel je een speciale HTML template kunt kopen, is het maken van je eigen HTML e-mails niet zo moeilijk. Het kan de manier zijn waarop je slaagt als je een specifieke visie in gedachten hebt. Je moet echter je oude HTML trucs tevoorschijn halen, zoals voorwaardelijke en geneste tabellen. HTML e-maildesign is nog niet op het niveau van modern webdesign, maar met weinig kun je toch veel bereiken.

Zin om aan de slag te gaan met het maken van HTML e-mails, en zo ja, welke vragen heb je? Laat het ons weten in de comments hieronder!

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.