10 sposobów na maksymalne wykorzystanie responsywnego projektu wiadomości e-mail

Na szczęście narzędzie do e-mail marketingu, takie jak MailerLite, dba o responsywność wiadomości e-mail, dzięki czemu dopasowują się one do każdego ekranu. 

Nadal jednak istnieją ważne zasady, których należy przestrzegać podczas projektowania, aby responsywne wiadomości e-mail wyglądały jeszcze lepiej. Przyjrzyjmy się im poniżej wraz z kilkoma przydatnymi przykładami dla inspiracji.

Responsywny projekt wiadomości e-mail to taki, którego wygląd dostosowuje się do rozmiaru ekranu urządzenia. Elementy w newsletterze są automatycznie zmieniane lub porządkowane w inny sposób, aby treść mogła być poprawnie wyświetlana na mniejszych ekranach.

Jak to działa? Inteligentne elementy CSS zmieniają tabele i obrazy o stałej szerokości, aby upewnić się, że zawartość jest odpowiednio dopasowana do większych i mniejszych ekranów.

Brzmi skomplikowanie? Nic się nie martw. Twoje narzędzie do e-mail marketingu powinno automatycznie zrobić to za ciebie.

Responsywny mailing oznacza, że w  szablonach wiadomości e-mail wszystkie obrazy, bloki tekstowe, filmy i inne elementy będą łatwo dostosowywać się do różnych rozmiarów ekranu. Dla czytelników oznacza to, że nie muszą powiększać widoku, aby wyraźnie widzieć przyciski i tekst. Wszystkie treści będą wyświetlane w pełni — tworząc płynne i spójne wrażenia użytkownika (hurra)!

Projektowanie responsywnych wiadomości e-mail jest koniecznością. Oto dlaczego:

1. Urządzenia mobilne przejmują kontrolę: "Komputery stacjonarne były dobre w 2010 roku". Badania przeprowadzone przez Adestra wykazały, że 61,9% wiadomości e-mail jest obecnie czytanych na urządzeniach mobilnych. Jeśli więc twoje maile nie są dostosowane do tych rozmiarów ekranu, prawdopodobnie zniechęcasz do siebie dużą część twoich odbiorców.

2. Nieresponsywne wiadomości e-mail są szybko usuwane: Adestra odkryła również, że gdy odbiorcy przeglądają na swoich smartfonach wiadomości e-mail, które nie są poprawnie wyświetlane, w 70% przypadków są one usuwane w ciągu 3 sekund. Jeśli zdarza się to często, twoi odbiorcy mogą również zrezygnować z subskrypcji.

3. Responsywne wiadomości e-mail = zadowoleni odbiorcy. Adaptacyjne wiadomości e-mail pokazują, że jeśli zadbasz o czytelność wiadomości,  odbiorcy będą znacznie bardziej otwarci na twój komunikat.

Jeśli chcesz, aby odbiorcy doświadczali  z tobą wysokiej jakości interakcji, pierwszym krokiem jest upewnienie się, że twoje e-maile są bardzo responsywne. Nawet jeśli MailerLite automatycznie się tym zajmie, wciąż musisz przestrzegać najlepszych praktyk projektowych, które mogą zoptymalizować wrażenia czytelnika.

Pamiętaj: utrzymanie uwagi odbiorców zależy od tego, jak responsywny jest twój projekt wiadomości mailowej. Na szczęście istnieje kilka prostych zasad, dzięki którym twoje kampanie będą zawsze w formie.

1. Używaj projektu wiadomości e-mail z jedną kolumną

Choć kampanie e-mailowe wykorzystujące wiele kolumn w swoim projekcie mogą być estetyczne, najlepiej jest zachować prostotę podczas przygotowywania wiadomości z myślą o użytkownikach mobilnych. Układ jednokolumnowy jest łatwy do przyswojenia, ponieważ każda kolumna jest poświęcona jednemu tematowi. Gdy kolumny są ułożone jedna pod drugą, treść staje się bardzo czytelna.

Projekt wiadomości e-mail od Perfectglasses.co.uk wykorzystuje tylko pojedyncze kolumny.

Ułatwia to zauważenie przycisku Shop Now, który jest umieszczony w tym samym miejscu dla każdej pary okularów.

2. Twórz krótkie akapity

Im mniej słów można użyć, tym lepiej. Gdy maile zawierają dużo tekstu, czytelnik musi je częściej przewijać, aby przeczytać cały newsletter. Na urządzeniach mobilnych konieczność przewijania będzie znacznie większa. Dlatego też zalecamy, aby teksty były krótkie i zwięzłe.

I jak powiedzieliśmy wcześniej: upewnij się, że najważniejszy tekst mieści się na ekranie w taki sposób, aby odbiorcy nie musieli go przewijać. W przeciwnym razie mogą przegapić ważną część komunikatu!

Używanie mniejszej liczby obrazów pomaga również skrócić projekt wiadomości mailowej w pionie. Pamiętaj, że nawet jeśli używasz dwóch kolumn (na przykład obraz po lewej stronie i tekst po prawej) i oszczędzasz miejsce na komputerze, na urządzeniach mobilnych kolumny będą układać się jedna pod drugą, co wydłuży twój e-mail.

Ten mail od producenta pasty do zębów Bite pokazuje, jak tworzyć krótki i rzeczowy tekst.

3. Stwórz wyraźne wezwanie do działania (CTA)

Czytelne i łatwe do przyswojenia wezwanie do działania (CTA) to najlepsza praktyka e-mail marketingu, która sprawdza się również w przypadku responsywnych wiadomości e-mail. Musisz powiedzieć odbiorcom dokładnie, co chcesz, aby zrobili, niezależnie od tego, czy chodzi o odwiedzenie sklepu internetowego, czy o kliknięcie linku w celu przeczytania dalszej części artykułu.

Najlepszym sposobem na wyświetlenie wezwania do działania jest użycie przycisku. Linki tekstowe są małe, irytujące i trudne do kliknięcia na urządzeniach mobilnych. Upewnij się, że przycisk jest duży i ma kontrastowy kolor, dzięki czemu łatwo będzie go zauważyć. Staraj się, aby rozmiar przycisku wynosił co najmniej 40 na 40 pikseli. Pamiętaj, aby przetestować długość słowa CTA na urządzeniu mobilnym, aby upewnić się, że nie jest zbyt długie (i potencjalnie zajmuje dwie linie).

Ponadto, jeśli masz kilka przycisków obok siebie (takich jak ikony społecznościowe), dodaj wystarczająco dużo białej przestrzeni między nimi, aby użytkownicy mogli łatwo kliknąć wybrany przycisk.

4. Sprawdź rozmiary czcionek

Zanim wyślesz twoją kampanię mailingową do odbiorców, upewnij się, że został wykonany test wiadomości e-mail w celu sprawdzenia, jak czcionki wyglądają na urządzeniach mobilnych. Na przykład, może się okazać, że czcionka jest mała i trudna do odczytania na małym ekranie.

Poniższy newsletter od ReadyMag jest dobrym przykładem czcionek, rozmiarów i przycisków CTA, które są bardzo czytelne zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych.

5. Przejrzyj twoje obrazy

Jeśli chodzi o wykorzystanie obrazów w newsletterach, upewnij się, że pokazują one dokładnie to, co chcesz przekazać. Na przykład, jeśli sprzedajesz torby, sprawdź, czy szczegóły przedmiotów są wyraźnie widoczne również na urządzeniach mobilnych. Być może potrzebne będzie użycie zbliżenia lub kilku różnych ujęć.

Wyślij do siebie testową wiadomość e-mail, aby upewnić się, że obrazy są dobrze widoczne na mniejszych ekranach. W przeciwnym razie pomyśl o przebudowie treści lub użyciu innego obrazu.

W poniższym przykładzie z e-commerce Baggu wyraźnie widać, jak wygląda torba. Jednak w tym e-mailu przydałoby się zastosować kilka dodatkowych zbliżeń, aby zobaczyć wzór bardziej szczegółowo.

6. Dodaj teksty ALT

W przypadku, gdy obrazy nie są wyświetlane przez usługę poczty e-mail lub czytelnik jest niedowidzący, dobrze jest mieć alternatywne teksty jako kopię zapasową.

Najlepiej byłoby dodać teksty ALT do wszystkich obrazów w wiadomości e-mail. Opisują one, co dzieje się na obrazie. Nawet jeśli obrazy nie są wyświetlane, odbiorcy nadal mogą zorientować się, o czym jest treść twojej wiadomości. Jest to również ważne, kiedy mowa o zasadach dostępności.

Kliknij tutaj, aby zapoznać się z samouczkiem dotyczącym dodawania tekstu ALT w aplikacji MailerLite.

7. Sprawdź szerokość i długość

Zminimalizuj konieczność przewijania w projekcie wiadomości e-mail, zarówno w poziomie, jak i w pionie. Idealna maksymalna szerokość obrazów to 600 pikseli na komputerze i 320 pikseli na urządzeniu mobilnym.

Staraj się, aby wiadomość w pionie była jak najmniejsza. Jeśli mail stanie się zbyt długi, programy pocztowe, takie jak Gmail, będą przycinać zawartość, aby dopasować ją do szerokości urządzenia. Jednocześnie zostanie wyświetlone powiadomienie "Wyświetl całą wiadomość" na dole. Na urządzeniach mobilnych czytelnicy mogą stracić zainteresowanie, gdy zobaczą, jak długa jest twoja wiadomość.

Oto kolejny przykład: ta wiadomość e-mail od No7 makeup zawiera zwięzłą, jednokolumnową wiadomość, która jest od początku konkretna i przyciąga uwagę odbiorców.

8. Nie nadużywaj obrazów, GIF-ów ani emotikon

Jeśli chodzi o obrazy, GIF-y i emotikony, kluczem jest zachowanie równowagi. Do celów responsywnych najlepiej jest zminimalizować ich użycie, ponieważ obrazy mogą być blokowane, a używanie emotikon w wiadomościach mailowych może wyglądać inaczej w zależności od klienta poczty używanego do czytania wiadomości.

Trzymaj się z dala od wiadomości e-mail zawierających wyłącznie obrazy. Gdy obrazy zostaną zablokowane przez program pocztowy lub przez użytkownika, cała informacja zniknie. Co więcej, chociaż obrazy będą skalowane zgodnie z rozmiarem ekranu, tekst dodany do obrazów już nie. Zasadniczo przekreśla to cel responsywnego projektowania wiadomości e-mail.

Poniżej możesz zobaczyć responsywny newsletter HTML londyńskiej firmy ceramicznej Turning Earths. W oryginalnej wiadomości e-mail (kliknij tutaj, aby wyświetlić) projekt wygląda pięknie, ale w poniższym przykładzie czegoś brakuje.

Element pokazujący nadchodzące daty to jeden cały obraz. Jeśli dostawca poczty e-mail odbiorcy zablokuje obrazy, żadna z tych informacji nie będzie widoczna. Aby uniknąć takiej sytuacji, lepiej zmienić układ lub dodać daty również w formie tekstowej. Co więcej, na urządzeniach mobilnych tekst umieszczony na obrazie może stać się naprawdę mały i trudny do odczytania.

9. Testy A/B różnych responsywnych projektów wiadomości e-mail

Nie masz pewności, który projekt wiadomości e-mail jest najlepszy? Przetestuj go! Dzięki testom A/B możesz wysłać dwie różne wersje wiadomości do dwóch różnych grup odbiorców. Wiadomość, która uzyska najwięcej otwarć i kliknięć, zostanie wysłana do pozostałej części odbiorców.

Może to być szczególnie pomocne przy projektowaniu responsywnych wiadomości e-mail, ponieważ pozwoli to ustalić, który układ generuje najwięcej kliknięć, co wykorzystasz w przyszłych kampaniach oraz automatyzacjach.

Aby to zrobić za pomocą MailerLite, możesz zdecydować się na testowanie "treści wiadomości e-mail", w którym wprowadzasz jedną małą zmianę lub sprawdzasz dwie różne wersje wiadomości. Na przykład, możesz wypróbować newsletter zawierający obraz i porównać go z newsletterem bez obrazu. Możesz też przetestować różne teksty CTA i pozycjonowanie przycisków.

10. Sprawdź podgląd responsywnej wiadomości e-mail przed jej wysłaniem

Aby dopracować responsywny e-mail marketing, najlepiej jest regularnie wyświetlać podgląd wiadomości już w trakcie tworzenia — zamiast otrzymać nieprzyjemną niespodziankę na samym końcu! Dzięki MailerLite możesz zobaczyć, jak Twój e-mail będzie wyglądał zarówno na komputerze, jak i na telefonie komórkowym, gdy ciągle jesteś w edytorze. Oznacza to, że możesz wprowadzać zmiany w trakcie pracy i regularnie sprawdzać, jak wyglądają one na ekranach o różnych rozmiarach.

Zobaczmy, jak zasady projektowania responsywnych wiadomości sprawdzają się w prawdziwych mailach. Wielu klientów MailerLite wykonuje świetną robotę, tworząc projekty e-maili, które są łatwe do odczytania na ekranach urządzeń mobilnych. Poniżej podzielimy się kilkoma z naszych ulubionych!

1. Śniadanie z Audrey

Ten e-mail od magazynu internetowego Breakfast with Audrey, inspirowanego Audrey Hepburn, wygląda świetnie na wszystkich ekranach. Proste, responsywne wzorce wiadomości e-mail wykorzystują układ jednokolumnowy, a ich elementy są wystarczająco duże, aby były dobrze widoczne na każdym urządzeniu. Obrazy, przyciski CTA, nagłówki i ikony społecznościowe są wystarczająco duże, aby można je było wygodnie zmniejszyć do widoku mobilnego bez utraty czytelności.

2. Caroline Svedbom

Ten projekt newslettera od szwedzkiej projektantki biżuterii Caroline Svedbom również wykorzystuje układ jednokolumnowy. To, co jest fajne w tej kampanii e-mailowej, to powtarzające się, czytelne przyciski CTA oraz duża różnorodność obrazów. Pierwszy z nich wprowadza w dobry nastrój, drugi obraz przedstawia dwa noszone elementy biżuterii, a ostatni pokazuje czytelnikowi, jak będzie wyglądać opakowanie prezentu.

3. Sole Finess

Ten responsywny e-mail HTML, autorstwa australijskiego sklepu Sole Finess, promuje nowy model sneakersów Nike. Aby upewnić się, że szczegóły są wyraźnie widoczne na wszystkich urządzeniach, zdecydowano się na różne obrazy, każdy w dość dużym zbliżeniu. Duży przycisk CTA wyraźnie wyróżnia się w projekcie wiadomości mailowej. Drobnym usprawnieniem byłoby wybranie nieco większego rozmiaru czcionki tekstu.

Choć nie widać tego na poniższym zrzucie ekranu, Sole Finess również dobrze poradził sobie z nagłówkiem wiadomości e-mail ("W zestawie naszyjnik + do 60% zniżki na produkty z wyprzedaży!"). Daje to odbiorcom zapowiedź tego, czego mogą się spodziewać w treści wiadomości.

4. Harness Magazine

Poniższy newsletter od Harness Magazine działa na komputerach stacjonarnych, tabletach i urządzeniach mobilnych. Ciemnozielone przyciski kontrastują z tłem. Prosta konstrukcja sprawia, że ten mail jest łatwy do przeczytania na mniejszych ekranach. Wszystkie teksty są krótkie, więc rozmiar czcionki mógłby być nawet większy. Nie wpłynęłoby to prawie na długość newslettera, ale zoptymalizowałoby wrażenia użytkownika.

To proste! Jeśli rozpoczynasz nową kampanię, najpierw przejdź do pulpitu i kliknij “Utwórz kampanię”. Następnie wybierz szablon newslettera z galerii lub rozpocznij tworzenie od podstaw. Każdy blok projektu, który przeciągniesz i dodasz do szablonu wiadomości e-mail, automatycznie stanie się responsywny.

Gdy uznasz, że wszystko jest gotowe, kliknij przycisk “Podgląd” i “Test” w prawym górnym rogu. Dzięki temu zobaczysz, jak twój newsletter będzie wyglądał na mniejszych ekranach.

Gratulacje, jesteś teraz projektantem/projektantką responsywnych wiadomości e-mail! Twoje maile będą czytelne na wszystkich rozmiarach ekranu, zapewniając czytelnikom przyjemne wrażenia z użytkowania.

Przedstawione zasady, takie jak układy jednokolumnowe, teksty ALT i krótsze teksty z większymi czcionkami, poprawią twój projekt. Nagrodą będą lepsze wskaźniki klikalności i większa liczba konwersji.

Czy udało Ci się dostosować zawartość newslettera do różnych rozmiarów ekranu? Podziel się z nami swoimi wskazówkami dotyczącymi projektowania responsywnych wiadomości e-mail w komentarzach poniżej!