Tworzenie responsywnych szablonów wiadomości e-mail - Dlaczego powinniśmy zwracać uwagę na nasze wiadomości e-mail w formacie HTML

W dobie mobilności wiele zasobów internetowych musiało się przekształcić i dostosować do nowych warunków. Poczta elektroniczna, jako jedna z najstarszych form przekazywania informacji w formie cyfrowej, również przeszła swoją małą rewolucję. Do czasu, gdy ten najnowszy trend stał się popularny, była to tylko niewielka kwestia wysyłania wiadomości tekstowych lub wiadomości HTML dla kilku klientów poczty stacjonarnej i internetowej. Obecnie największą grupą docelową jest telefonia komórkowa. Jak człowiek powinien radzić sobie z otrzymywaniem ładnie wyglądających wiadomości e-mail na każdym urządzeniu i kliencie?

Według statystyk firmy Litmus, jednego z najbardziej znanych dostawców usług testowania poczty elektronicznej, ponad połowa aktywnych klientów poczty elektronicznej na świecie to klienci mobilni.

  1. Apple iPhone 34% +1,17 Gmail 15% -0,88 Apple iPad 11% -0,07 Google Android 10% -0,3 Apple Mail 8% +0,25 Outlook 7% +0,02 Yahoo! Mail 3% +0,01 Outlook.com 2% -0,11 Windows Live Mail 1% -0,06 Windows Mail 1% +0,42

Źródło z aktualnymi danymi znajduje się tutaj.

Oczywiście mogą występować różnice w poszczególnych regionach, ale trend ten jest niezaprzeczalny. Ludzie głównie sprawdzają swoje skrzynki pocztowe za pomocą urządzeń mobilnych, podczas gdy klienci poczty stacjonarnej coraz rzadziej korzystają z nich. Oczywiście, nie jest to jeden z tych artykułów, w których ktoś twierdzi, że śmierć komputera stacjonarnego. Pulpit jest w porządku i będzie w porządku przez nieprzewidzianą ilość czasu. Dlaczego? Głównie dlatego, że nadal jest to świetny sposób na komunikację na poziomie przedsiębiorstwa lub w wielu innych przypadkach, jak w różnych strefach czasowych. A może po prostu to, że wysyłanie komuś wiadomości e-mail jest bardziej oficjalne niż, na przykład, używanie jakiegoś komunikatora. Tak więc, jeśli zastanawiasz się, czy nadal powinniśmy się troszczyć o klientów poczty stacjonarnej, to odpowiedź brzmi: tak, musimy.

Ale czy musimy projektować emaile na urządzenia mobilne inaczej niż te, które działają na pulpicie? Większość klientów mobilnych jest w stanie uszczypnąć i powiększyć dowolną treść, ale... Czy kiedykolwiek dostałeś nieczytelną wiadomość e-mail na swoim urządzeniu mobilnym? Mam i nie lubię przewijać wszędzie tylko po to, żeby znaleźć przydatne informacje lub pominąć coś ważnego. Prawdopodobnie wielu innych użytkowników czuje to samo i my, jako twórcy oprogramowania, powinniśmy radzić sobie z każdą niedogodnością, aby zapewnić najlepsze wrażenia użytkownikom naszych produktów i sprawić, by interakcja człowieka z komputerem przebiegała jak najbardziej płynnie.

Co jest ważne?

Oczywiście, jeśli twoje e-maile są tylko tekstowe, nie musisz się tym zbytnio przejmować. Ale prędzej czy później, każda firma potrzebuje czegoś więcej niż zwykłego tekstu z prostą stylizacją. I tu zaczyna się problem - jest tak wiele różnic między tylko desktopowymi klientami poczty elektronicznej, że już teraz potrzebujemy kompleksowego podejścia do tego zadania. Potrzebny jest nawet sam Microsoft Outlook, ponieważ jego wersje tak bardzo różnią się od siebie pod względem silników renderujących; niektóre z nich oparte są na Internet Explorerze, a kilka innych wykorzystuje silnik Microsoft Office Word. Kiedy weźmiemy pod uwagę każdego innego ważnego klienta poczty elektronicznej z komórki i pulpitu, lista ograniczeń i wymagań staje się dość długa. Aby poradzić sobie z każdym problemem musimy trzymać się prostego języka HTML i inline CSS. Nie możemy go oprzeć na standardowym i popularnym modelu pudełkowym (elementy div) z funkcją floating i wieloma innymi funkcjami. Musimy cofnąć się w czasie i używać tabel HTML jak na starych stronach internetowych. Nagłówki i akapity tekstowe są różnie traktowane przez wielu klientów, więc semantyka nie jest priorytetem w szablonach wiadomości e-mail, jeśli projektowanie zajmuje pierwsze miejsce.

Dobre praktyki

Nie tylko musimy zwracać uwagę na znacznik HTML, aby nasz e-mail był doskonały. Istnieje kilka wytycznych, których nie możemy ignorować. Niektóre z nich są ważne już na etapie projektowania szablonu. Ogólnie rzecz biorąc, reakcja w emailach odbywa się poprzez przygotowanie dwóch różnych zachowań treści; stałego dla pulpitu i płynnego dla małych urządzeń. Metodologia ta nazywana jest szablonami hybrydowymi. Mając to na uwadze, nasz grafik musi wiedzieć, że główna treść zostanie utrwalona w kontenerze o szerokości nie większej niż 600 pikseli. Jest jeszcze kilka innych wskazówek dla projektantów szablonów pocztowych:

  • Unikaj poczty opartej na obrazach Dodaj atrybuty ALT do obrazków aby dostarczyć treść jeśli grafika jest zablokowana lub niedostępna Wybierz odpowiedni email o maksymalnej szerokości (550-600px) i rozmiarze czcionki (14px) Uprość projektowanie jeśli możesz; email nie jest stroną internetową - ma więcej ograniczeń Pozostań z wysokim stosunkiem tekstu do obrazu Dodaj link rezygnacji z subskrypcji Do inżynierii odwrotnej popularnych i ładnie wykonanych szablonów, jak Cerberus

Jeśli chodzi o ostatni punkt, wielu programistów miało już problemy z szablonami poczty elektronicznej. Opracowali oni i udostępnili wiele użytecznych zasobów, dzięki czemu możemy uczyć się na ich błędach i dzięki temu przyspieszyć proces tworzenia własnego szablonu.

Druga część naszego artykułu pojawi się wkrótce. Bądźcie na bieżąco!