email Samouczek
Pierwsze kroki z pocztą e-mail
Szukaj…
Uwagi
E-mail HTML to użycie podzbioru HTML i CSS do formatowania wiadomości e-mail, takiej jak strona internetowa, przy użyciu kolorów, grafiki, kolumn tabeli i łączy.
Przydatne linki:
HTML i zwykły tekst
E-mail HTML to użycie podzbioru HTML i CSS do formatowania wiadomości e-mail, takiej jak strona internetowa, przy użyciu kolorów, grafiki, kolumn tabeli i łączy.
Podczas wysyłania wiadomości e-mail ważne jest przesyłanie zarówno zwykłego tekstu, jak i HTML. Robisz to, wysyłając e-mail jako MIME składający się z wielu części. Większość dostawców usług e-mail ma narzędzia do automatycznego tworzenia MIME. Niektóre wygenerują wersję tekstową na podstawie wersji HTML, a istnieją również narzędzia innych firm .
Przykład wiadomości tekstowej:
# 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
Zauważ, że wraz z ostatnią premierą Apple Watch pojawiła się nowa część MIME: text/watch-html . Ta zawartość będzie wyświetlana tylko w Apple Watch (i innych klientach obsługujących ten typ MIME).
Klienci e-mail i silniki renderujące
Klienci poczty e-mail używają różnych mechanizmów renderowania do renderowania wiadomości e-mail w formacie HTML:
- Apple Mail, Outlook na Maca, Android Mail i iOS Mail korzystają z WebKit
- Outlook 2000/02/03 używa przeglądarki Internet Explorer 6
- Outlook 2007/10/13 korzysta z Microsoft Word
- Klienci sieci Web używają odpowiedniego silnika przeglądarki (np. Safari używa WebKit, Chrome używa Blink)
Niektórzy klienci dodają także własne style na twoim, np. Gmail ustawia wszystkie czcionki <td> w font-family: arial,sans-serif; , co może mieć wpływ na sposób wyświetlania wiadomości e-mail.
Przed 2016 r. Wszystkie produkty Gmaila usunęły tagi <link> , dowolny CSS wewnątrz tagów <style> i każdy inny CSS, który nie jest wbudowany. Pod koniec 2016 r. Gmail zaczął obsługiwać tag <style> i zapytania multimedialne w większości swoich produktów. Oto aktualizacja z 23 listopada 2016 r . :
Podstawy (tabele i wbudowany CSS)
Tabele dla układu
Struktura pliku e-mail HTML jest podobna do strony internetowej:
<!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>
Jednak układ CSS oparty na <div> nie działa w wiadomościach e-mail, podobnie jak w Internecie. Najwięksi klienci poczty e-mail albo nie oferują wsparcia dla takich elementów, jak zmiennoprzecinkowe i Flexbox, lub zmieniają je na różne sposoby. <div> mają również problemy z pozycjonowaniem i modelami pudełkowymi u różnych klientów, szczególnie w Outlooku. Istnieje kilka technik kodowania wiadomości e-mail przy użyciu tylko <div> s, ale bezpieczniej jest trzymać się tabel z układem.
<!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
Zastosowanie wbudowanego stylu daje mu pierwszeństwo przed dalszymi stylami (takimi jak style klienta poczty internetowej), a także działa wokół klientów poczty e-mail, które usuwają CSS z nagłówka lub zewnętrznych plików CSS. Inline CSS to najlepszy sposób na zapewnienie spójnego wyświetlania w każdym kliencie e-mail.
<!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>
Masz kilka opcji wstawiania CSS:
- Pisz CSS w trakcie pracy
- Użyj lokalnych fragmentów w swoim edytorze
- Użyj internetowego inlinera CSS takiego jak ten
- Użyj programowego wkładki CSS takiej jak ta
- Użyj procesu kompilacji takiego jak ten lub języka szablonów
- Pozwól swojemu dostawcy usług e-mail obsługiwać wstawianie dla Ciebie (jeśli je obsługuje)
Kodowanie wiadomości e-mail dla wszystkich klientów e-mail
Zastosowana metoda kodowania: hybrydowa / gąbczasta
Od zawsze jest mitem, że div nie może być używany w wiadomościach e-mail. Istnieją klienci poczty e-mail (w przeciwieństwie do programu Outlook), którzy mogą poprawnie renderować div. Poniższy przykład ilustruje, w jaki sposób można zakodować wiadomość e-mail, która będzie działać w aplikacji Gmail (z aktualizacjami jeszcze nie wdrożonymi), urządzeniach Samsung i innych klientach e-mail, które nie czytają zapytań o media.
Przedstawiamy instrukcje warunkowe programu Outlook
Instrukcje warunkowe programu Outlook są bardzo przydatne, jeśli chodzi o renderowanie wiadomości e-mail lub pokazywanie czegoś konkretnego, takiego jak wycofanie się z perspektywy.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
Powyższy kod czyta, jeśli jest większy niż Microsoft Outlook 9 lub 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
Wymienione wersje instrukcji warunkowych.
Uruchamianie hybrydowego szablonu wiadomości e-mail
Każdy krok został objaśniony w taki sposób, aby każdy, kto ma podstawową wiedzę na temat HTML, powinien być łatwy do zrozumienia.
Najpierw zaczynamy od stołu do owijania, który rozciąga się na cały ekran, oraz klasy kontenerów.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
Następnie dodajemy zapytanie multimedialne dla klientów e-mail, którzy nie czytają maksymalnej szerokości, ale czytają CSS w nagłówku. Zapytanie o media będzie skierowane na wszystkie ekrany i wyświetli kontener o szerokości 700 pikseli.
@media only screen and (max-width : 700px) {
.container{width:700px;}
}
Następnie dodajemy instrukcję warunkową perspektywy, która utrzymuje, że tabela (z kontenerem klasy) ma szerokość 700 pikseli.
<!--[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]-->
Powyższy kod powinien teraz utrzymywać twój szablon w perspektywie o szerokości 700 pikseli.
Teraz kolumny. Poniższy kod utworzy dwie równe kolumny w szablonie o szerokości 350 pikseli.
<!--[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]-->
Po tym limicie jest tylko twoja wyobraźnia lub projektant. Po zakończeniu projektowania ważne jest, aby wziąć udział w etapie tworzenia ramek, aby nie było niespodzianek, gdy projekt jest już w fazie kodowania.
Uwaga:
- Obrazy siatkówki będą wymagały obrazów ustawionych na poziomie elementu, a nie w swoim stylu <img src = "" width = "" ...
- Nadal możesz wybrać wykonywanie CSS w linii lub CSS w głowie tylko wtedy, gdy wszyscy klienci obsługują CSS w głowie.
