email Handledning
Komma igång med e-post
Sök…
Anmärkningar
HTML-e-post är användningen av en delmängd av HTML och CSS för att formatera ett e-postmeddelande som en webbsida med färger, grafik, tabellkolumner och länkar.
Användbara länkar:
HTML och vanlig text
HTML-e-post är användningen av en delmängd av HTML och CSS för att formatera ett e-postmeddelande som en webbsida med färger, grafik, tabellkolumner och länkar.
När du skickar ett e-postmeddelande är det viktigt att skicka både vanlig text och HTML. Du gör detta genom att skicka din e-post som MIME-delning i flera delar. De flesta leverantörer av e-posttjänster har verktyg för att automatiskt konstruera MIME för dig. Vissa kommer att generera en vanlig textversion baserad på din HTML-version, och det finns verktyg från tredje part också.
Exempel på en text-e-post:
# 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
Observera att med den nya lanseringen av Apple Watch har en ny MIME-del dykt upp: text/watch-html . Detta innehåll kommer endast att visas i Apple Watch (och alla andra klienter som stöder denna MIME-typ).
E-postkunder och återgivningsmotorer
E-postklienter använder olika renderingmotorer för att återge HTML-e-postmeddelanden:
- Apple Mail, Outlook för Mac, Android Mail och iOS Mail använder WebKit
- Outlook 2000/02/03 använder Internet Explorer 6
- Outlook 2007/10/13 använder Microsoft Word
- Webbklienter använder sin webbläsares respektive motor (t.ex. Safari använder WebKit, Chrome använder Blink)
Vissa klienter lägger också till sina egna stilar ovanpå din, t.ex. Gmail ställer alla <td> -teckensnitt till font-family: arial,sans-serif; , vilket kan påverka hur ett e-postmeddelande skickas.
Före 2016 avlägsnade alla Gmail-produkter <link> -taggar, alla CSS inuti <style> -taggar och alla andra CSS-filer som inte är inlinerade. I slutet av 2016 började Gmail stödja <style> -taggen och mediefrågorna i de flesta av sina produkter. Här är en uppdatering från 23 november 2016 :
Grunderna (tabeller och inline CSS)
Tabeller för layout
Strukturen för en HTML-e-postfil liknar strukturen på en webbsida:
<!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>
En <div> -baserad CSS-layout fungerar dock inte i e-post som på webben. Stora e-postklienter erbjuder antingen inget stöd för saker som floats och flexbox, eller mangle det på olika sätt. <div> har också positionerings- och boxmodellfrågor i olika klienter, särskilt Outlook. Det finns några tekniker för att koda ett e-postmeddelande med bara <div> s, men det är säkrare att hålla sig till tabeller för layout.
<!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
Att tillämpa en stilinline ger det prioritet framför stilar längre bort (till exempel webbmailklientstilar), och fungerar också runt e-postklienterna som tar bort CSS från huvudet eller externa CSS-filer. Inline CSS är det bästa sättet att säkerställa en konsekvent visning i varje e-postklient.
<!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>
Du har ett par alternativ för inlining av CSS:
- Skriv CSS inline när du går
- Använd lokala utdrag i din redigerare
- Använd en webbaserad CSS-inliner som den här
- Använd en programmatisk CSS-inliner som den här
- Använd en byggprocess som den här eller ett mallspråk
- Låt din e-postleverantör hantera inlining för dig (om de stöder det)
Kodning av e-postmeddelanden för alla e-postklienter
Kodningsmetod som används: Hybrid / svampig
Det har alltid varit en myt att div inte kan användas i e-postmeddelanden. Det finns e-postklienter (till skillnad från outlook) som kan återge divs korrekt. Exemplet nedan illustrerar hur ett e-postmeddelande kan kodas som fungerar i Gmail-appen (med uppdateringar ännu inte rullade ut), Samsung-enhetens och andra e-postklienter som inte läser mediefrågor.
Introduktion av Outlook villkorade uttalanden
Villkorade uttalanden i Outlook är mycket användbara när det gäller att återge e-postmeddelanden eller visa något specifikt som fall backs för outlook.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
Ovanstående kod läser om den är större än Microsoft Outlook 9 eller 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
Versioner för listade villkorade uttalanden.
Starta en hybrid e-postmall
Varje steg har förklarats på ett sätt som det bör vara lätt för alla med grundläggande HTML-kunskap att förstå.
Först börjar vi med ett omslagstabell som sträcker sig hela vägen över skärmen och med en klass av behållare.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
Efter det lägger vi till en mediefråga för e-postklienter som inte läser maxbredd men läser CSS i rubriken. Mediefrågan riktar sig till alla skärmar och visar behållaren med en bredd på 700 pixlar.
@media only screen and (max-width : 700px) {
.container{width:700px;}
}
Därefter lägger vi till en utsiktsvillkor som gör att tabellen (med klassbehållare) ska vara i en bredd av 700 pixlar.
<!--[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]-->
Ovanstående kod bör nu hålla din mall i utsikterna vid 700px bred.
Nu för kolumnerna. Under koden skapas två lika stora kolumner på mallen båda med en bredd på 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]-->
Efter detta är gränsen bara din fantasi eller designern. När design är klar är det viktigt att vara involverad i trådramningsstadiet så att det inte finns några överraskningar när designen är i kodningsstadiet.
Notera:
- Retina-bilder kommer att behöva bilder som är inställda på elementnivån inte på dess stil <img src = "" width = "" ...
- Du kan fortfarande välja att göra CSS online eller så kan du bara välja CSS i huvudet om alla dina kunder stöder CSS i huvudet.
