Jak korzystać z platformy Foundation for Emails do tworzenia responsywnych projektów e-maili

Istnieje wiele narzędzi marketingowych, które umożliwiają łatwe tworzenie responsywnych projektów wiadomości e-mail. Chodzi o to, że możesz chcieć mieć większą kontrolę nad wyglądem swoich e-maili, a najlepszym sposobem na to jest zaprojektowanie ich od podstaw. Korzystanie z frameworka, takiego jak Foundation for Emails, zapewnia doskonały kompromis. Nie trzeba będzie zaprojektować każdy pojedynczy składnik od podstaw, ale dostaniesz pełną kontrolę nad tym, kiedy i gdzie ich używać.

W tym artykule najpierw wyjaśnimy, czym są frameworki e-mail i jak mogą Ci pomóc. Następnie przejdziemy do omówienia Foundation for Emails i sposobu, w jaki można go wykorzystać do tworzenia własnych niestandardowych, responsywnych kampanii e-mailowych. Chodźmy do pracy!

Czym są struktury poczty e-mail (i jak mogą pomóc w tworzeniu lepszych wiadomości e-mail)

Frameworki nadal wymagają kodowania, ale proces jest bardzo prosty w przypadku e-maili.

Ogólnie rzecz biorąc, framework jest kompilacją praktyk, plików i kodu zaprojektowanych w celu pomocy w rozwoju określonych typów produktów. Pomyśl o nich jako o cegiełkach kodu, które mogą pomóc w szybszym tworzeniu złożonych projektów, ponieważ nie musisz za każdym razem wymyślać koła na nowo.

Istnieją również frameworki dla poczty e-mail io tym będziemy mówić w tym artykule. Przyjrzyjmy się niektórym korzyściom:

• Gotowe elementy pomagają szybciej projektować wiadomości e-mail. Obecnie większość e-maili zawiera elementy wykraczające poza obrazy i tekst, takie jak przyciski i menu. Włączenie tych elementów może być czasochłonne, ale framework umożliwia natychmiastowe ich wstawianie i dostosowywanie.
• Responsywne po wyjęciu z pudełka. Ponieważ coraz więcej osób korzysta z urządzeń mobilnych, musisz zadbać o to, aby Twoje wiadomości e-mail dobrze wyświetlały się na ich ekranach. Większość nowoczesnych frameworków jest domyślnie responsywna, co oznacza, że ​​masz o jedną rzecz mniej do zmartwienia.
• Szablony mogą pomóc w rozpoczęciu tworzenia projektów. Wiele nowoczesnych struktur poczty e-mail zawiera różne szablony ułatwiające szybkie tworzenie kampanii.

Jak widać, wspólnym motywem jest to, że frameworki pozwalają zaoszczędzić czas. Istnieje wiele przypadków, w których będziesz chciał kodować swoje projekty od podstaw, ale warto skorzystać z frameworka, który umożliwi Ci szybsze wykonywanie zadań w wyższej jakości.

Wprowadzenie do podstaw Frameworka dla wiadomości e-mail

Zanim przejdziemy dalej, ważne jest, aby pamiętać, że w Internecie dostępne są dwie struktury Foundation – Foundation for Sites i Foundation for Emails – i skupimy się na tych ostatnich w tym artykule. Głównym punktem sprzedaży jest responsywna siatka. Tego typu system nie jest rewolucyjny, ale popularność Fundacji opiera się na łatwości użytkowania.

Wybór frameworka jest dość prosty (nawet jeśli nie masz doświadczenia w kodowaniu) i możesz wybierać między dwiema wersjami – jedną opartą na Cascading Stylesheets (CSS), a drugą na Sass. Oczywiście wersja Sass pozwala zaoszczędzić jeszcze więcej czasu, eliminując potrzebę powtarzania stylings CSS, ale wymaga pewnej znajomości Node.js.

Wreszcie, Foundation for Email zapewnia również wiele „wzorów”, takich jak przyciski i menu, które jeszcze bardziej ułatwiają pracę. Aby zaoszczędzić więcej czasu, możesz nawet użyć szablonu zamiast projektować układ od podstaw.

Kluczowe cechy:

• Wykorzystuje responsywną siatkę do tworzenia nowoczesnych kampanii e-mailowych.
• Oferuje wersję CSS lub Sass frameworka.
• Pozwala wykorzystać wzorce do szybkiego dodawania wspólnych elementów do wiadomości e-mail.
• Wykorzystuje układy, aby jeszcze bardziej usprawnić proces tworzenia wiadomości e-mail.

Cena: za darmo | Więcej informacji

Jak wykorzystać podstawę dla e-maili do tworzenia nowoczesnych projektów (w 4 krokach)

Jak wspomnieliśmy, istnieją dwie wersje Foundation for Emails. W tej sekcji użyjemy odmiany CSS, ponieważ konfiguracja wymaga mniej pracy. Ponadto wyniki końcowe powinny wyglądać tak samo – wszystko, co się zmienia, to sposób, w jaki się tam dostaniesz.

Jeśli chcesz zobaczyć wersję Sassa w akcji lub dowiedzieć się więcej o tym, jak z niej korzystać, możesz zacząć od tego wspaniałego samouczka.

Krok #1: Pobierz bazę dla plików e-mail

Przede wszystkim przejdź do strony Foundation for Email Getting Started i kliknij przycisk Download Starter Kit pod nagłówkiem CSS Version :

Po uzyskaniu pliku rozpakuj go i rozpakuj jego zawartość do nowego folderu. Na tym etapie Twój folder powinien zawierać plik index.html i dwa podfoldery – jeden dla Twojego CSS, a drugi dla Twoich szablonów.

Na razie uruchom swój ulubiony edytor tekstu i otwórz za jego pomocą plik index.html . Powinno być całkiem puste, ale za chwilę to naprawimy.

Krok #2: Zapoznaj się z systemem siatki

Responsywność Foundation for Email opiera się na elastycznym systemie siatki. Jeśli tworzysz wiadomość e-mail od zera, będziesz chciał utworzyć własną siatkę, aby podzielić sekcje wiadomości e-mail. W tym celu użyjemy trzech różnych komponentów: kontenerów, wierszy i kolumn.

Otwórz plik index.html fundacji w ciągu edytorze tekstowym i przewinąć w dół do sekcji ciała:

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

Jak widać, treść wiadomości e-mail zawiera wstępnie ustawioną tabelę, której nie będziemy dotykać. Zamiast tego po prostu dodamy własne elementy siatki do sekcji, w której jest napisane <!– Twoja siatka przechodzi tutaj –> . Zacznijmy od kodu, którego musisz użyć dla swoich kontenerów:

<table class="container">
<tr>
<td></td>
</tr>
</table>

Teraz dodajmy tam wiersz:

<table class="row"> <tr> <th></th> </tr> </table> 

Na koniec możemy podzielić ten wiersz na kolumny:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

Pamiętaj, że każdy wiersz składa się z maksymalnie 12 kolumn. Powyższy kod mówi Twojemu klientowi poczty e-mail, że powinien wyświetlać zawartość za pomocą pełnych 12 kolumn na małych ekranach, takich jak urządzenia mobilne ( mały-12 ), ale zajmować tylko sześć na komputerach stacjonarnych ( duży-6 ).

Problem polega na tym, że jeśli Twój e-mail wyświetla się na dużym ekranie, jest sześć pustych kolumn, więc musimy dodać drugą tabelę, aby to naprawić:

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

Jak widać, obie kolumny są w zasadzie takie same. Jednak mają dwie różne klasy, pierwsze kolumny i ostatnie kolumny . Dzięki nim klient poczty e-mail jest pierwszą i ostatnią kolumną w wierszu, a kolumny pomiędzy nimi nie muszą ich używać.

Gdybyś miał teraz otworzyć plik index.html w przeglądarce, oto, co zobaczysz:

Tak, jest dość nagie, ale na tym etapie mechanika powinna być oczywista. Każdy e-mail może mieć dowolną liczbę wierszy, a każdy wiersz może mieć do 12 kolumn. Na razie baw się systemem siatki, aż znajdziesz układ, który Ci się podoba, i używaj tekstowych symboli zastępczych, aby pomóc Ci je zidentyfikować, dopóki nie zaczniesz dodawać elementów.

Krok #3: Dodaj komponenty do swoich e-maili

Pakiety Foundation for Email zawierają wiele komponentów, a najczęściej używane są przyciski, obrazy tła i podtytuły. Są dość proste, więc przejrzyjmy je po kolei. Aby dodać przyciski, musisz użyć następującego kodu w jednej lub kilku kolumnach:

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

Ten kod dodaje do e-maila prosty mały przycisk z zielonym tłem. Kluczowymi elementami są tutaj klasy malutkie i sukces . Pierwszy określa rozmiar twojego przycisku, a drugi jego kolor. Zamiast dodawać tutaj wszystkie dostępne zajęcia, połączymy Cię z oficjalnym zasobem Fundacji na temat przycisków, na których możesz przeglądać je w wolnym czasie.

Przejdźmy teraz do obrazów tła. Są one nieco trudniejsze, ponieważ musisz użyć klasy wrapper, aby zajęły całą szerokość wiersza i przypisać im określone tło za pomocą CSS:

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

Na koniec porozmawiajmy o podtytułach. Są to najprostsze z całej gamy — wszystko, co musisz zrobić, to zawinąć tekst w wymagane tagi:

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

To takie proste! Korzystanie z tych trzech elementów wystarczy, aby stworzyć dobrze wyglądające e-maile. Sekret polega oczywiście na dopasowaniu ich do własnych upodobań za pomocą CSS, co prowadzi nas do ostatniego kroku.

Krok 4: Stylizuj swój e-mail za pomocą CSS

Niektóre klienty poczty e-mail (takie jak Microsoft Outlook) usuwają niektóre znaczniki stylu z plików HTML. Dzieje się tak, aby wiadomości e-mail renderowały się bez żadnych problemów, a także w celu usunięcia potencjalnych zagrożeń bezpieczeństwa. Jednak wynik jest to, że e-maile będą wyglądać dość nudne, chyba że dodać CSS bezpośrednio do kodu HTML (lub wbudować go).

W ten sposób zarówno treść, jak i jej styl zostaną załadowane jako jeden plik i powinny działać idealnie na większości nowoczesnych klientów poczty e-mail. Oto jak wygląda element HTML z wbudowanym CSS:

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

Może to być trochę bałaganiarskie, dlatego zalecamy pracę nad plikami HTML i CSS osobno, a następnie użycie narzędzia takiego jak Foundation Inliner, aby je połączyć. Po prostu wklej swój kod, kliknij przycisk, a resztą zajmie się za Ciebie.

Gdy już masz swój wbudowany plik HTML, możesz go przetestować za pomocą narzędzia do e-mail marketingu, co zawsze jest dobrym pomysłem, zanim wyślesz go swoim subskrybentom.

Wniosek

Istnieje wiele sposobów na tworzenie funkcjonalnych i responsywnych wiadomości e-mail. Jednak korzystanie z frameworka, takiego jak Foundation for Emails, jest świetną opcją, jeśli szukasz elastyczności. Umożliwia projektowanie wiadomości e-mail od podstaw przy użyciu gotowych komponentów lub przyspieszenie procesu za pomocą szablonów. Niezależnie od tego, co wybierzesz, powinno to drastycznie skrócić czas spędzany na tworzeniu e-maili.

Podsumowując, oto cztery kroki, które musisz wykonać, aby stworzyć nowoczesne e-maile za pomocą Foundation for Emails:

1. Pobierz pliki frameworka.
2. Zapoznaj się z systemem siatki.
3. Używaj komponentów do swoich e-maili.
4. Dostosuj swój e-mail za pomocą CSS.

Masz pytania dotyczące korzystania z frameworka Foundation for Emails? Zapytaj w sekcji komentarzy poniżej!

Obraz miniatury artykułu autorstwa Faberr Ink / shutterstock.com.