/ sass

Tworzenie responsywnych wzorów HTML (templates) dla emaili, kampanii emailowych. (thunderbird, outlook, gmail)

Stworzenie własnego wzoru html pod email pomaga, wyróżnić się z tłumu, pomoga w budowie monolitycznego wizerunku osoby czy firmy. Jednkaże tworzenie responsywnych wzrów HTML na email albo na email marketing nie jest wcale takie proste jakby się wydawało. Większość gotowców na jakie natrafiłem choć ładne i prawie gotowe na moje potrzeby, nie zdawało testu wszytskich klientów mailowych. Jeżeli korzystacie z mailchimpa albo innego dostawcy wysyłki masowych emaili, to zazwyczaj na tego typu platformach jest tzw builder emaili, co jeżeli jednak chcecie mieć własny layout do używania przy pisaniu emaili do klientów, albo fajny "podpis", stópke email.

Znormalizowanie stylów, tabel i ogólnego układu pod wszytskie urządzenia i klientów email może okazać się dość karkołomym zadaniem. Templetes / wzory email html opierają się głównie na tabelach, inline css i dość ograniczonych zasobach html (brak js, svg, css:hover).

Na szczęscie przychodzi nam z pomocą framework Foundation for Emails 2 zbudowane przez zurb foundation. Jest to jedny rozsądny darmowy framework jaki znam dedykowany wzorom email HTML. Testowałem także Mosaic, mjml, emailframework oraz cerberus. Próbowałem także znaleść jakies proste gotowce do przeróbki ale tak jak pisałem wcześniej większość z nich nie zdaje egazminu na wszytskich email klientach, większość gotowców wymaga od nas podania adresu email co wiąże się niestety z wielką ilością spamu.

foundation-2

Co wyróżnia foundation z pośród innych frameworków:

  • przedewszytskim urzekła mnie możliwość pisania stylów w SASS, sam korzystam często z tego preprocersa css przy tworzeniu różnych projektów, ułatwia on bardzo pracę więc odrazu mega plus dla Foundation for Emails 2
  • Struktura pisania kodu html jest bardzo zbliżona do standarodowego modelu css grid czy css responsive layout. Oparta jest na <row> i <columns>, standardowe 12 kolumn. Inne frameworki wykorzystywały własną strukture albo poprostu bezpośrednio opierały się na tabelach.
  • mamy tryb developerski z plikami sass oraz build z gotowym kodem html, Foundation for emails2 w trybie developerskim ma wbudowaną opcje hot reload (browser sync), system oparty na komponetach i layoutach. Tryb build posiada optymalizacje obrazów oraz inline'ing (wpisywanie kodów inline).
  • instalacja i tworzenie projektów przez npm

Instalacja przez NPM



sudo npm install --global foundation-cli 

--->Tworzymy nowy projekt przez  

foundation new --framework emails 

--->developer mode 

npm start 

--->build mode 

npm run build 

  1. Na starcie mamy 12 gotowych bardzo prostych layoutów, i wszytsko co potrzebujemy aby stworzyć piękny email template. Najwięskszą zaletą jest jednak normalizacja stylów na wszystkie urządzenia, co dodatkowo przyspiesza pracę, nie martwimy się już o opcje -webkit, -ms czy -moz. Pracujemy tylko nad czym co ważne (layout, treśc), resztę obsuguje foundation.

Czy wy znacie jakieś rozsądne frameworki html email które dorównują foundation for email 2 ? Dajcie znać w komenatrzach, chętnie przetestuje.
Pozdrawiam


spaceghost-1