Er zijn twee soorten e-mail die je kunt gebruiken voor jouw e-mailmarketing campagnes: E-mail met platte tekst zonder afbeeldingen of mooie ontwerpen die je kunt gebruiken met de standaard e-mail apps en -services. In e-mails met HTML kun je allerlei afbeeldingen, lettertypen en lay-outs opnemen, net als voor een webpagina. Het is niet zo universeel als een e-mail in platte tekst, maar het levert doorgaans betere resultaten op.

HTML design voor e-mail zorgt doorgaans voor beter presterende e-mailcampagnes

Met HTML e-mailontwerp kun je fantastische e-mails maken met veel visuele aantrekkingskracht. In tegenstelling tot e-mails met platte tekst, kun je het HTML e-mailontwerp inzetten om allerlei soorten kleuren, afbeeldingen, achtergronden en lettertypen weer te geven. Ook heb je de creatieve vrijheid om jouw boodschap effectiever over te brengen. Je kunt een e-mail ontwerpen die veel op een pagina op jouw website lijkt, met dezelfde lettertype’s, kleuren en afbeeldingen. Een HTML e-mail is boeiend en kan net zo opvallend en interactief zijn als uw verbeelding.

Voorbeelden van HTML e-mail design

Wat is een HTML e-mail?

HTML e-mailontwerp is in principe hetzelfde als een HTML-ontwerp voor webpagina’s. Door middel van code wordt allerlei opmaakinformatie aan het basisdocument toegevoegd. Tevens maakt HTML ook het gebruik van interactieve en responsieve elementen mogelijk. Een HTML e-mail kan call-to-actions, koppelingen naar aanvullende online inhoud, gebruikersformulieren en andere dynamische items bevatten.

HTML e-mail codes

Belangrijke elementen van HTML
e-mailontwerp

In tegenstelling tot e-mails in platte tekst, kunnen HTML e-mails veel verschillende elementen bevatten, waaronder:

  • Speciaal opgemaakte koppen, met verschillende lettertypen, formaten en kleuren
  • Foto’s, illustraties en andere afbeeldingen
  • Kleurrijke achtergronden en steunkleuren
  • Logo’s en andere merkelementen
HTML e-mail design voorbeeld Voorbeeld van een HTML e-mail design

 

Basisregels van HTML e-mailontwerp

HTML e-mailontwerp kan krachtig en effectief zijn. Maar er zijn een aantal valkuilen waardoor e-mails onaangenaam zijn om te lezen. Om dit te voorkomen en effectieve HTML-e-mails te produceren, let op deze do’s en don’ts:

Do’s

  • Tabellen
    Het gebruik van tabellen voor je lay-outsjabloon is nog steeds de meest betrouwbare methode om ervoor te zorgen dat het ontwerp goed wordt weergegeven in alle e-mailclients.
  • Lay-out met één kolom
    Deze lay-out ziet er geweldig op alle soorten apparaten en schermen (vooral op mobiel). Bovendien is de inhoud gemakkelijk te scannen. Daarnaast stoort het scrollen de moderne gebruikers niet. Het komt natuurlijk voort uit het dagelijks gebruik van sociale mediakanalen.
  • Preheader-tekst
    Preheader-tekst is belangrijk, omdat dit de boodschap vertelt van het e-mailbericht voordat mensen de e-mail openen. Codeer de preheader-tekst echter niet hard in het sjabloon, maar schrijf deze in plaats daarvan als een HTML-opmerking. Dit voorkomt dat je per ongeluk een e-mail verzendt met een hardcoded, niet-aangepaste preheader-tekst.
  • Mobile first
    Met de opkomst van het aantal mobiele e-mails, zijn veel e-mailontwerpers en -ontwikkelaars begonnen met het opzetten van campagnes voor mobiele displays. Deze benadering is de reden waarom lay-outs met één kolom worden aanbevolen voor de moderne e-mailontwikkeling.
  • Testen
    Als het gaat om e-mailcodering, is testen een must. Helaas is standaardisatie van HTML voor e-mail nog steeds een droom. Daarom zul je elke keer dat je een element of een regel code wijzigt, moeten testen om er zeker van te zijn dat het overal correct wordt weergegeven.

Don’ts

  • Body tags als achtergrond
    Veel e-mailclients zouden deze tag blokkeren en het bericht standaard op een witte achtergrond weergeven. Zet in plaats daarvan je achtergrondkleur in een aparte tabel en stel de breedte in op 100% om ervoor te zorgen dat deze duidelijk in alle inboxen wordt weergegeven.
  • Image maps
    In HTML kun je meerdere onderdelen van een afbeelding klikbaar maken. Eén afbeelding die naar verschillende URL’s leidt, wordt door veel e-mailclients niet herkend. Voor de zekerheid kun je de afbeelding verdelen in verschillende afbeeldingen waardoor je de aparte onderdelen van de afbeelding klikbaar kunt maken.
  • Fancy lettertypes
    Helaas worden mooie lettertypen niet correct weergegeven in veel e-mailclients. Over het algemeen kun je Google-lettertypen gebruiken, maar het is een goed idee om een back-up lettertype te definiëren voor het geval het door jou gekozen lettertype niet wordt herkend door een bepaalde e-mailclient. MailChimp heeft een lijst met veilige lettertypen verstrekt, evenals lettertypen die een back-up nodig hebben.
  • Zware en complexe HTML/CSS
    Geavanceerde code gaat nog niet samen met e-mailcodering. Laat JavaScript, Flash, HTML5 en CSS3 voorlopig achterwege. Zorg er ook voor dat de grootte van jouw e-mailsjabloon niet groter is dan 102 kb. Gmail accepteert grotere e-mailsjablonen niet en volgens dit onderzoek gaat 59% van het e-mailverkeer via Gmail.

Conclusie

E-mailcode is geen moeilijke klus. Het vereist nauwkeurigheid, veel testen en het volgen van bepaalde regels. Met HTML e-mails verhoog jij de bezorgsnelheid en tevens ondersteunt het extra mogelijkheden zoals: call-to-action-knoppen, koppelingen naar aanvullende online-inhoud, gebruikersformulieren en andere dynamische items. De ideale methode om professioneel aan de slag te gaan met e-mailmarketing.

#sharing is caring