#NoFailMail: 5 najczęstszych błędów w projektowaniu wiadomości e-mail (i jak ich uniknąć)

Projektowanie może być najbardziej kłopotliwe w przypadku poczty e-mail. Jednym z głównych powodów uruchomienia naszej inicjatywy #NoFailMail jest pomoc projektantom poczty e-mail, programistom i marketerom w pokonaniu wszystkich rzeczy, które mogą zepsuć pocztę e-mail, niezależnie od tego, czy są to obrazy, formatowanie czy klienci poczty e-mail.

To oczywiste, ale i tak to powiemy: musisz znaleźć i naprawić błędy projektowe przed wysłaniem następnego e-maila. Niepowodzenia projektowe mogą uniemożliwić czytelnikom otwieranie i działanie na Twoje wiadomości i wpływać na reputację Twojej marki.

W tym poście dowiesz się o pięciu typowych błędach w projektowaniu wiadomości e-mail, które są plagą e-maili, i dowiesz się, jak naprawić każdy z nich.

Do niepowodzeń!

E-mail Fail # 1. Nie projektuje dla wielu rozmiarów ekranu.

Świat poczty elektronicznej nie jest już podzielony na komputery stacjonarne i urządzenia mobilne. Twoi subskrybenci mogą czytać Twoje e-maile na wszystkim, od „inteligentnego” ekranu telewizora na ścianie po smartwatch na nadgarstku.

Mogą nawet nie czytać twoich wiadomości. Zamiast tego mogą słuchać, gdy asystent domowy, taki jak Alexa lub Google Home, albo czytnik ekranu, czyta na głos Twoje e-maile.

Badanie przeprowadzone przez Litmus i Fluid z 2016 r. wykazało, że 51% wszystkich subskrybentów rezygnuje z otrzymywania wiadomości e-mail, które nie wyświetlają się lub nie działają dobrze na ich smartfonach — a 43% zgłasza te e-maile jako spam. Te statystyki dowodzą, że projektowanie dla wielu ekranów nie jest już przyjemnością.

Szybkie spojrzenie na udział w rynku klientów poczty e-mail pokazuje, jak mobilność dominuje w krajobrazie. Czterech z 10 największych klientów poczty e-mail jest dostępnych tylko na urządzeniach mobilnych i zgłasza łącznie ponad 40% wszystkich otwarć e-maili:

• Apple iPhone, 29%
• Apple iPad, 10%
• Poczta Samsung 4%
• Google Android, 3%

Responsywny i hybrydowy projekt, który wykorzystuje płynne tabele i obrazy do przepływu treści w różnych rozmiarach, to najlepsza opcja do tworzenia wiadomości e-mail, które renderują się poprawnie na klientach i platformach.

Nasz bezpłatny e-book, The Ultimate Guide to Email Optimization and Troubleshooting (Ostateczny przewodnik po optymalizacji i rozwiązywaniu problemów z pocztą e-mail), pomoże Ci zrozumieć, które podejście prawdopodobnie będzie najlepsze, jeśli przechodzisz z formatów zorientowanych na komputery stacjonarne na formaty zoptymalizowane pod kątem urządzeń mobilnych.

W międzyczasie te pięć obejść sprawi, że Twoje e-maile będą bardziej czytelne i łatwiejsze do działania, niezależnie od tego, czy Twoi subskrybenci przeglądają je na komputerach stacjonarnych, czy na urządzeniach mobilnych:

1. Użyj większego rozmiaru czcionki.
   Brzmi szalenie – większa czcionka na mniejszym ekranie? – ale działa. Celem jest czytelność bez zmuszania ludzi do szczypania, powiększania lub przewijania wiadomości z boku na bok, aby zobaczyć treść. Zalecamy minimalny rozmiar czcionki 14 pikseli w tekście treści i 22 piksele w nagłówkach.
2. Zaprojektuj przyjazne dla dotyku CTA.
   Palec nie jest tak precyzyjny jak mysz komputerowa. Zastąp klikalne linki przyciskami. Następnie ustaw te przyciski na minimum 44 piks. X 44 piks., czyli mniej więcej rozmiar przeciętnego palca.
3. Zmniejsz do jednej kolumny.
   Dwu- lub trzykolumnowe układy wiadomości e-mail nie są dobrze czytane na mniejszych ekranach. Pamiętaj, że Twoim celem jest sprawienie, aby treść wiadomości e-mail była łatwa do odczytania bez ściskania, powiększania lub przewijania w bok. Jeśli nie jesteś gotowy, aby przejść do projektowania responsywnego, wybór układu jednokolumnowego sprawi, że Twoje e-maile będą bardziej czytelne na większej liczbie rozmiarów ekranu.
4. Usprawnij swoje treści.
   Czy naprawdę potrzebujesz całej tej treści w wiadomości e-mail, aby uzyskać kliknięcia lub konwersje? Użyj śledzenia linków i innych narzędzi, aby dowiedzieć się, co klikają Twoi czytelnicy, a co ignorują. Przejdź do jednego podstawowego bloku kopii lub co najwyżej dwóch. Przyciągnij uwagę mocnym wizerunkiem bohatera zamiast grupy mniejszych zdjęć produktów.
   Staraj się także pisać krótsze zdania i bloki kopiowania. Pięć wierszy kopii w standardowym formacie na komputer można łatwo zawinąć do 10 lub 15 na urządzeniach mobilnych.
5. Podkręć białą przestrzeń.
   Spacja to pusty obszar wokół obrazów i bloków kopii. Używaj go swobodnie, aby skupić uwagę na obszarach treści, dać przyciskowi CTA więcej swobody i dzielić akapity w bloku tekstowym.

Błąd e-maila nr 2: Pozwól, aby niebieskie linki zepsuły Twój projekt

Automatyczne łączenie jest przydatną, ale czasami denerwującą cechą zarówno w iOS, jak i Gmailu. Widzisz to, gdy daty, numery telefonów i adresy automatycznie stają się klikalnymi/dotykalnymi niebieskimi linkami.

Mogą one być przydatne w przypadku zwykłego tekstu lub osobistych wiadomości e-mail, ponieważ są wygodne — jednym dotknięciem można uruchomić mapę lub kliknąć, aby zadzwonić albo zapisać wydarzenie w kalendarzu. Ale mogą być też trudne do odczytania na tle, które nie jest białe. Kolidują również z Twoją marką dla tego e-maila.

Na szczęście istnieją sposoby na wyłączenie tych niebieskich linków. W aplikacji Poczta systemu iOS możesz zastąpić niebieskie łącza, nadając styl selektorowi detektora danych Apple Mail (Dowiedz się, jak to zrobić). Niebieskie linki w Gmailu można naprawić za pomocą metody (tzn. umieszczając adresy lub numery telefonów w tagu i określając styl dla tego zakresu, lub możesz zastąpić wszystkie domyślne style, dodając deklarację stylu specyficzną dla Gmaila do kodu CSS (Oto jak ).

CZY TWOJE E-MAILE MAJĄ NIEBIESKIE LINKI? Wyświetlaj podgląd wiadomości e-mail w ponad 90 popularnych klientach poczty e-mail i urządzeniach oraz wykrywaj błędy — w tym niebieskie łącza — przed wysłaniem. Dowiedz się więcej →

Błąd e-maila nr 3: Obrazy poszły nie tak

Ach, obrazy. Mogą się nie udać na wiele sposobów, ale gdy używasz ich właściwie, ożywiają Twoje e-maile. Warto więc poświęcić swój czas, aby sprawdzić błędy obrazu, które widzimy każdego dnia, i jak zapobiec ich zepsuciu:

1. Używanie niewłaściwego formatu obrazu
   Rozwiązaniem tutaj nie jest użycie „właściwego” formatu obrazu, niezależnie od tego, czy jest to JPEG, GIF, PNG czy SVG, ponieważ nie ma jednego właściwego formatu. Każdy format różni się od pozostałych rozmiarem pliku, kompresją, jakością i najlepszym zastosowaniem. Szczegółowe porównanie zalet i wad najpopularniejszych formatów obrazów można znaleźć w rozdziale „PNG, GIF czy JPEG? Jaki jest najlepszy format obrazu dla wiadomości e-mail?” na blogu Litmus.
2. Brak optymalizacji dla wyświetlacza Retina
   „Wyświetlacz Retina” to termin ukuty przez Apple w odniesieniu do wyświetlaczy o wysokiej rozdzielczości DPI wyświetlanych na urządzeniach mobilnych. Obrazy, które nie są zoptymalizowane pod kątem wyświetlacza Retina, często są rozmyte lub niewyraźne, co prowadzi do gorszych wrażeń wizualnych.
   

   

   Aby przygotować wizualizację na siatkówkę, utwórz obraz o około dwukrotnie większym rozmiarze, niż planujesz go wyświetlić, a następnie zdefiniuj rozmiar obrazu jako zamierzony rozmiar w kodzie HTML. Jeśli chcesz wyświetlić obraz o rozdzielczości 300×200 pikseli, utwórz go w rozmiarze 600×400 i zdefiniuj go jako 300×200 za pomocą atrybutów HTML lub właściwości CSS.

   Pamiętaj jednak, aby mieć oko na rozmiar pliku. Korzystanie z obrazów siatkówki poprawia wygląd wizualizacji, ale zwiększa również rozmiary ich plików, co oznacza, że ​​ładowanie obrazów w skrzynce odbiorczej może zająć więcej czasu. Jeśli używasz kilku obrazów zoptymalizowanych pod kątem Retina, możesz uruchomić obcinanie wiadomości w Gmailu.

Przetestuj rozmiar pliku obrazu + czas ładowania Za pomocą Litmus Checklist możesz przetestować swoje obrazy pod kątem rozmiaru pliku, czasu ładowania i uszkodzonych linków. Dodatkowo od razu zobacz, jak Twoje kampanie wyglądają w popularnych klientach pocztowych. Rozpocznij listę kontrolną →

Błąd e-maila nr 4: Nie projektuje się z wyłączonymi obrazami

Inny problem z obrazami pojawia się, gdy się nie renderują. Niektóre klienty poczty e-mail automatycznie blokują ładowanie obrazów, dopóki użytkownik na to nie zezwoli. Lub sami użytkownicy wolą domyślnie blokować obrazy i wybierać te, które chcą zobaczyć.

Tak czy inaczej, blokowanie obrazów ogranicza możliwość komunikowania się wiadomości e-mail zaraz po otwarciu wiadomości. Chociaż nie możesz zmusić użytkowników do odblokowania obrazów, możesz podjąć kroki, aby wiadomość o braku obrazów wyglądała dobrze. Tekst ALT i przyciski kuloodporne są łatwe do zaimplementowania i mogą pomóc w uratowaniu konwersji, które mogły zostać utracone bez obrazów, które je napędzają:

1. Użyj podstawowego lub stylizowanego tekstu ALT. Tekst ALT to kombinacja słów wybranych do opisania obrazu, która pojawia się, gdy obraz jest blokowany. Powinno to być standardową praktyką - większość edytorów wiadomości e-mail daje miejsce na napisanie opisu obrazu - ale szybkie przejrzenie skrzynki odbiorczej ujawnia, że ​​prawie każdy inny e-mail zawierał obrazy, ale nie zawierał tekstu ALT. Oto jak wygląda wiadomość e-mail z dużą ilością obrazów bez tekstu ALT, gdy obrazy są wyłączone:
   Oto ten sam e-mail z włączonymi obrazami. Zobacz, co umknęłoby Twojemu klientowi?
   Dobrą praktyką tekstową ALT jest napisanie skutecznego opisu, a nie tylko etykiety obrazu. Aby wyjść o krok dalej, wypróbuj stylizowany tekst ALT. Tutaj dodajesz trochę wbudowanego CSS, aby zmienić czcionkę, kolor, rozmiar, styl i wagę tekstu ALT.
2. Użyj kuloodpornych przycisków
   Jeśli umieścisz wezwanie do działania wewnątrz obrazu, będzie niewidoczne, gdy obrazy zostaną wyłączone. Przycisk kuloodporny używa HTML i CSS zamiast formatów graficznych, takich jak JPG i GIF. Nie polegają na renderowaniu obrazu w wiadomości e-mail. A oto ten sam e-mail z włączonymi obrazami:

Jason Rodriguez, społeczność Litmus i ewangelista produktów, przedstawia cztery podstawowe podejścia do projektowania przycisków w swoim przewodniku „The Ultimate Guide to Bulletproof Buttons for Email Design”. Sprawdź to, aby zobaczyć kodowanie, przykłady oraz zalety i wady każdego podejścia.

Błąd e-maila nr 5. Brak optymalizacji pod kątem wiadomości e-mail w postaci zwykłego tekstu

Nie, nie zamierzamy wskrzesić Wielkiej Debaty Tekst kontra HTML z początku XXI wieku. Jednak wiadomości e-mail w postaci zwykłego tekstu nadal odgrywają znaczącą rolę w Twojej strategii dotyczącej poczty e-mail, zwłaszcza w związku z rozwojem smartwatchów, czytników ekranu i asystentów domowych, z których żaden nie renderuje HTML.

Te wskazówki pomogą Ci utworzyć przekonującą wiadomość e-mail w postaci zwykłego tekstu, niezależnie od tego, czy jest to samodzielna wiadomość, czy wersja tekstowa wieloczęściowej wiadomości MIME:

• Pisz krótkie, ale jasne nagłówki. Użyj co najmniej jednego wiersza odstępu, aby odróżnić każdy nagłówek od bloku tekstowego znajdującego się pod nim. Wyróżnij to za pomocą urządzeń typograficznych, takich jak myślniki lub znaki równości.
• Rozbijaj długie bloki kopii. Używaj większej liczby, ale krótszych bloków kopiowania, aby uniknąć przerażającej i nieczytelnej szarej rzeki kopii.
• Utwórz hierarchię informacji z listami. Cały tekst w wiadomości e-mail w postaci zwykłego tekstu ma tę samą czcionkę i rozmiar w punktach. Musisz więc ciężej pracować, aby poprowadzić czytelnika do kluczowych punktów. Użyj list, aby wyróżnić informacje w serii. Ustaw każdy element za pomocą przyjaznego tekstu oznaczenia, takiego jak myślnik (–) lub gwiazdka (*). (Kulki nie działają w postaci zwykłego tekstu).
• Swobodnie używaj białych znaków. Biała przestrzeń porządkuje powiązane informacje w celu łatwego skanowania. Używaj szerokich marginesów i dodatkowych podziałów wierszy między blokami kopiowania, wezwaniami do działania a nagłówkami lub stopkami administracyjnymi.
• Zdefiniuj CTA. Co robili ludzie, zanim mieli przyciski CTA? Wykorzystali przyciągacze uwagi, takie jak białe znaki, aby oddzielić je od innych kopii, oraz środki typograficzne, takie jak strzałki (>> i <<), aby je odróżnić. Unikaj długich list CTA i otocz je białą przestrzenią, aby były przyjazne dla kliknięcia lub palca.

Ten e-mail ilustruje wszystkie najlepsze praktyki dotyczące wiadomości e-mail w postaci zwykłego tekstu:

Omówiliśmy więcej sposobów wysyłania #NoFailMail we wcześniejszych wpisach na blogu: Więcej wskazówek i zasobów dotyczących #NoFailMail

• #NoFailMail: Dlaczego unikanie błędów jest kluczem do sukcesu wiadomości e-mail
• Jak testowanie pomaga uniknąć 5 największych niepowodzeń poczty e-mail?
• 5 błędów copywritingu, których należy unikać

Chcesz więcej takich zasobów? Zapisz się do naszego newslettera, aby być na bieżąco z najnowszymi wiadomościami e-mail.