Przewodnik dla początkujących dotyczący tworzenia i wysyłania wiadomości e-mail w formacie HTML

Szybki quiz pop: Jak nazywa się język, którego używają twórcy stron internetowych do tworzenia struktur odwiedzanych codziennie witryn? Pomijając inteligentne i sprytne odpowiedzi, Hypertext Markup Language (HTML) jest wiecznie zielonym standardem, obecnym w momencie narodzin sieci. Nie dotyczy to jednak tylko stron internetowych. Twoja skrzynka odbiorcza jest podatnym gruntem do projektowania wiadomości e-mail w formacie HTML.

Ma to sens, jeśli weźmiesz pod uwagę, ile obrazów, GIF-ów, filmów i treści markowych widzisz prawie co godzinę w swoich e-mailach. Chociaż możesz zaoferować wiadomość e-mail w postaci zwykłego tekstu, wersja HTML zapewni więcej korzyści i zapewni więcej możliwości promowania marki i marketingu siebie i swojej firmy.

W tym poście omówimy, jak tworzyć i wysyłać wiadomości e-mail w formacie HTML oraz dlaczego warto to robić. W niektórych momentach będziemy zagłębiać się w kodowanie wiadomości e-mail, ale nie będziesz potrzebować tej wiedzy, aby utworzyć własną.

Co to jest e-mail w formacie HTML?

E-maile, które trafiają do Twojej skrzynki odbiorczej, mogą mieć dwa rodzaje:

• Zwykły tekst: To prawie telegram na współczesność. Nie ma stylizacji ani minimalnego formatowania, a odbiorca zobaczy słowa z wyłączeniem wszystkiego innego.
• HTML: jest to świetna petarda w porównaniu ze zwykłym tekstem, a przy tym jest bardzo trudna do zaprojektowania. Używa kodu HTML do prezentowania wiadomości e-mail, chociaż jak omówimy, nie zawsze będzie wykorzystywał nowoczesne standardy sieciowe.

Na przykład będziesz wiedzieć, czy otrzymasz wiadomość e-mail w postaci zwykłego tekstu, ponieważ wygląda ona dokładnie jak zwykły dokument tekstowy. W przeciwieństwie do tego, wiadomość e-mail w formacie HTML wygląda prawie tak samo jak nowoczesna strona internetowa (podaj lub weź kilka uwag dotyczących stylizacji i formatowania):

W większości przypadków wiadomość e-mail w formacie HTML nie zapewnia najwyższej interaktywności lub dynamicznego zaangażowania. Ponownie, jest to coś, co omówimy później, ale poczta e-mail w formacie HTML pozostaje w tyle za siecią, jeśli chodzi o standardy. W związku z tym HTML jest bardziej narzędziem projektowym niż narzędziem zapewniającym wygodę. Pojawia się jednak pytanie: dlaczego miałbyś używać wiadomości e-mail w formacie HTML, jeśli jedynym powodem jest wizualna? Postaramy się odpowiedzieć na to w następnej kolejności.

Dlaczego warto używać wiadomości e-mail w formacie HTML zamiast formatowania zwykłego tekstu

Rzadko możesz zobaczyć e-maila w postaci zwykłego tekstu od firmy z kilku powodów. Jednak zwykły tekst sam w sobie nie jest zły , co więcej, nie oferuje żadnych korzyści wynikających z formatowania wiadomości e-mail w formacie HTML. Na przykład:

• Możesz użyć nieodłącznych elementów wizualnych, aby skupić uwagę na różnych częściach treści wiadomości e-mail.
• Co za tym idzie, wiadomość e-mail w formacie HTML to bogaty format prezentacji treści. Oznacza to, że możesz wykorzystać elementy, z którymi użytkownicy będą się z nimi kontaktować, takie jak obrazy, wideo i inne.
• W połączeniu oba te aspekty mogą zaoferować doskonałą okazję do oznakowania treści, podobnie jak w przypadku głównej witryny internetowej.

Jednak decyzja o użyciu wiadomości e-mail w formacie HTML nie jest idealną burzą, o której myślisz. Istnieje również kilka wad do rozważenia. Po pierwsze, musisz wziąć pod uwagę wrażenia użytkownika, tak jak podczas projektowania strony internetowej. Może to obejmować nie tylko przeglądarkę – wielu użytkowników woli również czytać wiadomości e-mail w dedykowanym kliencie.

Co więcej, musisz również wziąć pod uwagę niektóre kwestie prywatności i bezpieczeństwa, które dominują w tworzeniu stron internetowych. Jest to szczególnie ważne, jeśli chcesz dołączyć JavaScript, pobierasz czcionki innych firm i inne aspekty.

Z tego powodu musisz toczyć bitwy o dostępność i standardy niemal na większej liczbie frontów niż w sieci. Trudno jest utworzyć wiadomość e-mail w formacie HTML, która działa w różnych przeglądarkach i klientach. Oczywiście jest to możliwe, a aspekt techniczny omówimy w przyszłej sekcji. Na razie będziesz chciał ustalić różne elementy swojego e-maila, a następnie spróbuj je zaimplementować.

Podstawowe elementy (i typowe praktyki) wiadomości e-mail w formacie HTML

Ten artykuł odniesie się do projektowania stron internetowych w wielu miejscach, ze względu na nieodłączne podobieństwa. Jednym z aspektów, który oferuje podobny przepływ pracy, jest sposób decydowania o aspektach i sekcjach wiadomości e-mail w formacie HTML.

Podobnie jak w sieci, istnieją pewne elementy, które praktycznie nie podlegają negocjacjom w przypadku Twoich e-maili. Oczywiście potrzebujesz treści. Należy wziąć pod uwagę kilka typowych elementów:

• Twój nagłówek jest ważny, ponieważ jest to pierwsze wrażenie, jakie Twoja wiadomość e-mail zaoferuje czytelnikom.
• Podobnie jak w przypadku projektowania stron internetowych, warto pomyśleć o tym, jakie elementy wyświetlają się nad zakładką.
• Treść treści jest niezbędna, ponieważ w końcu to właśnie dlatego czytelnik subskrybuje twoje e-maile.
• Stopka wiadomości e-mail w formacie HTML również oferuje dużą wartość dla Ciebie i Twoich subskrybentów, a także może być niedocenianym elementem Twoich wiadomości e-mail.

Jest tu kilka punktów, które możemy poruszyć dalej. Najpierw zastanów się, jak dużo emotikonów przenika nasze codzienne korzystanie z Internetu. Chociaż nie są one ścisłym elementem HTML, gustowne zastosowanie emotikonów może zdziałać cuda w przypadku treści, zwłaszcza nagłówka:

Stopka to także najlepsze miejsce na kilka istotnych informacji prawnych. Dwa z największych problemów związanych z wiadomościami e-mail to spam i to, czy wiadomość e-mail trafia do właściwych skrzynek odbiorczych (jeśli w ogóle). To jest coś, czemu przyjrzymy się w dalszej części, ponieważ jest to kluczowa część tworzenia i wysyłania wiadomości e-mail w formacie HTML.

Rozważenie niektórych typowych praktyk dotyczących wiadomości e-mail w formacie HTML

Istnieje wiele skrzyżowań z e-mail marketingiem, jeśli chodzi o niektóre z najbardziej optymalnych praktyk, których będziesz używać w swoich projektach i układach. Jest jeden, który będziesz chciał uwzględnić prawie jako element niepodlegający negocjacjom: Double opt-in.

Jednym z największych hacków do marketingu e-mailowego jest to, że chcesz dotrzeć ze swoimi e-mailami do czytelnika. Innymi słowy, udostępnij formularz zgody na stronie internetowej, ponieważ ma ona duży współczynnik konwersji. Jednak nie powinien to być jedyny moment, w którym prosisz o potwierdzenie. Doskonałą praktyką jest również wysłanie drugiej zgody w wiadomości e-mail:

Powodów jest kilka:

• Po pierwsze, buduje zaufanie czytelnika, ponieważ otrzymujesz wyraźną zgodę na wysyłanie mu e-maili.
• Co za tym idzie, masz również wyraźną zgodę w przypadku skierowania spamu (więcej na ten temat później).
• Pomagasz zatrzymać nadużywanie poczty e-mail i spamu dla innych, ponieważ muszą oni wyrazić zgodę na subskrypcję Twoich e-maili.

W rzeczywistości, ponieważ double opt-in wiąże się z wysłaniem wiadomości e-mail na podany adres, jest to najlepszy sposób na zweryfikowanie adresu e-mail.

Należy również wziąć pod uwagę kilka innych dobrych praktyk. Jednak poniższe są bardziej opcjonalne, dzięki czemu uzyskasz fantastyczne wyniki, ale czasami nie będziesz chciał przestrzegać tych wskazówek:

• Twoja linia tematu powinna być idealna, a treść e-maila powinna być na temat. Biorąc pod uwagę nadejście i dominację przeglądania mobilnego, jest to szczególnie ważne.
• A skoro już o tym mowa, upewnij się, że Twój e-mail w formacie HTML będzie odczytywany bez problemu na mniejszych ekranach – oznacza to brak przesadnych banerów lub zbyt dużych logo.
• Jeśli w każdym e-mailu umieścisz silne wezwanie do działania (CTA), masz duże szanse na większe zaangażowanie użytkowników.
• Śledzenie jest kontrowersyjną kwestią, ale pomoże ci to zrozumieć, co robią Twoi użytkownicy, gdy wyślesz im e-mail. Niektórzy dostawcy standardowo oferują solidny zestaw analiz.

Równie ważne jak sposób prezentowania i konfigurowania poczty e-mail jest sposób tworzenia projektu i układu. W kilku następnych sekcjach przyjrzymy się, jak utworzyć wiadomość e-mail w formacie HTML, a następnie przedstawimy kilka wskazówek, jak je wysłać.

Podejście techniczne, które musisz zastosować, aby utworzyć wiadomość e-mail w formacie HTML

Jeśli masz jakieś doświadczenie w tworzeniu stron internetowych, bez wątpienia użyjesz HTML5 jako języka znaczników. Jest to świat inny niż poprzednie wystąpienia HTML i XHTML i zawiera więcej podziału na styl (którego praktycznie nie ma elementów, które są poprawne) i strukturę.

Na przykład tego ostatniego, HTML5 oferuje wiele różnych tagów do definiowania obszarów treści w Twojej witrynie.

Jednak e-mailowy HTML to inna bestia, ponieważ jest nieco opóźniony w czasie. W związku z tym będziesz chciał użyć wszystkich starych tabel HTML4 i wbudowanych stylów, aby utworzyć swój układ. Dlaczego tak jest, musisz porozmawiać z twórcami klientów poczty e-mail, ponieważ często zmieniają oni wiadomość e-mail w formacie HTML, gdy trafia ona do Twojej skrzynki odbiorczej. Jednym z najczęstszych działań jest usunięcie CSS i JavaScript z wiadomości e-mail ze względów bezpieczeństwa (m.in.).

Oznacza to, że będziesz musiał podać inny sposób dodawania stylów do wiadomości e-mail w formacie HTML — jedyną opcją zapewnienia zgodności jest inline. Mówiąc o kompatybilności, jest to ważna uwaga. Musisz zrównoważyć unikalny styl z możliwościami klienta poczty e-mail użytkownika końcowego. W związku z tym istnieje kilka innych kwestii technicznych, na które warto zwrócić uwagę:

• Korzystanie z czcionek systemowych zamiast czcionek innych firm pozwoli zaoszczędzić żądanie HTTP, szybko załadować wiadomość e-mail dla użytkownika i zapewnić spójnie wyglądającą wiadomość e-mail do rozruchu.
• Możesz pójść jeszcze dalej i udostępnić zwykłą wersję tekstową wiadomości e-mail dla tych, którzy nie mogą wyświetlić wiadomości e-mail w formacie HTML w swoim kliencie. Wiele witryn oferuje wersję HTML, do której można uzyskać dostęp online, zarówno z tego powodu, jak i jako kopię zapasową.
• Tekst alternatywny jest tak samo ważny w przypadku wiadomości e-mail w formacie HTML, jak w przypadku Internetu. W związku z tym używaj tekstu alternatywnego wszędzie tam, gdzie dodajesz obraz do treści, aby uzyskać ułatwienia dostępu.

Jest jeden techniczny aspekt wiadomości e-mail w formacie HTML, o którym powinieneś pomyśleć, ponieważ może on przekroczyć granicę między stylami wbudowanymi, CSS i innymi czynnikami. Omówmy pokrótce „warunki”.

Korzystanie z warunkowych

Jedną z pozostałości wiadomości e-mail w formacie HTML, które znajdowały się w zestawie narzędzi starszego twórcy stron internetowych w języku HTML, są instrukcje warunkowe. Tutaj określasz, która przeglądarka będzie używać określonego fragmentu kodu.

Szczerze mówiąc, prawie zawsze jest to problem oparty na Microsoft. Dla twórców stron internetowych Internet Explorer (IE) był odrodzeniem przeglądarki demonów. Jednak w przypadku wiadomości e-mail w formacie HTML jest to Outlook. Pomiędzy różnymi wersjami możesz zauważyć, że Twoja stylizacja renderuje się w sposób, którego się nie spodziewałeś.

Z tego powodu możesz dodawać do kodu bloki warunkowe i definiować te elementy. Na przykład możesz kierować reklamy na wersje programu Outlook oparte na programie Word i IE.

Pierwsze słowo:

 <!--[if mso]>

Dotyczy to wersji programu Outlook opartych na programie Word:

 <![endif]-->

W przeglądarce Internet Explorer używasz innego tagu:

 <!--[if (IE)]>

Dotyczy to wersji programu Outlook opartych na IE:

 <![endif]-->

Jeśli docelowa przeglądarka jest oparta na WebKit (np. Apple Safari, przeglądarka PlayStation, Amazon's Kindle i inne), możesz użyć zapytania o media, aby zapewnić określony styl:

 .html-email-webkit { display: none; } @media screen and (-webkit-min-device-pixel-ratio:0) { ..html-email-webkit { display: block !important; } }

Daje to nieco lepszy sposób dostosowania wiadomości e-mail w formacie HTML do wyświetlacza użytkownika końcowego. Ogólnie rzecz biorąc, stylizacja HTML dla wiadomości e-mail nie jest idealna, ale pod maską każdego klienta poczty e-mail jest wystarczająco dużo gruntu, aby pomóc Ci stworzyć oszałamiające układy.

Twoje opcje tworzenia wiadomości e-mail w formacie HTML

Pomimo tego, co już omówiliśmy, masz wiele elastycznych opcji, które pomogą Ci tworzyć wiadomości e-mail w formacie HTML. Na przykład możesz budować od podstaw za pomocą ładnego edytora tekstu i kodu HTML.

Istnieją jednak inne opcje, które możemy rozważyć:

• Do tworzenia e-maili możesz użyć dedykowanej usługi, takiej jak aplikacja do e-mail marketingu. Wiele aplikacji zapewni wizualny kreator, ale także da Ci możliwość pisania własnego kodu i tworzenia własnego szablonu.
• Skoro o tym mowa, możesz pobrać szablon dla swoich e-maili HTML. Jest to bardzo podobne do motywu WordPress, ponieważ stanowi podstawę dla reszty twojego projektu. Stamtąd możesz dostosować go do swoich upodobań. To dobry środek między kodowaniem a opcjami budowania.

Później zbudujemy nasz e-mail za pomocą HTML. Jednak zanim to nastąpi, spójrzmy na niektórych dostawców usług poczty e-mail, których możesz chcieć wziąć pod uwagę, niezależnie od wybranej metody tworzenia wiadomości e-mail.

3 dostawców usług e-mail idealnych do tworzenia wiadomości e-mail w formacie HTML

Ponieważ ten post koncentruje się na tworzeniu wiadomości e-mail w formacie HTML, nie musimy zagłębiać się w dostawców usług poczty e-mail. Mimo to jest kilka, które prawdopodobnie rozważysz.

Nie możemy ich wszystkich objąć, więc wymienimy trzy najpopularniejsze. Zaokrąglijmy je.

1. Szympans pocztowy

Ten dostawca usług poczty e-mail jest rozwiązaniem typu „go-to” – dla wielu jest to niemal odruchowa decyzja. W oczach wielu Mailchimp jest złotym standardem w aplikacjach do e-mail marketingu i jest wiele dobrych powodów:

• Zawiera wiele typowych funkcji, które można znaleźć w wielu innych podobnych aplikacjach.
• Istnieje wiele pomocy, jeśli chodzi o promocję firmy, na przykład automatyzację marketingu, narzędzia do zarządzania odbiorcami i nie tylko.
• Masz najwyższej klasy zestaw kreatywnych narzędzi, które pomogą Ci tworzyć e-maile w formacie HTML.

Oczywiście chcemy tutaj przyjrzeć się temu drugiemu. Creative Assistant to sposób, w jaki Mailchimp może poznać Twoją markę i pomóc Ci w tworzeniu i personalizacji Twoich e-maili. Możesz także podłączyć aplikacje innych firm, takie jak Adobe Photoshop, aby pomóc Ci zbudować idealną wiadomość e-mail.

Praca z istniejącym kodem HTML jest również prosta, zwłaszcza jeśli używasz programu Mailchimp's Classic Builder. Niezależnie od tego, masz sposoby na importowanie szablonów HTML, jeśli ich potrzebujesz.

Mailchimp wykorzystuje skomplikowaną hybrydę miesięcznych poziomów subskrypcji i liczby kontaktów, aby uzyskać ostateczną cenę. Sugerujemy, aby małe firmy potrzebowały planu w wysokości około 35 USD miesięcznie, do 2500 kontaktów. Musisz jednak znaleźć najlepszy dla siebie plan na podstawie potrzebnych funkcji i liczby kontaktów, które Twoim zdaniem przyciągniesz na pokład.

2. AWeber

Dla niektórych AWeber reprezentuje szczyt e-mail marketingu. Jest to fantastyczna i potężna platforma, zawierająca prawdopodobnie bardziej skoncentrowany zestaw funkcji niż Mailchimp.

Zawiera szereg podstawowych funkcji potrzebnych do wysyłania e-maili:

• Możliwość automatyzacji i planowania wiadomości, kampanii i nie tylko.
• Masz świetne narzędzia organizacyjne, takie jak tagowanie subskrybentów i segmentacja.
• AWeber pozwala również zautomatyzować treści, które tworzysz dla swoich e-maili. Na przykład możesz zamienić posty na blogu w wiadomości e-mail przy minimalnym nakładzie pracy.

Jeśli chodzi o tworzenie e-maili, AWeber ma w zanadrzu kilka sztuczek. Korzysta z wizualnego kreatora typu „przeciągnij i upuść” i zawiera bibliotekę niestandardowych szablonów, dzięki którym możesz zacząć. Co więcej, możesz połączyć AWeber ze swoim kontem Canva i użyć tego ostatniego do projektowania e-maili.

Dostępny jest również dedykowany edytor HTML, co nie ma miejsca w przypadku Mailchimp. Dostajesz to nawet na bezpłatnym poziomie AWeber. Skoro o tym mowa, tutaj wycena jest prostsza. Za maksymalnie 2500 kontaktów zapłacisz około 25 USD miesięcznie.

3. Stały kontakt

Constant Contact jest czymś odstającym, jeśli chodzi o dostawców usług poczty e-mail, ale bardziej przypomina tajną broń. Oferuje fantastyczny zakres funkcji i funkcjonalności, a także umożliwia pracę z HTML, gdy zajdzie taka potrzeba.

Podobnie jak AWeber, Constant Contact koncentruje się na marketingu e-mailowym w porównaniu z innymi obszarami biznesowymi. W związku z tym ma zestaw funkcji, który Ci się spodoba:

• Masz narzędzia do zarządzania listą klientów i funkcję automatyzacji marketingu.
• Istnieją rozbudowane opcje raportowania.
• Jesteś w stanie zintegrować programy reklamowe z Facebooka, Instagrama i Google.
• Istnieje wiele sposobów na zaangażowanie i przyciągnięcie nowych subskrybentów do swoich list.

Funkcjonalność projektowa Constant Contact jest również dobra. Możesz wybrać szablon i pracować z edytorem wizualnym, aby zbudować cały projekt. Jednak możesz również pracować z HTML – czasami w sposób zaawansowany w stosunku do innych narzędzi.

Ceny też są rozsądne. Zapłacisz około 35 USD miesięcznie za plan Core i 2500 kontaktów lub 70 USD za plan Plus.

Czego będziesz potrzebować do zbudowania wiadomości e-mail w formacie HTML

Zanim zaczniesz tworzyć wiadomości e-mail w formacie HTML, będziesz potrzebować kilku narzędzi i umiejętności. Oto, co powinieneś zaaranżować, zanim złamiesz knykcie i zaczniesz:

• Będziesz chciał użyć edytora kodu, który uznasz za wygodny, ponieważ będzie musiał cię wspierać podczas tego procesu. Jeśli nie wiesz, który wybrać, wielu użytkowników wybiera Visual Studio Code, chociaż nawiasy byłyby idealne do tego konkretnego zadania. Zamierzamy użyć Onivim2, który jest edytorem w stylu Vima opartym na podstawowej infrastrukturze VS Code.
• Chociaż będziesz potrzebować umiejętności HTML, nie będziesz potrzebować tego samego zestawu wiedzy, co współczesny programista stron internetowych (chociaż nie zaszkodzi to twoim potencjalnym klientom).
• Będziesz potrzebować sposobu na przetestowanie swoich e-maili — MailHog to rozwiązanie, które przedstawiamy w innym miejscu na blogu Kinsta.
• Chociaż nie zamierzamy używać gotowych szablonów, możesz chcieć użyć jednego z nich w przyszłości.
• Będziesz także potrzebować dostawcy poczty e-mail, ponieważ będziesz potrzebować jakiegoś sposobu wysłania gotowej wiadomości e-mail w formacie HTML.

Mając to wszystko na swoim miejscu, możesz otworzyć edytor tekstu i zacząć. Następnie przejdziemy przez proces tworzenia podstawowej wiadomości e-mail w formacie HTML.

Jak utworzyć wiadomość e-mail w formacie HTML od podstaw?

Zanim zaczniemy, warto zaznaczyć, że nie zamierzamy korzystać z dedykowanej usługi, takiej jak Mailchimp czy AWeber. Zamiast tego stworzymy od podstaw prosty szablon, który możesz zaimportować w dowolnym miejscu.

Podzielimy ten proces na kilka różnych sekcji, ponieważ chociaż wiadomość e-mail w formacie HTML jest po prostu powiązana z witryną, nadal jest wiele do rozważenia.

1. Stwórz podstawę dla swojego e-maila w formacie HTML

Dobrym pomysłem jest rozpoczęcie od szkieletu szablonu wiadomości e-mail. Poniżej kilka typowych praktyk dla HTML w ogóle:

 <!DOCTYPE PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> </head> <body> </body> </html>

Jest tu kilka rzeczy, o których powinniśmy wspomnieć. Najpierw określamy „doctype” dla Transitional XHTML 1.0, co jest powszechną praktyką wśród programistów poczty e-mail. Stamtąd określamy przestrzeń nazw XML, która będzie ważna później.

Zauważysz również kilka metatagów, które definiują zestaw znaków i sposób, w jaki przeglądarka powinna renderować kod HTML, który następuje w jej oknie roboczym.

Reszta szkieletu jest prosta – jest tytuł i tagi ciała, których użyjemy dalej.

2. Dodaj strukturę szablonu wiadomości e-mail

Wracając do naszej dyskusji na temat tego, jakich znaczników HTML użyć, pamiętasz, że nie chcemy używać <div> ani innych typowych elementów strukturalnych. Zamiast tego chcemy używać tabel, ponieważ sprawdza się to dobrze w klientach i usługach poczty e-mail.

Wszystko zacznie się od prostego zestawu tagów <table> w treści:

 <body> <table role="presentation"> <tr> <td> </td> </tr> </table> </body>

Atrybut, który ustawiamy w tagu <table>, pomaga czytnikom ekranu analizować zawarty w nim tekst, więc jest to dobre dla ułatwień dostępu.

W tym miejscu musisz dodać do tabeli nowe wiersze i kolumny, aby utworzyć szablon wiadomości e-mail w formacie HTML. Sposób, w jaki to zrobisz, zależy od Ciebie, ale dobrze jest zacząć od podstawy sekcji nagłówka, stopki i treści. Nie będziemy ich tutaj powtarzać dla zwięzłości, ale będziemy o nich wspominać w miarę postępów.

Dobrą wiadomością jest to, że możesz nadal dodawać nowe wiersze do tabeli, jeśli potrzebujesz dodać kolejne sekcje. Jednak od tego momentu będziesz chciał zacząć wprowadzać stylizację i inne elementy.

3. Uwzględnij stylizację swoich elementów

Piękno HTML polega na tym, że jest on prawie niezależny od twojego stylu. Znaczniki są proste, ale style, które stosujesz, mogą nie być. Tutaj zobaczysz, jak Twój e-mail w formacie HTML ożywa.

Jako wskazówkę podczas projektowania dodamy tag <style> do elementu <head>, aby wyświetlić ogólną ramkę:

 <style> table, td {border:2px solid #000000 !important;} </style>

Na początek upewnimy się, że nie ma nieoczekiwanego miejsca w treści lub głównej tabeli (która tutaj działa jak nasze ciało, ponieważ niektórzy klienci poczty e-mail usuną ten tag):

 <body> <table role="presentation"> </body>

Zamierzamy również dodać trochę centrowania i usunąć dodatkowe wypełnienie z naszych różnych komórek sekcji:

 <tr> <td align="center">Header </td> </tr>

Jeśli spojrzysz na to w swojej przeglądarce, nie będzie to wyglądało dużo:

Jednak z tego miejsca możesz dalej rozwijać swój szablon wiadomości e-mail za pomocą tabel i tagów stylizacji. Na przykład stworzyliśmy sekcję bohatera dla naszego nagłówka i rozszerzyliśmy stopkę i treść:

Prawdopodobnie stworzysz lepszy i bardziej odpowiedni szablon dla swoich potrzeb, ale korzystając z zagnieżdżonych tabel i podstawowych umiejętności HTML, możesz utworzyć responsywny i niestandardowy szablon wiadomości e-mail w formacie HTML, który jest strzałem w dziesiątkę.

4. Przetestuj swój e-mail

Zanim skończysz, przetestuj swoją pocztę e-mail, aby upewnić się, że dobrze się renderuje na różnych urządzeniach. Istnieje kilka różnych usług, które mogą tu pomóc.

Na przykład Email on Acid zawiera pełną listę kontrolną przed wdrożeniem, która pomoże Ci upewnić się, że szablon nie powoduje problemów:

Użytkownicy Litmusa będą znali PutsMail, ale jest on dostępny dla wszystkich:

Aby korzystać z usługi, musisz założyć konto, ale korzystanie z niej jest proste. Korzystasz z funkcji podglądu wiadomości e-mail w wielu różnych przeglądarkach i na różnych urządzeniach.

Mailgun oferuje również fantastyczną usługę, która jest powiązana z jego główną ofertą. Interfejs umożliwia testowanie klientów poczty e-mail, przeglądarek i nie tylko. Ponadto możesz przetestować elementy, takie jak wiersze tematu, aby upewnić się, że utrzymujesz wysoki współczynnik otwarć.

Jednak po przetestowaniu wiadomości e-mail musisz upewnić się, że trafi ona do skrzynki odbiorczej odbiorcy. W ostatniej części omówimy to więcej.

Wysyłanie wiadomości e-mail w formacie HTML: co musisz wiedzieć

Jedną z korzyści korzystania z usługi e-mail marketingu, o której jeszcze nie wspomnieliśmy, jest sposób, w jaki poradzi sobie z prawnym aspektem wysyłania e-maili. Jest to ważne, ponieważ jeśli coś pójdzie nie tak, nie tylko nie uda ci się dotrzeć do odbiorcy, ale wpakujesz się w kłopoty.

Usługa marketingu e-mailowego będzie już dobrze współpracować z organizacjami zajmującymi się spamem i powiązanymi aspektami wysyłania wiadomości e-mail. W związku z tym często dobrym pomysłem jest wybranie jednego z nich, jeśli nie chcesz martwić się dostarczaniem spamu.

Jest jednak kilka wskazówek, które możemy udzielić niezależnie od używanej platformy:

• Upewnij się, że przestrzegasz wszystkich wytycznych ustawy CAN-SPAM, zwłaszcza jeśli Twoja główna publiczność znajduje się w USA. Oczywiście różne kraje będą miały własne dyrektywy prawne.
• Dołącz podwójną zgodę dla subskrybentów. Tutaj prosisz ich o potwierdzenie subskrypcji, ale także wysyłasz drugie potwierdzenie. Chroni to Ciebie i subskrybenta, jeśli pojawi się zapytanie o spam lub żądanie prywatności w dalszej kolejności.

Dostarczalność jest kluczowym elementem Twoich e-maili i jest to coś, co szczegółowo omówimy w innym artykule. Jednak ta koncepcja jest mieszanką kilku aspektów, takich jak używanie dobrego kodu, uzyskiwanie odpowiedniego poziomu uprawnień i nie tylko.

Wiąże się to z innym aspektem – wynikiem wysyłania. Jest to podobne do oceny kredytowej i ostatecznie jest miarą Twojej reputacji. Na całość składa się kilka różnych elementów:

• Współczynnik odrzuceń Twojej witryny.
• Liczba skarg, które Twoja witryna otrzymuje w związku z wysyłanymi przez Ciebie e-mailami.
• Reputacja Twojego adresu IP.
• Podpis Twojej nazwy domeny.

To ostatnie odnosi się do Twojej DomainKeys Identified Mail (DKIM) i Sender Policy Framework (SPF). Ponadto możesz sprawdzić reputację swojego adresu IP za pomocą usług takich jak SenderScore lub IPQualityScore.

Jeśli w pierwszej kolejności wybierzesz odpowiedniego dostawcę prostego protokołu transportu poczty (SMTP), możesz odznaczyć niektóre z tych pól za jednym zamachem. Podobnie jak Twój wybór rozwiązania do e-mail marketingu, ta usługa zrozumie, czego potrzebujesz, aby utrzymać wysoką dostarczalność i po właściwej stronie.

Mailgun to rozwiązanie, o którym wspomnieliśmy wcześniej, i mogłoby to być idealne. Istnieją jednak inne, takie jak Mailjet, Sendinblue, a nawet własna usługa Gmaila.

Dowiedz się, jak tworzyć i wysyłać wiadomości e-mail w formacie HTML z niewielką pomocą tego przewodnika Kliknij, aby tweetować

Streszczenie

E-mail nie zbliża się do końca. W związku z tym korzystanie z poczty e-mail do własnych potrzeb – takich jak promocja i marketing – jest fantastycznym i opłacalnym sposobem na dotarcie do potencjalnych subskrybentów, użytkowników i klientów.

Chociaż możesz kupić dedykowany szablon HTML, tworzenie własnych e-maili HTML nie jest takie trudne. Może to być sposób, w jaki odniesiesz sukces, jeśli masz na myśli konkretną wizję. Musisz jednak wyciągnąć stare sztuczki HTML, takie jak warunkowe i zagnieżdżone tabele. Projektowanie wiadomości e-mail w formacie HTML nie jest jeszcze na poziomie współczesnego projektowania stron internetowych, ale nadal możesz osiągnąć wiele przy niewielkich nakładach.

Czy masz potrzebę tworzenia e-maili w formacie HTML, a jeśli tak, jakie masz pytania? Daj nam znać w sekcji komentarzy poniżej!