+31 35 711 0876 Support Center   Remote Help

HTML nieuwsbrieven opmaken

Vraag:
Hoe maak ik een HTML nieuwsbrief op?
Tags: html nieuwsbrief css mega mailing opmaken
Antwoord:
megacmailing

Briefing nieuwsbrief templates geschikt voor Mega Mailing.


Inleiding

Deze briefing dient als leidraad voor het maken van nieuwsbrief templates compatible met Mega Mailing. Mega Mailing gebruikt een Tiny_MCE editor hetgeen een iets andere opmaak vergt voor correcte weergave in de verschillende emailprogramma's.

Anders dan bij het slicen van een website moet een nieuwsbrief template opgebouwd worden uit tabellen (table) en niet uit divisions (div). Het belangrijkste is dat een nieuwsbrief in de verschillende e-mail programma's hetzelfde eruit komt te zien. Een nieuwsbrief zal daarom altijd goed getest moeten worden in de verschillende programma's. Het enige programma waar een template niet compatible mee hoeft te zijn is Lotus Notes.

Indien er geen input door Mega Mailing wordt aangeleverd kan de website qua huisstijl als leidraad worden genomen.

Regels voor opmaak van een nieuwsbrief

- Gebruik tabellen onder row-of colspans
Het samenvoegen van tabellen door middel van rowspans of colspans is sterk af te raden. Veel nieuwsbriefprogramma's gooien de hele layout door de war indien hier wel gebruik van wordt gemaakt. Gebruik dus extra tabellen voor het splitsen van cellen.

- Maak een nieuwsbrief ongeveer 650 pixels breed
De breedte van de hoofdtabel van de nieuwsbrief mag niet smaller zijn dan 600 pixels en niet breder dan 750 pixels.

- Zet styles inline
Styles dienen inline te worden geplaatst en niet boven de body-tag.

Fout

<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" /> 
<title>Bedrijf B.V. template</title> 
<style type="text/css"> 
.tekst {
        font: 12px 'Trebuchet MS', Arial, Helvetica, sans-serif; 
        color: #000;
  }
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr>
<td class="tekst">Dit is een voorbeeld</td> </tr>
</table>
</body>

Goed

<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" /> 
<title>Bedrijf B.V. template</title> 
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr>
<td style="font: 12px 'Trebuchet MS', Arial, Helvetica, sans-serif; 
color: #000;">Dit is een voorbeeld</td>
</tr> 
</table> 
</body>

 


- Nieuwsbrief opmaken zonder HTML kennis
Belangrijk is dat onze klanten geen verstand hebben van HTML. Gebruik dus geen span-tags etc. Geef geen styles mee aan paragraph <p> tags of header <hX> tags.

Een nieuwsblokje dient als volgt te worden opgemaakt.

Goed

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font: bold 18px 'Trebuchet MS', Arial, Helvetica, 
sans-serif; 
color: #FFCC00;">Dit is een voorbeeld titel</td>
<td style="font: 12px/16px Arial, Helvetica, sans-serif; 
color: #000;">
Dit is een voorbeeld tekst</td>
<td style="font: italic 11px Arial, Helvetica, sans-serif; 
color: #FFCCOO;">
<a href="http://www.website.nl/nieuwsitem.php?id=2" 
style="color: #FFCCOO; text-decoration: none;">lees verder</a>
</td> 
</tr>
</table>

Fout
  
<h1 style="font: bold 18px 'Trebuchet MS', Arial, Helvetica, 
sans-serif; 
color: #FFCC00;">Dit is een voorbeeld titel</h1> 
<p style="font: 12px/16px Arial, Helvetica, sans-serif; 
color: #000;">Dit is een voorbeeld tekst</p>
<p><span style="font: italic 11px Arial, Helvetica, sans-serif; 
color: #FFCCOO;">
<a href="http://www.website.nl/nieuwsitem.php?id=2" 
style="color: #FFCCOO; text-decoration: none;">lees verder</a>
</span>
</p>

- Achtergrond kleur
Een backgroundkleur gedefinieerd in de body-tag wordt soms niet gelezen. Indien de achtergrond van een nieuwsbrief toch een kleur moet hebben dient de tabel van de nieuwsbrief in een één-cellige tabel worden geplaatst. Voor de zekerheid krijgt de body-tag ook waarden mee voor het weergeven van een achtergrond kleur en wordt er een style onder de body tag ingevoegd.

Het is dus beter om sommige zaken dubbel te doen dan, maar op één manier.

<body bgcolor="#FF0000" topmargin="0" leftmargin="0" rightmargin="0" 
bottommargin="0">
<style type="text/css"> 
  body {
        margin: 0px; 
        background-color: # FF0000;
}
</style>
<table width="100%" height="100%"> <tr>
<td bgcolor="#FF0000"><table width="650" align="center"> <tr>
<td>Lorem ipsum dolor sit amet consectetuer</td> </tr>
</table></td> 
</tr>
</table>

- Vermijd het gebruik van achtergrond afbeeldingen
Achtergrond-images (bijvoorbeeld gradients etc) worden in een aantal e-mailprogramma's niet weergegeven. Het is daarom aan te raden achtergrond afbeeldingen niet te gebruiken, zodat de nieuwsbrief er in alle e-mailprogramma's er hetzelfde uitziet.

- Gebruik herkenbare bestandsnamen voor de afbeeldingen in het template
Voor de bestandsnamen van afbeeldingen gebruiken wij vaak de eerste letters van de klant gevolgd door een undersquare. Dus een header afbeelding voor het template voor de Comedy Lounge heet cl_header.jpg. Voor Wine Life Magazine zou dat wlm_header.jpg zijn.

- Vermijd het gebruik van padding
Het is aan te raden om geen padding-styles te gebruiken in nieuwsbrief. Ga daarom creatief om met het gebruik van (extra) tabellen en de cellspacing en cellpadding in de tabel-tag.

- Gebruik geen javascript, flash, dhtml of formuliertags
Het gebruik van formulier tags, flash, dhtml of javascript (YouTube) worden niet ondersteund in e-mailprogramma's. Niet gebruiken dus.

- Plaats een Preheader
Zorg ervoor dat de eerste rij van de nieuwsbrief tabel een preheader bevat. Een preheader is een korte regel waarin de inhoud van de nieuwsbrief duidelijk wordt. In veel e-mailprogramma's en bijvoorbeeld op veel mobiele telefoons is de eerste regel van een nieuwsbrief al zichtbaar zonder dat de hele nieuwsbrief hoeft te worden bekeken. De preheader zorgt ervoor dat de lezer wordt getriggerd de nieuwsbrief helemaal te bekijken.

- Contactgegevens in nieuwsbrief
Plaats altijd de contactgegevens van de verzender in de nieuwsbrief. Dit wekt vertrouwen en hierdoor zal de nieuwsbrief minder snel als SPAM worden aangemerkt.

- Link naar de website
Zorg ervoor dat het logo altijd een link naar de website bevat. Plaats ook links onder sfeerimages naar de website en neem bijvoorbeeld de hoofdmenu-items van de website over in de nieuwsbrief. Zo is de kans groot dat de ontvanger als dan niet per ongeluk op de site terecht komt.

- Online webversie
Plaats een link naar de online webversie van de nieuwsbrief. Vaak worden afbeeldingen etc. geblokkeerd bij emailprogramma's binnen bedrijven. Om ervoor te zorgen dat deze ontvangers de nieuwsbrief toch correct kunnen bekijken dient er een webversie link te worden geplaatst.

In Mega Mailing is hier de volgende standaard code voor: %%webversion%%

De link wordt dan <a href="%%webversion%%">Webversie</a>.

Deze link wordt pas actief bij het versturen naar een (test-)mailinglijst en zal bij het versturen van een testversie binnen Mega Mailing niet werken.

- Uitschrijflink
Geef de ontvanger een duidelijke mogelijkheid tot uitschrijven. Plaats onderin het template een uitschrijflink.

In Mega Mailing is hier de volgende standaard code voor: %%unsubscribelink%%

De link wordt dan <a href="%% unsubscribelink %%">Afmelden</a>.

Deze link wordt pas actief bij het versturen naar een (test-)mailinglijst en zal bij het versturen van een testversie binnen Mega Mailing niet werken.

- Link naar Send-to-friend formulier
De link naar een Send-to-friend formulier ziet er als volgt uit; <a href=" %%sendfriend_x%%">. Deze nieuwsbrief doorsturen</a>. De X wordt vervangen door het ID van het aan te maken formulier in Mega Mailing.

- Link naar Gegevens wijzigen formulier
De link naar een Gegevens wijzigen formulier ziet er als volgt uit; <a href=" %%modifydetails_x%%">. Deze nieuwsbrief doorsturen</a>. De X wordt vervangen door het ID van het aan te maken formulier in Mega Mailing.

- Mega Mailing styles
Omdat Mega Mailing de body-tag stript is het van belang dat de onderstaande styles altijd onder de body-tag worden geplaatst.

De style die er altijd in moet staan is die voor img tags, zodat afbeeldingen met een link erachter geen border krijgen.

<body bgcolor="#efefef" link="#BF7344" alink="#BF7344" 
vlink="#BF7344"
topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" 
link="#BF7344" 
vlink="#BF7344" alink="#BF7344"> 
<style type="text/css">
body {
           background-color: #efefef; font: 12px Verdana, Geneva, 
           sans-serif; 
           margin: 0;
}
  img {  a{
           border: 0;
           color: #BF7344; text-decoration: none;}
</style>
- Gebruik font-tags binnen vaste links
Om er zeker van te zijn dat links in een nieuwsbrief de juiste kleur hebben is het aan te raden font-tags binnen de a-tags (van een url) te plaatsen met een color-tag. Het komt namelijk nog weleens voor dat kleuren gedefinieerd in een style-tag worden genegeerd door e-mailprogramma's

<a href="http://www.website.nl" style="color: #666666;"><font
color="#666666">Bezoek onze website</font></a>
Is beter dan;

<a href="http://www.website.nl" 
style="color: #666666;">Bezoek onze website</a>
Doe dit sowieso ook bij de send-to-friend, webversie en de uitschrijflink. Op deze manier worden de linkkleuren in de editor van Mega Mailing namelijk ook correct weergegeven.

Vragen?

Voor vragen verwijzen wij u naar ons contact overzicht op de website.
Terug naar het Knowledge base overzicht