E-mail ontwerpen in HTML

Lay-out

CSS

• content div> in plaats van

  content div>
  Als je HTML gebruikt maak dan geen gebruik van CSS snelkoppelingen. Met CSS kunt je normaal gesproken eigenschappen in groepen instellen. Zoals:
  

  • style = "font: 12px, Arial"

  
  In plaats daarvan is het aan te raden om dergelijke attributen te groeperen. Hiervoor moet je elk onderdeel afzonderlijk instellen, zoals hieronder te zien is:
  

  • style = "font-size: 12px; font-family: Arial"

  
  Vermijd ook het gebruik van CSS float- of positie-opties. Probeer in plaats daarvan tabellen te gebruiken.
  

  Afbeeldingen en video’s

  Wil je afbeeldingen of video’s in het ontwerp opnemen gebruik dan de link van de afbeelding om deze te plaatsen. Dit doe je door de URL naar de afbeelding in te voegen zoals hier te zien is:
  

  • 

  
  Maak ook altijd gebruik van alt-"Tags", zoals:
  

  • ()

  
  De meeste programma’s schakelen het tonen van afbeeldingen standaard uit tenzij je gebruik maakt van deze tags.
  
  Op de plek waar normaal de afbeelding getoond wordt, staat nu een alternatieve tekst die je met de "Tag" hebt geplaatst. Het is geen goed idee om video's direct in te sluiten of om gebruik te maken van Flash hiervoor. Veel me-mail programma’s ondersteunen dergelijke code niet en veel spam- en antivirus programma's markeren de e-mail dan als spam. Plaats daarom een screenshot van de video die geopend wordt als de ontvanger daarop klikt.
  
  Gebruik maken van bewegende afbeeldingen zoals GIFs is niet mogelijk omdat dit niet volledig wordt ondersteund. Wordt een grotere afbeelding gesplitst en in de HTML code geplaatst met behulp van tabelcellen of img-labels, dan moet je eerst goed testen of dit werkt. Het kan namelijk voorkomen dat er extra witte ruimte tussen de gesplitste afbeeldingen wordt geplaatst.
  
  Maak ook geen gebruik van afbeeldingen om daarmee de lay-out goed uit te kunnen lijnen. Test de e-mail altijd goed voordat je deze definitief verstuurd. Kijk daarbij ook altijd naar de grote van de bestanden die je wilt verzenden. Hierdoor kunnen de e-mails snel verzonden worden.
  

  Achtergrond

  Als je gebruik maakt van HTML voor het ontwerpen van een e-mail dan worden niet alle afbeeldingen als achtergrond ondersteund. Als je een achtergrondafbeelding gebruikt dan moet je er rekening mee houden dat sommige e-mail programma’s deze niet zullen weergeven. Als je nog steeds een achtergrondafbeelding wilt gebruiken, gebruik dan de HTML-achtergrondopties in plaats van CSS voor het plaatsen van een achtergrond afbeelding.
  
  Programma’s als Gmail laten geen kleuren zien als je deze hebt ingesteld als achtergrond. Het is dan ook aan te raden om, als je hier wel gebruik van wilt maken, deze op te nemen in de code van de hoofdtekst met een tag en doormiddel van wrapping div waardoor de achtergrondkleur toch (zij het deels) getoond zal worden.
  

  Diversen

  Plaats niets boven de code met de opening tag. Alles wat je buiten deze code aan het begin van de tekst plaatst, zal niet worden getoond. Maak ook geen gebruik van javascript omdat e-mail programma’s vaak berichten met javascript filteren of verwijderen. Maak de tekst voor het ontwerp niet in Microsoft Office om problemen te voorkomen.
  
  Als je wel tekst maakt in een programma van Microsoft Office en de tekst vervolgens kopieert dan wordt dit geplakt in de opmaak van het programma. De kans is dan groot dat dit voor problemen in het ontwerp van de e-mail zorgt.
  

  Gerelateerde informatie

  In onze kennisbank over ActiveCampaign vind je tientallen relevante artikelen die je helpen om sneller en beter te werken met ActiveCampaign. Leer bijvoorbeeld meer over:
  

  • De invloed van inhoud op deliverability
  • Deliverability in de eerste 30 dagen
  • E-mail campagne maken en verzenden