Bootstrap to framework, na którym działa ogromna liczba stron i aplikacji internetowych, a prędzej czy później każda z nich musi wysyłać e-maile: wiadomość powitalną po rejestracji, link do resetu hasła, potwierdzenie zamówienia. Nasze darmowe szablony e-mail do projektów Bootstrap dają Ci projekty pasujące do wyglądu Twojej strony, a przy tym zbudowane z takiego kodu, który skrzynki odbiorcze naprawdę rozumieją.
Dlaczego szablony e-mail Bootstrap potrzebują innego HTML
Strona w Bootstrap opiera się na flexboksie, media queries i arkuszu stylów wczytywanym z pliku lub z CDN. Klienty poczty traktują wszystkie trzy elementy zupełnie inaczej niż przeglądarki:
- Brak podlinkowanych arkuszy stylów. Gmail, Outlook.com i Yahoo Mail ignorują plik CSS podlinkowany w e-mailu, więc klasy Bootstrap docierają do skrzynki bez żadnych stylów.
- Brak flexboksa w klasycznym Outlooku. Outlook dla Windows wyświetla e-maile za pomocą silnika renderującego Worda, który nie obsługuje flexboksa, elementów pływających ani pozycjonowania, więc siatka Bootstrap się tam rozsypuje.
- Mało miejsca na CSS. Gmail ogranicza rozmiar bloku stylów w e-mailu, a pełny arkusz stylów Bootstrap jest wielokrotnie większy niż ten limit.
Dlatego twórcy e-maili budują układy z tabel i stylów inline. Blocks wykonuje tę pracę za Ciebie: szablony składają się ze struktur tabelowych ze stylami zapisanymi bezpośrednio w elementach, zawierają poprawki dla Outlooka i dostosowują się do ekranów telefonów w klientach poczty, które to obsługują.
Jak użyć szablonu Blocks w projekcie Bootstrap
- Wybierz szablon i dostosuj kolory, czcionki i logo, aby e-mail wyglądał jak część Twojej strony.
- Wyeksportuj wynik jako plik HTML lub archiwum ZIP z obrazami albo skopiuj kod prosto z edytora.
- Zapisz HTML w swoim projekcie jako szablon e-maila i zastąp imiona, linki i szczegóły zamówienia zmiennymi, których używa Twój silnik szablonów.
- Wyślij go przez swój serwer SMTP lub API e-mailowe, takie jak Amazon SES czy SendGrid, i dodaj wersję tekstową dla czytelników, których aplikacje pocztowe nie wyświetlają HTML.
Jeśli wolisz pisać e-maile ręcznie z klasami w stylu Bootstrap, istnieje osobny projekt open source o nazwie Bootstrap Email, który kompiluje taki kod do tabel i stylów inline. Jest rozwijany niezależnie od zespołu Bootstrap i wymaga kroku budowania na Twoim komputerze. Blocks idzie drogą wizualną: projektujesz w przeglądarce i od razu otrzymujesz gotowy HTML.
E-maile, które wysyła każda strona na Bootstrap
- E-maile powitalne, które witają nowych użytkowników i wskazują im pierwszy krok w Twoim produkcie.
- E-maile resetu hasła z jednym wyraźnym przyciskiem i krótką informacją o tym, kiedy link wygasa.
- Potwierdzenia zamówień dla sklepów i serwisów rezerwacyjnych, które potrzebują wiarygodnego podsumowania zakupu.
- E-maile onboardingowe dla aplikacji internetowych, które przedstawiają funkcje po jednej w każdej wiadomości.
Wskazówki dotyczące szablonów e-mail w projektach webowych
- Hostuj obrazy publicznie. Obrazy z bezwzględnymi adresami URL wczytują się w każdej skrzynce, a ścieżki względne skopiowane z aplikacji przestają działać.
- Testuj w więcej niż jednym kliencie. Zanim wdrożysz nowy szablon, sprawdź go przynajmniej w Gmail, Apple Mail i Outlooku dla Windows.
- Nazywaj zmienne jasno. Czytelne symbole zastępcze mówią kolejnemu programiście, która wartość trafia w które miejsce.
- Trzymaj szablony w repozytorium. Przechowuj HTML e-maili obok kodu, który je wysyła, żeby każda zmiana przechodziła przez review.
Jeśli chcesz zgłębić wybór kodu, przeczytaj nasze porównanie frameworków e-mailowych oraz poradnik HTML a e-maile tekstowe. Jeśli Twoja aplikacja wysyła dużo e-maili systemowych, przegląd usług e-maili transakcyjnych pomoże Ci wybrać dostawcę.
Pobierz darmowe szablony e-mail do projektów Bootstrap
Wybierz jeden z powyższych szablonów, dopasuj go do motywu Bootstrap i wyeksportuj czysty HTML do swojej aplikacji. Jeśli Twój zespół wysyła też newslettery, ten sam projekt można wyeksportować bezpośrednio do Mailchimp lub HubSpot.