Spraw, aby Twój projekt e-maila był responsywny i dostosowany do urządzeń mobilnych w 5 prostych krokach
Opublikowany: 2024-01-17Czy chcesz, aby Twoje biuletyny e-mailowe i kampanie marketingowe wyglądały niesamowicie na każdym urządzeniu? Oczywiście, że tak. Nikt nie chce, aby jego ciężka praca stała się nieczytelna w czyjejś skrzynce odbiorczej. Na szczęście w zaledwie pięciu krokach możesz mieć pewność, że Twoje e-maile będą responsywne i gotowe zaimponować subskrybentom. Więc weź coś do przekąszenia, ulubioną playlistę lub drinka i zacznijmy upewniać się, że wyglądają najlepiej na każdym ekranie.
Ustaw szerokość kolumn w procentach, a nie w pikselach
Aby projekt wiadomości e-mail był responsywny, ustaw szerokość kolumn za pomocą wartości procentowych, a nie stałych wartości pikseli. Dzięki temu kolumny można elastycznie dopasowywać do różnych szerokości ekranu.
Użyj płynnej siatki
Metoda płynnej siatki wykorzystuje wartości procentowe szerokości kolumn, dzięki czemu mogą one rozszerzać się i kurczyć w miarę potrzeb w zależności od rozmiaru ekranu. W przypadku prostego układu dwóch kolumn ustaw szerokość lewej kolumny na 60–70%, a prawej na 30–40%. Na przykład:
<tabela>
<tr>
<td szerokość=”65%”>Tutaj treść kolumny 1</td>
<td szerokość=”35%”>Tutaj treść kolumny 2</td>
</tr>
</tabela>
Dzięki temu kolumna 1 zajmie 65% dostępnej przestrzeni, a kolumna 2 pozostałe 35%. Na dużym ekranie komputera stacjonarnego kolumna 1 może mieć szerokość 650 pikseli, podczas gdy na małym ekranie mobilnym może mieć szerokość tylko 200 pikseli. Ale względne proporcje pozostaną takie same.
Dodaj zapytania o media dla responsywnych punktów przerwania
Zapytania o media umożliwiają zastosowanie różnych reguł stylizacji w zależności od szerokości ekranu. Można ich używać do dalszych dostosowań siatki płynów w różnych punktach przerwania. Na przykład:
/* Dla telefonów komórkowych: */
Tylko ekran @media i (maksymalna szerokość: 600 pikseli) {
tabela, td {
szerokość: 100% !ważne;
}
}
/* Dla tabletów: */
Tylko ekran @media i (min. szerokość: 601 pikseli) i (maks. szerokość: 900 pikseli) {
tabela, td {
szerokość: 80% !ważne;
}
}
Spowoduje to, że tabela i kolumny powiększą się do 100% szerokości ekranu na małych telefonach i 80% na tabletach, dzięki czemu projekt będzie w pełni responsywny.
Używaj płynnych obrazów i multimediów, które zmieniają rozmiar
Aby projekt wiadomości e-mail był dostosowany do urządzeń mobilnych, rozmiar obrazów i innych multimediów musi płynnie zmieniać się, aby dopasować się do dowolnego rozmiaru ekranu. Postępuj zgodnie z tymi wskazówkami:
Używaj responsywnych rozmiarów obrazów
Dodając obrazy do wiadomości e-mail, używaj responsywnego rozmiaru obrazów. Oznacza to zapewnienie wielu rozmiarów obrazów, aby klient poczty e-mail mógł wybrać odpowiedni rozmiar dla ekranu, na którym jest oglądany.
Na przykład zamiast dołączać duży obraz o szerokości 1000 pikseli, dołącz także:
- Średni rozmiar (około 600 pikseli)
- Mały rozmiar dla wąskich kolumn (około 400 pikseli)
- Niewielki rozmiar dla małych ekranów mobilnych (około 200 pikseli)
Klient poczty e-mail automatycznie wybierze najlepszy rozmiar dla ekranu i przepustowości. Aby określić wiele rozmiarów obrazów w wiadomości e-mail, użyj atrybutu <img srcset>.
Spraw, aby multimedia były przyjazne dla urządzeń mobilnych
W przypadku innych multimediów, takich jak filmy lub pliki GIF, udostępnij także wiele opcji rozmiaru. Filmy powinny mieć źródła MP4 w różnych rozdzielczościach. Pliki GIF i ramki iframe (takie jak umieszczone na YouTube) powinny mieć ograniczenia szerokości, które dopasowują się do każdego ekranu.
Pamiętaj o tych wskazówkach, a obrazy, filmy i inne multimedia przesyłane pocztą e-mail będą pięknie wyświetlane na każdym urządzeniu. Twoi subskrybenci docenią e-mail, który wygląda świetnie i jest łatwy do odczytania, gdziekolwiek go otworzy.
Rozmiar czcionki w ems, a nie w pikselach
Aby projekt e-maila był dostosowany do urządzeń mobilnych, zmień rozmiar czcionki w formacie ems, a nie w pikselach. Piksele to stałe jednostki, więc jeśli ktoś powiększy przeglądarkę, tekst może zostać zniekształcony. Z drugiej strony Ems to jednostki względne, które skalują się wraz z ustawieniami użytkownika.
Użyj responsywnego środowiska e-mailowego
Responsywna platforma e-mail ma gotowe komponenty, które automatycznie dopasowują się do dowolnej szerokości ekranu. Niektóre popularne opcje to MJML, Foundation for Emails i Ink. Te frameworki używają ems do zmiany rozmiaru, więc nie musisz się martwić samodzielnym wykonaniem konwersji.
Jeśli nie używasz frameworka, przekonwertuj piksele na ems
Jeśli chcesz mieć pełną kontrolę nad swoim CSS i wolisz nie używać frameworka, będziesz musiał przekonwertować dowolne rozmiary pikseli na ems. Oto jak:
- Określ podstawowy rozmiar czcionki w pikselach. Powiedzmy, że jest to 16 pikseli.
- Zamień to na ems. 1em = 16px (twój podstawowy rozmiar), więc 16px = 1em.
- Dowolny rozmiar, którego chcesz użyć, podziel przez 16 pikseli i pomnóż przez 1em. Na przykład dla nagłówka o rozmiarze 24 pikseli 24 pikseli/16 pikseli = 1,5 em.
- Zamień wszystkie rozmiary pikseli w swoim CSS na ich odpowiedniki.
Dostosuj swoje treści w sposób responsywny
Aby projekt e-maila był responsywny, musisz dopasować treść tak, aby wyświetlała się prawidłowo na ekranie dowolnego rozmiaru. Wykonaj następujące kroki:
Użyj pomiarów płynów
Zamiast używać stałych szerokości pikseli dla kolumn, obrazów i kontenerów, użyj wartości procentowych. Umożliwi to skalowanie treści proporcjonalnie do szerokości ekranu. Na przykład zamiast obrazu o szerokości = „600px” użyj szerokości = „50%”.
Unikaj ciężkich stylizacji
Zadbaj o prostotę poczty e-mail, ograniczając użycie niestandardowej stylizacji, która nie będzie poprawnie wyświetlana w niektórych klientach poczty e-mail. Polegaj na podstawowych tabelach HTML, stylach wbudowanych i atrybucie wyrównania układu. W razie potrzeby wyśrodkuj elementy.
Wykonanie tych praktycznych kroków sprawi, że treść e-maili będzie pięknie wyświetlana niezależnie od tego, jakiego urządzenia używają Twoi czytelnicy do otwierania skrzynek odbiorczych. Warto stworzyć świetny, responsywny projekt e-maili dla subskrybentów.
Testuj, testuj i jeszcze raz testuj
Sprawdź jak wyświetla się na urządzeniach mobilnych
Wszyscy wiemy, że większość ludzi korzysta z urządzeń mobilnych, aby uzyskać dostęp do poczty e-mail. Aby mieć pewność, że Twój e-mail jest dostosowany do urządzeń mobilnych, przetestuj go, wysyłając go na różne telefony komórkowe. Sprawdź je na Androidzie, iPhone'ach i tabletach. Sprawdź, jak obrazy, przyciski i tekst są wyświetlane w trybie pionowym i poziomym.
Przetestuj na głównych klientach poczty e-mail
Nie wszyscy klienci poczty e-mail wyświetlają wiadomości e-mail w ten sam sposób. Przeprowadź testy Gmaila, Outlooka, Yahoo Mail i innych głównych usług e-mailowych, z których często korzystają Twoi subskrybenci. Poszukaj problemów z wyświetlaniem obrazów, osadzonych łączy, przycisków i innych elementów interaktywnych. Wprowadź zmiany w kodzie, aby rozwiązać wszelkie problemy z wyświetlaniem i zapewnić spójność między klientami.
Sprawdź, jak wygląda treść zastępcza
W przypadku subskrybentów, którzy mają wyłączone obrazy w kliencie poczty e-mail, zamiast obrazów pojawi się treść zastępcza. Dokładnie sprawdź, czy cały tekst alternatywny, podpisy obrazów i opisy obrazów mają sens same w sobie i zapewniają kontekst dla treści wiadomości e-mail. Treść zastępcza powinna nadal zapewniać dobre wrażenia czytelnikowi, nawet bez obrazów.
Recenzja usługi renderowania poczty e-mail
Skorzystaj z bezpłatnej usługi testowania renderowania wiadomości e-mail, takiej jak Litmus, Email on Acid lub Mosaico, aby sprawdzić, jak projekt wiadomości e-mail renderuje się jednocześnie w szerokiej gamie klientów poczty e-mail i urządzeń. Dostarczają raporty podkreślające wszelkie problemy, którymi należy się zająć, aby poprawić responsywność wiadomości e-mail. Wprowadź zmiany w kodzie i ponownie przesyłaj testowe e-maile, aż raporty będą czyste.
Dokładnie sprawdź linki i elementy interaktywne
Osadzone łącza, przyciski i inne interaktywne elementy w wiadomości e-mail muszą działać poprawnie na wszystkich platformach. Sprawdź dokładnie, czy linki prowadzą do zamierzonego miejsca docelowego i czy wszystkie przyciski lub formularze działają zgodnie z oczekiwaniami. Przetestuj je wielokrotnie, aby przed uruchomieniem kampanii upewnić się, że nie ma uszkodzonych linków ani niedziałających elementów.
Aby udoskonalić responsywny projekt wiadomości e-mail, potrzebne są ciągłe testy i udoskonalenia. Jednak włożenie wysiłku z góry zaowocuje wiadomością e-mail o szerokim zasięgu i wysokim zaangażowaniu na wszystkich urządzeniach i klientach poczty e-mail Twoich subskrybentów.
Rozwiązywanie typowych problemów z responsywną pocztą e-mail
Przepełnienie treści na urządzeniach mobilnych
- Używaj układów jednokolumnowych. Wiele kolumn rzadko działa dobrze w wiadomościach e-mail.
- Staraj się, aby akapity i sekcje były krótkie i zwięzłe. Długie bloki tekstu są trudne do odczytania na małych ekranach.
- Jeśli to możliwe, używaj wypunktowań i list numerowanych. Zajmują mniej miejsca niż akapity.
- Ukryj dodatkowe treści na małych ekranach. Możesz użyć zapytań o media, aby pokazać/ukryć zawartość na podstawie szerokości ekranu.
Problemy z szerokością wiadomości e-mail
Niektórzy starsi klienci poczty e-mail mają problemy z responsywną szerokością wiadomości e-mail. Aby to naprawić:
- Ustaw maksymalną szerokość kontenera poczty e-mail. W przypadku większości e-maili zalecamy rozdzielczość 600 pikseli.
- Dodaj !important po deklaracjach szerokości, aby zastąpić niektóre CSS klienta poczty e-mail. Na przykład:
- Dodaj kod zastępczy dla programu Outlook 2007–2013. Te starsze wersje wymagają osobnej stylizacji:
Postępowanie zgodnie z tymi wskazówkami dotyczącymi rozwiązywania problemów rozwiąże najczęstsze problemy z responsywną pocztą e-mail. Daj mi znać, jeśli masz jeszcze jakieś pytania!
Wniosek
Oto kilka prostych sposobów, aby upewnić się, że Twoje e-maile są responsywne. Pamiętaj, że obecnie ponad 50% e-maili jest otwieranych za pośrednictwem urządzeń mobilnych, dlatego optymalizacja pod kątem mniejszych rozmiarów ekranów jest niezbędna. Przejrzyj wszystkie szablony wiadomości e-mail i wprowadź niezbędne zmiany w rozmiarze czcionki, a także rozmiarze obrazu i odstępach. Twoi odbiorcy docenią otrzymanie wiadomości e-mail, którą będą mogli przeczytać i z której będą mogli korzystać bez względu na to, z jakiego urządzenia korzystają.