() translation by (you can also view the original English article)
De beste manier om een proces te begrijpen is om het zelf uit te voeren, vanaf de grond af. Vandaag, gaan we dat doen met email ontwerp, door helemaal vanuit het niets een HTML email sjabloon te bouwen.
Schoppen Dingen Af
Om te beginnen, is het de moeite waard om te vermelden waar ik enkele bronnen van heb getrokken.
- De mooie 2D iconen zijn van Pierre Borodin op Dribbble
- De gebruikte lettertypen zijn Oil Can, Source Sans Pro en Mission Script
- De pictogrammen voor sociale media zijn van Metrize Pictogrammen
Nu, zoals we in de vorige tutorial hebben besproken, moet je uw HTML email document beginnen met een XHTML doctype:
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
5 |
<title>Demystifying Email Design</title> |
6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
7 |
</head>
|
8 |
</html>
|
Met dat gesorteerd kunnen, we beginnen met het bouwen van de rest van de structuur.
Het Hoofd en Hoofdtabel Maken
Eerst, voegen we een algemene structuur toe voor onze email, te beginnen met een <body> tag. We zullen de marge en padding op de body tag op nul zetten om elke onverwachte ruimte te vermijden.
We voegen ook een tabel toe met een breedte van 100%. Dit fungeert als een echte body tag voor onze e-mail, omdat de styling van de body tag niet volledig wordt ondersteund. Als je een achtergrondkleur aan de 'hoofdtekst' van je e-mail wilt toevoegen, moet je deze in plaats daarvan op deze grote tabel toepassen.
Stel je cellpadding en cellspacing in op nul om onverwachte ruimte in de tabel te voorkomen.
Opmerking: we zullen border="1" verlaten op al onze tafels, zodat we het skelet van onze lay-out kunnen zien terwijl we verder gaan. We zullen ze aan het einde verwijderen met een eenvoudige Find & Replace.
1 |
<body style="margin: 0; padding: 0;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Hello! |
6 |
</td>
|
7 |
</tr>
|
8 |
</table>
|
9 |
</body>
|
Als een kenmerk bestaat in HTML, gebruik dat dan in plaats van CSS
Plaats nu een gecentreerde tafel van 600 pixels breed in de container tabel. 600 pixels is een veilige maximale breedte voor je e-mails om comfortabel weer te geven in de meeste desktop en webmail clients op de meeste schermresoluties.
Stel deze breedte in met behulp van HTML in plaats van CSS, door het kenmerk width te gebruiken. De gouden regel in HTML e-mail ontwikkeling is: als een kenmerk in HTML bestaat, gebruik dat in plaats van CSS.
We zullen onze kleine ''Hallo!'' Begroeting vervangen door deze tabel:
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Hello! |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
We hebben ook een eigenschap inline stijl toegevoegd die de eigenschap border Collapse instelt. Als we dit niet doen, voegen nieuwere versies van Outlook een kleine spatie toe tussen onze tabel en onze rand.
De Structuur en kop Maken
In ons ontwerp kunnen we zien dat de e-mail is verdeeld in drie logische secties, dus we zullen een rij voor elk maken.
Laten we de enkele rij dupliceren die we al hebben gemaakt, zodat we er in totaal drie hebben. Ik heb de tekst erin gewijzigd, zodat we elke rij gemakkelijk kunnen identificeren.
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td>
|
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
Nu kleuren we ze in volgens het ontwerp. Omdat bgcolor een geldig HTML kenmerk is, gebruiken we dat om de achtergrondkleur in plaats van CSS in te stellen. Onthoud altijd dat je de volledige zes tekens van een hexadecimale code moet gebruiken, omdat een steno van drie tekens niet altijd werkt.
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td bgcolor="#70bbd9"> |
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td bgcolor="#ffffff"> |
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td bgcolor="#ee4c50"> |
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
Ok, daarna gaan we ons concentreren op Rij 1. We willen de padding op de cel aanpassen en dan onze afbeelding invoegen.
Padding Gebruiken
Wanneer je opvulling in email gebruikt, moet je altijd elke afzonderlijke waarde opgeven (boven, rechts, onder en links), anders kunt je onvoorspelbare resultaten krijgen. Ik vind dat je nog steeds de afkorting kunt gebruiken, d.w.z. opvulling: 10px 10px 8px 5px ;, maar als je problemen hebt, zou je dit longform kunnen schrijven, d.w.z. padding-top: 10px; opvulling rechts: 10px; padding-bottom: 8px; padding-links: 5px ;.
Als je nog meer problemen hebt met padding (bijvoorbeeld als je verzendplatform je CSS verwijdert), gebruik het dan helemaal niet. Gebruik eenvoudig lege cellen om ruimte te creëren. Het is niet nodig om spacer GIF's te gebruiken, maar zorg ervoor dat style=''line-height: 0; lettergrootte: 0;" naar de cel, plaats een binnen en geef het een expliciete hoogte of breedte. Hier is een voorbeeld:
1 |
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr> |
Merk ook op dat het veilig is om padding op TD tags te gebruiken, maar niet op P tags of DIV's. Ze gedragen zich veel onvoorspelbaarder.
We zullen dus wat inline CSS gebruiken om opvulling aan de cel toe te voegen. Vervolgens voegen we onze afbeelding in, voegen we alt tekst toe en voegen we style="display: block;" toe dat is een veel voorkomende oplossing die ervoor zorgt dat sommige email clients hiaten onder je afbeeldingen toevoegen. We centreren de afbeelding door align="center" toe te voegen aan onze td tag. We voegen ook een alt tag toe die belangrijk is voor wanneer onze email voor het eerst wordt geladen en die in de meeste gevallen afbeeldingen bevat.
Opmerking: als de inhoud van uw kop erg belangrijk is voor je bericht, gebruik dan geen-header met alleen afbeeldingen. Vergeet niet dat afbeeldingen voor de meeste clients standaard zijn geblokkeerd, dus als een aspect van je email cruciaal is, moet je dit nooit als afbeelding opnemen. In dit voorbeeld, is mijn, header echter vrij overbodig.
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
Het in Houdsgebied Maken
Ten eerste voegen we wat opvulling toe aan de middelste cel, zodat de tafel erin een beetje ruimte heeft, volgens ons ontwerp.
Nu we een tabel met drie rijen voor onze belangrijkste inhoud voegen — één voor de kop, een voor de inleidende tekst, en één voor de rij met twee kolommen. We stellen de breedte van deze tabel in op 100% in plaats van op een pixelwaarde, omdat dit ons verder zal helpen als we onze e-mail responsief willen maken. Als je altijd pixelbreedten op alles hebt, kunt je veel waarden overschrijven die worden overschreven door mediaquery's. Als je geneste tabelbreedten zijn gebaseerd op percentages, past je alles aan wanneer je de breedte van het bovenliggende element aanpast.
1 |
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Row 1 |
6 |
</td>
|
7 |
</tr>
|
8 |
<tr>
|
9 |
<td>
|
10 |
Row 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
<tr>
|
14 |
<td>
|
15 |
Row 3 |
16 |
</td>
|
17 |
</tr>
|
18 |
</table>
|
19 |
</td>
|
Nu voegen we onze inhoud toe en voegen we wat opvulling toe aan de middelste cel.
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Lorem ipsum dolor sit amet! |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td style="padding: 20px 0 30px 0;"> |
9 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
Nu gaan we onze twee kolommen met inhoud toevoegen aan Rij 3. Omdat we een 'marge' tussen deze twee cellen willen, maar de marge wordt niet ondersteund, maken we een tabel met drie-kolommen met een lege cel tussen de twee buitenste kolommen.
Hoe graag ik me aan percentages wil houden, wanneer je content van een specifieke grootte hebt, kan het lastig zijn om het naar een percentage te converteren (in dit voorbeeld zouden de kolommen 48.1% zijn, wat verwarrend zou kunnen worden). Omdat onze twee afbeeldingen 260 px breed zijn, maken we daarom kolommen die ook 260 pixels breed zijn, met in het midden een 20 px margecel. (Dit komt overeen met 540px, dat is de 600px breedte van onze tafel minus de opvulling van 30px aan elke kant.) Zorg ervoor dat je je letter-type en regelhoogte op nul zet en een niet-brekend spatieteken toevoegt in de margecel.
We stellen ook de valign op "top" in voor beide cellen, zodat ze verticaal uitgelijnd worden met de top, zelfs als de ene kolom meer tekst bevat dan de andere. De standaard verticale uitlijning is "midden".
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
Column 1 |
5 |
</td>
|
6 |
<td style="font-size: 0; line-height: 0;" width="20"> |
7 |
|
8 |
</td>
|
9 |
<td width="260" valign="top"> |
10 |
Column 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
</table>
|
Laten we nu onze afbeeldingen en inhoud toevoegen aan die kolommen. Omdat we meerdere rijen nodig hebben, zullen we nog een andere tabel nesten omdat we geen colspan of rowspan tags kunnen gebruiken. We voegen ook wat opvulling toe tussen de afbeelding en de kopie in elke kolom.
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
5 |
<tr>
|
6 |
<td>
|
7 |
<img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" /> |
8 |
</td>
|
9 |
</tr>
|
10 |
<tr>
|
11 |
<td style="padding: 25px 0 0 0;"> |
12 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
13 |
</td>
|
14 |
</tr>
|
15 |
</table>
|
16 |
</td>
|
17 |
<td style="font-size: 0; line-height: 0;" width="20"> |
18 |
|
19 |
</td>
|
20 |
<td width="260" valign="top"> |
21 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
22 |
<tr>
|
23 |
<td>
|
24 |
<img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" /> |
25 |
</td>
|
26 |
</tr>
|
27 |
<tr>
|
28 |
<td style="padding: 25px 0 0 0;"> |
29 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
30 |
</td>
|
31 |
</tr>
|
32 |
</table>
|
33 |
</td>
|
34 |
</tr>
|
35 |
</table>
|
Hier hebben we de breedte van de afbeeldingen ingesteld met HTML op 100% van de kolombreedte. Dit, is opnieuw, zo dat als we deze email responsief maken, we alleen mediaquery's hoeven te gebruiken om de breedte van het bovenliggende element te wijzigen. We zullen de hoogte in pixels moeten overschrijven, omdat het gebruik van style="height:auto" nu niet in alles werkt (hoestbuien, Outlook). Dus we zullen het instellen met behulp van pixels. Dit betekent dat we hoogte moeten instellen: automatisch Belangrijk op die afbeeldingen met behulp van mediaquery's om de pixelwaarde te overschrijven, maar we zouden dat met een enkele klasse kunnen doen. Als we de breedte instellen als een percentage, hoeven we dat niet te overschrijven. Hoe minder dingen te negeren, hoe beter.
De Voettekst
Nu voegen we onze opvulling toe aan de voettekstrij.
1 |
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> |
2 |
Row 3 |
3 |
</td>
|
In die cel, zullen we een andere tafel nesten om onze twee kolommen te krijgen.
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Column 1 |
5 |
</td>
|
6 |
<td>
|
7 |
Column 2 |
8 |
</td>
|
9 |
</tr>
|
10 |
</table>
|
We zullen een andere kleine tabel maken voor onze social media pictogrammen. We zullen de bovenliggende cel instellen om uit te lijnen="rechts". Zorg ervoor dat je border="0" instelt op deze afbeeldingskoppelingen (om een blauwe linkrand te voorkomen) en vergeet het display:block niet.
1 |
<td align="right"> |
2 |
<table border="0" cellpadding="0" cellspacing="0"> |
3 |
<tr>
|
4 |
<td>
|
5 |
<a href="http://www.twitter.com/"> |
6 |
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> |
7 |
</a>
|
8 |
</td>
|
9 |
<td style="font-size: 0; line-height: 0;" width="20"> </td> |
10 |
<td>
|
11 |
<a href="http://www.twitter.com/"> |
12 |
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> |
13 |
</a>
|
14 |
</td>
|
15 |
</tr>
|
16 |
</table>
|
17 |
</td>
|
Nu voegen we onze tekst toe en voegen we een breedte toe aan onze cellen om het zekere voor het onzekere te nemen, ook al is er veel spaties tussen. We zullen deze cel ingesteld op 75% en de andere tot 25%.
1 |
<td width="75%"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
Unsubscribe to this newsletter instantly |
4 |
</td>
|
En daar hebben we het! Onze layout is voltooid.
Validatie
Laten we dit uitvoeren door de W3C Validator om ervoor te zorgen dat er niets is slecht of gebroken. Als je hebt gevolgd langs precies, zal zeggen dat het heeft aangenomen.
Volgende we gonna een test doorlopen Litmus zeker dat de structuur van onze e-mail werken om groot te maken. Hier is een samenvatting van mijn test:
Styling van onze Tekst
Onze eerste rij is de kop. We gebruiken het <b>label maken van vette tekst, omdat, zoals we al weten, als het bestaat in HTML, dat we te in plaats van CSS gebruiken.
1 |
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> |
2 |
<b>Lorem ipsum dolor sit amet!</b> |
3 |
</td>
|
Ook gaan we deze in line opmaakprofiel toevoegen aan alle andere cellen van tekst:
1 |
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;" |
Daarna hebben wij nodig om de stijl van de voettekst, en we zullen ook opruimen onze uitschrijflink. Wij zullen stijl onze uitschrijven tekstlink met behulp van zowel de HTML als CSS <font>tag. Deze verdubbelen is de beste manier om ervoor te zorgen dat je links nooit in de standaard blauwe verschijnen.
1 |
<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
<a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly |
4 |
</td>
|
En daar hebben we het! Alles is. Tijd om het uitschakelen van de grenzen en zien het mooi. Doorlopen en vervangen alle vóórkomen van rand="1" met border="0".
Op dit punt, het ziet er een beetje verdrietig drijvend in de witte ruimte, dus laten we tot onze eerste 600px brede tabel en voeg toe:
1 |
style="border: 1px solid #cccccc;" |
Nu het niet uitzien als het meer zweeft. Als een finishing touch, 'm I gonna toevoegen van 30px voor opvulling aan de onderkant van de eerste cel, om te voorkomen dat onze e-mail abrupt stoppen onderaan in bepaalde webmail clients (zoals Apple Mail), en 10px van opvulling aan de bovenkant, zodat onze blauwe kop een beetje van de ademhaling heeft kamer.
1 |
<td style="padding: 20px 0 30px 0;"> |
En thats it! Bent je al klaar voor een laatste test.
Dat is een Wrap!
Voordat we noemen het een dag, als je opmerkingen hebt gebruikt, te ontdoen van hen. Sommige e-mail clients kunnen stikken op reacties, dus het is verstandig niet te hebben geen overbodige code ergens in je bestanden.
Nu is een goed moment om een laatste test te doen, en vervolgens uw HTML e-mail is klaar om te verzenden!
Om wat je geleerd hebt naar het volgende niveau, Bekijk de volgende tutorials:
