Jak tworzyć wiadomości e-mail w formacie HTML

Tworzenie e-maili w formacie HTML nie jest tak trudne, jak się wydaje. Nie musisz być programistą i tak naprawdę nie musisz umieć kodować.

Jeśli kiedykolwiek korzystałeś z edytora e-mail WYSIWYG (What You See Is What You Get), masz już utworzony e-mail w formacie HTML. Każdy z modułów, które przeciągasz i upuszczasz, składa się z kodu HTML i wbudowanego CSS, definiujących, jak różne elementy wiadomości e-mail powinny wyglądać i zachowywać się.

Skoro więc większość edytorów e-maili pozwala projektować za pomocą narzędzi typu „przeciągnij i upuść”, dlaczego musisz znać dowolny kod HTML, aby tworzyć e-maile?

Dobre pytanie.

Podczas gdy większość edytorów wiadomości e-mail zapewnia sporą kontrolę w ramach modułów, nie będziesz w stanie dostosować wszystkich najdrobniejszych aspektów wiadomości e-mail. Prawdopodobnie będziesz potrzebować HTML, aby zmienić takie rzeczy jak:

• Rozmiar czcionki
• Tekst alternatywny
• Granice
• Marże
• Wyściółka
• Rozmiar obrazu
• Zabarwienie

Czy korzystałeś z edytora poczty e-mail Twilio SendGrid ? Pozwala tworzyć e-maile za pomocą kombinacji modułów przeciągania i upuszczania oraz edycji HTML. Taka kombinacja mocy daje pełną kontrolę nad wyglądem i stylem wiadomości e-mail, zapewniając spójne, najwyższej jakości wrażenia marki w każdej wiadomości.

Na szczęście kodowanie wiadomości e-mail w formacie HTML nie jest zbyt trudne. Poniżej przedstawiamy wskazówki i wiedzę na temat struktury wiadomości e-mail potrzebnych do tworzenia lepszych wiadomości e-mail.

5 wskazówek dotyczących kodowania wiadomości e-mail w formacie HTML

Kodowanie wiadomości e-mail w formacie HTML jest stosunkowo proste, ale klienci poczty e-mail i skrzynki odbiorcze mogą być wybredne. Postępuj zgodnie z tymi sprawdzonymi metodami, aby Twoje wiadomości wyglądały świetnie, niezależnie od klienta, przeglądarki czy urządzenia odbiorcy.

1. Spraw, aby Twoje e-maile były responsywne

Odbiorcy otwierają wiadomości e-mail w różnych systemach operacyjnych, urządzeniach, rozmiarach ekranu, przeglądarkach i aplikacjach pocztowych. Każdy z tych czynników sprawi, że Twój e-mail będzie wyglądał inaczej, więc Twoim zadaniem jest upewnienie się, że Twój e-mail jest responsywny i działa zgodnie z przeznaczeniem w większości skrzynek odbiorczych.

Możesz znaleźć wiele responsywnych szablonów wiadomości e-mail, ale zadanie jest nieco bardziej skomplikowane, gdy kodujesz wiadomość e-mail w formacie HTML od zera. Oto kilka rzeczy, które sprawią, że Twoje e-maile będą bardziej responsywne:

• Uwzględnij zapytania o media: Zapytania o media pozwalają dostosować szablony wiadomości e-mail do różnych urządzeń.
• Użyj jednej kolumny: na komputerze może być łatwo czytać dwukolumnowe e-maile, ale na urządzeniach mobilnych może być trochę zagęszczone.
• Zwiększ rozmiar czcionki: nie zmniejszaj rozmiaru czcionki 13- lub 14-punktowej.
• Rozmieść swoje linki: nie chcesz, aby czytelnicy przypadkowo kliknęli niewłaściwy link, ponieważ linki były zbyt blisko siebie.
• Dodaj tagi alt: tagi Alt opisują Twoje obrazy na wypadek, gdyby obrazy się nie wczytały.

2. Oszczędnie dodawaj obrazy

Obrazy są świetnym dodatkiem do kampanii e-mailowych, ale uważaj, aby ich nie przesadzić. Zbyt wiele obrazów może wydłużyć czas ładowania i utrudnić renderowanie wiadomości e-mail.

Używaj mniejszych obrazów, które ładują się szybciej i nie zajmują całego ekranu. Dodaj także responsywne elementy rozmiaru, takie jak „szerokość” i „maksymalna szerokość”, aby zapewnić prawidłowe ładowanie obrazów na każdym urządzeniu i kliencie poczty e-mail.

3. Zachowaj prostotę

Zapamiętaj cel swojego e-maila. Wielu projektantów e-maili zatraca się w sztuce i kreatywności, zapominając o ogólnym celu wiadomości e-mail — którym nie jest zarabianie „ochów” i „achów”.

Po pierwsze, chcesz, aby ludzie otwierali Twoje e-maile. Następnie chcesz, aby kliknęli i podjęli działanie. Może to być odwiedzenie Twojej witryny, przeczytanie posta na blogu, dokonanie zakupu lub zapisanie się na wydarzenie.

Zachowaj prostotę. Zapewnij wartość swoim odbiorcom, zwab ich treścią, a następnie kieruj ich do wezwania do działania. Otóż ​​to. Przez większość czasu wszystko inne jest puchem.

Dodając różne elementy HTML do swojego e-maila, zadaj sobie pytanie: „Czy to pomaga e-mailowi ​​spełnić swój cel?” Jeśli nie, usuń go z projektu e-maila.

4. Użyj gotowych szablonów wiadomości e-mail

Możesz znaleźć gotowe szablony wiadomości e-mail w formacie HTML ze wszystkim, czego potrzebujesz, aby wysłać gwiezdną kampanię. Szablony wykonały już ciężką pracę, aby stworzyć dobrze wyglądający, responsywny projekt wiadomości e-mail.

Jeśli podoba Ci się szablon wiadomości e-mail, ale nie jesteś z niego w 100% zadowolony, możesz często pobrać kod HTML i wprowadzić odpowiednie zmiany. Może to być doskonała metoda edycji wiadomości e-mail dla osób, które nie znają HTML.

5. Przetestuj swoje e-maile

Nigdy nie wysyłaj wiadomości e-mail bez uprzedniego przetestowania. Starym sposobem na zrobienie tego byłoby wysłanie testowego e-maila na różne adresy e-mail (w klientach poczty e-mail) i próba otwarcia go na różnych urządzeniach. Jeśli brzmi to jak dużo straconego czasu i bólu głowy, masz rację.

Na szczęście w dzisiejszych czasach istnieje lepszy sposób.

Narzędzie do testowania poczty e- mail Twilio SendGrid jest zintegrowane z edytorem projektu, co pomaga rozwiązywać problemy z poziomu jednej aplikacji. Pomoże Ci zobaczyć, jak Twoja poczta e-mail renderuje się w klientach, przeglądarkach i urządzeniach. Możesz na przykład zobaczyć, jak Twoja poczta e-mail będzie wyglądać na urządzeniu mobilnym za pomocą Gmaila i na komputerze za pomocą Outlooka.

Narzędzia do testowania poczty e-mail mogą również pomóc w znalezieniu uszkodzonych linków i przycisków, treści wyglądających na spam oraz problemów z formatowaniem.

Struktura wiadomości e-mail w formacie HTML

E-maile HTML mają prostą strukturę:

• DOCTYP
• nagłówek
• Ciało

DOCTYP

Użyj <!DOCTYPE>, aby poinformować przeglądarkę, czego się spodziewać — w tym przypadku będzie to wiadomość e-mail w formacie HTML.

nagłówek

Użyj sekcji nagłówka, aby uwzględnić takie elementy, jak stylizacja, zmiana rozmiaru i metatekst.

Ciało

Użyj treści do wizualnych elementów wiadomości e-mail, takich jak tekst, obrazy, tabele, linki i tym podobne.

Szablon e-maila z kodem HTML

Oto przykład szablonu wiadomości e-mail z kodem HTML. Możesz zobaczyć, jak ten szablon wiadomości e-mail z biuletynem podróżniczym renderuje się na komputerach, tabletach i urządzeniach mobilnych.

Lubisz co widzisz? Kliknij „Pobierz szablon”, a wyślemy Ci kopię kodu HTML do Twojej skrzynki odbiorczej. Następnie możesz skopiować/wkleić kod do edytora projektowania wiadomości e-mail, aby zaimportować szablon i dostosować go do swojej marki i kampanii.

Sprawdź inne szablony wiadomości e-mail z Twilio SendGrid

Chcesz więcej szablonów e-maili? Na szczęście mamy ich pełną galerię . Niezależnie od tego, czy potrzebujesz biuletynu, resetowania hasła, czy szablonu przypomnienia o spotkaniu, nasza bezpłatna galeria szablonów zawiera wszystko.

Ponadto te projekty są responsywne, dzięki czemu poczta e-mail wygląda świetnie na klientach, przeglądarkach i urządzeniach. Aha, a czy wspominaliśmy, że szablony są bezpłatne?

Już dziś zacznij tworzyć lepsze wiadomości e-mail w formacie HTML, korzystając z gotowego szablonu.