HTML tips voor mail templates

Geschreven door: op zaterdag 10 november 2018

Leestijd:

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

email-marketing-2942593_1280.jpg

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!


Andere blogartikelen

  • Het gebruik van een Photoslider

    Geschreven door: op maandag 7 oktober 2019

    Ze zijn er in alle soorten en maten en staan meestal bovenaan een websitepagina. Dan heb ik het natuurlijk over photosliders. Zo bent u vast bekend met de traditionele foto die langzaam vervaagd en wa ...

    Bekijk het artikel »
  • De Controversie van AMP (Accelerated Mobile Pages)

    Geschreven door: op maandag 30 september 2019

    Er heerst al controversie rondom AMP (Accelerated Mobile Pages) sinds Google dit onderwerp heeft ingevoerd! In deze blog duiken we verder in deze controversie en ontdekken we of deze controversie tere ...

    Bekijk het artikel »
  • CSS attribuut font-display

    Geschreven door: op maandag 30 september 2019

    De snelheid van je website is belangrijk. Niet alleen omdat Google je website hierdoor hoger rankt maar ook omdat het gebruiksvriendelijker is voor de bezoekers. Als een website traag laadt, ben je ee ...

    Bekijk het artikel »
Bel 072 5345 888
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten