Projekty, szablony i przykłady na rok 2023

Czy kiedykolwiek otworzyłeś wiadomość e-mail na telefonie, a obraz był niskiej jakości, tekst był za mały, a przycisk wezwania do działania był zepsuty? To wszystko są wady statycznego projektowania e-maili. Odpowiedzią są responsywne e-maile.

Biorąc pod uwagę, że ponad połowa mieszkańców USA przegląda e-maile marketingowe na swoich telefonach, musisz zoptymalizować swoje e-maile pod kątem wielu ekranów, w tym telefonów komórkowych i tabletów.

Elastyczne e-maile wykorzystują płynne obrazy i tabele, aby zachować elastyczność na różnych rozmiarach ekranu. Ostatecznie dostarczają treści zaprojektowane z myślą o optymalnym doświadczeniu każdego użytkownika.

Chociaż responsywne wiadomości e-mail można projektować przy użyciu zapytań o media CSS, nie potrzebujesz żadnego doświadczenia w programowaniu, aby je utworzyć. Tworzenie responsywnej wiadomości e-mail to nie tylko zadanie dla programistów.

Tutaj zestawiliśmy kilka najlepszych praktyk i gotowych do użycia szablonów, a także krótki samouczek dotyczący podstaw responsywnych wiadomości e-mail.

E-maile responsywne są również bardziej dostępne, ponieważ umożliwiają subskrybentom czytanie ich na preferowanym urządzeniu.

Aby to zilustrować, oto jak otrzymany e-mail promocyjny wyglądał na komputerze.

Ten e-mail zawiera niesamowite zdjęcia, ikony do kupienia i jest ładnie sformatowany. Kiedy otwieram wiadomość e-mail na telefonie komórkowym, wita mnie to.

Nadal mam te same informacje, te same zdjęcia i ikony zakupów. Jedyną zauważalną różnicą jest format wiadomości e-mail. Jest inny, aby lepiej dopasować się do mobilnego doświadczenia.

Teraz wyobraź sobie, że ten sam układ pulpitu został zastosowany na urządzeniach mobilnych. Musiałbym powiększyć telefon, żeby zobaczyć jakiekolwiek zdjęcia lub tekst. Zamiast tego zrezygnowałbym z subskrypcji.

Dzięki responsywnej wiadomości e-mail można poprawić wrażenia użytkownika, a także zwiększyć zwrot z inwestycji w kampanię.

Pomyśl o tym: subskrybenci zadowoleni ze zoptymalizowanego projektu mobilnej poczty e-mail będą otwierać więcej wiadomości marketingowych, ponieważ wiedzą, że będą one dostępne i dobrze wyglądają.

Tak więc, przy całej tej rozmowie o responsywnych e-mailach, musisz chcieć stworzyć własne. Następnie przyjrzymy się przykładom i szablonom responsywnych wiadomości e-mail.

Responsywne projekty e-maili

Istnieje wiele sposobów projektowania responsywnych wiadomości e-mail.

Jeśli masz wiedzę na temat kodowania, możesz kodować różne szablony wiadomości e-mail dla różnych rozmiarów ekranu. Możesz także użyć gotowego szablonu, który działa na wszystkich rozmiarach ekranu.

Bez względu na Twoje podejście, będziesz potrzebować oprogramowania do e-mail marketingu. Tutaj możesz zaprojektować wiadomość e-mail, a następnie wyświetlić jej podgląd na kilku urządzeniach. Większość programów pocztowych pokaże Ci, jak projekt będzie wyglądał na wielu urządzeniach.

Poniższy film przeprowadzi Cię przez proces projektowania wiadomości e-mail za pomocą szablonu. Na filmie użytkownik jest na Klaviyo, ale koncepcje są prawdziwe bez względu na to, jakiego oprogramowania używasz.

Kodowanie responsywnego e-maila

Jeśli chcesz, aby elementy Twojego e-maila były responsywne, musisz pracować z zapytaniami o media.

Zapytania o media to technika CSS. Pozwala ustawić reguły stylu, które pojawiają się tylko wtedy, gdy spełnione są określone warunki. Na przykład możesz określić, jakie rozmiary czcionek i rozmiary obrazów mają być używane, gdy ekran ma szerokość 600 pikseli lub mniejszą.

Podczas pracy z pocztą e-mail możesz użyć zapytań o media, aby określić, jak Twój projekt powinien wyglądać na komputerach stacjonarnych, tabletach i urządzeniach mobilnych. Aby to zrobić, musisz określić następujące elementy:

• Użyj selektora „@media” i określ „ekran”. Oznacza to, że kod wpłynie na urządzenia z ekranem.
• Ustaw „maksymalną szerokość” w pikselach. Określa rozmiar ekranu, na którym kod zacznie obowiązywać.
• Określ wszelkie przewodniki stylów CSS, które chcesz zastosować na tym konkretnym ekranie.

Rzućmy okiem na poniższy kod.

@ekran multimedialny i (maksymalna szerokość: 600 pikseli)

ciało

rozmiar czcionki: 30px;

Po zastosowaniu do CSS wiadomości e-mail tekst główny pojawi się w rozmiarze 30 pikseli na ekranach o szerokości 600 pikseli lub mniejszych.

Chociaż takie podejście może pomóc w utworzeniu pewnych elementów odpowiedzi e-mail, zalecamy, jeśli to możliwe, użycie szablonu.

Jeśli nie masz wszechstronnego doświadczenia w projektowaniu stron internetowych, kodowanie kilku ekranów multimedialnych może być czasochłonne i frustrujące.

Jeśli nie masz wiedzy technicznej lub potrzebujesz prostszej metody, spróbuj użyć narzędzia do marketingu e-mailowego z wbudowanymi responsywnymi szablonami. Na przykład bezpłatne oprogramowanie e-mail firmy HubSpot udostępnia szablony typu „przeciągnij i upuść”, które domyślnie są responsywne.

Przykłady projektów responsywnych wiadomości e-mail

Czas przyjrzeć się przykładom. Zacznij od tego filmu, w którym omówiono niektóre z najlepszych kampanii marketingu e-mailowego.

Następnie możesz przeczytać o niektórych z naszych ulubionych projektów responsywnych wiadomości e-mail.

1. Biuletyn TOMS

W biuletynie TOMS główna różnica między wersją na komputer a wersją mobilną polega na układaniu i rozmiarze reklam displayowych.

Dzięki responsywnemu projektowi wersja mobilna nie ma zagraconej nawigacji, a obraz ładnie pasuje do ekranu. Wezwania do działania również zostały przesunięte, aby zapewnić lepszą widoczność.

Źródło obrazu

2. Metropolitalne Muzeum Sztuki

Jak widać w biuletynie TOMS, responsywny projekt wiadomości e-mail pomaga układać treści w sposób atrakcyjny wizualnie i łatwy do strawienia. Ten przykład z MET nie jest inny.

Na urządzeniach mobilnych zmienia się położenie menu. Linki do różnych przedmiotów w sklepie z pamiątkami znajdują się na dole strony. Dzięki temu obrazy dostępnych pamiątek pozostają z przodu i na środku.

Źródło obrazu

3. Morwa

Ponownie, dzięki responsywnemu projektowi e-maili, nazwa gry układa się w stos. Wszystko po to, aby zawartość była czytelna i atrakcyjna wizualnie, bez względu na to, jak małe jest urządzenie, na którym ktoś przegląda zawartość.

Naprzemienne zdjęcia i tekst mają sens w przypadku komputerów stacjonarnych, podczas gdy konsekwentne układanie zdjęć nad powiązanym tekstem w przypadku urządzeń mobilnych wraz z liniami podziału gwarantuje, że widz nie będzie zdezorientowany.

Źródło obrazu

Responsywne szablony wiadomości e-mail

Responsywny szablon automatycznie dostosuje się do każdego rozmiaru ekranu, więc niezależnie od tego, czy e-mail zostanie otwarty na smartfonie, tablecie czy komputerze, będzie wyglądał świetnie i miał pełną funkcjonalność.

Dla tych, którzy mają mniejsze doświadczenie w programowaniu lub chcą spędzać mniej czasu na projektowaniu, radzę skorzystać z szablonu. To pewny sposób, aby Twój e-mail wyglądał profesjonalnie i był responsywny.

Responsywne szablony wiadomości e-mail oszczędzają czas podczas projektowania wiadomości e-mail, którą można było wybrać spośród wielu. Na przykład narzędzie do marketingu e-mailowego HubSpot zawiera ponad 60 szablonów tylko dla responsywnych wiadomości e-mail.

Przyjrzyjmy się teraz niektórym opcjom szablonów.

1. HubSpot

HubSpot oferuje kilka darmowych responsywnych szablonów e-maili . Jeśli jesteś klientem HubSpot lub użytkownikiem darmowym, możesz je pobrać i wypróbować samodzielnie.

Oto na przykład jeden z responsywnych szablonów wiadomości e-mail — zwróć uwagę na pasek boczny, na którym możesz wyświetlić podgląd szablonu na wielu urządzeniach.

Źródło obrazu

Przeglądanie typów urządzeń i upewnianie się, że wiadomość e-mail jest odpowiednio sformatowana, jest jednym z ostatnich kroków w procesie projektowania i jedynym krokiem w procesie responsywnej poczty e-mail, gdy korzystasz z oprogramowania takiego jak HubSpot.

Na przykład, klikając smartfon w celu wyświetlenia podglądu, możesz sprawdzić, czy zawartość — w tym rozmiar czcionki i rozdzielczość obrazu — jest sformatowana w sposób przyjemny dla urządzeń mobilnych.

2. Monitor kampanii

Szablony oferowane przez CampaignMonitor są podobne do wielu innych, w których responsywne wyniki e-maili są wyświetlane w narzędziu podglądu. Oto na przykład szablon CampaignMonitor:

Źródło obrazu

Możesz zobaczyć różne urządzenia obok siebie, dzięki czemu możesz łatwo porównać elementy projektu. Można wprowadzić niewielkie zmiany, aby zapewnić najlepsze wrażenia wszystkim subskrybentom.

Szablony CampaignMonitor są często bezpłatne, więc jest to dobry wybór, jeśli masz minimalny budżet.

3. Striptiz

Stripo oferuje ponad 300 darmowych szablonów wiadomości e-mail w formacie HTML. Możesz wybierać szablony według branży, pory roku, typu i funkcji. Na przykład tutaj jest szablon z ich sekcji branży biznesowej.

Źródło obrazu

Dobrym znakiem solidnego, responsywnego szablonu wiadomości e-mail jest opcja wyświetlenia podglądu zarówno w wersjach na komputery stacjonarne, jak i smartfony, jak pokazano w trybie podglądu Stripo.

Zwróć uwagę, jak układ jednokolumnowy został przyjęty w podglądzie dla urządzeń mobilnych, aby pasował do specyfikacji telefonów.

Stripo to strona internetowa, którą możesz szybko odwiedzić, aby znaleźć szablon pasujący do Twoich celów. Możesz rozważyć Stripo, jeśli chcesz wypróbować responsywne e-maile lub potrzebujesz inspiracji projektowej.

4. Stały kontakt

Constant Contact oferuje ponad 200 profesjonalnych szablonów wiadomości e-mail, które są dostępne po zarejestrowaniu się. Patrząc na poniższy przykład, widać, że platforma oferuje responsywne szablony wiadomości e-mail.

Źródło obrazu

Szablony Constant Contact mają edycję metodą „przeciągnij i upuść”, opcję dodawania ankiet, funkcje e-commerce i narzędzie biblioteki zdjęć. Wszystkie te funkcje mogą pomóc w tworzeniu wiadomości e-mail, które chcą widzieć subskrybenci.

Pomocne jest korzystanie z usługi takiej jak Stały kontakt, ponieważ określone narzędzia pozwalają zachować spójność, jak w powyższym przykładzie. Możesz powiedzieć, że responsywny charakter wiadomości e-mail nie narusza żadnego z elementów projektu.

Teraz, gdy przyjrzeliśmy się niektórym opcjom szablonów, spójrzmy na inny sposób, aby responsywne e-maile działały, wraz z najlepszymi praktykami.

Najlepsze praktyki responsywnej poczty e-mail

Dokładny projekt responsywnego e-maila będzie się różnić w zależności od celów Twojej kampanii. Jednak te wskazówki mogą pomóc w zapewnieniu jak najlepszych wrażeń czytelnikom.

• Upewnij się, że Twój responsywny e-mail jest skalowalny i elastyczny. Wyświetl podgląd wiadomości e-mail na różnych urządzeniach, aby upewnić się, że wiadomość jest responsywna.
• Jeśli kodujesz własną wiadomość e-mail, pamiętaj, że zapytania o media CSS zmieniają pola, które są ustalone na pola, które są płynne.
• Używaj większych czcionek, które będą łatwe do odczytania na mniejszych ekranach.
• Układy jednokolumnowe są łatwiejsze do skalowania. Jeśli proste układy są dobre dla Twoich stron internetowych, zdecydowanie rozważ je w przypadku responsywnych wiadomości e-mail.

Pamiętaj, aby przetestować swoje e-maile, zanim klikniesz „zaplanuj”. Sfinalizuj projekty dopiero wtedy, gdy zobaczysz, jak wyglądają w różnych rozdzielczościach ekranu. Tak wiele osób uzyskuje dostęp do e-maili przez telefon komórkowy tylko dla ułatwienia.

Prostym sposobem sprawdzenia skuteczności e-maila jest wysłanie go do siebie lub swojego zespołu w ramach testu — czy zestawia się on z innymi responsywnymi e-mailami marketingowymi w Twojej skrzynce odbiorczej? Jeśli tak, jesteś gotowy do wysłania.

Pierwsze kroki z responsywnymi wiadomościami e-mail

Responsywne e-maile zapewniają lepszą i bardziej przystępną obsługę dla Twoich klientów. Jeśli dopiero dokonujesz zmiany, zacznij od zapoznania się z gotowymi responsywnymi szablonami wiadomości e-mail. Pozwoli to zaoszczędzić czas, zapewniając jednocześnie elastyczność projektowania.

Następnie zasięgnij drugiej opinii. Poproś współpracownika, aby otworzył wiadomość e-mail na swoim komputerze i telefonie. Możesz uzyskać ich szczerą opinię na temat obu doświadczeń.

Na koniec nie bój się eksperymentować. Możesz testować A/B różne responsywne projekty, dopóki nie znajdziesz układu, który najbardziej rezonuje.

Wkrótce będziesz wysyłać responsywne e-maile i zwiększać współczynniki otwarć.