Hoe maak je succesvol een HTML email template - GiovanniKaaijk/weekly-nerd-1920 GitHub Wiki
Het maken van een email template met HTML is anders dan het maken van een webpagina. Email clients lopen een stuk achter in de ontwikkeling en veel functionaliteiten worden nog niet ondersteund. Zelf ben ik nu ongeveer anderhalf jaar bezig met het maken van email templates, meestal is dit voor nieuwsbrieven van bedrijven. In deze anderhalf jaar heb ik ervaring opgedaan voor het maken van een email template. In dit artikel bespreek ik de Do's en Don'ts voor het maken van een email template, ook kan je na het lezen van dit artikel een eigen template maken.
Bij het maken is het vaak verleidelijk om een custom font te gebruiken, vaak wil je dezelfde look and feel behouden binnen je email zodat klanten de stijl herkennen. Toch moet je het gebruik van aangepaste lettertypen vermijden. Aangepaste lettertypestapels worden momenteel niet ondersteund door de meest populaire e-mailclients, dus het is belangrijk om alleen websafe lettertypen te gebruiken. Voor het maken van een email template kan je Arial Black, Lucinda Grande, Tahoma, Trebuchet, Verdana, Georgia, Palatino, Times New Roman, Courier New, Courier en Impact gebruiken.
Het lastige aan het maken van een email template is dat een CSS layout in de meeste gevallen niet zal werken. Margin wordt in bijna geen enkele client ondersteund en padding wordt vaak enkel op table elementen ondersteund. Gmail en outlook hebben ook veel problemen met float, margin en padding, terwijl dit erg populaire clients zijn. Om te zorgen dat je toch een mooie template kan maken, die er in elke client goed uit ziet, gebruik je dus table elementen.
Sommige CSS properties die in de browser werken, werken niet in de email clients. Een voorbeeld hiervan is background-image. Background-image wordt in veel clients niet of enkel deels ondersteund, wanneer je dit zal gebruiken is het resultaat meestal niet als gewenst. Zorg ervoor dat wanneer je niet zeker bent of je een propertie kan gebruiken, dit eerst checkt op Can I email. Can I email geeft een goed beeld of je bepaalde properties kan gebruiken, wanneer iets deels wordt ondersteund, raad ik af om dit te gebruiken.
Zorg ervoor dat de content op zich altijd al voldoende is voor je nieuwsbrief. Afbeeldingen moeten hier enkel iets aan toevoegen, maar deze mogen niet noodzakelijk zijn. Wanneer iemand een email in zijn client binnenkrijgt, zullen de afbeeldingen vaak niet ingeladen zijn. Pas wanneer de gebruiker toestemming geeft om de afbeeldingen te downloaden zal dit gebeuren. Een grote fout die vaak gemaakt wordt is om een afbeelding als button te gebruiken, omdat je zo meer mogelijkheden hebt voor stijling, doe dit nooit! Op deze manier zal de button pas zichtbaar zijn wanneer de afbeeldingen gedownload worden, wat soms niet gebeurt.
Om het maken van een email template goed te begrijpen, zullen we nu de volgende template gaan maken. Hierbij zal stap voor stap uitgelegd worden hoe je dit in elkaar zet.
Voor dit voorbeeld wordt er gebruik gemaakt van Nodemailer samen met Express om deze email vanaf de server te kunnen versturen. Je kan hier natuurlijk ook hele andere services voor gebruiken zoals bijvoorbeeld Mailchimp.
Om vanaf Nodemailer een email te kunnen versturen, moet je er eerst voor zorgen dat je hier een functie voor hebt op de server. Dit zal kort worden beschreven, omdat het doel van dit artikel het maken van de template is.
const express = require('express');
const router = express.Router();
const nodemailer = require("nodemailer");
const path = require('path')
router.get('/mail', function(req, res, next) {
let transport = nodemailer.createTransport({
service: 'gmail',
auth: {
user: process.env.EMAIL_USERNAME,
pass: process.env.EMAIL_PASSWORD
}
});
const message = {
from: '', // Sender address
to: '', // List of recipients (kunnen er meer zijn)
subject: 'Intakeformulier | HvA minor webdev', // Subject line
html: ``, // Bericht
};
transport.sendMail(message, function(err, info) {
if (err) {
console.log(err)
} else {
console.log(info);
}
});
res.redirect('/')
});Vanaf hier kan alle code in het html veld gezet worden, als voorbeeld:
const message = {
from: '', // Sender address
to: '', // List of recipients (kunnen er meer zijn)
subject: 'Intakeformulier | HvA minor webdev', // Subject line
html: `<h1>Hello world!</h1>`, // Bericht
}Dit geeft het volgende resultaat in de mailbox:
Om te beginnen met het maken van deze email, zullen we eerst de layout aanmaken. Het doel is om 3 kolommen te maken, omdat de 2 driehoeken in een andere kolom zullen zitten dan de content.
Bij de elke tabel overschijf ik de cellpadding en cellspacing naar 0, anders zorgt dit ervoor dat er ruimte onstaat die niet gewild is.
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td width="10%">
<!-- ICON LEFT -->
<table cellpadding="0" cellspacing="0" width="100%;" align="left">
<tr>
<td>
</td>
</tr>
</table>
<!-- // ICON LEFT -->
</td>
<td width="80%">
<table cellpadding="0" cellspacing="0" width="600px" align="center">
<tr>
<td>
<!-- CONTENT -->
</td>
</tr>
</table>
</td>
<td width="10%" valign="top">
<!-- ICON RIGHT -->
<table cellpadding="0" cellspacing="0" width="100%" align="right">
<tr>
<td>
</td>
</tr>
</table>
<!-- // ICON RIGHT -->
</td>
</tr>
</table>Nu is er een layout waarbij de afbeeldingen 10% schermbreedte bevatten. De content zal altijd 600px zijn, behalve op mobiel, daar moeten we later nog een responsive versie voor maken.
De content kan je opdelen in 5 verschillende tabbellen. Je zou dit ook op kunnen delen in een enkele table row, maar ik vind het persoonlijk overzichtiger om verschillende tabellen aan te maken. Hierbij scheidt ik zelf wel altijd de header, body en footer van elkaar.
Met het voorbeeld van hierboven kunnen we nu een layout aanmaken voor de content:
<!-- HEADER -->
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#4e54c8" style="border-radius: 8px;">
<tr>
<td style="text-align: center;padding-top:5px;padding-bottom:5px;">
<h1 style="margin:0;color: #fff;font-family: Arial, Helvetica, sans-serif;">Minor Web-Dev</h1>
</td>
</tr>
</table>
<!-- // HEADER -->
<!-- BODY -->
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="75%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: center;padding-top:30px;padding-bottom: 30px;">
<p style="margin:0;color: #000000;">Je bent uitgenodigd voor een enquete voor de Minor Web-Dev. Deze enquete is verplicht om mee te doen aan de minor. Klik hieronder op de link om mee te doen, je kan hier ook mee starten en deze later afmaken. De data wordt opgeslagen.</p>
</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" style="padding-bottom:20px;">
<tr>
<td>
<!-- Hier komt de button -->
</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" style="padding-top:20px;">
<tr>
<!-- Hier komt de onderste content -->
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<!-- Hier komt de onderste content -->
</tr>
</table>
</td>
</tr>
</table>
<!-- // BODY -->In het voorbeeld hierboven heb ik alvast de wat simpelere dingen ingevuld, het meeste bestaat hier uit simpele CSS. Voor het horizontaal uitlijnen van elementen gebruik je geen CSS in het style attribuut. Om elementen horizontaal uit te lijnen gebruik je align="center", dit kan je ook gebruiken voor left en right. Wanneer je dit wilt gebruiken voor een verticale uitlijnen, gebruik je valign. Bij valign is het midden echter geen center, maar middle.
Bij het maken van de button is het belangrijk dat je geen padding of margin gebruikt op het link tag, dit zal in veel clients niet werken. Om een button te krijgen die er goed uit ziet in elke client, gebruik je de padding op de table elementen. We kunnen de button dus op de volgende manier maken:
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#4e54c8" style="padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px;border-radius: 8px;">
<a href="https://everythingweb.org/" target="_blank" style="text-decoration: none;color:#fff;font-weight: bold;font-size:16px;">
Start de enquete
</a>
</td>
</tr>
</table>Bij elk element wat tekst bevat, moet je opnieuw inline styling toevoegen om de goede vormgeving te krijgen. Als je dit niet doet, zullen sommige email clients de styling overschrijven.
Voor de onderste content, moet een layout worden gemaakt met 2 kolommen. Ik doe dit enkel met table elementen, omdat je op deze manier zeker bent dat het er altijd goed uit ziet. Wanneer je dit met padding doet, kan het soms nog verschillen per client.
<table width="100%" cellspacing="0" cellpadding="0" style="padding-top:20px;">
<tr>
<td width="49%">
<img width="100%" src="https://everythingweb.org/images/who-you-gonna-call.jpg" alt="">
</td>
<td width="3%" style="height: 5px;"></td>
<td width="48%" valign="top">
<p style="margin:0;color: #000000;">Deze minor leert je interactieve toepassingen maken met de webtechnologieën: HTML, CSS en JavaScript. In verschillende vakken en projecten leer je over browsers, het ‘real time web’, internet of things, performance, rapid prototyping, usability, documenteren, versiebeheer, debuggen, testen, responsive, reactive, micro interacties, API’s en … en …</p>
</td>
</tr>
</table>Hier voeg ik in het midden een tabel toe met 3% breedte voor de witruimte. Ook geef ik hier 5px hoogte aan, omdat het anders soms niet goed weergegeven wordt en de 2 kolommen alsnog tegen elkaar aan staan. Zorg ervoor dat je een afbeelding altijd een width attribuut geeft, anders kan deze erg groot of erg klein weergegeven worden.
Bij de paragraaf wordt de content automatisch in het midden uitgelijnd, om dit naast de afbeelding te krijgen voeg je valign="top" toe.
Om de content aan de andere kant te krijgen, spiegel je simpelweg deze tabel.
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="48%" style="padding-top:15px" valign="top">
<p style="margin:0;color: #000000;">De minor wordt aangeboden door de opleiding CMD van de Hogeschool van Amsterdam. CMD Amsterdam is een ontwerpopleiding digital design met drie focuspunten: interaction design, visual design en front-end development. De minor sluit aan bij het profiel Front-end developer.</p>
</td>
<td width="3%" style="height: 5px;"></td>
<td width="49%" style="padding-top:15px">
<img width="100%" src="https://everythingweb.org/images/theme-parks-for-the-web.jpg" alt="">
</td>
</tr>
</table>Nu is de content van de template helemaal af, nu moeten we alleen nog de afbeeldingen aan de zijkanten toevoegen. Omdat er gebruik wordt gemaakt van Nodemailer en de afbeeldingen lokaal op de server staan, moeten deze afbeeldingen toegevoegd worden aan de mail via Nodemailer. Dit kan je doen via een cid link. Dit werkt op de volgende manier:
<!-- ICON LEFT -->
<table cellpadding="0" cellspacing="0" width="100%;" align="left">
<tr>
<td>
<img width="100%" src="cid:logoLeft" alt="">
</td>
</tr>
</table>
<!-- // ICON LEFT -->Als afbeelding src geef je hier een cid arrtibuut mee, deze kan je vervolgens gebruiken bij het versturen van de mail:
const imagePathLeft = path.join(__dirname, '/../public/images/logo_purple_left.png')
const imagePathRight = path.join(__dirname, '/../public/images/logo_purple_right.png')
const message = {
from: '[email protected]', // Sender address
to: '[email protected]', // List of recipients (kunnen er meer zijn)
subject: 'Intakeformulier | HvA minor webdev', // Subject line
html: `<!-- ICON LEFT -->
<table cellpadding="0" cellspacing="0" width="100%;" align="left">
<tr>
<td>
<img width="100%" src="cid:logoLeft" alt="">
</td>
</tr>
</table>
<!-- // ICON LEFT -->`, // Bericht
attachments: [
{
filename: 'logo_purple_left.png',
path: imagePathLeft,
cid: 'logoLeft' //same cid value as in the html img src
},
{
filename: 'logo_purple_right.png',
path: imagePathRight,
cid: 'logoRight' //same cid value as in the html img src
}]
};Eerst maak je hier een variabele aan die het directe pad naar de afbeeldingen bevat, vervolgens kan je in de mail opties bij attachments aangeven welke afbeeldingen je mee wilt sturen. Belangrijk is hierbij dat de filename overeen komt en het cid attribuut hetzelfde is als in de html.
Als het goed is, heb je nu de volledige template klaarstaan. Deze zal er als volgt uit zien:
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff" style="font-family: Arial, Helvetica, sans-serif;">
<tr>
<td width="10%">
<!-- ICON LEFT -->
<table cellpadding="0" cellspacing="0" width="100%;" align="left">
<tr>
<td>
<img width="100%" src="cid:logoLeft" alt="">
</td>
</tr>
</table>
<!-- // ICON LEFT -->
</td>
<td width="80%">
<table cellpadding="0" cellspacing="0" width="600px" align="center">
<tr>
<td>
<!-- HEADER -->
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#4e54c8" style="border-radius: 8px;">
<tr>
<td style="text-align: center;padding-top:5px;padding-bottom:5px;">
<h1 style="margin:0;color: #fff;font-family: Arial, Helvetica, sans-serif;">Minor Web-Dev</h1>
</td>
</tr>
</table>
<!-- // HEADER -->
<!-- BODY -->
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="75%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: center;padding-top:30px;padding-bottom: 30px;">
<p style="margin:0;color: #000000;">Je bent uitgenodigd voor een enquete voor de Minor Web-Dev. Deze enquete is verplicht om mee te doen aan de minor. Klik hieronder op de link om mee te doen, je kan hier ook mee starten en deze later afmaken. De data wordt opgeslagen.</p>
</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" style="padding-bottom:30px;">
<tr>
<td>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td class="button" bgcolor="#4e54c8" style="padding-top:10px;padding-bottom:10px;border-radius: 8px;">
<a href="http://localhost:3000/" target="_blank" style="text-decoration: none;color:#fff;padding-left:15px;padding-right:15px;font-weight: bold;font-size:16px;">
Start de enquete
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- BORDER -->
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#e6e6e6">
<tr>
<td style="height:1px;"></td>
</tr>
</table>
<!-- // BORDER -->
<table width="100%" cellspacing="0" cellpadding="0" style="padding-top:20px;">
<tr>
<td width="49%">
<img width="100%" src="https://everythingweb.org/images/who-you-gonna-call.jpg" alt="">
</td>
<td width="3%" style="height: 5px;"></td>
<td width="48%" valign="top">
<p style="margin:0;color: #000000;">Deze minor leert je interactieve toepassingen maken met de webtechnologieën: HTML, CSS en JavaScript. In verschillende vakken en projecten leer je over browsers, het ‘real time web’, internet of things, performance, rapid prototyping, usability, documenteren, versiebeheer, debuggen, testen, responsive, reactive, micro interacties, API’s en … en …</p>
</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="48%" style="padding-top:15px" valign="top">
<p style="margin:0;color: #000000;">De minor wordt aangeboden door de opleiding CMD van de Hogeschool van Amsterdam. CMD Amsterdam is een ontwerpopleiding digital design met drie focuspunten: interaction design, visual design en front-end development. De minor sluit aan bij het profiel Front-end developer.</p>
</td>
<td width="3%" style="height: 5px;"></td>
<td width="49%" style="padding-top:15px">
<img width="100%" src="https://everythingweb.org/images/theme-parks-for-the-web.jpg" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // BODY -->
</td>
</tr>
</table>
</td>
<td width="10%" valign="top">
<!-- ICON RIGHT -->
<table cellpadding="0" cellspacing="0" width="100%" align="right">
<tr>
<td style="padding-top:20px;">
<img width="100%;" src="cid:logoRight" alt="">
</td>
</tr>
</table>
<!-- // ICON RIGHT -->
</td>
</tr>
</table>