Szablon e-mail HTML: czytelny w różnych programach pocztowych

„U mnie wygląda dobrze” jest szczególnie krótkim protokołem odbioru e-maila. Autor ogląda podgląd w przeglądarce. Odbiorca widzi w poczcie pusty prostokąt zamiast instrukcji, ciemny napis na ciemnym tle i przycisk szerokości dwóch liter. Obaj patrzą na tę samą wiadomość. Tylko jeden dostał wersję z prezentacji.

Przyjmijmy fikcyjną pracownię serwisującą instrumenty. Wysyła potwierdzenie wizyty technika, krótką instrukcję przygotowania sali i odsyłacz do szczegółów. Sam HTML, czyli zapis struktury wiadomości, nie gwarantuje jednakowego wyglądu. Dobrze ułożona treść może stać się nieczytelna w programie odbiorcy. Przy projektowaniu szablonu sprawdź go na długich nazwach i przy brakujących ilustracjach.

Zakres projektu komunikacji wizualnej Aeneia Design można opisać przez takie rzeczywiste wiadomości oraz warunki ich odbioru. Nie wystarczy zamówić prostokąta z logo i przykładowym zdaniem. Wysyłany materiał ma pomieścić instrukcję, termin i nazwę sali, a odbiorca powinien móc użyć go na swoim ekranie.

Wiadomość potrzebuje własnej wersji projektu

Nagłówek strony może mieć rozbudowane tło, specjalny krój i zachowanie zależne od szerokości ekranu. Skopiowanie jego kodu do e-maila nie potwierdza działania tych elementów w poczcie. Najpierw ustal, co ma zachować sens niezależnie od ozdobników: nazwę nadawcy, temat wizyty, datę, instrukcję i dostępny odsyłacz.

Dokumentacja reguł wyglądu wiadomości (CSS) w Gmailu podaje obsługiwane selektory, właściwości i zapytania dotyczące między innymi szerokości ekranu. Zastrzega, że nieobsługiwane reguły mogą zostać pominięte. Lista jednego dostawcy jest punktem odniesienia dla tej usługi, a nie gwarancją takiego samego wyniku w pozostałych programach.

W naszej pracowni do pierwszego odbioru można wybrać konkretny wariant Outlooka używany przez obsługę, Gmail w przeglądarce oraz aplikację pocztową na telefonie osoby zatwierdzającej projekt. To początek uzgodnionej listy prób. Jeśli klienci firmy używają innych narzędzi, lista wymaga dostosowania. Samo słowo „Outlook” nie opisuje jeszcze wersji ani warunków odczytu.

Ustal też, jakie różnice można przyjąć. Delikatnie odmienny odstęp między akapitami może być akceptowalny. Ucięta godzina wizyty albo przycisk, z którego znika końcówka nazwy, już nie. Takie warunki pozwalają rozmawiać o skutkach dla odbiorcy, zamiast prowadzić spór o każdy piksel zrzutu.

W poradniku HTML e-mail dla WooCommerce autorzy zwracają uwagę na odmienne wyświetlanie wiadomości przez programy pocztowe i potrzebę ich sprawdzenia. Zalecają także prostsze rozwiązania układu oraz ostrożność przy obsłudze CSS. Konkretne wdrożenie trzeba dobrać do systemu wysyłki i ustalonego zakresu odbioru.

Nie obiecuj „zgodności ze wszystkimi programami pocztowymi” na podstawie jednej makiety. W umówionym zakresie wskaż programy, wersje, szerokości i stany, które będą sprawdzane. Odbiorca otrzyma wtedy informację, co faktycznie zostało ocenione. Późniejsza zmiana programu albo sposobu generowania wiadomości może być powodem do kolejnej próby.

Próba powinna objąć także odbiór wiadomości za pomocą czytnika ekranu. Osoba sprawdzająca powinna móc powiązać termin z właściwą salą także przy przechodzeniu po tekście i odsyłaczach. Same pogrubienia nie wyjaśnią relacji, jeśli nazwy i wartości zostały rozdzielone w nieoczekiwanej kolejności. W uzgodnionej próbie z czytnikiem ekranu sprawdź nazwy odnośników i drogę do instrukcji. Zapis „czytelna wiadomość” potrzebuje również takiego znaczenia, a nie wyłącznie dobrego zdjęcia podglądu.

Po wyłączeniu obrazów nadal powinno być wiadomo, po co piszesz

W pierwszym wariancie potwierdzenia pracownia umieściła godzinę i adres na pięknej planszy z fotografią instrumentu. Bez obrazu pozostało samo powitanie. Odbiorca nie potrzebuje teraz lepszego zdjęcia. Potrzebuje zwykłego tekstu z informacjami, według których przygotuje salę i wpuści technika.

Microsoft opisuje ustawienia pobierania zdjęć w Outlooku dla Maca, wskazując, że domyślnie obrazy przechowywane w internecie nie są pobierane automatycznie. Materiał rozróżnia je od obrazów załączonych lub osadzonych w wiadomości. Nie należy przenosić tego opisu na każdy wariant Outlooka bez sprawdzenia.

W projekcie zachowaj więc datę i godzinę jako tekst. Ilustracja może pokazać właściwe wejście, ale adres oraz instrukcja znalezienia sali powinny pozostać zrozumiałe również po jej niewczytaniu. Jeśli obraz przekazuje informację niedostępną gdzie indziej, przygotuj odpowiedni opis i sprawdź, jak jest prezentowany w uzgodnionym programie.

Nie wpisuj do opisu każdej grafiki całego akapitu wiadomości. Logo potrzebuje rozpoznawalnego podpisu nadawcy; dekoracja może nie wnosić osobnej informacji. Dla zdjęcia bocznego wejścia ważny będzie jego cel. To inne zadania, choć wszystkie elementy przychodzą z biblioteki jako pliki obrazów.

Przycisk do szczegółów wizyty powinien zachować czytelny tekst i działający odsyłacz przy niewczytanej grafice. Jeśli zaprojektowano go jako obrazek z napisem, sprawdź wariant bez tego obrazka. Odbiorca nie powinien naciskać pustego pola, licząc na to, że znajdzie pod nim jakiś związek z własną sprawą.

Po wczytaniu obrazów oceń je ponownie. Zdjęcie nie powinno rozszerzać całej wiadomości poza dostępny ekran ani zmieniać kolejności czytania. Sprawdź również wariant z nieprawidłowym adresem grafiki. Odbiorca musi móc odróżnić brak ilustracji od braku terminu lub instrukcji. Wizualna pustka nie powinna usuwać potrzebnego działania.

Przy znakach marki wykorzystaj zatwierdzone warianty z paczki logo. Zasady przygotowania małego symbolu i ikony aplikacji pomagają rozpoznać ograniczenie szczegółów, ale favicon nie zastępuje właściwej wersji logo w wiadomości. Potrzebne są odrębne pliki do odrębnych miejsc użycia.

Ciemny interfejs poczty nie musi oznaczać tego samego tła wiadomości

Przygotuj próbę z jasnym i ciemnym otoczeniem. Sprawdź szczególnie znak z przezroczystymi fragmentami, napisy przycisków oraz obszary, które miały być jasne. Nie poprawiaj wyłącznie koloru tekstu, jeśli pozostawione tło albo obraz nadal tworzą nieczytelną parę.

Pomoc Microsoft dotycząca trybu ciemnego w Outlooku rozróżnia wersje programu i opisuje możliwość przełączania tła odczytywanej wiadomości. Ustawienie interfejsu i sposób pokazania samej treści nie są zatem jednym nierozdzielnym wyborem. W próbie trzeba zapisać, co rzeczywiście oglądano.

W wiadomości pracowni ciemny kontur instrumentu może zniknąć na zmienionym ciemnym tle, choć sam nagłówek pozostanie czytelny. Z kolei logo na własnym jasnym prostokącie może stać się ciężką plamą w spokojnym układzie. Sprawdź oba warianty i wybierz dopuszczone rozwiązanie, zanim plik zostanie rozesłany jako gotowy wzorzec.

Nie wymagaj od odbiorcy zmiany ustawień programu, żeby mógł przeczytać termin wizyty. Projekt ma działać w uzgodnionych warunkach. Instrukcja „proszę przełączyć tło na białe” może pomóc przy diagnozie, ale nie zastępuje poprawki nieczytelnego zestawienia, jeżeli ten stan należy do ustalonego zakresu.

W projektowaniu trybu ciemnego strony również ocenia się konkretne pary powierzchni i treści. W e-mailu dochodzi jednak wpływ programu odbiorcy. Własny przełącznik palety na stronie nie steruje jego pocztą. Nie przenoś gotowego wyniku testu witryny do protokołu odbioru wiadomości.

Sprawdź też odnośniki wewnątrz akapitów. Powinny pozostawać rozpoznawalne po zmianie kolorów, z zachowanym napisem i innym wyróżnieniem tam, gdzie samo zabarwienie mogłoby zawieść. Odbiorca ma znaleźć szczegóły przygotowania sali bez badania kursorem każdego zdania. Po otwarciu odsyłacza powinien zobaczyć właśnie te szczegóły.

Font zastępczy i długie dane też należą do projektu

Program pocztowy może nie użyć firmowego kroju. Przygotuj więc zastępczy zestaw i oceń na nim całą wiadomość. Dłuższy wiersz potrafi przesunąć przycisk albo zwiększyć wysokość sekcji. Jeśli projekt mieści się tylko przy jednym konkretnym foncie, wariant awaryjny nadal czeka na opracowanie.

W naszym przykładzie wpisz nazwę „Sala kameralna imienia Marii Szymanowskiej — wejście od dziedzińca”. Taki tekst pokaże więcej niż „Sala A”. Obok umieść długi adres kontaktowy i pełny termin z nazwą dnia. Sprawdź zawijanie, odstępy oraz to, czy żadna część informacji nie znajduje się poza widocznym obszarem.

Typografia strony premium daje punkt wyjścia do hierarchii i doboru krojów. W wiadomości trzeba jednak odebrać jej własny układ. Nagłówek, termin i opis przygotowania mogą potrzebować innych proporcji niż szeroka sekcja na stronie. Podobieństwo marki można zachować bez kopiowania wymiarów.

Wiadomość z dwoma terminami pokaże, czy układ zachowuje właściwą kolejność na wąskim ekranie. Jeśli dane były w kolumnach, po zmianie układu data powinna nadal należeć do właściwej godziny i sali. Dwa czytelne wiersze zestawione w niewłaściwe pary są równie kłopotliwe jak tekst zbyt mały do odczytania.

Przygotuj także pustą wartość opcjonalną. Brak dodatkowej uwagi nie powinien pozostawiać samego nagłówka „Uwagi” z dużym pustym polem. Wariant bez zdjęcia i bez uwagi ma nadal wyglądać jak celowa wiadomość. Nie każde puste miejsce jest eleganckim oddechem; czasem to po prostu nieobsłużona dana.

Inna wersja językowa musi objąć także przycisk i stopkę. Długość tłumaczenia może zmienić układ. Pojedynczy zrzut z krótkim angielskim tekstem nie potwierdza, że polska instrukcja i nazwa sali zmieszczą się w tym samym wzorcu. Przy długich nazwach w interfejsie podobnie potrzebna jest właściwa próbka.

Wyślij do odbioru dokładnie to, co ma otrzymać klient

Podgląd narzędzia do wysyłki jest przydatny podczas pracy. Końcową próbę wykonaj jednak na wygenerowanej wiadomości dostarczonej do uzgodnionego programu. Zapisz zestaw danych, wersję szablonu i warunki odczytu. Wtedy poprawka jednej reguły nie zmusza zespołu do odgadywania, z którego wariantu pochodzi dawny zrzut.

Po wklejeniu tekstu do edytora sprawdź również wynik generowania. Narzędzie może dodać własne formatowanie albo przekształcić część zapisu. Odbierana jest wiadomość po przejściu tej drogi. Ładny widok pola redakcyjnego nie potwierdza wyglądu materiału u odbiorcy.

Jeśli organizator sali zwykle przekazuje potwierdzenie dalej, przygotuj również taką próbę. Pierwszy odbiorca dopisuje uwagę dla kierownika budynku i przesyła materiał do uzgodnionego programu. Otwórz otrzymany wynik: czy nadal widać granicę między nową uwagą a pierwotną instrukcją? Czy odsyłacz opisany jako szczegóły wizyty pozostaje przy właściwym terminie? Sposób cytowania zależy od używanych narzędzi, więc potrzebny jest rzeczywisty przebieg, a nie założenie, że przekazana wiadomość zachowa cały układ.

Przy kilku odpowiedziach sprawdź też, do której części odnosi się dopisana korekta. Wiadomość może zawierać wcześniejszy termin w cytacie i nowy w komentarzu. Szablon nie rozstrzyga sam treści rozmowy, ale powinien pozwalać odróżnić jej fragmenty. W naszym przykładzie kierownik ma przygotować salę według aktualnego ustalenia, bez porównywania dwóch prawie identycznych plansz z logo.

Porównaj działające odsyłacze z podpisami. „Przygotuj salę” ma prowadzić do instrukcji przygotowania, a „Zmień termin” do dostępnej drogi zmiany. Otwórz je w próbie, zamiast sprawdzać sam kolor przycisków. Ułożenie informacji rozwija tekst o wiadomościach transakcyjnych; tutaj odbierasz także ich rzeczywistą prezentację i możliwość użycia.

Wróć do wiadomości z wyłączonymi obrazami i długą nazwą sali. Jeżeli można bez zgadywania odczytać termin, przygotować miejsce oraz otworzyć właściwą instrukcję, szablon wykonał swoją pracę. Piękny instrument na zdjęciu może wtedy spokojnie pozostać pięknym instrumentem, bez dodatkowego etatu jako jedyny nośnik adresu.