Dostarczanie odcinka 4: Zrozumienie obrazów tła w wiadomości e-mail

W tym odcinku Dostarczanie przyjrzymy się kluczowej technice dla projektantów wiadomości e-mail: skromnemu, ale potężnemu obrazowi tła. Dowiedz się, dlaczego obrazy tła są ważne, jak je kodować przy użyciu różnych technik i jak te różne metody są porównywane w różnych klientach poczty e-mail. Ten odcinek jest uzupełnieniem naszego niedawno zaktualizowanego Kompletnego przewodnika po obrazach tła w wiadomościach e-mail. Zapoznaj się z poradami, sztuczkami i kodem.

Pamiętaj, aby zasubskrybować Dostarczanie w iTunes lub Spotify, aby słuchać przyszłych odcinków i dołączać do rozmowy na Twitterze, używając hashtagu #DeliveringPodcast.

Transkrypcja odcinka

Istnieje wiele sposobów na dodawanie ciekawych wizualizacji do kampanii e-mailowych.

Chociaż CSS pozwala na wiele różnych opcji stylizacji, czasami potrzebujesz tylko dobrego obrazu. Ale jaki jest najlepszy sposób wykorzystania obrazów w wiadomościach e-mail? W tym odcinku Dostarczanie przyjrzymy się kluczowej technice dla projektantów wiadomości e-mail: skromnemu, ale potężnemu obrazowi tła.

Jestem Jason Rodriguez i witam w Delivering, podkaście o e-mail marketingu i jego miejscu na świecie. Dostarczanie jest dostarczane przez Litmus, wiodącą w branży platformę dla e-mail marketerów. Dołącz do ponad 600 000 profesjonalistów zajmujących się e-mailami, którzy używają Litmusa do tworzenia, przeglądania, testowania i śledzenia lepszych kampanii e-mail marketingowych. Dowiedz się więcej i uzyskaj bezpłatny 7-dniowy okres próbny na Litmus.com.

Obrazy są podstawą kampanii e-mail marketingowych. Są używane do zdjęć produktów, uroczych ilustracji, logo, ikon, a w niektórych przypadkach do całej wiadomości e-mail. Szczególnie w świecie handlu detalicznego marketerzy są skłonni do projektowania kampanii w całości w narzędziach takich jak Photoshop, dzielenia tych obrazów i wrzucania ich do HTML przed wysłaniem do subskrybentów. Wszystkie informacje — nagłówki, teksty, wezwania do działania, cokolwiek — znajdują się w obrazach.

To dobry sposób na przestrzeganie wytycznych dotyczących marki i szybkie tworzenie wiadomości e-mail, ale korzystanie z obrazów w ten sposób ma pewne poważne wady.

Po pierwsze, wiele klientów poczty e-mail domyślnie wyłącza obrazy. Obrazy — i cała zawartość — w wiadomości e-mail są dosłownie rozładowywane przez klienta poczty e-mail, co skutkuje pustymi kampaniami, które dla wielu subskrybentów wyglądają na uszkodzone.

Po drugie, subskrybenci korzystający z technologii pomocniczych, takich jak oprogramowanie czytnika ekranu, nie będą mogli zapoznać się z treścią wiadomości e-mail.

W obu przypadkach wszystkie kopie, umowy i wartości, które poświęciłeś czas na kampanię e-mailową, w zasadzie zostały zmarnowane. Musi być lepsze rozwiązanie, prawda?

Wprowadź obrazy tła.

Obrazy tła to po prostu obrazy, takie jak wszystkie inne w wiadomości e-mail. Są to pliki przesłane na serwer i połączone w kodzie. Różnica polega na tym, że obrazy tła są stosowane nie za pomocą znacznika HTML obrazu, ale jako atrybut lub CSS w innych elementach HTML.

Istnieją cztery sposoby kodowania obrazów tła, każdy z ich zaletami i wadami.

Pierwsza, bardziej tradycyjna metoda, polega na zastosowaniu atrybutu tła do komórki tabeli. Wartość atrybutu to tylko adres URL, który wskazuje na obraz. Ta metoda jest fajna, ponieważ jest dość dobrze obsługiwana przez klientów poczty e-mail. Największym minusem jest jednak to, że nie jest zbyt elastyczny. Nie możesz kontrolować rozmiaru obrazu tła, a obraz domyślnie będzie się powtarzał w całym elemencie.

Możesz także ładować obrazy tła za pomocą CSS. Poniższe dwie techniki wykorzystują tę samą metodę, ale są stosowane w inny sposób.

CSS ma wiele właściwości tła, w szczególności: background-image, background-repeat, background-position, background-size i background-color. Istnieje również bardzo pomocna skrócona właściwość tła.

Korzystając z tych właściwości, możesz dołączyć adres URL do obrazu, kontrolować jego położenie i powtarzanie, a także włączyć kolor zastępczy, gdy obrazy nie są ładowane.

Pierwszym sposobem wykorzystania tła CSS jest osadzenie tych właściwości w bloku stylów w nagłówku wiadomości e-mail. Po prostu skieruj element HTML, taki jak komórka tabeli lub div, i weź go. Ta metoda jest łatwa do zakodowania, odczytania i utrzymania, ale style osadzone nie są obsługiwane we wszystkich klientach poczty e-mail.

Bardziej niezawodną metodą jest uwzględnienie tych właściwości w elemencie HTML. Może to być bałaganiarskie, jeśli używasz obrazów tła na wielu elementach, ale ponieważ jesteśmy maniakami poczty e-mail i przywykliśmy do używania wbudowanych obrazów, nadal można to doskonale zarządzać.

Ostatnim sposobem dołączania obrazów tła do wiadomości e-mail jest użycie tak zwanych „tła kuloodpornego”. Kuloodporne tła opierają się na metodzie atrybutów HTML, dołączając również do kodu VML — lub Vector Markup Language —. VML to zastrzeżony język firmy Microsoft używany w produktach pakietu Office, takich jak Outlook. Stosując obrazy tła w VML, będą one działać w programie Microsoft Outlook, co niekoniecznie jest prawdą w przypadku innych wcześniej omówionych metod.

Główną wadą korzystania z VML jest to, że nie jest zbyt łatwo dostępna ani dobrze udokumentowana, a ponadto dodaje dużo kodu, który jest, szczerze mówiąc, trudny do zrozumienia. Aby to ułatwić, nasi przyjaciele z Campaign Monitor zbudowali niesamowite narzędzie do generowania kuloodpornych teł. Możesz go wygodnie znaleźć na backgrounds.cm.

Niezależnie od wybranej metody, korzystanie z obrazów tła w wiadomościach e-mail zapewnia niesamowite korzyści w porównaniu z tradycyjnie kodowanymi obrazami.

Główną korzyścią jest dostępność. Używając obrazów tła, możesz polegać na żywym tekście HTML zamiast obrazach dla całej zawartości. Tekst nie blokuje się jak obrazy, więc nawet gdy obrazy są wyłączone, Twoja wiadomość będzie nadal czytelna dla subskrybentów. A użytkownicy, którzy wymagają czytników ekranu, będą mogli słyszeć odczytywaną treść, w przeciwieństwie do tradycyjnych obrazów.

Możesz użyć CSS, aby nadać styl tej treści HTML, aby wyglądała dobrze jak obrazy wychodzące z Photoshopa, a nawet możesz tam umieścić przyciski CTA.

Obrazy tła są zatem używane do umieszczania dodatkowej stylizacji wizualnej, niezależnie od tego, czy jest to prosty gradient, kilka fantazyjnych ujęć produktów, czy powtarzający się wzór. Działają w połączeniu z tekstem HTML, aby tworzyć piękne i użyteczne wiadomości e-mail.

Jeszcze fajniejsze jest to, że możesz robić bardziej zaawansowane rzeczy, takie jak animowane pliki GIF jako obrazy tła, zamieniać obrazy w zależności od rozmiaru ekranu lub urządzenia, a nawet kodować tło wideo, tak jak zrobiliśmy to kilka lat temu w naszym e-mailu z ogłoszeniem Litmus Live.

Jest wiele rzeczy, które wymagają pełnego wykorzystania obrazów tła. Niedawno opublikowaliśmy aktualizację naszego najlepszego przewodnika po obrazach tła w wiadomościach e-mail na blogu Litmus, którą warto sprawdzić. To świetny sposób, aby przyjrzeć się kodowi zasilającemu obrazy tła, a także uzyskać inspirację do aktualizacji własnych kampanii. Po prostu przejdź do dzisiejszych notatek pokazowych, aby uzyskać link.

I pamiętaj, aby zasubskrybować Delivering w iTunes lub Spotify, aby słuchać przyszłych odcinków, w których zagłębimy się w więcej technik tworzenia lepszych wiadomości e-mail w formacie HTML.