De eenvoudige handleiding voor het maken van een HTML-e-mail

Wanneer u een e-mail met behulp van een slepen-en-neerzetten of module-gebaseerde tool, genereer je eigenlijk een HTML-e-mail.

Er zijn twee hoofdtypen e-mail die u kunt verzenden en ontvangen: e-mails met platte tekst (dit is precies hoe ze klinken – elke e-mail die alleen maar oude tekst bevat zonder opmaak) en HTML-e-mails, die zijn opgemaakt en opgemaakt met behulp van HTML en inline CSS.

HTML-e-mails zijn gemakkelijk te herkennen – de meeste gestileerde multimediamarketing-e-mails in uw inbox zijn HTML-e-mails.

Als marketeer heb je waarschijnlijk HTML-e-mails vergeleken met e-mails in platte tekst en je realiseerde je dat elk type verschillende voordelen heeft. 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.

Hier ziet u hoe HTML eruit ziet aan de voorkant. Klik op de HTML-knop om de code erachter te zien.Bekijk de Pen HTML e-mailsjabloon van bedrijfsgids.biz door Christina Perricone (@bedrijfsgids.biz) op CodePen.

In dit artikel bespreken we hoe u ga aan de slag met het maken van HTML-e-mails, ongeacht uw ervaringsniveau en comfort met coderen, en deel enkele gratis sjablonen die u kunt gebruiken. Laten we erin duiken.

Een HTML-e-mail maken

Goed nieuws: u hoeft eigenlijk niet te weten hoe u moet coderen om een ​​HTML-e-mail te maken.

De meeste tools die e-mail maken en verzenden (zoals bedrijfsgids.biz) bieden vooraf opgemaakte, kant-en-klare HTML sjablonen waarmee u e-mails kunt ontwerpen zonder ooit toegang te hebben tot de daadwerkelijke code op de back-end.

Als u wijzigingen aanbrengt in de e-maileditor, worden die wijzigingen automatisch gecodeerd in het uiteindelijke product. Dergelijke hulpprogramma’s voor het maken van e-mails zijn een ideale optie als u geen e-mailontwerper in uw team heeft, maar toch professioneel ogende marketing-e-mails wilt verzenden.

Wilt u nog steeds een geheel nieuwe HTML-e-mail 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 rechtstreeks HTML-bestanden importeren voor gebruik als aangepaste e-mailsjablonen.

Er is een grote verscheidenheid aan gratis HTML-e-mailsjablonen beschikbaar op het web (waarvan we er enkele hieronder zullen delen), en als u de weg kent in een HTML-bestand, is het meestal vrij eenvoudig om de sjabloon aan te passen aan de tool voor het maken van e-mails van uw keuze.

Om een ​​volledig nieuwe HTML-e-mail te maken, moet u een geavanceerde kennis van HTML hebben (of samenwerken met een ontwikkelaar die dat wel heeft). Deze gids biedt een solide overzicht van het coderen van een eenvoudige HTML-e-mail. Omdat het proces van het helemaal opnieuw maken van een HTML-e-mail behoorlijk ingewikkeld 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 bedrijfsgids.biz ontwikkelen?</h4 >

Als u een HTML-e-mailsjabloon ontwikkelt, specifiek voor gebruik in bedrijfsgids.biz, moet u ervoor zorgen dat u de vereiste HubL-tokens toevoegt (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 bedrijfsgids.biz-specifieke HTML-e-mailsjablonen. Of gebruik gewoon onze eenvoudige wat-je-ziet-is-wat-je-krijgt e-maileditor.

Best practices voor HTML-e-mail

1. Zorg ervoor dat uw HTML-e-mail is responsief voor verschillende schermformaten en apparaten.
2. Zorg ervoor dat uw styling werkt in verschillende e-mailclients.
3. Houd er rekening mee hoe lang het duurt voordat uw HTML-e-mails zijn geladen.
4. Plan (zoveel als u kunt) voor inconsistenties bij eindgebruikers.
5. Voer grondige tests uit.

Nu u de basis begrijpt van wat er komt kijken bij het ontwikkelen van een HTML-e-mail, gaan we een paar belangrijke best practices bespreken die u in gedachten moet houden. Welke methode u ook wilt gebruiken om HTML-e-mails te maken, deze best practices helpen het ontwerp, de gebruikerservaring en de bezorgbaarheid van uw e-mails te verbeteren.

1. Zorg ervoor dat uw HTML-e-mail reageert op verschillende schermformaten en apparaten.

Hoe uw e-mail eruitziet in de inbox van een gebruiker, hangt af van een groot aantal verschillende factoren.

Een van de grootste en de meest voor de hand liggende factoren zijn de schermgrootte van het apparaat waarop het wordt bekeken. Een e-mail die er fantastisch uitziet en goed is opgemaakt op een desktop, kan gemakkelijk ontaarden in een wirwar van onleesbare, overlappende tekst en afbeeldingen wanneer deze op het scherm van een smartphone wordt bekeken.

Om ervoor te zorgen dat uw HTML-e-mails er op een breed spectrum aan schermformaten uitzien zoals u ze bedoeld heeft, kunt u het beste uw lay-out eenvoudig en duidelijk houden. Wanneer u complexere elementen gaat toevoegen, zoals meerdere kolommen en zwevende afbeeldingen, wordt het moeilijker om het formaat van uw e-mail te vertalen naar verschillende schermformaten.

Als je besluit om een ​​complexere lay-out te ontwikkelen, zorg er dan voor dat je actief aan het uitzoeken bent hoe de elementen opnieuw worden gerangschikt om bij verschillende schermformaten te passen. Als uw e-mail bijvoorbeeld wordt weergegeven als meerdere kolommen op een desktop, werkt diezelfde structuur niet op mobiel. U moet mediaquery’s gebruiken om te definiëren hoe elementen op verschillende schermformaten worden weergegeven.

Vergeet niet 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 zal worden waargenomen. Zorg ervoor dat uw lettertypekeuzes net zo leesbaar zijn op mobiele apparaten als op desktops, en gebruik mobielvriendelijke knoppen of CTA’s in plaats van tekst met hyperlinks (heeft u ooit geprobeerd een klein regeltje tekst met hyperlinks op mobiele apparaten aan te tikken? Het is niet erg eenvoudig ).

U kunt onze uitgebreidere gids voor best practices voor mobiele e-mail hier vinden.

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

Een andere grote factor die een grote invloed heeft op de manier waarop uw HTML-e-mails in de inbox van uw abonnees verschijnen, 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.

Als je weet hoe de meeste populaire e-mailclients bepaalde HTML- en CSS-elementen laden, kun je gelukkig een redelijk consistente ervaring creëren in de inboxen van verschillende gebruikers. Het gaat erom te weten welke niet-ondersteunde tags moeten worden vermeden en dienovereenkomstig aan te passen. Deze uitgebreide gids legt uit hoe de meest populaire e-mailclients (waaronder Gmail en meerdere versies van Outlook) verschillende stijlelementen ondersteunen en weergeven.

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

3. Houd er rekening mee hoe lang het duurt voordat uw HTML-e-mails zijn geladen.

Hoe lang het duurt voordat uw e-mail is geladen, kan heel goed het verschil zijn tussen het winnen 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 visuele elementen op te nemen die HTML-e-mails bieden, doet dat er allemaal niet toe als het laden van uw e-mail te lang duurt.

Terwijl u uw HTML-e-mail ontwerpt , blijf je bewust van hoe lang het duurt voordat je e-mail is geladen, vooral als iemand bijvoorbeeld je bericht opent tijdens zijn woon-werkverkeer in de ochtend met een zwakke gegevensverbinding. Hier zijn een paar kleine stappen die u kunt nemen om de laadtijd aanzienlijk te verbeteren.

Gebruik afbeeldingen spaarzaam.

Op die manier versterkt u de boodschap die u aan abonnees wilt overbrengen. Gebruik altijd een afbeeldingscompressor (zoals Compressor.io) om de bestandsgrootte zoveel mogelijk te verkleinen. De meeste afbeeldingscompressieprogramma’s kunnen de bestandsgrootte van een afbeelding aanzienlijk verkleinen zonder aan kwaliteit in te boeten, dus deze extra stap zal de visuele integriteit van uw e-mail niet schaden.

Gebruik standaard weblettertypen.

Aangepaste lettertypen zijn geweldig om een ​​bestemmingspagina op te fleuren, maar ze kunnen een extra laag complexiteit toevoegen wanneer ze aan een e-mail worden toegevoegd. Zoals we hierboven hebben besproken, gaan alle e-mailclients anders om met stijlelementen, en dit geldt vooral voor lettertypen. Gebruik voor de zekerheid standaard weblettertypen en controleer of de e-mailclient die de meeste van uw abonnees gebruiken een bepaald lettertype ondersteunt.

Probeer een HTML-verkleiner.

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

Houd uw bericht gericht op één enkel doel.

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

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

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

Zoals u kunt. waarschijnlijk raden door die forse lijst van factoren, proberen om ze allemaal op te lossen (elke keer dat je een e-mail verzendt) zou waarschijnlijk genoeg zijn om je computer door de kamer te laten gooien.

Maar dat doe je niet’ U hoeft niet volledig hulpeloos te zijn tegenover deze variabelen – u hoeft alleen maar een beetje vooraf te plannen.

Overweeg een webpaginaversie van uw e-mail te maken.

Dit is een beetje alsof u uw e-mail een fail-safe-knop geeft. Als om de een of andere reden – vanwege een van de vele factoren die hierboven zijn besproken – uw liefdevol ontworpen e-mail een absolute puinhoop wordt wanneer een abonnee deze opent, hebben ze in ieder geval de mogelijkheid om op “bekijken als webpagina” te klikken en de e-mail te zien als zoals u het bedoeld had.

Omdat stijlelementen veel consistenter worden weergegeven in webbrowsers dan in e-mailclients, heb je veel meer controle over de webpaginaversie van je bericht. In bedrijfsgids.biz is er een optie die u kunt inschakelen die automatisch een webpagina-versie genereert.

Maak een platte tekstversie van uw e-mail.

Een platte tekstversie is precies wat het is klinkt als – 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) te laden.

Als dit het geval is, zoekt de client naar een alternatieve versie in platte tekst van uw HTML-e-mail om voor de gebruiker te laden. Als er geen bestaat, kan dit aan de e-mailserver van de ontvanger signaleren dat uw bericht spam is – of potentieel gevaarlijk.

De meeste e-mailtools zoals bedrijfsgids.biz bieden automatisch een versie in platte tekst die wordt weergegeven als de e-mail van een ontvanger server vereist, maar als u een HTML-e-mail helemaal opnieuw codeert, moet u iets maken dat een multipart MIME-bericht wordt genoemd.

Een meerdelig 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 platte tekstversie weergegeven. Dit is een proces dat geavanceerde kennis van codering vereist, dus we raden aan om met een ontwikkelaar samen te werken.

Zorg ervoor dat uw e-mail nog steeds klopt als de afbeeldingen niet worden geladen.

Sommige gebruikers hebben het 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 boodschap over te brengen, en voeg altijd alt-tekst toe aan de afbeeldingen die u opneemt. Alt-tekst wordt zelfs geladen als afbeeldingen dat niet doen, zodat uw abonnees een algemeen idee krijgen van wat de beelden bevatten.

5. Voer grondige tests uit.

Ten slotte moet u uw HTML-e-mail in elke ontwikkelingsfase testen om er zeker van te zijn dat deze werkt op 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 op te sporen en ervoor te zorgen dat u de meest consistente ervaring voor uw ontvangers mogelijk maakt.

Sommige e-mailtools (zoals bedrijfsgids.biz) 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 is een overweldigende hoeveelheid HTML-e-mailsjablonen beschikbaar op internet en ze variëren in kwaliteit, responsiviteit 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 elke afzonderlijke sjabloon leest voordat u deze gebruikt.

1. bedrijfsgids.biz Gratis HTML e-mailsjabloon

Inbegrepen in de gratis versie van Marketing Hub, dit sjabloon is een geweldige plek om te beginnen als u op zoek bent naar een sjabloon met meer ruimte voor maatwerk. U kunt eenvoudig afbeeldingen, tekst en knoppen toevoegen in een intuïtieve editor voor slepen en neerzetten, en u kunt erop vertrouwen dat de sjablonen die u ontwerpt volledig responsief zijn op elk apparaat.

2. Bedrijfsnieuws HTML e-mailsjabloon door Campaign Monitor

Deze moderne sjabloon is verfijnd en minimalistisch. Het subtiele kleurenpalet en het eenvoudige ontwerp maken het een veelzijdige optie voor veel verschillende industrieën en doeleinden, en het is getest op verschillende e-mailclients en apparaten om een ​​consistente gebruikerservaring op verschillende platforms te garanderen.

3. Gratis HTML-e-mailsjabloon van Unlayer

Hoewel deze sjabloon is ontworpen voor een fitnessbedrijf, kunt u deze gemakkelijk aanpassen aan uw eigen bedrijf. Deze strakke, gedempte sjabloon is een geweldige manier om inhoud weer te geven die uw team heeft gemaakt en om abonnees te verbinden met uw meest recente producten of blogposts. Het ontwerp heeft twee volledig responsieve kolommen met meerdere kleurenschema’s en ruimte bovenaan om een ​​call-to-action te markeren.

4. Minimalistische gratis HTML e-mailsjabloon

Het bewijs dat minder soms 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 designafleidingen kan uw inhoud echt schitteren – op elk apparaat.

5. Gratis HTML e-mailsjablonen van Bee Free

Deze verzameling gratis, open sjablonen is volledig responsief en getest met populaire e-mailclients. U kunt ze bewerken en erop voortbouwen op het Bee Free-platform en vervolgens het HTML-bestand exporteren naar uw lokale schijf.

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

6. Gratis HTML e-mailsjabloon door Campaign Monitor

Dit gestroomlijnde, 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 onder de aandacht te brengen bij e-mailabonnees. Het is ook de moeite waard om de volledige bibliotheek van responsieve e-mailsjablonen van Campaign Monitor te bekijken.

Maak HTML-e-mails om het aantal abonnees te vergroten

HTML-e-mails zijn een boeiende manier om te delen wat er in uw bedrijf gebeurt en ervoor zorgen dat abonnees blijven 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 ook maar één regel code te schrijven.