email Zelfstudie
Aan de slag met e-mail
Zoeken…
Opmerkingen
HTML-e-mail is het gebruik van een subset van HTML en CSS om een e-mailbericht op te maken zoals een webpagina met kleuren, afbeeldingen, tabelkolommen en links.
Handige links:
HTML en platte tekst
HTML-e-mail is het gebruik van een subset van HTML en CSS om een e-mailbericht op te maken zoals een webpagina met kleuren, afbeeldingen, tabelkolommen en links.
Wanneer u een e-mail verzendt, is het belangrijk om zowel platte tekst als HTML te verzenden. U doet dit door uw e-mail te verzenden als multi-part MIME. De meeste e-mailserviceproviders hebben tools om automatisch de MIME voor u te maken. Sommige genereren een gewone tekstversie op basis van uw HTML-versie en er zijn ook tools van derden .
Voorbeeld van een e-mail met alleen tekst:
# EMAIL TITLE GOES HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-1
---
## Subheader goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-2
---
Footer and Sender information
Unsubscribe here: http://www.website.com/unsubscribe
Merk op dat met de recente lancering van Apple Watch een nieuw MIME-gedeelte is opgedoken: text/watch-html . Deze inhoud wordt alleen weergegeven in de Apple Watch (en andere clients die dit MIME-type ondersteunen).
E-mailclients en weergavemotoren
E-mailclients gebruiken verschillende rendering-engines om HTML-e-mails te renderen:
- Apple Mail, Outlook voor Mac, Android Mail en iOS Mail gebruiken WebKit
- Outlook 2000/02/03 gebruikt Internet Explorer 6
- Outlook 2007/10/13 gebruikt Microsoft Word
- Webclients gebruiken de respectieve engine van hun browser (Safari gebruikt bijvoorbeeld WebKit, Chrome gebruikt Blink)
Sommige clients zullen ook hun eigen stijlen bovenop uw stijl toevoegen, bijv. Gmail stelt alle <td> lettertypen in op font-family: arial,sans-serif; , wat van invloed kan zijn op hoe een e-mail wordt weergegeven.
Vóór 2016 verwijderden alle Gmail-producten de <link> -tags, alle CSS binnen de <style> -tags en alle andere CSS die niet inline zijn. Eind 2016 begon Gmail de tag <style> en media-zoekopdrachten in de meeste producten te ondersteunen. Hier is een update vanaf 23-nov-2016 :
De basis (tabellen en inline CSS)
Tabellen voor lay-out
De structuur van een HTML-e-mailbestand is vergelijkbaar met die van een webpagina:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Een op <div> gebaseerde CSS-lay-out werkt echter niet in e-mail zoals op internet. Grote e-mailclients bieden geen ondersteuning voor zaken als floats en flexbox, of verwarren het op verschillende manieren. <div> hebben ook problemen met positionering en boxmodel in verschillende clients, met name Outlook. Er zijn een paar technieken om een e-mail te coderen met alleen <div> s, maar het is veiliger om bij tabellen te blijven voor lay-out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
<tr>
<td width="200">
<h1>Hello World!</h1>
</td>
<td width="400">
<p>This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
Inline CSS
Het toepassen van een inline-stijl geeft het prioriteit boven stijlen verder weg (zoals webmail-clientstijlen), en werkt ook rond de e-mailclients die CSS uit het hoofd verwijderen of externe CSS-bestanden. Inline CSS is de beste manier om een consistente weergave in elke e-mailclient te garanderen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body style="background: #000000;">
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
<tr>
<td width="200" style="padding: 20px; background-color: #eeeeee;">
<h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
</td>
<td width="400" style="padding: 20px;">
<p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
Je hebt een aantal opties om CSS in te stellen:
- Schrijf CSS inline terwijl u bezig bent
- Gebruik lokale fragmenten in uw editor
- Gebruik een webgebaseerde CSS-inliner zoals deze
- Gebruik een programmatische CSS-inliner zoals deze
- Gebruik een bouwproces zoals dit of een sjabloneertaal
- Laat uw e-mailserviceprovider de inlining voor u regelen (als zij dit ondersteunen)
Codering van e-mails voor alle e-mailclients
Gebruikte coderingsmethode: hybride / sponsachtig
Het is altijd een mythe geweest dat div's niet in e-mails kunnen worden gebruikt. Er zijn e-mailclients (in tegenstelling tot Outlook) die div's correct kunnen weergeven. Het onderstaande voorbeeld illustreert hoe een e-mail kan worden gecodeerd die werkt in de Gmail-app (met updates nog niet uitgerold), Samsung-apparaten en andere e-mailclients die geen mediaquery's lezen.
Introductie van voorwaardelijke verklaringen van Outlook
Voorwaardelijke verklaringen van Outlook zijn erg handig als het gaat om het weergeven van e-mails of het tonen van iets specifieks, zoals terugval voor vooruitzichten.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
De bovenstaande code leest of deze groter is dan Microsoft Outlook 9 of IE
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
Versies voor voorwaardelijke vermeldingen vermeld.
Een hybride e-mailsjabloon starten
Elke stap is op zo'n manier uitgelegd dat het voor iedereen met eenvoudige HTML-kennis gemakkelijk te begrijpen moet zijn.
Eerst beginnen we met een wikkeltafel die helemaal over het scherm loopt en met een klasse van containers.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
Daarna voegen we een mediaquery toe voor e-mailclients die de maximale breedte niet lezen, maar de CSS in de kop lezen. De mediaquery richt zich op alle schermen en toont de container met een breedte van 700 pixels.
@media only screen and (max-width : 700px) {
.container{width:700px;}
}
Vervolgens voegen we een voorwaardelijke instructie outlook toe die ervoor zorgt dat de tabel (met klassencontainer) een breedte van 700 pixels heeft.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
<tbody>
<tr>
<td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
De bovenstaande code moet nu uw sjabloon in Outlook op 700 px breed houden.
Nu voor de kolommen. Onderstaande code maakt twee gelijke kolommen op de sjabloon, beide met een breedte van 350 px.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Hierna is de limiet alleen uw verbeelding of de ontwerper. Wanneer ontwerpen klaar zijn, is het belangrijk om betrokken te zijn bij de draadframewerking, zodat er geen verrassingen zijn zodra het ontwerp in de codeerfase is.
Notitie:
- Retina-afbeeldingen hebben afbeeldingen nodig die zijn ingesteld op elementniveau en niet op de stijl <img src = "" width = "" ...
- U kunt er nog steeds voor kiezen om in-line CSS te doen of u kunt alleen CSS in het hoofd kiezen als al uw klanten CSS in het hoofd ondersteunen.
