Tworzenie właściwej wiadomości e-mail

Programy pocztowe Outlook, The Bat!, Thunderbird i inne, a także usługi online Gmail, Zoho itp. będą wyświetlać tę samą wiadomość na różne sposoby, ponieważ obsługują znaczniki HTML i style CSS w inny sposób.

Aby zminimalizować różnice w wyświetlaniu wiadomości odbiorcom, należy przestrzegać pewnych zasad podczas tworzenia wiadomości e-mail.

Oczywiście te zalecenia dotyczą tylko przypadków, w których tworzysz tekst wiadomości e-mail za pomocą HTML. Nie możesz wpływać na wyświetlanie prostych wiadomości tekstowych, ale ekspresja takich wiadomości jest niższa niż w przypadku formatowania HTML.

Tabele zamiast bloków

Aby utworzyć strukturę strony, lepiej jest użyć tabel. Jeśli jesteś przyzwyczajony do układania bloków za pomocą znaczników <div>, lepiej zrezygnować z tego podejścia ze względu na niepełną obsługę elementów blokowych przez klientów poczty e-mail.

Aby ustawić tło, warto użyć tabeli o szerokości 100%, określając kolor tła i wyrównanie do środka, w której można zagnieździć inną tabelę z główną zawartością wiadomości e-mail.

Unikaj zbyt dużego zagnieżdżania tabel, ponieważ struktura wiadomości e-mail może być zniekształcona przez programy pocztowe.

Tagi HTML

Nie używaj tagów do wstawiania treści wideo lub audio, a także JavaScript - klienci poczty e-mail zazwyczaj ignorują takie treści.

Obrazy

Dla wszystkich obrazów wskazane jest określenie atrybutu alt z tekstem alternatywnym. Wiele klientów poczty e-mail domyślnie nie wyświetla obrazów osadzonych w tekście, umożliwiając odbiorcy włączenie ich wyświetlania w razie potrzeby. Nawet przy wyłączonych obrazkach odbiorca, dzięki wypełnionym atrybutom alt, będzie wiedział, co jest na nich przedstawione.

Nie należy tworzyć wiadomości e-mail tylko z obrazów - jeśli wyświetlanie obrazów jest domyślnie wyłączone w kliencie pocztowym odbiorcy, może otrzymać zestaw pustych ramek zamiast ładnej zawartości. Wiadomość e-mail musi być czytelna w każdych warunkach - nawet jeśli odbiorca przełączył się w tryb tekstowy (text/plain).

Jeśli chcesz dodać duży obraz do wiadomości, a jego obszar jest ograniczony szerokością, dobrze jest określić dla elementu img tego obrazu regułę CSS max-width: 100% — w takim przypadku obraz nie będzie rozciągał się na szerokość poza granice głównej treści wiadomości.

Style

Większość programów pocztowych usuwa style wtyczek połączone za pomocą znacznika <link> i bloki stylów zamknięte wewnątrz znaczników <style></style>. Dlatego do poprawnego wyświetlania wiadomości e-mail używaj tylko stylów inline dla znaczników HTML:

<p style="font-size:10pt; font-style:italic; color:#006699;">tekst akapitu</p>

Nie zaleca się stosowania formularzy stylów skróconych:

border: solid 1px grey;

Aby poprawnie wyświetlić wiadomość e-mail, określ wszystkie właściwości osobno:

border-style:solid; border-width:1px; border-color:grey;

Obsługa właściwości CSS przez klientów poczty e-mail jest ograniczona w porównaniu z nowoczesnymi przeglądarkami internetowymi, więc aby wiadomość e-mail wyglądała tak samo u wszystkich odbiorców, używaj tylko następującego zestawu szeroko obsługiwanych stylów:

background-color
border-...
color
font-...
letter-spacing
line-height
margin-...
padding-...
text-align
text-decoration
text-transform

Linki

Adresy linków muszą być bezwzględne. Jeśli używasz adresów względnych, linki okażą się niedziałające.

Tekst linku nie może przekraczać 65 znaków. Zbyt długi tekst linku może nie zmieścić się w jednej linii, co może spowodować, że link nie będzie działał.

Zawijanie słów

Sprawdź, czy w wiadomości znajdują się fragmenty tekstu, które mogą wyglądać niekorzystnie, jeśli różne części lub fragmenty słów w tych fragmentach zostaną przeniesione do nowej linii w programie pocztowym klienta. Aby anulować zawijanie do nowej linii, umieść takie fragmenty w elementach HTML z regułą CSS white-space: nowrap;.

Preferencje dotyczące wyglądu wiadomości e-mail

Pamiętaj, że niektórzy odbiorcy, zanim zdecydują się otworzyć całą wiadomość, najpierw zobaczą ją w małym okienku podglądu w swoim kliencie poczty e-mail. Sprawdź, czy lewa górna część wiadomości e-mail pozwala czytelnikowi ocenić, czy powinien ją przeczytać. Ta część wiadomości powinna zawierać główny punkt wiadomości i być dobrze czytelna.

Jeśli masz wybór między prostym a zaawansowanym projektem wiadomości HTML, wybierz opcję prostą, ponieważ istnieje minimalne prawdopodobieństwo, że wiadomość nie zostanie wyświetlona poprawnie.

Przetestuj swoje e-maile przed ich rozesłaniem

Po utworzeniu wiadomości e-mail przed wysłaniem jej do subskrybentów należy sprawdzić, czy działa ona w najczęściej używanych przeglądarkach internetowych i klientach poczty. W tym celu należy użyć funkcji wysyłania testowego w aplikacji "Mailer".