Page content

E-mail ontwerpen in HTML

E-mail ontwerpen in HTML

Een website kun je ontwerpen door gebruik te maken van HTML. Met deze code kun je doormiddel van regels het heel ontwerp vormgeven. Wil je HTML gebruiken voor het ontwerpen van e-mails, dan zijn er verschillende zaken waar je rekening mee moet houden. In dit artikel wordt er toelichting gegeven op het gebruik van HTML in ActiveCampaign. Met deze informatie kun je correct gebruik maken van HTML. Het is hierbij belangrijk om te weten dat het ontwerpen van een website en het ontwerpen van een e-mail met HTML twee verschillende dingen zijn.

Lay-out

Voor de afmetingen van een e-mail is het aan te raden om een breedte van 650px of minder te houden. Hierdoor kan de e-mail correct en in zijn totaliteit worden weergegeven in de meeste e-mail programma’s. Ook de configuratie wordt dan goed getoond. Houd het ontwerp zo simpel mogelijk. Een ingewikkeld ontwerp is mooi maar vaak veel werk. Je zult dan ook sneller problemen ondervinden tijdens het ontwerpen van een geavanceerde e-mail. Ook zal je dan meer testen met het bericht moeten uitvoeren. Maak voor de lay-out gebruik van eenvoudige HTML tabellen. CSS floating en lay-out technieken worden niet altijd door elk e-mail programma correct getoond. Wees voorzichtig met het opvullen van tabellen met codes. Programma’s zoals Outlook nemen de opvulling van elke cel in een rij over en past dit toe op alle cellen. Hierdoor kun je een compleet andere lay-out krijgen die je niet wilt. Vermijd het gebruik van colspans = “” in de tabellen. Sommige e-mail programma’s ondersteunen die niet volledig en anderen hebben weergave problemen je een colspan hebt gebruikt.

CSS

Gebruik geen externe stylesheets, ze zullen namelijk niet in veel van de programma’s werken en je zou daarvoor al de CSS moeten opnemen met behulp van inline CSS in de HTML. Gebruik ook geen CSS klassen maar maak gebruik van inline CSS. Ook CSS klassen worden niet door alle e-mail programma’s ondersteunt. Een voorbeeld hier van zie je hieronder:

<div style = “color: #cccccc;”> content </ div> in plaats van <div class = “cssclassa”> 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 (<img src = “http://site.com/img .gif “>). Maak ook altijd gebruik van alt-“Tags” zoals: (<img src = “http://site.com/img.gif” alt = “Bedrijf ABC”>). 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 <body> 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 <body> 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.

    Comment Section

    0 reacties op “E-mail ontwerpen in HTML

    Plaats een reactie


    *