do. sep 29th, 2022


Op het eerste gezicht zou het verzenden van een HTML-e-mail een eenvoudige taak moeten zijn – het is nauwelijks nieuwe technologie. Toch kan het ongelooflijk ingewikkeld zijn. Inderdaad, Smashing Magazine heeft beweerd dat “E-mailontwerp en -ontwikkeling een beest is. Leveranciers van e-mailclients zijn niet zo vooruitstrevend geweest als leveranciers van webbrowsers bij het toepassen van nieuwe standaarden.” Dit is zeker een taak voor je techneuten of ontwikkelingsteam, en geen snelle klus om op een vrijdagmiddag aan de kantoorjunior te geven.

Sommige managers denken ten onrechte dat het verzenden van bulk-e-mails niets anders is dan een opgeschaalde versie van het verzenden van reguliere e-mails. Helaas is het niet zo simpel als dat. Je kunt niet zomaar een e-mail typen en naar tienduizend mensen sturen in je standaard e-mailhost, zoals Gmail of Outlook. Deze services stellen een limiet van 500 dagelijkse ontvangers en ze zouden u als een spammer beschouwen als u meer zou proberen te verzenden. Om deze reden moet u een specialist gebruiken bulk-e-mailprovider als u van plan bent deel te nemen aan e-mailmarketing.

Je zou eenvoudige sms-e-mails kunnen sturen; veel bedrijven doen dat, omdat ze de eenvoud prefereren en weten dat het op vrijwel elk apparaat leesbaar zal zijn. In dit visuele tijdperk vallen tekste-mails echter niet op. Als u wilt dat uw e-mails overeenkomen met de rest van uw branding, moet u echt HTML-e-mails gebruiken … en dan wordt het lastig. Het bouwen van een HTML-sjabloon kan hard werken zijn, zelfs voor een ervaren ontwikkelaar.

Er zijn nu echter nogal wat hulpmiddelen die u kunnen helpen bij het ontwikkelen van uw HTML-e-mail, en sommige helpen bij het inline bewerken van CSS.


Top CSS Inline Editor-tools voor e-mail:


Waarom moet u zich zorgen maken over CSS inline-editing?

Net als webpagina’s bevatten HTML-e-mails een combinatie van HTML (HyperText Markup Language) en CSS (Cascading Style Sheets). De HTML geeft de algemene structuur van uw e-mail, terwijl de CSS in detail beschrijft hoe het eruit ziet. In feite vertelt de HTML uw e-mailclient wat waar in uw e-mail staat, en de CSS gaat in detail in op hoe deze moet worden weergegeven.

Wanneer u een webpagina ontwerpt, heeft u drie manieren om de CSS in uw codering op te nemen. De meeste webontwikkelaars geven er de voorkeur aan om hun CSS in een apart stylesheet toe te voegen. Dit betekent dat u eenvoudig de stijl van uw site kunt wijzigen zonder de HTML-kerncode te wijzigen. Een alternatief is om uw stijlen in te sluiten in de -sectie van uw HTML-hoofddocument. Dit houdt uw CSS-code ook relatief gescheiden van uw belangrijkste HTML-code en kan met name handig zijn voor responsieve ontwerpen, waarbij u uw codering aanpast aan de vele manieren waarop we tegenwoordig naar internet kijken (op telefoons, tablets, laptops, zelfs tv’s).

Veel e-mailclients, waaronder Gmail, negeren echter veel CSS die in de van HTML-documenten is geplaatst. Ze blokkeren ook de toegang tot externe stylesheets. Als u uw HTML-e-mail op dezelfde manier codeert als een standaard webpagina, zult u teleurgesteld zijn omdat de resulterende e-mail uw CSS-stijlen niet herkent en er vreemd uitziet.

De derde manier om CSS voor een webpagina weer te geven, is door inline-stijlen te gebruiken. Dit betekent dat u uw CSS-code tussen uw HTML-code plaatst, wat mogelijk rommelig en verwarrend kan zijn voor een grote website (en zeer moeilijk te wijzigen als u het uiterlijk van uw site wilt veranderen). Met inline-stijlen toont u items van CSS-code die het uiterlijk van onbewerkte HTML-instructies wijzigen, direct naast elke relevante HTML-instructie.

De enige consistente manier om ervoor te zorgen dat uw e-mails worden weergegeven zoals u van plan bent, is door ze te coderen met de CSS inline, wat tijdrovend en rommelig kan zijn als u uw site niet op die manier hebt gecodeerd. Daarom moet u een tool gebruiken om elke code van een website die u in uw e-mails wilt gebruiken, om te zetten in CSS inline.


Waarom kunnen HTML-e-mails ingewikkeld zijn om te verwerken?

Moderne webontwikkelaars zijn zich misschien niet bewust van de gevechten die plaatsvonden vóór de consistente normen die we tegenwoordig genieten. Voordat Google Chrome regeerde in de wereld van internetbrowsers, was er een constante strijd tussen Microsoft’s Internet Explorer en Netscape Navigator. Sinds de introductie van HTML5 en CSS 3 bestaat er relatieve harmonie in webprogrammering, met duidelijke standaarden voor alle concurrerende browsers.

Helaas hebben de grote e-mailclients zich niet zo netjes ontwikkeld. Hoewel de meeste webbrowsers nu consequent HTML- en CSS-standaarden toepassen, doen e-mailclients zoals Gmail, Outlook en andere dat niet. In het geval van Outlook nam Microsoft inderdaad een bewuste beslissing die de zaken erger maakte. Vóór Outlook 2007 gebruikten ze Internet Explorer om HTML-e-mails weer te geven. Maar op dat moment besloot Microsoft Microsoft Word te gebruiken om HTML-e-mails weer te geven (en inderdaad HTML-code voor al zijn Windows Desktop-apps). Microsoft geeft op deze manier nog steeds HTML weer in zijn app, die veel van de compatibiliteit mist die een browser zou hebben.

Dit benadrukt het probleem duidelijk. Het verzenden van een e-mail in HTML is veel ingewikkelder dan een louter op tekst gebaseerde e-mail. Je moet ervoor zorgen dat het werkt in ten minste vier of vijf grote webbrowsers en 12-15 verschillende e-mailclients (die allemaal hun eigen manier hebben om HTML-e-mails weer te geven).

En natuurlijk zijn de meeste van deze webbrowsers en e-mailclients al vele malen op de markt. Bedrijven beginnen zelden elke versie helemaal opnieuw te ontwikkelen; ze brengen eenvoudig wijzigingen aan in de vorige versie. Daarom wordt dit gebrek aan consistente interpretatie in de loop van de tijd erger, waardoor het leven van ontwikkelaars moeilijker wordt.


CSS Inline Editor-tools voor e-mail

Het is natuurlijk mogelijk om vanaf het begin inline CSS met de hand te coderen, maar dit kan al snel onhandelbaar en onpraktisch worden. Daarom is het logisch om een ​​hulpmiddel te gebruiken om veel van het harde werk voor u te doen. Bij de meeste tools die je zult vinden, moet je elke ingebedde code die je hebt (of welke code dan ook die je in een apart stylesheet hebt), deze naar je tool naar keuze kopiëren, en de tool zal een inline-versie voor je maken om gebruiken in uw e-mailclient.

1. De Influencer Marketing Hub Website HTML naar e-mail HTML Converter Tool

Onze tool werkt anders dan de rest van de producten hier. We hebben een tool gebouwd die u kan helpen bij het maken van uw HTML-e-mail. Hier nemen we de HTML van uw webpagina en maken deze geschikt voor uw HTML-e-mails.


Mailchimp erkent dat sommige e-mailclients – en