Budowanie responsywnych szablonów poczty elektronicznej - Jak zbudować dobry szablon poczty HTML

Jak wynika z wielu przykładów z dziedziny projektowania, marketingu i tworzenia oprogramowania, dobry szablon HTML musi być wykonany we współpracy ze specjalistami z każdej dziedziny. Powinniśmy mieć ładnie zaprojektowany szablon, wdrożony i dobrze przetestowany przez twórców oprogramowania i wypełniony odpowiednią treścią przez specjalistów od marketingu. W większości przypadków, aby zapewnić jakość, wszystkie wymagania muszą być zebrane i zarządzane przez analityków.

Tekst emaila, czasem z obrazkami (teraz nawet z video), może się znacznie różnić w zależności od rodzaju wiadomości. Tak więc graficy i programiści frontendowi pracujący nad szablonem powinni dostarczyć pewnego rodzaju szkielet odpowiedni dla każdej treści. Odbywa się to poprzez umieszczenie całego emaila w tabeli kontenera umieszczonej w korpusie HTML, jak widać na poniższym rysunku.

Każda część jest następnie umieszczana wewnątrz i pozycjonowana przez właściwość align rodzica zamiast floating. Dowolne odstępy są wykonywane poprzez dodanie wyściełania do rodzica, a nie marginesu do dzieci - jest to spowodowane brakiem obsługi modeli pudełkowych w Microsoft Outlook. Tak więc, najważniejszymi rzeczami w budowaniu szablonu emaila są:

  • Oparcieich na płynnych tabelach HTML - szerokość ustawiona na 100%, maksymalna szerokość do szerokości szablonu (np. 600px)
  • Użyj tabel wid mowych - tagów tabeli, wiersza i komórki tabeli umieszczonych w komentarzu HTML z adnotacją w Microsoft Outlook. Jego szerokość musi być ustawiona na jednostki w pikselach (px), a nie w procentach (%), ponieważ Outlook nie obsługuje właściwości "max-width". To obejście pozwala nam zachować pocztę elektroniczną na pulpicie, tak jak to było przed telefonem komórkowym. Na telefonach komórkowych ta skomentowana tabela nie jest brana pod uwagę, więc mamy tabelę dostosowaną do szerokości urządzenia.
  • Użyj znaczników div, aby zawinąć zawartość prezentowaną w postaci responsywnych kolumn siatki. Kolumny pozycjonowania poprzez dodanie właściwości align do elementu nadrzędnego. Ustaw jego szerokość na wartość procentową szerokości elementu nadrzędnego, dodając szerokość minimalną i maksymalną. Również zawiń ten element w inną tabelę typu ghost o stałej szerokości.
  • Jeśli to możliwe, nie komplikuj niczego i pozostań z progresywnym ulepszaniem - zaokrąglone narożniki są dobrym przykładem. Oprzyj wszystko na funkcjach, których możesz użyć. Pomimo progresywnych ulepszeń, podstawowa funkcjonalność musi być zapewniona na każdym kliencie. Możesz więc używać @media query ze świadomością, że nie wszędzie jest ona obsługiwana.
  • Mobile first - Gmail nie obsługuje wyżej wymienionych zapytań @media, które są wykorzystywane do responsywnych treści internetowych. W związku z tym, zgodnie z postępującym rozwojem, powinniśmy zapewnić prostą, responsywną siatkę dla naszych treści, a następnie, jeśli wszystko działa i "pływa" w porządku (nawet na Gmailu), możemy dodać zapytania medialne z dodatkowymi funkcjami dla innych klientów.

Jeśli chcesz zbudować swój własny szkielet, powinieneś przyjrzeć się, jak robią to inni. Jednym z najlepszych szablonów jaki można znaleźć jest Cerberus by Ted Goas. Jest on dostępny na Githubie i prawdopodobnie każdy problem, z którym będziesz musiał sobie poradzić (np. niepotrzebne odstępy między kolumnami siatki przy 120dpi) został już tam rozwiązany. Przeprowadziliśmy kilka testów tego szablonu na EmailOnAcid i spisał się on bardzo dobrze. Jak zbudować szablon, który będzie wyglądał idealnie na prawie każdym kliencie? Workflow jest najważniejszą rzeczą.

Przepływ pracy .

Każdy projekt wymaga indywidualnego podejścia, ale możemy określić ogólną listę rzeczy do zrobienia. Może to pomóc nam uniknąć problemów w przyszłości, zaoszczędzić czas i zapobiec frustracji. Wykonanie tych działań nie wymaga wiele wysiłku i stanowi świetny punkt wyjścia dla naszej pracy, jeśli mamy do wykonania więcej niż jeden szablon.

Badania

Sprawdź zawartość każdego projektu lub istniejącego szablonu. Zwróć uwagę na takie elementy jak nagłówki, stopki, przyciski, nagłówki, stylistyki akapitów, listy, ikony i obrazy... Przygotuj prostą listę lub plik SASS/CSS z ich definicjami.

Konfiguracja i rozwój

Istnieją pewne usługi, które ułatwiają i przyspieszają tworzenie szablonów wiadomości e-mail niż ręczne pisanie inline CSS dla znaczników HTML. Litmus(próbka edytora) lub usługi testowania poczty EmailOnAcid posiadają edytory online, które są całkiem niezłe (ale nie są wolne). Dla małych projektów możemy również użyć innych narzędzi online, takich jak Premailer lub Ink Inliner, które kompilują nasz szablon z oddzielnych HTML i CSS, do jednego pliku jako gotowy szablon email. Dla bardziej skomplikowanych lub większych projektów z wieloma szablonami istnieją również frameworki przygotowane dla szablonów poczty elektronicznej:

  • Zurb Foundation for Emails 2 - niedawno zaktualizowany do nowej wersji, pozwala nam na komponowanie emaili z prekonfigurowanych tagów skompilowanych do standardowego języka HTML. Jest to świetne narzędzie, ale trzeba być przygotowanym na pewne ograniczenia, takie jak częściowe wsparcie dla Androida Gmaila.
  • MJML - Kolejny ładny framework, jak Fundacja Zurb, oparty na niestandardowych znacznikach, które kompilują się do HTML. Jedynym problemem, który można znaleźć jest to, że nie ma w nim narzędzia CSS inlining. Opiera się on na Reactie, a komponenty prebudujące sprawiają, że praca wykonywana jest dość szybko, ale jeśli musimy coś zmienić w komponencie może to zająć więcej czasu i wymaga wiedzy o Reactie.

Wybór narzędzia dla naszych potrzeb nie jest łatwy. Dla każdego projektu potrzeba trochę czasu na badania i benchmarking pomiędzy stale rozwijającymi się rozwiązaniami, które są obecnie dostępne.

Ale czasami, żadne z nich nie odpowiada naszym potrzebom ani nie spełnia wymagań. W takim przypadku, musimy zbudować własne narzędzie. Możemy uruchomić CSS lokalnie w naszym środowisku programistycznym, korzystając z wersji offline Premailera lub Ink Inlinera. Nasze własne narzędzie daje nam również wiele opcji do personalizacji, pomimo tego, że zajmuje to więcej czasu na początku konfiguracji, mamy elastyczność i konfigurowalność jak żadne inne rozwiązanie.

Podczas pracy nad kilkoma kampaniami mailingowymi, ważne jest, aby czuć się komfortowo w swoim środowisku programistycznym. Jeśli jakikolwiek istniejący framework nie spełnia wymagań, należy podjąć decyzję: Czy dostosowujemy się do rozważanego rozwiązania, czy też tworzymy własne narzędzie do budowy? Adaptacja frameworków jest dość ryzykowna, ponieważ może powodować problemy z aktualizacjami, wymaga doświadczenia i czasami może zająć zbyt wiele czasu bez gwarancji udanej modyfikacji.

Zbudować własne narzędzie

Zawsze wyzwaniem jest porzucenie dedykowanego narzędzia i rozpoczęcie budowania czegoś od podstaw. Czy możemy stworzyć coś lepszego niż istniejące ramy stworzone przez wielu współpracowników? W większości przypadków, prawdopodobnie nie, ale emaile HTML są specyficzne. Oczywiście, każdy szablon możemy napisać ręcznie, bez żadnych skryptów budujących, ale... To po prostu zajmuje zbyt dużo czasu i trudno jest utrzymać taki kod. Dlatego nawet kod frontendowy jest teraz kompilowany. Moim zdaniem, jeśli mamy wątpliwości, czy dany framework będzie odpowiadał naszym potrzebom i nie mamy czasu na badania, to zawsze warto stworzyć własne narzędzie do budowania.

Może budowanie narzędzia brzmi jak dużo pracy, ale jest bardziej jak układanie klocków Lego. Możemy go oprzeć na znanej i popularnej technologii jak Node.js. Z wbudowanym Node Package Manager pozwala nam na dodawanie do naszego projektu zależności od komponentów takich jak include plików, preprocesor stylów i inliner, minifikator kodu HTML, itp.

Więc od czego powinniśmy zacząć? Struktura projektu jest na pierwszym miejscu, aby uporządkować sprawy:

  • Src
    • Style
      • Sass
      • CSS
    • HTML
      • Szablony
      • Częściowe
    • Zdjęcia
  • Zbuduj
  • Temp

Oczywiście, jest to tylko przykład; możesz organizować swoje zasoby tak, jak chcesz. To nie jest narzucone. Więc, co dalej? Email HTML jest staromodny, ale nie chcemy kodować szablonu HTML za pomocą CSS w atrybutach stylu, jak to robili deweloperzy wiele lat temu. Nie chcemy nawet pisać kodu CSS ręcznie. Chcemy go nowoczesnego, skompilowanego i łatwego w utrzymaniu. Potrzebny jest więc preprocesor CSS i wspomniany wcześniej "premailer", aby style mogły zostać wprowadzone w linię. Musimy tylko powiedzieć naszemu menadżerowi pakietów, żeby je pobrał i zapamiętał dla celów rozwoju. Potrzebujemy także komponentu, który będzie rządził wszystkimi innymi komponentami - jak Grunt czy Gulp. Po pierwsze, musimy powiedzieć Node'owi, że ten projekt potrzebuje swoich komponentów. Otwórz swoje narzędzie wiersza poleceń i wpisz je:

npm init

Węzeł będzie pytał o nazwę projektu, autora, wersję, adres url repozytorium itp. - Nie jest to wymagane, ale jeśli to możliwe, nie pozostawiaj pustych miejsc. Może on pomóc innym programistom, jeśli w przyszłości ktoś będzie musiał pracować nad tym kodem. Teraz, jesteśmy gotowi określić wszystkie wymagania:

npm i -D del gulp gulp-sass gulp-cached gulp-file-include gulp-htmlmin gulp-livereload gulp-premailer gulp-remove-html-comments gulp-replace run-sequence

Wygląda na to, że jest wiele pakietów, ale ich pobranie nie powinno zająć dużo czasu. Jakie są parametry i i i -D? Są to skróty do komendy instalacyjnej i parametru -save-dev, które mówią NPM o zapisywaniu wszystkich pobranych komponentów w zależności od rozwoju Twojego projektu. Jeśli nie jesteś zaznajomiony z pakietami Node sprawdź ten krótki artykuł. Teraz, gdy mamy już wszystkie potrzebne narzędzia, nadszedł czas, aby zastanowić się nad naszym szablonem.

Możemy przygotować powtarzające się elementy w częściowych plikach i dołączyć je za pomocą gulp-file - włącznie z kilkoma zmiennymi, które możemy dostosować. Tak więc, możemy mieć tabelę HTML zdefiniowaną raz i używaną wielokrotnie, zmieniając dowolny parametr w razie potrzeby lub używając domyślnych ustawień. Nasz główny szablon jest wtedy mały i łatwy w obsłudze.

1
2
3
4
5
6
7

 
@@@include('partials/button.html', {"href":"http://www.pgs-software.com", "tekst": "Odwiedź stronę internetową PGS Software"})

A co ze stylami? Jest coraz mniej programistów piszących czysty kod CSS, zamiast tego jest coraz mniej preprocesorów Less i Sass, które po prostu czynią go lepszym i szybszym. Jest on łatwiejszy do odczytania i utrzymania, zapewnia pewną optymalizację i rozszerzoną funkcjonalność w porównaniu do CSS, dzięki zmiennym i funkcjom nazwanym tutaj mixins.

Po dodaniu części i stylów inliningu możemy nawet zminimalizować cały skompilowany kod, aby zaoszczędzić czas pobierania emaili i transferu danych używanych przez gulp-htmlmina.

Zobacz tutaj przykładowy kod konfiguracji gulp-htmlmina.

Jeśli nie znasz gulp, możesz sprawdzić tutaj jego podstawy, powinno to pomóc Ci w pełni zrozumieć, co się tutaj dzieje. Uruchamiamy zadania Gulp w odpowiedniej kolejności, aby w końcu zebrać wszystkie składniki emaila razem w pikantną, ale surową zupę HTML-CSS gotową do wysłania przez dowolnego dostawcę usług pocztowych.

Następnie obrazy procesu tworzenia powinny zostać przeniesione na serwer dedykowany, a ścieżki w szablonie zaktualizowane. Istnieje sposób na zakodowanie obrazów do base64 i dołączenie ich do emaila jako tekst lub wysłanie w formie załącznika, ale jest więcej wad niż zalet tych rozwiązań. Większe obrazki powinny być połączone, podczas gdy mniejsze jak ikony czy logo mogą być dodane do emaila, ale nie ma żadnych zauważalnych korzyści i musimy je wcześniej przygotować.