Jak zaprojektować e-mail marzeń: kompletny poradnik
Pierwszy krok jest zawsze najtrudniejszy. Tak, nawet w projektowaniu e-maili.
Kiedy postanawiasz stworzyć e-mail od zera, pojawia się mnóstwo pytań. Jaki jest optymalny rozmiar szablonu e-maila, jego szerokość i wysokość? Ile powinien ważyć newsletter? A co z fontami i kolorami?
Żeby nie zgubić się po drodze, potrzebujesz dobrych wskazówek — i właśnie dlatego napisaliśmy ten poradnik. Dlaczego my? Stworzyliśmy ponad 390 dopracowanych szablonów e-maili i jeszcze więcej unikalnych e-maili dla naszych klientów. Przejdź z nami cały proces projektowania idealnego e-maila, od wymiarów po stopkę, i zobacz, jak zbudować go w Blocks, naszym edytorze e-maili no-code.
Część 1. Zacznijmy od początku
Najpierw ustalmy, jakie wymiary powinien mieć szablon e-maila. Właściwa wysokość i szerokość są kluczowe, by treść wyświetlała się poprawnie, a przekaz trafiał do odbiorców. Wymiary szablonu (i jego zawartości) zwykle podaje się w pikselach (px), więc tego będziemy się trzymać w całym poradniku.
Jak szeroki powinien być e-mail?
Przez długi czas standardowa szerokość e-maila wynosiła 600 px na komputerze oraz 320 px w orientacji pionowej i 480 px w poziomej na urządzeniach mobilnych. Z czasem jednak rozdzielczości ekranów rosły. Dziś, według tego artykułu Selzy, idealna szerokość wersji na komputer to 640 px, a szerokość mobilna pozostaje bez zmian.
Oczywiście e-mail może być szerszy niż 640 px, ale staraj się nie przekraczać progu 800 px. Rzecz w tym, że każdy klient poczty ma własne ustawienia i ograniczenia, a Ty musisz się w nich zmieścić, jeśli chcesz, by wszyscy odbiorcy zobaczyli najlepszą wersję wiadomości. A jeśli e-mail nie mieści się w tym progu, przetestuj go w każdym kliencie poczty, żeby upewnić się, że nic się nie rozjeżdża ani nie psuje.
Pamiętaj też o jednym: jeśli wersja mobilna będzie miała 480 px szerokości, użytkownicy będą musieli obrócić telefon, żeby zobaczyć e-mail poprawnie. Podobnie jak w wersji na komputer możesz zrobić ją szerszą niż 320 px, ale dokładnie ją przetestuj.
Jak długi powinien być e-mail?
Jeśli chodzi o wysokość e-maila, ogranicza Cię tylko wyobraźnia (i waga pliku). Idealna długość to 1500 px, ale możesz zrobić dłuższy e-mail, nawet do 3000 px! Pamiętaj jednak, że im dłuższy e-mail, tym większa szansa, że odbiorca stwierdzi „za długie, nie czytam” i po prostu go zamknie.
A jeśli masz do przekazania dużo treści, zadbaj o strukturę: używaj wypunktowań, skracaj akapity, dodawaj nagłówki. Możesz też umieścić część informacji na obrazach, użyć GIF-ów, a nawet dołączyć wideo!
Ile powinien ważyć newsletter?
E-mail nie powinien ważyć więcej niż 102 KB. Zawsze o tym pamiętaj i nie przeładowuj wiadomości treścią (i nie chodzi tu tylko o obrazy czy wideo).
Wagę e-maila mierzy się wagą kodu HTML. Im więcej linii kodu, tym większy plik. Dlatego pilnuj objętości treści — liczy się każdy blok (dosłownie).
A co, jeśli przekroczysz limit 102 KB? Skutek jest prosty: niektóre klienty poczty (na przykład Gmail) przytną Twój e-mail. Jeśli ucięta zostanie stopka, czasem można to przeżyć, ale jeśli e-mail urwie się w połowie, to zupełnie inna sprawa. Miej to na oku.
Jak zbudować e-mail od zera w Blocks?
W Blocks zbudujesz piękny e-mail bez pisania ani jednej linijki kodu! Zacznij od pustego szablonu, wygeneruj e-mail z pomocą AI albo wybierz szablon z galerii, a potem przeciągaj bloki treści na obszar roboczy i dostosowuj właściwości elementów oraz ustawienia e-maila w panelu po prawej.
Część 2. Jak sprawić, by e-mail błyszczał
Podstawowa struktura e-maila jest gotowa, czas przyjrzeć się jego elementom. Porozmawiajmy o układzie e-maila i o tym, jak go dobrze zaprojektować.
1. Preheader i nagłówek (wysokość, szerokość, zawartość)
Preheader to wąski pasek nad treścią e-maila. Zwykle wyświetla się też zaraz po temacie. Preheader może rozwijać temat (na przykład wspominać o darmowej dostawie albo dodatkowych rabatach) albo pełnić czysto praktyczną funkcję (na przykład zawierać link „wyświetl w przeglądarce”).
Przy formatowaniu tekstu preheadera warto pamiętać o kilku rzeczach. Font preheadera powinien być mniejszy niż w treści e-maila (ale oczywiście nie za mały). Na przykład jeśli tekst główny ma 14 px, w preheaderze trzymaj się około 10-12 px. Co do wysokości preheadera, wystarczy 55-60 px: większy będzie się za bardzo wyróżniał.
No i oczywiście pamiętaj o długości tekstu preheadera: powinna mieścić się między 50 a 100 znakami.
Teraz nagłówek e-maila. Zwykle zawiera logo firmy, a obok przyciski, menu lub inne elementy. Oto kilka wskazówek co do jego rozmiaru.
Jeśli w nagłówku jest logo standardowej wielkości, najlepsza wysokość to 70 px. Jeśli dodajesz do nagłówka przycisk lub tekst (albo używasz większego logo), możesz zwiększyć wysokość do 100-150 px. Nagłówek z menu może mieć nawet do 200 px. Pamiętaj jednak: zbyt wysoki nagłówek przyciąga za dużo uwagi.
Oprócz odstępów górnych i dolnych możesz też dodawać odstępy po lewej i prawej stronie bloków. W przeciwieństwie do górnych i dolnych powinny być takie same w całym e-mailu, czyli jeśli w treści używasz bocznych odstępów 40 px, to w preheaderze i nagłówku też powinny mieć 40 px.
Jeśli chodzi o projekt nagłówka, ogranicza Cię tylko wyobraźnia i ogólny styl e-maila. Pamiętaj jedynie, by wszystkie elementy wyglądały spójnie i na komputerze, i na telefonie.
2. Baner (wysokość, szerokość, co robić, a czego unikać)
Baner w e-mailu to obraz JPG, PNG lub SVG, który najbardziej przyciąga uwagę i jest idealnym polem do popisu dla kreatywności. Możesz eksperymentować z rozmiarem banera, stylem i wielkością fontów oraz kolorami. Zawsze jednak zachowaj umiar: baner przeładowany treścią raczej zamieni się w chaos, niż przyciągnie wzrok.
Wymiary obrazów w e-mailu:
Szerokość banera zwykle zależy od szerokości całego e-maila. Na przykład jeśli e-mail ma 600 px szerokości na komputerze i 320 px na telefonie, baner może mieć tyle samo. Możesz też dodać do niego boczne odstępy, ale pamiętaj, że muszą być spójne w całym e-mailu (jeśli wszystkie inne bloki mają 40 px, baner też powinien je mieć).
Co do długości banera, nie ma sztywnego limitu poza zdrowym rozsądkiem. Radzimy jednak, by baner miał 700-1400 px wysokości. Dłuższy baner prawdopodobnie bardziej zaszkodzi, niż pomoże.
3. Tekst (styl fontu, rozmiar, kolory, formatowanie)
Przy projektowaniu tekstu e-maila łatwo się pogubić. Jaki rozmiar fontu jest najlepszy? Może istnieje jakiś profesjonalny font i rozmiar, których trzeba używać? Który z dziesiątek wariantów wybrać?
Spokojnie, to wcale nie jest trudne. Pomożemy Ci dobrać idealny styl fontu, jego wielkość, interlinię, kolor i formatowanie.
Styl fontu:
Są dwie główne grupy fontów: szeryfowe (Serif) i bezszeryfowe (Sans Serif). Różnią się ozdobnikami na końcach liter: fonty szeryfowe je mają, a bezszeryfowe nie.
Na początku Blocks miał tylko ograniczony zestaw fontów. Po serii aktualizacji obsługujemy też Google Fonts! Startowy zestaw zawiera fonty bezpieczne, czyli takie, które poprawnie wyświetlają się na wszystkich urządzeniach i w klientach poczty. Oto one:
Z Google Fonts bywa za to różnie: niektóre klienty poczty i urządzenia mogą wyświetlać je niepoprawnie. Oczywiście nadal możesz z nich korzystać, ale wtedy koniecznie testuj e-maile przed wysyłką.
Radzimy używać w e-mailu nie więcej niż dwóch fontów. Dzięki temu zachowasz spójność i czytelność, a tekst będzie wyraźniejszy (a to ważny element dostępności każdego e-maila).
A skoro mowa o czytelności, zobacz, jak bardzo zależy ona od samego fontu:
Druga wersja wygląda oczywiście znacznie efektowniej, ale czyta się ją dużo trudniej.
Rozmiar fontu i interlinia:
Po przetestowaniu wielu kombinacji wysokości nagłówków, śródtytułów i tekstu doszliśmy do takich zalecanych rozmiarów fontu:
- 22-24 px dla nagłówków;
- 18-20 px dla śródtytułów;
- 14-16 px dla zwykłego tekstu.
Idealna interlinia to 150-200%. Dzięki temu tekst będzie wyraźny i przyjemny dla oka.
I pamiętaj: nie ma czegoś takiego jak profesjonalny font i rozmiar do e-maili. Wszystko zależy od kontekstu i Twojej decyzji artystycznej. Zawsze jednak dbaj o czytelność i unikaj zbyt dużego lub zbyt małego tekstu.
Kolor fontu:
Rada jest podobna jak w przypadku stylu fontu: używaj w całym e-mailu nie więcej niż dwóch kolorów tekstu. Wybieraj kontrastowe, żeby poprawić dostępność tekstu.
Formatowanie tekstu:
Są 3 główne sposoby formatowania tekstu i wyróżniania jego fragmentów: pogrubienie, kursywa i podkreślenie. Zobaczmy, jak używać każdego z nich:
- Pogrubieniem zwykle wyróżnia się słowa, na które czytelnik powinien zwrócić uwagę (na przykład datę, warunki promocji itp.).
- Kursywą wyróżnia się cytaty oraz tytuły książek, filmów itp.
- I wreszcie podkreślamy linki: to najpopularniejsze zastosowanie tego formatowania.
Nie są to żadne sztywne reguły, ale takie praktyki stały się zwyczajem: ludzie chętniej zwracają uwagę na pogrubiony tekst i klikają w podkreślony. Pamiętaj o tym, pisząc tekst e-maila.
4. Przyciski (szerokość i wysokość, kolor, fonty, odstępy)
Podobnie jak przy rozmiarze banera, nie ma dokładnych limitów dla przycisków. Są jednak ogólne zasady i zalecenia, dzięki którym wykorzystasz ten element najskuteczniej.
- Przyciski muszą odcinać się od tła i reszty treści e-maila. Mają przyciągać wzrok i od razu rzucać się czytelnikom w oczy.
- W wersji mobilnej przyciski muszą być na tyle duże, by czytelnicy mogli bez problemu w nie stuknąć.
- Projektując przyciski, używaj kontrastowych kolorów, żeby były dobrze widoczne.
- Zostaw wolną przestrzeń i dodaj odstępy wokół tekstu CTA na przycisku. Dzięki temu łatwiej go przeczytać i kliknąć.
5. Bloki treści (liczba elementów w siatce, ich wymiary i styl)
Bloków treści jest wiele rodzajów: artykuły, siatki produktów, cytaty itp. U podstaw wszystkie są tabelami złożonymi z jednej lub kilku kolumn. Dobra rada: w siatkach produktów używaj maksymalnie 4 kolumn, a w innych blokach treści — maksymalnie 2.
Pamiętaj też, że zbyt długi blok może zniechęcić odbiorcę do dalszego czytania (a tego przecież nie chcemy). Zachowaj rozsądne proporcje: jeden blok treści powinien mieć 200-300 px wysokości. Wszystkie bloki treści w e-mailu razem powinny mieć około 1000-1200 px.
6. Stopka (szerokość, wysokość, treść obowiązkowa i opcjonalna)
Stopka pełni w e-mailu bardziej praktyczną funkcję. Jej rozmiar zależy od ilości treści. Typowa stopka zawiera:
- Adres siedziby firmy.
- Linki do mediów społecznościowych.
- Dane kontaktowe firmy (numer telefonu i/lub adres e-mail).
- Link do aplikacji mobilnej lub kod QR.
- Przypomnienie, dlaczego odbiorca dostał tę wiadomość.
- Link do polityki prywatności.
- Link „Wypisz się”.
Warto pamiętać, że zarówno CAN-SPAM Act, jak i RODO (GDPR) wymagają umieszczenia linku do rezygnacji z subskrypcji — odpowiednio dla odbiorców w USA i UE. Nawet jeśli nie działasz bezpośrednio na tych rynkach, w Twojej bazie mogą być klienci z Ameryki lub Europy.
Dlatego zawsze lepiej umieścić w stopce link „Wypisz się” — tak na wszelki wypadek. Niech będzie dobrze widoczny i pozwala zrezygnować z subskrypcji jednym kliknięciem. I ostatnia rzecz: żaden ESP nie pozwoli Ci wysłać e-maila bez linku „Wypisz się”. Nawet jeśli o nim zapomnisz, przypomni Ci o tym albo doda go automatycznie (jak Selzy).
Oprócz wymienionych elementów możesz umieścić w stopce także inne rzeczy (na przykład menu, informacje o bieżących promocjach i nie tylko).
Na koniec wymiary stopki. Stopka powinna mieć dokładnie taką samą szerokość jak e-mail, a jej wysokość zależy od ilości treści. Mimo to niech ma co najmniej 200 px wysokości.
Część 3. Ostatnie szlify i testowanie
Nasz e-mail jest gotowy! Zostało tylko kilka ostatnich kroków.
Sprawdź, czy odstępy między elementami mają tę samą wysokość. Nie powinny być ani za małe, ani przesadnie duże: idealny rozmiar to 30-40 px. Upewnij się też, że wielkość tekstu jest spójna we wszystkich blokach, każdy obraz ma tekst alternatywny, a wszystkie linki są na swoim miejscu.
Nie zapomnij dodać do linków tagów UTM (jeśli są potrzebne). Tagi UTM to krótkie fragmenty kodu, które pozwalają śledzić skuteczność kampanii. Jeśli kodujesz e-mail ręcznie, musisz dodać je do każdego linku po kolei, a w Blocks dodasz je do wszystkich linków w kilka kliknięć!
Następnie sprawdź, jak e-mail wygląda i działa na urządzeniach mobilnych (bo wiele osób czyta na nich pocztę). Na koniec wyślij e-mail testowy i sprawdź, czy wyświetla się poprawnie na każdym urządzeniu i w każdym kliencie poczty.
Podsumowanie
Jak widzisz, zaprojektowanie pięknego e-maila od zera wcale nie jest trudne! Owszem, niektóre zalecenia (na przykład wymiary szablonu) są bardziej rygorystyczne niż inne (na przykład wybór najlepszego rozmiaru fontu). Ale z naszym szczegółowym poradnikiem Twoje projektowanie e-maili zawsze będzie na dobrej drodze!