Grafika do newslettera: jak zaprojektować czytelną wiadomość?

Jaką rolę ma grafika w newsletterze?

Zacznij od celu jednej wiadomości. Odbiorca ma poznać nowy produkt, przeczytać poradnik czy wrócić do porzuconego tematu? Gdy cel jest jasny, łatwiej zdecydować, czy potrzebujesz zdjęcia produktu, ilustracji, prostego wykresu czy tylko dobrego układu tekstu. Grafika ma pomagać zrozumieć przekaz. Duży baner bez konkretnej treści zajmuje miejsce na ekranie telefonu, zanim pojawi się informacja, po co czytać dalej.

Ułóż wiadomość od najważniejszej odpowiedzi. Temat i podgląd w skrzynce zapowiadają treść, nagłówek mówi, czego dotyczy e-mail, a pierwszy akapit rozwija korzyść. Zdjęcie lub ilustracja wzmacnia tę myśl. Przycisk prowadzi do jednego wyraźnego kroku. Gdy obok siebie są trzy równie mocne wezwania do działania, odbiorca musi sam zgadywać, co jest najważniejsze.

Dlaczego nie warto wysyłać całego newslettera jako jednego obrazka?

Obrazy mogą być zablokowane lub ładować się później niż tekst. Jedna grafika zawierająca nagłówek, ofertę, przycisk i drobne warunki może wtedy nie przekazać niczego. Tekst zapisany w wiadomości pozostaje dostępny do czytania i powiększania. Przycisk z prawdziwym linkiem łatwiej obsłużyć niż link przypięty do fragmentu wielkiego obrazu. Mailchimp w swoich zaleceniach dotyczących dostępności zwraca uwagę na tekst alternatywny, czytelność i strukturę wiadomości.

Nie oznacza to rezygnacji z grafiki. Zdjęcie pokazuje produkt, ilustracja buduje charakter marki, a mały diagram wyjaśnia proces. Ważne, by informacja nie zniknęła razem z obrazem. Dla obrazu istotnego napisz sensowny tekst alternatywny. Dla dekoracji unikaj powtarzania tego samego zdania w opisie. W3C rozróżnia obrazy informacyjne, funkcjonalne i dekoracyjne, bo pełnią różne role.

Jak przygotować obrazy i układ na telefon?

Nie ma jednego rozmiaru grafiki do wszystkich newsletterów. Szerokość zależy od szablonu i platformy wysyłkowej. Mailchimp opisuje wymagania obrazów w odniesieniu do konkretnych szablonów oraz zaleca przygotowanie plików w odpowiednim formacie i przestrzeni RGB. Zacznij od rzeczywistej szerokości kolumny w swoim edytorze, a potem sprawdź podgląd i wagę pliku. Nie eksportuj obrazu wielokrotnie większego, jeśli nie wnosi to widocznej jakości.

Na małym ekranie kolumny mogą ułożyć się jedna pod drugą. Sprawdź wtedy kolejność: czy najpierw widać właściwy nagłówek, potem kontekst, obraz i działanie? Mailchimp udostępnia osobne ustawienia oraz podgląd stylów mobilnych, ponieważ układ na telefonie wymaga własnej kontroli. Nie zmniejszaj po prostu całej wersji desktopowej. Drobny tekst wpisany w grafikę stanie się nieczytelny, nawet jeśli plik będzie technicznie ostry.

Co sprawdzić przed wysłaniem newslettera?

Wyślij wiadomość testową, nie oceniaj tylko podglądu w edytorze. Otwórz ją na telefonie i komputerze, z włączonymi oraz wyłączonymi obrazami. Kliknij wszystkie linki. Sprawdź, czy ważny tekst nie został ucięty, a kolejność bloków po złożeniu kolumn nadal ma sens. Zwróć uwagę na kontrast przycisku i tekstu, polskie znaki oraz to, czy tryb ciemny programu pocztowego nie pogarsza czytelności. Wynik może różnić się między aplikacjami, dlatego warto przetestować te używane przez odbiorców.

Jeśli przygotowujesz serię wiadomości, opracuj mały zestaw zasad: szerokość grafik dla wybranego szablonu, styl nagłówków, wygląd przycisku, sposób kadrowania zdjęć i zasady tekstów alternatywnych. Dzięki temu kolejne wysyłki pozostaną spójne, ale każda może mieć własny temat. Przy projektowaniu materiałów wizualnych pomocny będzie zakres grafiki reklamowej. W zapytaniu podaj platformę, przykładową wiadomość i liczbę potrzebnych grafik.