HTML tips voor mail templates

Gepubliceerd op 10 november 2018Leestijd: 4 minuten

Bij het bouwen van een e-mail template binnen HTML komen er veel dingen kijken, ik leg in deze post een aantal basiselementen uit hoe je om moet gaan met de HTML van een mail template, en hoe wij daar mee zijn omgegaan in een recent project. Met als doel de mail in zoveel mogelijk e-mail clients weer te geven met het gewenste ontwerp.

In onderstaande 4 punten geef ik tips die wij gebruikt hebben voor de mail template om de vervelende kwesties in mail clients te voorkomen met basis HTML en CSS1

1 - Structuur template

In vrijwel elk e-mail template kun je onderscheid maken tussen de header, de content en de footer. Hieronder zie je hoe je in basis begint met het content stuk. Er wordt gebruik gemaakt van het element; ‘center’ waarmee het mogelijk is om de e-mail ook in oudere mail clients te centreren.

<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">

  <center>

    <table class="mainContent"align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">

      <tr>

        <td align="center" valign="top">

          <table border="0" cellpadding="0" cellspacing="0">

            <tr>

              <td align="center" valign="top">

<table>Hier begint je content die altijd per component begint met een  ‘table’ element</table>

              </td>

            </tr>

          </table>

        </td>

      </tr>

    </table>

  </center>

</body>

2 - Content positioneren

Zoals hierboven goed te zien is, is dat we veel attributen meegeven aan de HTML-elementen dit doen we om content te positioneren. Dit doen we om de mail ook in oudere en niet op web gebaseerde email-clients de content op de gewenste manier te tonen. Zo kun je aan ‘tr’ en ‘td ’ elementen de volgende attributen meegeven om te positioneren.

height="200" (Hoogte van 200px)
width="300" (Breedte van 300px)
align="left" (Links uitlijnen)
valign="bottom" (verticale uitlijning onder)

3 - Breedte van afbeeldingen

Onze email template heeft een maximale breedte van 680px. Met afbeeldingen moet je hier zeker rekening mee houden omdat niet alle mail-clients deze afbeeldingen in de juiste formaten positioneren, gebruik dus geen bredere foto’s dan je mail breed mag zijn.

Zet ook de juiste breedte en hoogte in de HTML van de afbeeldingen zodat de ruimte niet verspringt als er een afbeelding niet of lang duurt met inladen. Daarbij geef je de volgende attributen aan een afbeelding zodat er geen witruimte onstaat tussen andere content stukken;

hspace="0" (Horizontale margin)
vspace="0" (Verticale margin)

4 - Button structuur

Waar ik in het begin van dit blog zei dat alle componenten beginnen met een ‘table’ element, bedoel ik ook elk element, zelfs een button.

Hoewel dit ook natuurlijk heel anders is dan een button op het web geven de inline-attributen erg veel vaste waarden aan de button met het doel hoe de button wordt weergegeven. Zo geven we dus ook inline-styling mee aan de anchorlink, zo ook wordt de tekst van de button in een ‘span’ element gezet om geen standaard styling van een anchorlink in mail-clients over te schrijven.


<table align="center" border="0" cellpadding="0" cellspacing="0" class="button">

     <tbody>

         <tr>

              <td bgcolor="#00A1FF" align="center" class="center">

                    <a style="color:#fff;text-decoration:none;font-family:helvetica;font-size:12px;font-weight:bold;" href="#">

                           <span>Go to documentation center</span>

                    </a>

              </td>

          </tr>

     </tbody>

</table>

Deze e-mail template is veel getest, wat heeft geresulteerd tot een goede basis van bepaalde elementen waarvan we weten dat ze worden ondersteund in vrijwel elke mail client. Dit geeft ons de mogelijkheid om sneller mails op te bouwen!