Wskazówki dotyczące projektowania wiadomości e-mail i typowe błędy, na które należy uważać

Powszechnie wiadomo, że ludzie w pierwszej kolejności zwracają uwagę na elementy wizualne, przez co często przedkładają formę nad treść. Marketing e-mailowy nie jest wyjątkiem. To struktura wiadomości e-mail, ilustracje, formatowanie tekstu, paleta kolorów i optymalizacja pod kątem urządzeń mobilnych zwykle decydują o tym, czy użytkownicy zakończą czytanie wiadomości e-mail i wykonają żądaną czynność.

Projekt e-maila wpływa nie tylko na postrzeganie czytelnika, ale także na reputację nadawcy. Dostawcy skrzynek pocztowych często oznaczają wiadomości e-mail z błędami układu i projektu jako spam, co jest dobrym powodem, dla którego warto zadbać o projekt szablonu wiadomości e-mail.

W tym artykule przedstawimy kilka wskazówek dotyczących projektowania e-maili, jak sprawić, by Twoje e-maile były atrakcyjne wizualnie i ogólnie skuteczne. Porozmawiamy również o najczęstszych błędach projektowych i pokażemy przykłady dobrze zaprojektowanych e-maili różnych marek.

Wskazówki dotyczące projektowania szablonów wiadomości e-mail

Szablon to podstawa każdego e-maila. Definiuje układ i wygląd Twoich przyszłych e-maili, wpływając na ogólne wyniki Twoich kampanii.

W projekcie szablonu wiadomości e-mail należy przestrzegać tych samych wskazówek wizualnych, których używałbyś w przypadku witryny internetowej firmy, mediów społecznościowych i innych platform. Przyjrzyjmy się kilku typowym błędom w projektowaniu wiadomości e-mail i wskazówkom dotyczącym projektowania wiadomości e-mail, które warto wziąć pod uwagę podczas tworzenia szablonu.

Błędy, których należy unikać

1. Nie zmieniaj zbyt często projektu szablonu wiadomości e-mail. Jeśli użytkownicy otrzymają za każdym razem inny e-mail, trudniej będzie im Cię zapamiętać i rozpoznać.

2. Nie używaj obrazów zamiast tekstu, ponieważ

• obrazy mogą się nie wyświetlać;
• będziesz musiał zmienić szablon ręcznie za każdym razem, gdy będziesz chciał zmienić tekst;
• wszelkie kody promocyjne umieszczone na obrazie będą niemożliwe do skopiowania i wklejenia w razie potrzeby;
• dostawcy skrzynek pocztowych mogą oznaczać wiadomości e-mail zawierające wyłącznie obrazy jako spam.

3. Nie używaj koloru firmowego jako głównego koloru wiadomości e-mail, jeśli jest zbyt odważny i jasny.

4. Nie używaj jasnego lub złożonego tła tekstu.

5. Nie wahaj się liczyć na pomoc profesjonalnego projektanta e-maili, jeśli masz taką możliwość. Źle zaprojektowana wiadomość e-mail może zrujnować reputację firmy lub po prostu zostać oznaczona jako spam przez dostawcę skrzynki pocztowej. Tymczasem profesjonalny projektant będzie mógł stworzyć trwały projekt szablonu wiadomości e-mail, który zainteresuje i zaangażuje Twoich subskrybentów.

Najlepsze praktyki do naśladowania

1. Zawsze projektuj szablony wiadomości e-mail w oparciu o wytyczne wizualne Twojej firmy. Holistyczne podejście do cyfrowego wyglądu zwiększy rozpoznawalność marki i zwiększy lojalność klientów.

2. Jeśli zdecydujesz się przeprowadzić testy A/B, przetestuj poszczególne elementy zamiast całego e-maila. W ten sposób będziesz wiedział na pewno, które detale są mniej lub bardziej efektowne, a styl Twojej firmy pozostanie rozpoznawalny dla odbiorców.

3. Twórz osobne szablony dla różnych typów e-maili i zaprojektuj je w podobnym stylu korporacyjnym. Pomoże to Twoim subskrybentom nie tylko odróżnić Twoje e-maile od e-maili jakiejkolwiek innej marki, ale także odróżnić je od siebie na podstawie ich typu.

4. Umieść najważniejsze informacje i wezwanie do działania na pierwszym zwoju i upewnij się, że cały e-mail wygląda na zrównoważony. Jeśli Twoje nagłówki i opisy są starannie zaprojektowane, przyciski wezwania do działania przyciągają wzrok, a obrazy są wysokiej jakości, odbiorcy będą płynnie kierowani przez cały e-mail prosto do wezwania do działania.

5. Postaraj się, aby Twoje e-maile miały szerokość 600px, aby wyświetlały się poprawnie w dowolnym kliencie pocztowym.

6. Alternatywne bloki tekstu i obrazy. Jest to ważne nie tylko dla czytelności, ale także dla lepszej dostarczalności Twoich e-maili, zwłaszcza jeśli zacząłeś wysyłać e-maile nie tak dawno temu. Ogólnie zalecamy przestrzeganie proporcji tekstu do obrazu 80:20 lub 60:40.

7. Pamiętaj, że dla jasnego tła zawsze lepiej jest użyć kontrastowego, matowego symbolu zastępczego.

8. O ile nie możesz polegać na pomocy projektanta, możesz samodzielnie projektować szablony wiadomości e-mail za pomocą edytorów wiadomości e-mail typu „przeciągnij i upuść”.

Teraz spójrzmy na kilka przykładów demonstrujących te najlepsze praktyki w działaniu.

Dwa pierwsze przykłady wzięliśmy z Behance. Oba szablony, jeden do wiadomości powitalnych, a drugi do cotygodniowych wiadomości „Nowa inspiracja”, są zgodne z podobnymi zasadami projektowania, ale wyglądają nieco inaczej. Wiadomość powitalna ma duży i wyraźny tytuł, wysokiej jakości zdjęcia, zepsuty układ siatki i dobrze czytelną czcionkę. Bloki tekstu i obrazu są na przemian, co ułatwia czytanie wiadomości e-mail.

Jeśli chodzi o cotygodniowy e-mail, jest on ogólnie krótszy i kładzie większy nacisk na obrazy, z pogrubionym przyciskiem CTA na samej górze.

Oto kolejny przykład dobrego szablonu wiadomości e-mail od Downshiftology. Firma może pochwalić się wysyłaniem minimalistycznych e-maili z dobrze ustrukturyzowaną siatką. Zwykle zaczynają się od nagłówka i intro, po których następują wysokiej jakości zdjęcia jedzenia i hiperłącza do przepisów. Wyrównane wyrównanie i jasne kolory sprawiają, że e-mail jest przyjemny do przeglądania i łatwy do odczytania.

Wskazówki dotyczące projektowania responsywnych wiadomości e-mail

Myśląc o układzie i szablonie wiadomości e-mail, zawsze miej na uwadze, jak będą wyglądać na różnych urządzeniach, w tym na urządzeniach mobilnych. Oto kilka błędów, których należy unikać, oraz wskazówki dotyczące responsywnego projektowania wiadomości e-mail.

Błędy, których należy unikać

1. Unikaj używania kilku hiperłączy razem, ponieważ może to spowodować ich bałagan. Odbiorca może przypadkowo dotknąć niewłaściwego linku znajdującego się zbyt blisko tego, w który chciał kliknąć.

2. Nie rób zbyt małych przycisków CTA. Powiększanie, aby kliknąć przycisk, może naprawdę sfrustrować odbiorców.

3. Nie używaj czcionek mniejszych niż 14 pikseli w treści wiadomości e-mail i 20 pikseli w nagłówkach wiadomości e-mail, ponieważ utrudni to odczytanie wiadomości e-mail na małych ekranach.

Najlepsze praktyki do naśladowania

1. Postępuj zgodnie z zasadami responsywnych e-maili. Na przykład, jeśli Twój szablon wiadomości e-mail składa się z kilku kolumn i chcesz, aby były dopasowane do ekranów urządzeń mobilnych, wstaw specjalny kod i zbuduj wiadomość wewnątrz tabeli.

2. Użyj gotowych, adaptacyjnych szablonów e-mail z SendPulse lub stwórz własne w naszym kreatorze przeciągnij i upuść, jeśli nie chcesz zadzierać z kodem. Są już dostosowane zarówno do komputerów stacjonarnych, jak i urządzeń mobilnych; poza tym zawsze możesz wyświetlić podgląd szablonu wiadomości e-mail dla obu urządzeń.

Spójrz na następujący e-mail od Uniqlo, który jest dobrze wyświetlany zarówno na komputerach stacjonarnych, jak i mobilnych. Oto, co widzi użytkownik komputera:

Układ wersji mobilnej jest nieco inny:

Wskazówki, jak używać tekstu w projekcie szablonu wiadomości e-mail

Nawet najbardziej wciągająca kopia nie przyciągnie uwagi, jeśli wygląda nieatrakcyjnie lub jest trudna do odczytania. W przeciwieństwie do tego, użytkownicy nie zaniedbują wiadomości e-mail o schludnym układzie, krótkich akapitach, chwytliwych nagłówkach i odpowiednim podkreśleniu najważniejszych informacji.

Błędy, których należy unikać

1. Nie mieszaj zbyt wielu czcionek, stylów, kolorów i rozmiarów czcionek w jednym e-mailu, ponieważ może to wyglądać niechlujnie.

2. Unikaj używania zbyt małych lub bladych czcionek ― w obu przypadkach Twój e-mail może stać się trudny do odczytania.

3. Nie twórz e-maili tekstowych bez akapitów, nagłówków i wyróżnionych kluczowych punktów. Najprawdopodobniej znudzi Twoich czytelników, nawet jeśli Twój tekst jest rzeczywiście interesujący.

Najlepsze praktyki do naśladowania

1. Wybierz jedną lub dwie główne czcionki dla nagłówków i głównego tekstu, nie więcej.

2. Użyj podstawowych czcionek, które będą poprawnie renderowane przez większość klientów poczty e-mail, takich jak Gmail, Yahoo, Outlook i inne. Jeśli usługa nie rozpozna Twojego kroju pisma, zastąpi go inną czcionką, co może źle wpłynąć na ogólny projekt szablonu wiadomości e-mail. Za najbezpieczniejsze uważa się czcionki Arial, Lucida Grande, Tahoma, Trebuchet, Verdana, Georgia, Palatino, Times New Roman, Courier New, Courier i Impact.

3. Zachęcamy do używania własnych czcionek firmowych na banerach i obrazach. Upewnij się jednak, że czcionka na banerze i w e-mailu dobrze do siebie pasują.

4. Podziel tekst na sekcje, używając nagłówków i krótkich akapitów. Dobrze skonstruowany tekst jest zawsze łatwiejszy do odczytania.

5. Ustaw czcionkę nie mniejszą niż 14px.

Jednym z przykładów dobrego układu tekstu jest wiadomość e-mail od DesignLab. Ma pogrubiony, wyśrodkowany nagłówek i składa się z trzech krótkich akapitów, po których następuje wyraźne wezwanie do działania, podświetlone na pomarańczowo.

Wskazówki dotyczące używania kolorów w projektowaniu szablonów wiadomości e-mail

Kolor to potężne narzędzie, które może stworzyć nastrój e-maila i wzmocnić przekaz. Jednak wybierając niewłaściwe kolory, ryzykujesz, że Twój e-mail będzie zbyt nudny, rozpraszający lub chaotyczny.

Błędy, których należy unikać

1. Nie przytłaczaj czytelników mnóstwem kolorów. Zbyt dużo czerwieni, żółci jako tła tekstu lub kombinacja kolorów, które nie pasują do siebie, mogą zepsuć wrażenie, które próbujesz zrobić, ponieważ najprawdopodobniej odciągną uwagę użytkowników od głównej idei.

2. Powstrzymaj się od zbyt wielu gradientów. Jeśli są używane nieprofesjonalnie, mogą sprawić, że Twój e-mail będzie wyglądał niechlujnie lub zmniejszyć widoczność tekstu.

Najlepsze praktyki do naśladowania

1. Używaj odważnych i jasnych kolorów tylko do podkreślenia poszczególnych elementów lub słów, wybierając bardziej uspokajające kolory tła.

2. Przy wyborze motywu kolorystycznego uwzględnij preferencje swoich odbiorców. Na przykład Kissmetrics donosi, że mężczyźni preferują kontrastujące kolory, podczas gdy kobiety wybierają bardziej miękkie palety kolorów. Aby dowiedzieć się, które kolory Twoi użytkownicy lubią najbardziej, przeprowadź testy A/B i spróbuj zmienić kolor jednego lub kilku elementów naraz, aby dokładnie zmierzyć wyniki.

3. Użyj takich narzędzi jak Adobe Color, aby wybrać idealną paletę kolorów, która będzie wyglądać wizualnie równo.

Na przykład B&Q użyj ich firmowego pomarańczowego koloru jako zakreślacza i trzymaj się bardziej neutralnych tonów dla pozostałych elementów.

Wskazówki dotyczące projektowania nagłówków wiadomości e-mail

Nagłówek to pierwszy blok e-maila umieszczony na samym jego szczycie. Zwykle zawiera logo, linki do sekcji witryny, dane kontaktowe i inne ogólne informacje. Nagłówek wiadomości e-mail wraz z nazwą nadawcy pomaga użytkownikom zidentyfikować nadawcę.

Błędy, których należy unikać

1. Nie próbuj umieszczać zbyt wielu informacji w nagłówku. Tak, możesz na przykład podać linki do swojej witryny, ale jeśli umieścisz również linki do mediów społecznościowych, szczegółowe informacje kontaktowe i inne bloki w nagłówku, te ostatnie staną się zbyt duże i najprawdopodobniej mylące.

2. Nie używaj obrazów o złej jakości w nagłówku i nigdzie indziej w e-mailu, ponieważ będzie to sprawiało wrażenie amatorskiego projektu.

Najlepsze praktyki do naśladowania

1. Podkreśl główne informacje nagłówka, a pozostałe elementy niech będą nieco mniejsze lub mniej jasne.

2. Używaj specjalnych nagłówków tematycznych podczas świąt, sezonów wyprzedażowych i innych specjalnych wydarzeń, aby stworzyć nastrój. Możesz także zmieniać nagłówki dla różnych typów wiadomości e-mail, takich jak podsumowania lub wiadomości transakcyjne.

Spójrz na minimalistyczny nagłówek w e-mailu od TheRealReal:

Wskazówki dotyczące projektowania stopek e-mail

Ostatnim, ale nie najmniejszym blokiem e-maila jest jego stopka. Zwykle zawiera podpis e-mail, link do rezygnacji z subskrypcji, dane kontaktowe firmy i linki do mediów społecznościowych. Mimo że ten blok wydaje się najłatwiejszy do zaprojektowania, wciąż jest kilka błędów, które często popełniają firmy.

Błędy, których należy unikać

1. Nie przytłaczaj stopki zbyt dużą ilością ogólnych informacji, aby nie wyglądała na niechlujną i zagmatwaną.

2. Nigdy nie ukrywaj linku do rezygnacji z subskrypcji, nie rób go zbyt mały lub ledwo widoczny. Jeśli użytkownikowi trudno jest zrezygnować z subskrypcji, najprawdopodobniej kliknie „Spam”, co zawsze jest złą wiadomością dla Twojej reputacji nadawcy.

Najlepsze praktyki do naśladowania

1. Dołącz tylko te linki do swojej stopki, które naprawdę mają znaczenie dla Twoich użytkowników; spróbuj pogrupować podobne bloki treści, aby poprawić czytelność.

2. Bądź szczery ze swoimi odbiorcami i zadbaj o to, aby Twój link do rezygnacji z subskrypcji był dobrze widoczny.

3. Dodaj kreatywny podpis e-mail do stopki, aby zakończyć e-mail przyjazną notatką i niech odbiorca czeka na wiadomość od Ciebie następnym razem.

Stopka e-maila od LinkedIn, którą możecie zobaczyć poniżej, doskonale wpisuje się w powyższe wskazówki. Zawiera podpis e-maila, wyraźny przycisk rezygnacji z subskrypcji oraz dane kontaktowe firmy, bez podawania zbędnych informacji.

Wskazówki dotyczące korzystania z obrazów w projektowaniu wiadomości e-mail

Wizualizacje odgrywają istotną rolę w projektowaniu wiadomości e-mail: mądry dobór obrazów może od razu zapewnić Twoim subskrybentom lepszą pozycję i zapewnić ich zaangażowanie w wiadomość e-mail do końca.

Błędy, których należy unikać

1. Nie twórz e-maili składających się wyłącznie z obrazów, ponieważ 43% użytkowników wyłącza obrazy w swoich klientach poczty e-mail; pamiętaj jednak, że treść wiadomości e-mail powinna pozostać wyraźna, nawet jeśli obrazy nie są widoczne.

2. Nie rób zdjęć większych niż zalecane. Na przykład, jeśli zaleca się używanie zdjęć o szerokości 300px, nie używaj tych, które mają szerokość 1200px.

Najlepsze praktyki do naśladowania

1. Zoptymalizuj obrazy przed dodaniem ich do wiadomości e-mail. Wiadomość e-mail z ciężkimi zdjęciami ładuje się dłużej, zwłaszcza na telefonach komórkowych. Najprawdopodobniej użytkownik nie będzie czekał na załadowanie obrazów i po prostu zamknie wiadomość e-mail. Aby zoptymalizować zdjęcia, użyj narzędzi takich jak Squoosh lub TinyPNG.

2. Dodaj tekst alternatywny do swoich obrazów, aby użytkownicy mogli zrozumieć, o co chodzi w obrazach, na wypadek gdyby nie ładowały się automatycznie.

3. Zwiększ rozmiar ikon 2 razy, aby wyglądały dobrze na urządzeniach iPhone i Macbook z ekranem Retina. Na przykład, jeśli chcesz użyć ikony 70×20, prześlij na serwer wersję 140×40, a następnie zmień rozmiar ikony w e-mailu, używając następującego atrybutu: width="70" .

Notatka! Korzystając z tej metody, zmieniasz tylko rozmiar obrazu, a nie jego wagę. Dlatego powinieneś najpierw zoptymalizować swoje obrazy, a następnie przesłać je na serwer.

4. Spraw, aby obrazy były klikalne. Jeśli spojrzysz na mapę kliknięć swoich e-maili, najczęściej zobaczysz, że ludzie klikają obrazy. Wykorzystaj tę zaletę, aby kierować ludzi do Twojej witryny lub mediów społecznościowych.

5. Używaj wysokiej jakości zdjęć zrobionych przez Ciebie lub znalezionych w serwisach ze zdjęciami stockowymi.

Przechodząc do przykładów, możesz zauważyć, że TheSill pamięta o dodaniu tekstu alternatywnego wyjaśniającego, jakie rodzaje kwiatów są przedstawione na obrazach.

Tymczasem The New York Times Magazine wykorzystuje wysokiej jakości zdjęcia i unikalne ilustracje, aby rozjaśnić swoje e-maile wypełnione tekstem.

Wskazówki dotyczące projektowania CTA

Wezwanie do działania w wiadomości e-mail to link lub przycisk stworzony w celu uzyskania odpowiedzi od użytkownika — rejestracji, zakupu lub kontaktu z menedżerem. Wyraźne wezwanie do działania i jego prawidłowe umieszczenie pomoże Ci zwiększyć CTR, a błędy w CTA mogą utrudnić subskrybentowi wykonanie pożądanego działania, przez co Twój e-mail będzie po prostu bezużyteczny.

Błędy, których należy unikać

1. Nie ukrywaj ani jednego przycisku wezwania do działania na końcu e-maila ani nawet za pierwszym zwojem.

2. Nie zmuszaj użytkowników do zgadywania, co mają zrobić ― zamiast tego zapewnij im wyraźne wezwanie.

3. Nie ukrywaj hiperłączy, jeśli używasz ich zamiast przycisków CTA. Nie powinny zgubić się w innych elementach e-maila. Nie powinny też być zbyt małe ani nienasycone.

Najlepsze praktyki do naśladowania

1. Umieść swoje główne wezwanie do działania na pierwszym zwoju. Jeśli Twój e-mail jest długi, możesz kilka razy powtórzyć wezwanie do działania.

2. Upewnij się, że temat i wezwanie do działania są poświęcone temu samemu tematowi.

3. Spraw, aby przycisk CTA był jasny i widoczny. Powinien kontrastować z tłem, tekstem i innymi elementami e-maila.

Na przykład w jednym ze swoich e-maili LinkedIn nie tylko dwukrotnie powtórzył wezwanie do działania, ale także uczynił je pogrubionymi i kontrastowymi.

Na innym przykładzie od Neila Patela możesz zobaczyć, że wiersz tematu e-maila jest skorelowany z tekstem CTA:

Lista kontrolna wskazówek dotyczących projektowania wiadomości e-mail

Aby ułatwić Ci sprawdzenie wiadomości e-mail przed wysłaniem, zebraliśmy wszystkie wskazówki, o których powinieneś pamiętać, i pogrupowaliśmy je według kategorii.

Wierzymy, że dzięki tym wszystkim wskazówkom będziesz w stanie tworzyć responsywne i dobrze zaprojektowane e-maile, i to nie bez SendPulse. Usługa pomoże Ci również A/B przetestować różne elementy wiadomości e-mail i wybrać najlepsze opcje dla Twojej kampanii.