() translation by (you can also view the original English article)
Den bedste måde at forstå enhver proces er til at bære det ud selv, fra jorden op. I dag, kommer vi til at gøre netop det med email design, ved at bygge en HTML e-mail skabelon fra bunden.
Kick Ting Væk
Til at begynde med, er det værd at nævne, hvor jeg trak nogle af ressourcer fra.
- De dejlige 2D ikoner er af Pierre Borodin på Dribbble
- De skrifttypesnit, der bruges er Olie Kan, Kilde Sans Pro og Mission Script
- Social media ikoner er fra Metrize Ikoner
Nu, som vi diskuterede i den foregående tutorial, skal du begynde dine HTML e-mail dokument med en 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>
|
Med det sorteret, kan vi påbegynde bygge resten af strukturen.
Oprettelse af Krop og Hoved Tabellen
Først, vi vil tilføje en overordnet struktur for vores e-mail, startende med en<body>Tag. Vi vil sætte margin og padding på body tagget til nul for at undgå eventuelle uventede plads.
Vi vil også tilføje en tabel med en bredde på 100%. Dette fungerer som en ægte body tagget til vores e-mail, fordi styling af body-tagget ikke er fuldt understøttet. Hvis du ønskede at tilføje en baggrundsfarve til kroppen af din e-mail, skal du anvende det til denne store tabel i stedet.
Sæt din cellpadding og indvendig til nul til at undgå eventuelle uventede plads i tabellen.
Bemærk: Vi vil forlade border = "1" på alle vores borde, så vi kan se skelettet af vores layout, så vi går. Vi vil fjerne dem enden med en simpel Søg & Erstat.
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>
|
Hvis en attribut findes i HTML, bruge det i stedet for CSS
Nu placere en centreret tabel over 600 pixel bred indeni tabellen container. 600 pixels er en sikker maksimal bredde for dine e-mails at få vist komfortabelt i de fleste desktop og webmail klienter på de fleste skærmopløsninger.
Sæt denne bredde ved hjælp af HTML i stedet for CSS, ved hjælp af attributten bredde. Den gyldne regel i HTML e-mail udvikling er: Hvis en attribut findes i HTML, bruge det i stedet for CSS.
Vi vil erstatte vores lille 'Hej!' hilsen med denne 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>
|
Vi har også tilføjet en inline stil egenskab, der angiver egenskaben grænse-sammenbrud til at kollapse. Hvis vi ikke gør dette, vil nyere versioner af Outlook tilføje et lille mellemrum mellem vores bord og vores grænse.
At Skabe Struktur og Header
I vores design, kan vi se, at e-mail er opdelt i tre logiske sektioner, så vil vi oprette en række for hver.
Lad os kopiere den enkelt række vi allerede gjort så at vi har tre i alt. Jeg har ændret teksten inde i dem, så at vi kan nemt identificere hver række.
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 vil vi farve dem ifølge design. Bgcolor er en gyldig HTML attribut, vil vi bruge den til at indstille baggrundsfarve i stedet for CSS. Husk altid at bruge en hex kode, fuld seks tegn som tre karakter stenografi virker altid.
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, næste op vi fokusere på Række 1. Vi ønsker at justere polstring på cellen og derefter indsætte vores image.
Ved hjælp af Polstring
Når du bruger polstring i e-mail, skal du altid angive hver enkelt værdi (top, højre, nederst og venstre) ellers kan du få uforudsigelige resultater. Jeg synes at du stadig kan bruge stenografi, dvs polstring: 10px 10px 8px 5px; men hvis du har problemer kan du ønsker at skrive det ud longform, dvs padding-top: 10px; Padding-højre: 10px; Padding-bottom: 8px; Padding-venstre: 5px;.
Hvis du har endnu større problemer med polstring (for eksempel, hvis din send platform stripning ud din CSS), ikke bruge det på alle. Blot bruge tomme celler til at skabe rum. Der er ingen grund til at bruge spacer-GIF'er, bare sørg for at tilføje stil = 'linjehøjde: 0; fontstørrelse: 0;'' til cellen, læg en & nbsp; inde og give det en eksplicit højde eller bredde. Her er et eksempel:
1 |
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr> |
Bemærk også, at det er sikkert at bruge polstring på TD tags, men ikke på P-tags eller DIVs. De opfører sig meget mere uforudsigeligt.
Så vil vi bruge nogle inline CSS for at tilføje polstring til cellen. Så vi vil indsætte vores image, tilføje alt-tekst og tilføje style = "display: block;" der er en fælles løsning, der stopper nogle e-mail-klienter tilføje huller under billederne. Vi vil centrere billedet ved at tilføje align = "center" til vores td tag. Vi vil også tilføje en alt tag, hvilket er vigtigt for Hvornår vores e-mail er i første omgang indlæst som i de fleste tilfælde vil være med billeder ud.
Bemærk: Hvis indholdet af din header er virkelig vigtigt at din besked, ikke bruge en billede-kun header. Husk, at billederne er blokeret som standard for de fleste kunder, så hvis der er et aspekt af din e-mail, der er afgørende, aldrig omfatter det som et billede. I dette eksempel er min header dog temmelig overflødigt.
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>
|
At Skabe Indholdet Området
Første vil off, vi tilføje nogle polstring til den midterste celle, så tabellen inde har nogle rum omkring det, som pr vores design.
Nu vil vi tilføje en tabel med tre rækker til vores hovedindhold — én til overskriften, en for den indledende tekst, og en for rækken med to kolonner. Vi vil sætte denne tabels bredde til 100% i stedet for at bruge en pixelværdi, fordi dette vil hjælpe os videre ned ad sporet, hvis vi ønsker at gøre vores e-mail lydhør. Hvis du altid har pixel bredder på alt, kan du ende op med en masse af værdier til at tilsidesætte med media forespørgsler. Hvis din indlejrede tabelbredder er baseret på procenter, vil derefter når du justere bredden af det overordnede element, alt tilpasse.
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 vil vi tilføje i vores indhold, og tilføje nogle polstring til den midterste celle.
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 vi tilføje vores to kolonner med indhold til Række 3. Fordi vi ønsker en 'margin' i mellem disse to celler, men margin ikke understøttes, vil vi oprette en tabel med tre kolonner med en tom celle mellem de to yderste kolonner.
Så meget som jeg gerne holde til procenter, når du har indhold, der er en bestemt størrelse, det kan være vanskeligt at konvertere det til en procentdel (i dette eksempel kolonnerne ville være 48,1%, hvilket kunne blive forvirrende). Af denne grund, da vores to billeder er 260px bredt, vil vi oprette kolonner, der er også 260px bred, med en 20px margen celle i midten. (Dette vil alt 540px, som er 600px bredden af vores tabel minus udfyldning af 30px på enten side.) Sørg for at nulstille din skrifttypestørrelse og lin-jens højde, og tilføj et et ikke-brydende rumtegn & nbsp; i marginalcellen.
Vi vil også sætte valign til "toppen" for begge celler, således at de bliver lodret tilpasning til toppen, selvom én kolonne indeholder mere tekst, end den anden. Standard lodret justering er "midten".
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>
|
Nu lad os tilføje vores billeder og indhold til disse kolonner. Som vi har brug for flere rækker, vil vi reden endnu en tabel, fordi vi ikke kan bruge nogen colspan eller rowspan tags. Vi vil også tilføje nogle polstring i mellem billede og kopi i hver kolonne.
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>
|
Her har vi sat bredden af billeder ved hjælp af HTML på 100% af kolonnebredden. Det er igen, således at hvis vi gør denne e-mail lydhør, vi kun skal bruge media forespørgsler til at ændre bredden på det overordnede element. Vi bliver nødt til at tilsidesætte højde i pixel, fordi du bruger style = "højde: auto" nu vil ikke arbejde i alt (hoste hoste, Outlook). Så vi vil sætte det ved hjælp af pixel. Dette betyder, at vi ville have til at angive højde: auto! vigtigt på disse billeder, ved hjælp af media forespørgsler til at tilsidesætte pixelværdien, men vi kunne gøre det med en enkelt klasse. Som vi indstille bredden som en procentdel, behøver vi ikke tilsidesætte der. De færre ting at tilsidesætte, jo bedre.
Side Foden
Nu vil vi tilføje vores polstring til rækken sidefod.
1 |
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> |
2 |
Row 3 |
3 |
</td>
|
Inde i cellen, vil vi indlejre en anden tabel for at få vores to kolonner.
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>
|
Vi vil oprette en anden lille bord for vores sociale medier ikoner. Vi vil sætte sin moderselskabet cellen til at justere = "ret". Sørg for du angiver border = "0" på disse billedlinks (for at undgå en blå link grænsen) og glem ikke display: block.
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 vil vi tilføje vores tekst og tilføje en bredde til vores celler, bare for at være sikker, selv om der er en masse af mellemrum mellem dem. Vi vil sætte denne celle til 75% og den anden til 25%.
1 |
<td width="75%"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
Unsubscribe to this newsletter instantly |
4 |
</td>
|
Og der har vi det! Vores layout er fuldført.
Validering
Lad os køre det gennem W3C Validator at Sørg for intet er dårlig eller brudt. Hvis du har fulgt præcis, vil det sige, at det er gået.
Næste vil vi køre en test igennem lakmus for at sikre strukturen i vores e-mail værker stor. Her er et resumé af min test:
Styling vores Tekst
Vores første række er overskriften. Vi vil bruge den <b>tag at oprette fed skrift, fordi, som vi allerede kender, hvis det findes i HTML, vi bruger, i stedet for CSS.
1 |
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> |
2 |
<b>Lorem ipsum dolor sit amet!</b> |
3 |
</td>
|
Vi vil også tilføje denne indbygget typografi til alle de andre celler af tekst:
1 |
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;" |
Næste vi nødt til at style sidefodsteksten, og vi vil også rydde op vores afmeld linket. Vi vil stil vores Afmeld tekstlink ved hjælp af CSS og HTML <font> tag. Denne fordobling er den bedste måde at sikre, at dine links aldrig røbe sig oppe i standarden blå.
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>
|
Og der har vi det! Alt er i. Tid til at slukke grænserne og se det ser smuk. Gå og erstatte hver forekomst af border = "1" med border = "0".
På dette tidspunkt, det ser lidt trist flyder i hvid plads, så lad os gå op til vores første 600px bred tabel og tilføje:
1 |
style="border: 1px solid #cccccc;" |
Nu ser det ikke som om det flydende længere. Som en prikken over i'et, 'm I gonna tilføje 30px af udfyldning til bunden af den første celle, at forhindre vores e-mail stoppe brat nederst i nogle webmail klienter (som Apple Mail), og 10px af polstring på toppen, således at vores blå overskrift har en lille smule af vejrtrækning værelse.
1 |
<td style="padding: 20px 0 30px 0;"> |
Og det er det! Du er alle klar til en afsluttende prøve.
Det er en Wrap!
Før vi kalde det en dag, hvis du har brugt nogen kommentarer, slippe af med dem. Nogle e-mail klienter kan chokeren på kommentarer, så det er klogest ikke at have nogen unødvendig kode hvor som helst i dine filer.
Nu er et godt tidspunkt at gøre en sidste test, og derefter din HTML email er klar til at sende!
For at tage, hvad du har lært til det næste niveau, tjek de næste tutorials:
