De eenvoudige handleiding voor het maken van een HTML-e-mail [+ gratis sjablonen]

wanneer u een e-mail maakt met behulp van een drag-and-drop-of modulegebaseerde tool, genereert u eigenlijk een HTML e-mail.

Er zijn twee hoofdtypen e — mail die u kunt verzenden en ontvangen: e-mails met platte tekst (Dit zijn precies hoe ze klinken-elke e-mail die alleen gewone oude tekst bevat zonder opmaak) en HTML-e-mails, die zijn geformatteerd en gestyled met behulp van HTML en inline CSS.

HTML e-mails zijn gemakkelijk te herkennen-de meeste van de gestileerde, multimedia marketing e-mails in uw inbox zijn HTML e-mails.

als marketeer heb je waarschijnlijk HTML-e-mails vergeleken met e-mails met platte tekst en besefte je dat er verschillende voordelen zijn voor elk type. HTML-e-mails zijn niet inherent beter dan e-mails met platte tekst en in verschillende situaties kunnen beide typen deel uitmaken van een succesvol e-mailmarketingprogramma.

Dit is hoe een HTML eruit ziet op de front-end. Klik op de HTML knop om de code erachter te zien.

see the pen HTML Email Template from HubSpot by Christina Perricone (@HubSpot) on CodePen.

in dit artikel bespreken we hoe u kunt beginnen met het maken van HTML-e-mails, ongeacht uw ervaringsniveau en comfort met codering, en delen we enkele gratis sjablonen die u kunt gebruiken. Laten we erin duiken.

Hoe maak je een HTML-e-mail

Goed Nieuws: je hoeft eigenlijk niet te weten hoe je moet coderen om een HTML-e-mail te maken.

De meeste tools die e-mail maken en verzenden (zoals HubSpot) bieden vooraf geformatteerde, kant-en-klare HTML-sjablonen waarmee u e-mails kunt ontwerpen zonder ooit toegang te hoeven krijgen tot de eigenlijke code op de back-end.

Als u wijzigingen aanbrengt in de e-maileditor, worden deze wijzigingen automatisch gecodeerd in het eindproduct. E-mailbouwtools zoals deze zijn een ideale optie als u geen e-mailontwerper in uw team hebt, maar u toch professioneel ogende marketing-e-mails wilt verzenden.

Pro tip: hulp nodig met de inhoud van je e-mail? De Campagneassistent van HubSpot kan in slechts een paar klikken een aangepast eerste ontwerp maken, zodat u terug kunt naar het leuke gedeelte.

wilt u nog steeds een HTML-e-mail vanaf nul maken?

als u vertrouwd bent met HTML en meer directe controle wilt over de code van uw e-mails, kunt u met de meeste e-mailtools HTML-bestanden rechtstreeks importeren voor gebruik als aangepaste e-mailsjablonen.

er zijn een grote verscheidenheid aan gratis HTML – e-mailsjablonen beschikbaar op het web (waarvan sommige we hieronder zullen delen), en als u de weg Weet in een HTML-bestand, is het meestal vrij eenvoudig om de sjabloon aan te passen aan de e-mailbouwtool van uw keuze.

om een HTML-e-mail helemaal opnieuw te maken, moet je een geavanceerde kennis van HTML hebben (of werken met een ontwikkelaar die dat wel doet). Deze gids biedt een solide overzicht van het coderen van een basis HTML-e-mail. Omdat het proces van het maken van een HTML-e-mail vanaf nul behoorlijk betrokken kan zijn, raden we aan om met een ontwikkelaar te werken of in plaats daarvan een vooraf gemaakte HTML-e-mailsjabloon te gebruiken.

een HTML e-mail speciaal voor HubSpot ontwikkelen?

Als u een HTML-e-mailsjabloon ontwikkelt die specifiek is bedoeld voor gebruik in HubSpot, moet u ervoor zorgen dat u de vereiste HubL-tokens opneemt (deze zorgen ervoor dat uw e-mails kunnen worden aangepast en voldoen aan de CAN-SPAM-wetten). U kunt hier een complete gids vinden voor het coderen van HubSpot-specifieke HTML-e-mailsjablonen. Of gebruik gewoon onze eenvoudige what-you-see-is-what-you-get e-mail editor.

Best Practices voor HTML-e-mail

1. zorg ervoor dat uw HTML-e-mail responsief is voor verschillende schermgroottes en apparaten.
2. zorg ervoor dat je styling werkt in verschillende e-mailclients.
3. wees je bewust van hoe lang het duurt voordat je HTML-e-mails worden geladen.
4. Plan (zoveel mogelijk) voor inconsistenties van eindgebruikers.
5. voer grondige tests uit.

nu je de basis begrijpt van wat er nodig is om een HTML-e-mail te ontwikkelen, laten we een paar belangrijke best practices bespreken die je in gedachten moet houden. Het maakt niet uit welke methode u van plan bent om HTML-e-mails te maken, deze best practices helpen het ontwerp, de gebruikerservaring en de leverbaarheid van uw e-mails te verbeteren.

1. Zorg ervoor dat uw HTML-e-mail responsief is voor verschillende schermgroottes en apparaten.

de manier waarop uw e-mail eruit ziet in de inbox van een gebruiker hangt af van een breed scala aan verschillende factoren.

een van de grootste en meest voor de hand liggende factoren is de schermgrootte van het apparaat waarop het wordt bekeken. Een e-mail die er geweldig uitziet en goed is geformatteerd op een desktop, kan gemakkelijk uitgroeien tot een wirwar van onleesbare, overlappende tekst en afbeeldingen wanneer deze op een smartphonescherm worden bekeken.

om ervoor te zorgen dat uw HTML-e-mails er op een breed spectrum van schermformaten uitzien zoals u het bedoeld hebt, is het beste wat u kunt doen, uw lay-out eenvoudig en duidelijk te houden. Wanneer u meer complexe elementen zoals meerdere kolommen en zwevende afbeeldingen begint toe te voegen, wordt het moeilijker om het formaat van uw e-mail voor verschillende schermformaten te vertalen.

als u besluit om een complexere lay-out te ontwikkelen, zorg er dan voor dat u actief aan het oplossen bent hoe de elementen zullen worden gerangschikt om aan verschillende schermgroottes te voldoen. Als uw e-mail bijvoorbeeld wordt weergegeven als meerdere kolommen op desktop, vliegt dezelfde structuur niet op mobiel — U moet mediaquery ‘ s gebruiken om te definiëren hoe elementen op verschillende schermgroottes worden weergegeven.

onthoud dat het ontwikkelen van echt responsieve HTML-e-mails verder gaat dan de structuur en het formaat van uw bericht. Denk na over hoe de algehele gebruikerservaring van uw e-mail op verschillende apparaten wordt waargenomen. Zorg ervoor dat uw lettertypekeuzes net zo leesbaar zijn op mobiel als op desktop en gebruik mobielvriendelijke knoppen of CTA ‘ s in plaats van hyperlinked text (heb je ooit geprobeerd om op een kleine regel hyperlinked text te tikken op mobiel? Het is niet erg gemakkelijk).

u vindt onze meer diepgaande gids voorbest practices voor mobiele e-mail hier.

2. Zorg ervoor dat uw styling werkt in verschillende e-mailclients.

een andere grote factor die een grote invloed heeft op de manier waarop uw HTML-e-mails in de inboxen van uw abonnees worden weergegeven, is de e-mailclient die ze gebruiken om het bericht te openen. Elke e-mailclient laadt e-mails iets anders, dus een e-mail die er op een bepaalde manier uitziet in Gmail zal er waarschijnlijk anders uitzien in Outlook.

gelukkig, als je weet hoe de meest populaire e-mailclients bepaalde HTML-en CSS-elementen laden, kun je een vrij consistente ervaring creëren voor de inboxen van verschillende gebruikers. Het gaat erom te weten welke niet-ondersteunde tags moeten worden vermeden en dienovereenkomstig moeten worden aangepast. In deze uitgebreide handleiding wordt uitgelegd hoe de meest populaire e-mailclients (inclusief Gmail en meerdere versies van Outlook) verschillende stijlelementen ondersteunen en weergeven.

je kunt ook een artikel bekijken dat we hebben geschreven over het optimaliseren van e-mails voor verschillende e-mailclients.

3. Wees je bewust van hoe lang het duurt voordat je HTML-e-mails worden geladen.

Hoe lang uw e-mail duurt om te laden, kan heel goed het verschil zijn tussen het verkrijgen van een nieuwe klant en het verliezen van een gefrustreerde abonnee. Hoewel het verleidelijk kan zijn om te profiteren van alle verschillende stylingopties en mogelijkheden om visuals op te nemen die HTML-e-mails bieden, maakt dat niets uit als uw e-mail te lang duurt om te laden.

terwijl u uw HTML — e-mail ontwerpt, moet u zich ervan bewust zijn hoe lang het duurt voordat uw e-mail wordt geladen-vooral als iemand bijvoorbeeld uw bericht opent op zijn ochtendmetro-pendeldienst met een zwakke gegevensverbinding. Hier zijn een paar kleine stappen die u kunt nemen die een lange weg zullen gaan naar het verbeteren van de laadtijd.

gebruik Afbeeldingen spaarzaam.

op die manier versterkt u het bericht dat u wilt overbrengen naar abonnees. Gebruik altijd een beeldcompressor (zoals Compressor.io) om de bestandsgrootte zoveel mogelijk te verkleinen. De meeste beeldcompressoren kunnen de bestandsgrootte van een afbeelding aanzienlijk verkleinen zonder afbreuk te doen aan de kwaliteit, dus het nemen van deze extra stap zal de visuele integriteit van uw e-mail niet schaden.

gebruik standaard web fonts.

aangepaste lettertypen zijn geweldig voor het verfraaien van een bestemmingspagina, maar ze kunnen een vreemde laag complexiteit toevoegen wanneer ze aan een e-mail worden toegevoegd. Zoals we hierboven hebben besproken, behandelen alle e-mailclients stijlelementen anders, en dit geldt vooral voor lettertypen. Om veilig te zijn, gebruik standaard weblettertypen en controleer of de e-mailclient die de meeste van uw abonnees gebruiken een bepaald lettertype ondersteunt.

probeer een HTML minifier.

een HTML-minifier (zoals minifycode.com en smallseotools.com) verwijdert automatisch code die niet nodig is in een HTML-bestand. Repetitieve, extra elementen worden verwijderd, maar de daadwerkelijke weergave van uw e-mail moet hetzelfde blijven (test het altijd uit!). Elke regel code heeft invloed op Hoe lang een e-mail duurt om te laden, dus de tijd nemen om ongewenste code te verwijderen kan een positief effect hebben op de laadtijd.

houd je boodschap gericht op één doel.

de beste manier om de laadtijd van e-mails te verminderen, is door de hoeveelheid inhoud die u toevoegt aan elk van uw e-mails te verminderen. Het lijkt misschien voor de hand liggend, maar te veel marketeers proberen te veel inhoud in hun e-mails te stoppen. Dat leidt niet alleen tot een onaangename gebruikerservaring (niemand wil een roman in e-mailvorm lezen), maar het kan je laadtijd uit de hitlijsten sturen en ervoor zorgen dat gebruikers je e-mail verlaten. Houd het simpel en je gebruikers zullen je dankbaar zijn.

4. Plan (zoveel mogelijk) voor inconsistenties van eindgebruikers.

de schermgrootte en e-mailclient zijn niet de enige factoren die de manier waarop uw HTML-e-mail wordt weergegeven in de inboxen van uw abonnees kunnen veranderen. Elementen zoals de versie van hun e-mailclient, hun besturingssysteem, hun unieke gebruikersinstellingen, hun beveiligingssoftware en of ze automatisch Afbeeldingen laden, kunnen allemaal van invloed zijn op hoe uw e-mail wordt geladen.

zoals je waarschijnlijk kunt raden aan die flinke lijst met factoren, zou het proberen om ze allemaal op te lossen (elke keer dat je een e-mail stuurt) waarschijnlijk genoeg zijn om je computer door de kamer te laten gooien.

maar je hoeft niet volledig hulpeloos te zijn in het gezicht van deze variabelen — je hoeft alleen maar een beetje vooraf te plannen.

overweeg om een webpagina-versie van uw e-mail te maken.

Dit is een soort van het geven van uw e-mail een fail-safe knop. Als Om een of andere reden — vanwege een van de vele factoren die hierboven zijn besproken — uw liefdevol ontworpen e-mail als een absolute puinhoop wordt weergegeven wanneer een abonnee deze opent, hebben ze op zijn minst de optie om op “Bekijk als webpagina” te klikken en de e-mail te zien zoals u het bedoeld had.

omdat stijlelementen veel consistenter worden weergegeven in webbrowsers ten opzichte van e-mailclients, hebt u veel meer controle over de webpagina-versie van uw bericht. In HubSpot is er een optie die u kunt inschakelen die automatisch een webpagina-versie genereert.

Maak een platte tekstversie van uw e-mail.

een platte tekst versie is precies wat het klinkt — een alternatieve versie van uw HTML e-mail die wordt weergegeven in volledig platte tekst. Het toevoegen van een platte tekstversie van uw HTML-e-mail is belangrijk omdat sommige e-mailclients en gebruikersinstellingen HTML niet kunnen (of ervoor kiezen om dit niet te doen).

als dit het geval is, zal de client op zoek naar een platte tekst alternatieve versie van uw HTML-e-mail te laden voor de gebruiker. Als er geen bestaat, kan het een signaal geven aan de e — mailserver van de ontvanger dat uw bericht spam is-of mogelijk gevaarlijk.

De meeste e-mailtools zoals HubSpot bieden automatisch een platte tekstversie die wordt weergegeven als de e-mailserver van een ontvanger dit vereist, maar als u een HTML-e-mail helemaal opnieuw codeert, moet u iets maken dat een multipart MIME-bericht wordt genoemd.

een multipart MIME-bericht is een e-mail die zowel een platte tekst als een HTML-versie van dezelfde e-mail bevat. Als de e-mailclient of het beveiligingssysteem van een ontvanger geen HTML-e-mail toestaat, wordt de versie met platte tekst weergegeven. Dit is een proces dat een geavanceerde kennis van codering vereist, dus we raden aan om met een ontwikkelaar te werken.

zorg ervoor dat uw e-mail nog steeds zinvol is als de afbeeldingen niet worden geladen.

sommige gebruikers hebben automatisch laden van afbeeldingen uitgeschakeld, wat betekent dat ze uw e-mail zonder afbeeldingen zien wanneer ze deze openen. Vertrouw daarom niet volledig op afbeeldingen om de Betekenis van uw bericht over te brengen en voeg altijd alt-tekst toe aan de afbeeldingen die u wel opneemt. Alt-tekst wordt geladen, zelfs als Afbeeldingen dat niet doen, zodat uw abonnees een algemeen idee kunnen krijgen van wat de afbeeldingen bevatten.

5. Voer grondige tests uit.

ten slotte moet u uw HTML-e-mail in elke ontwikkelingsfase testen om ervoor te zorgen dat deze werkt voor verschillende e-mailclients, besturingssystemen en apparaattypen. Wacht niet tot het einde van het proces om uw e — mail te testen-testen terwijl u werkt is de beste manier om inconsistenties tussen verschillende e-mailclients te herkennen en ervoor te zorgen dat u de meest consistente ervaring voor uw ontvangers creëert.

sommige e-mailtools (zoals HubSpot) bieden in-app testen binnen hun e-mailbouwers om het proces gemakkelijker te maken. Als u helemaal opnieuw werkt, kunt u een tool zoals HTML Email Check of PreviewMyEmail gebruiken om een beter idee te krijgen van hoe uw e-mail eruit zal zien in verschillende e-mailclients en apparaten.

eenvoudige en gratis HTML e-mailsjablonen

Er zijn een overweldigende hoeveelheid HTML – e-mailsjablonen beschikbaar op het web, en ze variëren in kwaliteit, reactievermogen en prijs. We hebben een selectie van gratis HTML-e-mailsjablonen samengesteld die een responsieve gebruikerservaring bieden. Zorg ervoor dat u de Algemene Voorwaarden op elk afzonderlijk sjabloon leest voordat u het gebruikt.

1. Product promotie HTML e-mail sjabloon door HubSpot

of u nu een nieuw product lanceert of gewoon reclame maakt voor uw bestaande aanbod, deze e-mailsjabloon is een geweldige plek om te beginnen. Deze sjabloon is opgenomen in de gratis versie van de e-mailtool van Marketing Hub en biedt veel ruimte voor aanpassing. U kunt eenvoudig afbeeldingen, tekst en knoppen toevoegen in een intuïtieve drag-and-drop-editor. U kunt er ook op vertrouwen dat de sjablonen die u ontwerpt volledig responsief zijn op elk apparaat.

het belangrijkste voordeel van het gebruik van deze sjabloon is dat deze is gebundeld met alle andere Marketing Hub tools. Bovendien hebt u andere sjablonen om uit te kiezen — u hoeft niet beperkt te blijven tot deze optie. De drag-and-drop e-mail editor is een ander fantastisch pluspunt.

2. Bedrijf Nieuws HTML e-mail sjabloon door Campaign Monitor

Als u van plan bent om bedrijfsnieuws naar uw klanten te sturen, is dit een geweldige sjabloon om te gebruiken. Het is imago-zwaar, waardoor het een geweldige pasvorm is voor mode of hedendaagse merken. Bovendien is het gekoppeld aan de e-mailtool van Campaign Monitor, die begint bij 10 euro per maand (Er is ook een gratis proefperiode).

persoonlijk vind ik het geweldig dat deze moderne sjabloon zo verfijnd en minimaal is. Het subtiele kleurenpalet en het eenvoudige ontwerp maken het een veelzijdige optie voor veel industrieën en doeleinden, en het is getest op verschillende e-mailclients en apparaten om een consistente gebruikerservaring op verschillende platforms te garanderen.

3. Welkom HTML e-mail sjabloon door Unlayer

Unlayer is een e-mailmarketingtool die zich voornamelijk richt op e-mailontwerp. De drag and drop editor maakt het bewerken van de sjablonen een fluitje van een cent. Ik hou van de bovenstaande sjabloon vanwege de structuur en aanpasbaarheid.

hoewel dit sjabloon is ontworpen voor een fitnessbedrijf, kunt u het gemakkelijk aanpassen voor eigen gebruik. Deze schone, gedempte sjabloon is een geweldige manier om inhoud weer te geven die uw team heeft gemaakt en abonnees te verbinden met uw meest recente producten of blogposts. Het ontwerp beschikt over twee volledig responsieve kolommen met meerdere kleurenschema-opties en ruimte aan de bovenkant om een call-to-action te markeren.

4. Minimalistische welkom HTML e-mail sjabloon door MailBakery

bewijs dat soms minder echt meer is, dit eenvoudige, volledig responsieve ontwerp maakt optimaal gebruik van witruimte en houdt de focus stevig op uw woorden en visuele elementen. Zonder ontwerpafleidingen kan uw inhoud echt schitteren-op elk apparaat.

Deze template is beschikbaar in de mailbakery Email template store. Ik vind het geweldig omdat je het eenvoudig kunt downloaden en uploaden naar je favoriete tool, terwijl andere sjablonen vereisen dat je hun software gebruikt om toegang te krijgen tot hun sjablonen. Ik zou het aanraden als u vertrouwd bent met het omgaan met HTML-bestanden en als u bekend bent met het uploadproces voor uw tool.

5. Gratis HTML-e-mailsjablonen van Bee Free

Ik kon niet beslissen over een sjabloon te voorzien van de Bee Free marketplace, dus ik heb besloten om de hele bibliotheek in plaats daarvan aan te bevelen. Deze verzameling gratis, open sjablonen is volledig responsief en getest op populaire e-mailclients. U kunt ze bewerken en erop bouwen op het Bee Free-platform, vervolgens het HTML-bestand exporteren naar uw lokale schijf en uploaden naar uw favoriete e-mailmarketingtool.

Deze zijn een ideale optie als je een meer gestileerde, gepolijste startplaats wilt, maar je toch het ontwerp wilt kunnen aanpassen aanpast bij de behoeften van uw bedrijf. Elke sjabloon is beschikbaar in meerdere formaten voor verschillende marketingdoeleinden, zoals transactionele e-mails, NPS-verzameling en herbetrokkenheid van e-mailabonnementen.

6. Store Sale HTML e-mail sjabloon door Campaign Monitor

Dit slanke, responsieve ontwerp van Campaign Monitor zou perfect zijn voor het verzenden van een kortingscode — maar het kan ook dienen als een stijlvolle manier om uw nieuwste producten te presenteren aan e-mailabonnees. Ik hou van de duidelijke en opvallende CTA, evenals de ruimte om meer informatie op te nemen.

Deze template is gratis te gebruiken, zolang je je aanmeldt op het Campaign Monitor platform. Het is ook de moeite waard om de volledige bibliotheek van responsieve e-mailsjablonen van Campaign Monitor te bekijken.

7. Stijlvolle HTML e-mail sjabloon door ActiveCampaign

deze e — mailsjabloon van ActiveCampaign is modern en geoptimaliseerd-perfect voor het introduceren van uw bedrijf of uw producten. De hero-sectie bevat voldoende ruimte voor een afbeelding en een call-to-action, en verderop kunt u uw lezers vragen om meer producten te bekijken, waardoor u een tweede kans krijgt om ze te converteren.

om deze gratis HTML-e-mailsjabloon te gebruiken, moet u zich aanmelden voor een gratis proefversie van ActiveCampaign. De e-mailtool begint bij $49/maand en bevat 3 zitplaatsen, waardoor deze sjabloon goed past als uw e-mailmarketingteam meerdere mensen omvat.

8. Apology HTML Email Template door Stripo Email

het is nooit leuk om niet aan de verwachtingen van een klant te voldoen, maar het is nog minder leuk om ze in het donker te laten. Met deze gratis HTML-e-mailsjabloon van Stripo, een e-mailtool, kunt u zich beknopt verontschuldigen. De leuke cartoon is een plus, maar je kunt altijd de afbeelding vervangen.

Ik vind het vooral leuk dat je met deze sjabloon direct in de e-mail om feedback kunt vragen. Dat maakt het gemakkelijk en eenvoudig voor de ontvanger om u te vertellen hoe ze zich voelen over hun interactie met uw bedrijf tot nu toe.

om deze sjabloon te gebruiken, hoeft u zich alleen maar aan te melden op de gratis laag van Stripo, waarmee u 4 e-mailexport kunt uitvoeren.

9. Hero Image gratis HTML e-mail sjabloon door ZURB

ZURB is een aanbieder van e-mailsjablonen die een reeks gratis e-mailsjablonen heeft gemaakt die iedereen kan downloaden. Deze bevat een duidelijke kop, een heldenafbeelding en een call-to-action die in blauw is gemarkeerd. Ik vind het leuk dat het een sidebar heeft om extra links op te nemen. Dit is een goede pasvorm voor nieuwsbrief-afhankelijke merken.

u wilt deze sjabloon sterk aanpassen met uw merkkleuren en lettertypen om het meer als “u” te laten voelen.”Anders is het een fantastische tool-agnostische optie. Download gewoon de sjabloon en upload deze naar uw favoriete e-mailmarketingsoftware.

10. Wachtwoord reset HTML e-mail sjabloon door Foundation Framework

een wachtwoord reset e-mail hoeft niet uitgebreid te zijn, en deze HTML e-mail sjabloon van Foundation Framework (ook bekend als ZURB) vinkt alle vakjes aan. Het laat een ruimte voor u om ofwel uw logo of een leuke afbeelding, en tijdelijke aanduiding tekst die u kunt verlaten zoals is als je wilt.

Ik vind dit sjabloon vooral leuk omdat het er al zo goed uitziet zonder het aan te passen. Alles wat je nodig hebt is om de kleur van de knop te veranderen in een van je merkkleuren, en je bent helemaal klaar. Bovendien kunt u het met elk gereedschap gebruiken.

maak HTML-e-mails om het aantal abonnees te verhogen

HTML-e-mails zijn een boeiende manier om te delen wat er in uw bedrijf gebeurt en ervoor te zorgen dat abonnees terugkomen voor meer. Met de tips en sjablonen die we hebben gedeeld, bent u goed op weg om prachtige HTML-e-mails te maken zonder een enkele regel code te schrijven.