Wprowadzenie do tworzenia i wysyłania wiadomości e-mail w formacie HTML dla twórców stron internetowych

Ostatnie kilka lat spędziłem na budowaniu narzędzi programistycznych — dwa z tych lat jako kierownik ds. projektowania produktów w Mailgun, usłudze pocztowej dla programistów, gdzie nauczyłem się wiele o działaniu poczty e-mail i problemach, z którymi borykają się programiści podczas tworzenia poczty w formacie HTML. W tym poście podzielę się swoją wiedzą na ten temat.

E-mail w formacie HTML: dwa słowa, które w połączeniu wywołują łzy w oczach programisty. Jeśli jesteś programistą internetowym, nieuniknione jest, że kodowanie wiadomości e-mail będzie zadaniem, które w pewnym momencie twojej kariery spadnie na twoje kolana, czy ci się to podoba, czy nie. Kodowanie wiadomości e-mail w formacie HTML to stara szkoła. Przypomnijmy sobie rok 1999, kiedy nazywaliśmy się „webmasterami” i używaliśmy Frontpage, edytorów WYSIWYG i tabel do oznaczania naszych stron internetowych.

Niewiele zmieniło się w projektowaniu e-maili. W rzeczywistości pogorszyło się. Wraz z wprowadzeniem urządzeń mobilnych i coraz większej liczby klientów poczty e-mail, mamy do czynienia z jeszcze większymi zastrzeżeniami podczas tworzenia poczty HTML.

Ostatnie kilka lat spędziłem na budowaniu narzędzi programistycznych — dwa z tych lat jako kierownik ds. projektowania produktów w Mailgun, usłudze pocztowej dla programistów, gdzie nauczyłem się wiele o działaniu poczty e-mail i problemach, z którymi borykają się programiści podczas tworzenia poczty w formacie HTML. W tym poście podzielę się swoją wiedzą na ten temat.

Dalsze czytanie na SmashingMag:

• Projektuj i buduj biuletyny e-mailowe bez utraty umysłu
• 18 szablonów wiadomości e-mail dla projektantów stron internetowych i programistów
• Łatwe kodowanie wiadomości e-mail w formacie HTML dzięki MJML
• Jak usprawnić przepływ pracy poczty e-mail dzięki konstrukcji modułowej?
  

Wprowadzenie do wysyłania e-maili

Jako programista odpowiedzialny za kampanię e-mailową lub wszystkie e-maile wysyłane przez Twoją firmę, musisz wiedzieć, jak działa poczta e-mail, jakie są wymagania prawne i jak faktycznie dostarczać wiadomości e-mail. Firmy wysyłają kilka różnych rodzajów wiadomości e-mail. Spójrzmy.

E-mail marketingowy

Wielu dostawców usług pocztowych (ESP) specjalizuje się w marketingowych i promocyjnych wiadomościach e-mail: SendPulse Email, Campaign Monitor, MailChimp, Emma, ​​Constant Contact, żeby wymienić tylko kilka. Zapewniają pełne rozwiązania do zarządzania subskrybentami, pracy z szablonami e-maili, prowadzenia zbiorczych kampanii e-mailowych i raportowania.

E-mail transakcyjny

Transakcyjna poczta e-mail obejmuje potwierdzenia, alerty, powitalne wiadomości e-mail, resetowanie hasła i tak dalej i jest zwykle wdrażana za pomocą narzędzi programistycznych i interfejsów API, takich jak SendPulse Transactional, Mailgun, SendGrid i Postmark. Narzędzia te są bardziej skoncentrowane na API, mniej oparte na CMS i WYSIWYG; jednak w połączeniu z usługą taką jak Sendwithus, mogą być jeszcze potężniejsze.

Alternatywą dla korzystania z usługi jest uruchomienie własnego serwera poczty e-mail za pomocą czegoś takiego jak Postfix. Wadą tego jest to, że od Ciebie zależy konfiguracja i konfiguracja oraz zrozumienie szczegółów technicznych wysyłania wiadomości e-mail, wdrażania śledzenia i anulowania subskrypcji oraz dostarczania wiadomości e-mail do skrzynek odbiorczych.

E-mail dotyczący cyklu życia

Usługi e-mail oparte na cyklu życia i zachowaniu pomagają we wdrażaniu, zaangażowaniu i nie tylko. Wielu ESP skoncentrowanych na marketingu również oferuje tę usługę, ale ja zwykle grupuję w tej kategorii usługi, takie jak SendPulse Automation, Intercom, Customer.io, Drip, Vero i ConvertKit.

Lista e-mailowa najlepszych praktyk

Nie kupuj list e-mailowych. Może istnieje kilka legalnych usług, ale najlepiej trzymać się z dala od kupowania list.

Z mojego doświadczenia wynika, że ​​każdy, kto kupi listę e-mailową, będzie cierpieć z powodu wielu odrzuceń, nada swojemu adresowi protokołu internetowego (IP) złą reputację, a jego e-maile będą blokowane przez dostawców usług internetowych (ISP) lub wysyłane do spamu. Według SenderBase 85% światowej poczty to spam; nie wpadaj do tego wiadra.

Podwójna akceptacja

Abonent, który musi zweryfikować swój adres e-mail, stanowi dodatkowy krok w procesie, ale ma to sens i powstrzymuje inne osoby przed nadużywaniem jego adresu e-mail poprzez zapisywanie ich na listy bez ich zgody. Pomaga również w utrzymaniu czystości listy subskrypcji i jest „w 100% poprawnym sposobem weryfikacji adresu e-mail”.

MOŻE SPAMOWAĆ?

Oto Twoje wymagania prawne dotyczące wysyłania wiadomości e-mail, narzucone przez ustawę CAN-SPAM z 2003 roku:

• Nie używaj fałszywych lub wprowadzających w błąd informacji w nagłówku.
• Nie używaj zwodniczych tematów.
• Zidentyfikuj wiadomość jako reklamę.
• Powiedz odbiorcom, gdzie się znajdujesz.
• Powiedz odbiorcom, jak zrezygnować z otrzymywania od Ciebie w przyszłości wiadomości e-mail.
• Niezwłocznie uwzględniaj prośby o rezygnację.
• Monitoruj, co robią inni w Twoim imieniu.

MailChimp ma dobrą listę wymagań prawnych dotyczących poczty e-mail według kraju.

Analityka i pomiary wydajności

Zmierz wszystko. Musisz mierzyć, aby wiedzieć, czy Twoje e-maile się poprawiają. Liczby będą się znacznie różnić w zależności od tego, czym się zajmujesz, Twojej branży, rodzaju wysyłanych wiadomości e-mail i kontekstu. Jednak ogólnie:

• 20% to dobry wskaźnik otwarć,
• 3 do 7% to dobry współczynnik klikalności,
• 5% to słaby współczynnik odrzuceń,
• 0,01% to niski współczynnik spamu,
• 1% to niski wskaźnik rezygnacji z subskrypcji.

Pamiętaj też, że współczynniki otwarć i współczynniki klikalności mogą być wskaźnikami próżności (czytaj „nie mają znaczenia”). Pod koniec dnia naprawdę chcesz śledzić cel końcowy lub konwersję. W Airbnb śledzą wynik jakości wiadomości e-mail, który jest dobrym wskaźnikiem jakości zaangażowania.

Kreator adresów URL Google może pomóc w śledzeniu, jeśli korzystasz z Google Analytics.

Wysyłanie wyniku i reputacji

Twoje e-maile mają powiązaną z nimi reputację i wynik . Wpływa to na to, jak dostawcy usług internetowych i dostawcy skrzynek pocztowych traktują Twoją pocztę e-mail, czy ją akceptują, czy odrzucają i czy wysyłają ją do skrzynki odbiorczej odbiorcy, czy bezpośrednio do spamu.

Niektóre czynniki przyczyniające się to:

• Twoja reputacja IP (sprawdź swoją z SenderScore),
• podpis Twojej domeny (patrz DKIM i SPF),
• współczynniki odrzuceń i współczynniki reklamacji.

Wysyłanie zbiorczej wiadomości e-mail

Kiedy wysyłasz dużo e-maili (wyobraź sobie kampanię z milionami e-maili), nie wszystkie są wysyłane natychmiast. Można je wysyłać tylko tak szybko, jak serwery i adresy IP mogą je obsłużyć. Pamiętaj, że Twoi odbiorcy mogą nie otrzymać e-maili dokładnie w tym samym czasie.

Tak więc, jeśli wysyłasz miliony e-maili jednocześnie, prawdopodobnie będziesz potrzebować kilku adresów IP do obsługi obciążenia.

Klienci poczty e-mail

Litmus śledzi udział klientów pocztowych w rynku na podstawie własnych wewnętrznych statystyk. Pamiętaj, że prawdopodobnie nie dotyczy to Twojej bazy klientów, ale jest to dobry wskaźnik.

Oto statystyki z grudnia 2016 r.:

• iPhone: 33%
• Gmail: 19%
• iPada: 12%
• Androida: 8%
• Poczta Apple: 7%

Pamiętaj, że nie wszystkie e-maile można śledzić . Śledzenie wiadomości e-mail odbywa się za pomocą śledzenia pikseli, więc tylko klienci z włączonymi obrazami będą zgłaszać się z powrotem.

Szablony HTML

Tworzenie szablonów wiadomości e-mail w formacie HTML może być uciążliwe. W rezultacie istnieje wiele źle zaprojektowanych wiadomości e-mail — niezgrabnych, tematycznych, gadatliwych, bezsensownych, rozpraszających. Jeśli lubisz wyzwania lub chcesz mieć niepowtarzalny wygląd i styl, budowanie własnego może być naprawdę zabawne i satysfakcjonujące. Alternatywnie dostępne są dobre szablony wiadomości e-mail:

• Szablony lakmusowe
• Naprawdę prosty responsywny szablon wiadomości e-mail w formacie HTML
• Szablony wiadomości e-mail w formacie HTML
• Fundacja dla e-maili 2

Tworzenie szablonów wiadomości e-mail w formacie HTML

Teraz wiesz, jak poprawnie skonfigurować i wysyłać e-maile. Następną decyzją, jaką podejmiesz, będzie kodowanie własnego szablonu HTML. Jest to nieco bardziej skomplikowane niż kodowanie przeciętnej strony internetowej. Zanurzmy się.

Silniki renderujące klienta

Projektowanie e-maili jest wciąż w ciemnych wiekach. Dzięki licznym klientom i urządzeniom poczty e-mail Twoja poczta będzie renderowana dla użytkowników na różne sposoby.

Klienci poczty e-mail używają różnych silników do renderowania wiadomości e-mail w formacie HTML:

• Apple Mail, Outlook dla komputerów Mac, Android Mail i iOS Mail używają WebKit .
• Outlook 2000, 2002 i 2003 używają Internet Explorera .
• Outlook 2007, 2010 i 2013 używają Microsoft Word (tak, Word!).
• Klienci sieci Web używają odpowiedniego silnika przeglądarki (na przykład Safari używa WebKit, a Chrome używa Blink).

Klienci dodadzą również swój własny smak stylów do Twojego. Na przykład Gmail ustawia wszystkie czcionki <td> na font-family: Arial,sans-serif; .

Spójrz na własne statystyki, aby wiedzieć, do czego projektować.

Obsługa Gmaila dla wbudowanych CSS i zapytań o media

Dopiero niedawno Google ogłosił wsparcie dla osadzonych CSS i zapytań o media w Gmailu. To ogromne dla branży rozwoju poczty e-mail.

Od września 2016 r. Gmail będzie obsługiwał wiele właściwości CSS, co znacznie ułatwia tworzenie szablonów dla Gmaila.

Używanie tabel HTML do układu

Divs mają problemy z pozycjonowaniem i modelem pudełkowym w różnych klientach — w szczególności tych, które używają Microsoft Word do renderowania (np. Outlook). Możesz użyć div, jeśli chcesz, ale bezpieczniej jest kodować tak, jak w 1999 roku i trzymać się tabel . To znaczy:

• <table> zamiast <div> ,
• #FFFFFF zamiast #FFF ,
• padding zamiast margin ,
• CSS2 zamiast CSS3,
• HTML4 zamiast HTML5,
• background-color zamiast background ,
• atrybuty HTML zamiast CSS,
• wbudowany CSS zamiast arkuszy stylów lub bloków <style> .

To są najlepsze praktyki. Z pewnością możesz zignorować bezpieczną trasę i wyjść poza nią.

Korzystając z tabel, nie zapomnij border="0" cellpadding="0" cellspacing="0" . Jeśli używasz Premailera, ma on specjalne deklaracje CSS do stosowania tych atrybutów HTML.

Wbudowany CSS

Niektórzy klienci (w szczególności Gmail do niedawna) usuwają wszelkie błędy CSS, które nie są wbudowane . Masz tutaj kilka opcji:

• pisz CSS w linii, jak idziesz,
• korzystać z internetowego inlinera CSS,
• użyj programistycznego inlinera CSS,
• pozwól swojemu ESP obsłużyć inlining za Ciebie (jeśli go obsługuje).

Pisanie w trybie inline nie jest rozwiązaniem skalowalnym ani konserwowalnym, więc raczej tego nie polecam, ale wiem, że wielu programistów poczty e-mail woli to, aby zachować 100% kontrolę. Jeśli piszesz swój CSS ręcznie, polecam korzystanie z fragmentów kodu i/lub języka szablonów z częściami i pomocnikami. Dzięki temu nie będziesz musiał się powtarzać.

Inlinery internetowe obejmują Responsive CSS Inliner HTML Email i Responsive Email Inliner Foundation for Email.

Dla programistycznego inlinera polecam moduł Node.js Juice. Klejnot Premailer i Roadie to dobre alternatywy dla Rubinów.

guziki

Próba uzyskania idealnego przycisku cross-client jest bolesna. Jak wspomniano, powinieneś używać tabel i komórek tabeli do prawie wszystkiego, w tym przycisków.

Preferuję następujące rozwiązanie. Oto, jak zwykle stylizować przycisk w Internecie:

 <a href="#" class="btn btn-primary">Click Here</a>

Zamiast tego napisz to tak:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary"> <tr> <td align="center"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="" target="_blank">Take action now</a> </td> </tr> </table> </td> </tr> </table>

Następnie, gdy Twój CSS zostanie wstawiony, będzie wyglądać tak:

 <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" width="100%"> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" bgcolor="#3498db" align="center"> <a href="">Take action now</a> </td> </tr> </table> </td> </tr> </table> 

Co tu się dzieje? Pierwszy <td> to wrapper, który pomoże nam wyśrodkować przycisk. Drugi <td> to rozmiar przycisku. Niektórzy klienci (np. Outlook) nie rozpoznają dopełnienia znacznika <a> , więc wypełniamy kolor tła komórki tabeli. Tag <a> zajmuje wtedy miejsce dostępne w drugim tagu <td> i cały obszar staje się klikalny. Sprawdź kod i testy klienta na Litmus.

To tylko jeden sposób na zaimplementowanie przycisków w wiadomościach e-mail. Wprawdzie nie zawsze wygląda to identycznie w każdym kliencie, ale sieć też nie zawsze jest idealna do pikseli. Wolę to, ponieważ jest prostsze i nie wymaga używania zasobów graficznych ani VML.

Co to jest VML? Jeśli spędziłeś jakiś czas na opracowywaniu e-maili, prawdopodobnie natknąłeś się na pewne odniesienia do tego. Vector Markup Language (VML) jest obsługiwany przez starsze wersje programu Outlook . Według Microsoftu, od Internet Explorera (IE) 10, VML jest przestarzały, co oznacza, że ​​nie jest już wspierany w nowych wersjach IE. Jednak dopóki istnieją programy Outlook 2007, 2010 i 2013, zobaczysz, że jest on używany, zwykle do obrazów tła .

Typografia

Ogólnie rzecz biorąc, najłatwiej jest trzymać się standardowych czcionek systemowych. Obejmuje to Helvetica, Arial i tak dalej. Możemy jednak używać czcionek internetowych , takich jak Google Fonts. Umieść je za warunkowym zapytaniem o media WebKit , aby Outlook ich nie zepsuł:

 <style> @import url(https://fonts.googleapis.com/css?family=Pacifico); /* Type styles for all clients */ h1 { font-family: Helvetica, Arial, serif; } /* Type styles for WebKit clients */ @media screen and (-webkit-min-device-pixel-ratio:0) { h1 { font-family: Pacifico, Helvetica, Arial, serif !important; } } </style>

Pamiętaj, aby podać rodzinę czcionek, rozmiar i kolor czcionki dla każdego <td> , w przeciwnym razie ryzykujesz, że klient nadpisze starannie wybrane style pisma.

Warunkowe

Możemy zastosować określone style CSS oraz pokazać lub ukryć elementy i treści dla różnych wersji Outlooka.

Poniższe informacje dotyczą wszystkich wersji programu Outlook opartych na programie Microsoft Word:

 <!--[if mso]> Only Microsoft Word-based versions of Outlook will see this. <![endif]-->

Ten następny fragment dotyczy wszystkich wersji Outlooka opartych na IE:

 <!--[if (IE)]> Only IE-based versions of Outlook will see this. <![endif]-->

Możemy również kierować reklamy na określone numery wersji programu Outlook:

 <!--[if mso 12]> Only Outlook 2007 will see this. <![endif]-->

Możemy kierować reklamy do klientów korzystających z WebKit za pomocą zapytania o media:

 .special-webkit-element { display: none; } @media screen and (-webkit-min-device-pixel-ratio:0) { .special-webkit-element { display: block !important; } }

Obrazy i multimedia

Obrazy w e-mailu

Niektórzy klienci domyślnie wyświetlają obrazy. Niektórzy nie. Pamiętaj o tym, umieszczając obrazy w treści wiadomości e-mail. Ma to również wpływ na dane śledzenia, ponieważ do śledzenia otwarć zwykle używa się obrazów.

• Outlook domyślnie blokuje renderowanie obrazów .
• Apple Mail nie.
• Gmail już nie (już).

Pamiętaj, aby do wszystkich obrazów dołączyć dobry tekst alt . Tekst może albo powiedzieć użytkownikowi, co mówi obraz, albo po prostu opisać, co to jest (na przykład „logo firmy”). Możesz wykazać się kreatywnością dzięki tekstowi alt dla klientów, którzy wyłączają obrazy, tak jak robi to Email Monks:

Pamiętaj o podstawowym resetowaniu wszystkich obrazów:

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/" alt="" width="" height="" border="0">

Większość klientów obsługuje animowane pliki GIF . Wersje programu Outlook od 2007 do 2013 nie obsługują animowanych plików GIF, zamiast tego powracają do pierwszej klatki.

Pamiętaj, aby skompresować swoje zasoby multimedialne i przesłać je do sieci dostarczania treści (CDN), takiej jak Amazon Web Services, Cloudinary lub imgix. Większość marketingowych dostawców usług internetowych poradzi sobie z tym za Ciebie.

Skalowalna grafika wektorowa (SVG) ma wiele zalet w sieci. Jak można się spodziewać, obsługa poczty e-mail jest różna, a SVG wymaga kilku awaryjnych hacków lub instrukcji warunkowych. Zazwyczaj zalecam trzymanie się z dala od SVG w wiadomościach e-mail, ale jeśli chcesz potraktować to poważnie, CSS-Tricks ma przewodnik dotyczący obsługi SVG w wiadomościach e-mail.

W przypadku obrazów gotowych na siatkówkę należy dostarczyć większy obraz (od 1,5× do 3×) i zmienić jego rozmiar. Zazwyczaj zapisuję obraz niskiej jakości, który ma wymiary 2×, co działa dobrze. (Więcej o tej technice pisałem.)

Pamiętaj, że w przypadku programu Outlook musisz zadeklarować szerokość obrazu za pomocą atrybutu width . W przeciwnym razie program Outlook może renderować rzeczywistą szerokość obrazu i zepsuć wiadomość e-mail.

Wideo w e-mailu

Wideo jest obsługiwane w iOS, Apple Mail i Outlook.com. Możesz użyć zapytań o media, aby pokazać lub ukryć wideo na podstawie klienta. Email on Acid zawiera więcej informacji na temat obsługi wideo przez e-mail.

Aby uzyskać inspirację, zapoznaj się z samouczkiem Kevina Mandeville'a na temat kodowania wideo HTML5 jako tła w wiadomości e-mail — imponujące rzeczy i warte obejrzenia.

Formularze w e-mailu

Obsługa elementów formularza jest różna. Staraj się trzymać z daleka i połącz się z zewnętrznym formularzem , jeśli go potrzebujesz. Campaign Monitor oferuje porady dotyczące formularzy.

Oczywiście zależy to od Twoich celów. Trzymanie się z dala od formularzy jest bezpieczniejsze, ale Rebelmail i Mixmax zrobiły ciekawe rzeczy z formularzami do ankiet i e-commerce, z dobrą obsługą awaryjną.

Działania Gmaila

Google udostępnia przydatne czynności dla Gmaila. Prawdopodobnie widziałeś je na GitHub w przypadku problemów lub na Amazon w przypadku zamówień.

Dodanie kodu jest proste. Masz dwie opcje:

• JSON-LD
• mikrodane

Dodanie do białej listy wymaga jeszcze kilku kroków. Możesz testować działania Gmaila z adresem @gmail.com .

Tekst w nagłówku

Coś ważnego, ale często zapominanego, to tekst w preheaderze. Niektórzy klienci wyświetlają tekst podglądu obok lub pod wierszem tematu . Do tych klientów należą iOS, Apple Mail, Outlook 2013, Gmail i AOL.

Klienci będą pobierać pierwszy fragment tekstu, który znajdą w treści wiadomości e-mail i wyświetlić go tutaj. Wykorzystaj to w pełni i dodaj ukryty element do zawartości twojego ciała, który pojawia się jako pierwszy. Ten tekst powinien stanowić dodatkową zachętę dla użytkownika do otwarcia wiadomości e-mail. Ukryj tekst w ten sposób:

 <span>Preheader text goes here</span>

Użyj narzędzia do nagłówków i tematów e-maili Austina Woodalla, aby wyświetlić podgląd tematów i nagłówków wiadomości e-mail.

Testowanie e-maila

Nie wydaje mi się, żebym kiedykolwiek wysłał wiadomość e-mail z sukcesem za pierwszym razem. Zawsze jest coś do naprawienia, zawsze literówka, zawsze problem z renderowaniem w Outlooku, zawsze coś, o czym zapomniałem dodać.

Swoją pocztę e-mail możesz przetestować na kilka sposobów:

• Wyślij wiadomość e-mail do siebie i sprawdź ją na kliencie stacjonarnym (Outlook), kliencie sieciowym (Gmail) i kliencie mobilnym (iOS Mail).
• Zautomatyzuj testy za pomocą lakmusa lub e-maila na kwasie.
• Sprawdź zawartość i sprawdź rendery układu.
• Test A/B różnych rodzajów treści, długości treści i tematów.

Jak wysyłać do siebie e-maile w formacie HTML? Dobre pytanie. To trudniejsze niż myślisz. PutsMail pozwala to zrobić dość łatwo, a Thunderbird umożliwia komponowanie za pomocą edytora HTML.

Wieloczęściowy MIME

Wiadomość e-mail w postaci zwykłego tekstu to po prostu zwykły tekst. E-mail w formacie HTML to po prostu HTML. Większość wysyłanych lub odbieranych wiadomości e-mail to wieloczęściowe wiadomości e-mail MIME (Multipurpose Internet Mail Extensions) (nie mylić z typem MIME). Ten standard łączy zarówno zwykły tekst, jak i HTML, pozostawiając odbiorcy decyzję, który renderować.

Wysyłając wiadomość e-mail, zarówno transakcyjną, jak i zbiorczą, dołącz zarówno wersję HTML, jak i zwykły tekst . Nawet jeśli w twoim umyśle każdy używa klienta, który renderuje HTML, nadal wysyłaj zwykły tekst.

Należy również zauważyć, że niektórzy klienci renderują wiadomości e-mail w postaci zwykłego tekstu jako HTML; na przykład Gmail doda kilka domyślnych stylów i zamieni adresy URL w linki. Większość ESP skonstruuje MIME za Ciebie, więc nie musisz się tym martwić. Niektórzy stworzą również wersję tekstową, opartą na Twoim kodzie HTML.

Wskazówka dla profesjonalistów: w Gmailu wybierz "Pokaż oryginał" z menu rozwijanego, aby zobaczyć pełny MIME.

Pojawiła się nowa część MIME: text/watch-html . Ta zawartość będzie wyświetlana tylko w Apple Watch (i wszystkich innych klientach obsługujących ten typ MIME w przyszłości).

Dostępność

Jeśli w sieci przestrzegasz standardów i najlepszych praktyk oraz używasz znaczników semantycznych i prawidłowej składni HTML , masz tendencję do uzyskiwania podstawowych ułatwień dostępu po wyjęciu z pudełka. Niestety, w przypadku poczty e-mail, z powodu naszych nadmiernych ataków hakerskich i słabej obsługi HTML, dostępność jest często ignorowana.

Widziałem niewiele dyskusji na temat dostępności poczty e-mail, ale wyróżnia się post Marka Robbinsa na temat dostępności. Zaleca, co następuje:

• Dodaj role="presentation" do każdej tabeli, aby było jasne, że tabela jest używana do układu.
• Dodaj tekst alt z zrozumiałymi opisami.
• Jeśli nie potrzebujesz lub nie chcesz tekstu alt , użyj alt="" , aby czytniki ekranu wiedzieli, że ma być pusty.
• Używaj semantycznych tagów HTML, takich jak <p> i <h1> , jeśli ma to zastosowanie.
• Użyj atrybutu role dla elementów takich jak nagłówki i stopki (na przykład role="header" ).

Responsywne projektowanie e-maili

• Liczba otwieranych wiadomości e-mail na urządzeniach mobilnych wynosi 50% i rośnie. Dokładne dane zależą od tego, który raport sprawdzasz i jakich odbiorców obsługujesz, ale myślę, że wszyscy możemy się zgodzić, że jest to ważne.
• Udział w rynku klientów poczty e-mail według stanu na sierpień 2016 r. wyniósł iPhone'a na 33%, iPada na 11%, a Androida na 10% (to ponad 50%!).
• MailChimp odkrył, że liczba unikalnych kliknięć wśród użytkowników mobilnych w kampaniach responsywnych wzrosła z 2,7 do 3,1% — prawie 15%.

„Responsywne projektowanie stron internetowych” to fraza ukuta przez Ethana Marcotte w 2010 roku:

Łącząc płynne, oparte na siatce układy i zapytania o media CSS3, możemy stworzyć jeden projekt, który, cóż, odpowiada kształtowi renderującego go wyświetlacza.

W świecie poczty e-mail nadal możemy korzystać z płynnego projektowania, układów opartych na siatce i zapytań o media . Problem polega na tym, że nie wszyscy klienci je obsługują. Dlatego po drodze potrzebujemy kilku hacków .

Do niedawna Gmail nie obsługiwał zapytań o media. Na szczęście od września 2016 r. większość klientów to robi. Jednak kilku klientów mobilnych nadal tego nie robi, w tym Yahoo, Windows Phone 8 i Gmail dla Androida.

W świecie poczty e-mail stosuje się kilka technik, aby obejść brak obsługi zapytań o media. Niektóre z terminów, które usłyszysz, to „płynny”, „adaptacyjny”, „responsywny”, „hybrydowy” i „gąbczasty”.

Płyn

Najłatwiejszym rozwiązaniem jest trzymanie się jednej kolumny i sprawienie, aby Twoje e-maile były płynne. Oznacza to, że w miarę zmniejszania się widocznego obszaru zmniejsza się obszar zawartości.

 .container { max-width: 600px; width: 100%; }

Responsywne i Adaptacyjne

Korzystając z zapytań o media i punktów przerwania, możemy zapewnić alternatywne style dla rzutni o różnych rozmiarach. Możemy również ukryć lub pokazać elementy.

Zaczyna się to komplikować, gdy wprowadzisz siatkę i kolumny. Możesz mieć układ dwukolumnowy, a następnie przełączyć się na układ jednokolumnowy skumulowany poniżej określonej szerokości widocznego obszaru.

Ale , jak widzieliśmy, zapytania o media nie są wszędzie obsługiwane, więc nie zawsze jest to niezawodne.

Hybrydowy i Gąbczasty

Ta technika wykorzystuje trochę płynności, trochę responsywności i kilka hacków do obsługi programu Outlook. Upewniamy się również, że kolumny stosują się bez zapytań o media.

Ta technika została nakreślona przez ActionRocket, a Nicole Merlin napisała na jej temat świetny samouczek krok po kroku.

Oto fragment kodu, którego używam do tworzenia większości moich e-maili.

 <!--[if (gte mso 9)|(IE)]> <table align="left" border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> <td align="left" valign="top" width="50%"> <![endif]--> <div class="span-3">...</div> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->

 @media only screen and (max-width: 620px) { .span-3 { max-width: none !important; width: 100% !important; } .span-3 > table { max-width: 100% !important; width: 100% !important; } }

Spójrz na gąbczaste repozytorium open-source Fabio Carneiro na GitHub i przeczytaj podejście Stiga do kodowania e-maili z myślą o urządzeniach mobilnych. Remi Parmentier ma również inną responsywną technikę, która nie wymaga zapytań o media i korzysta z funkcji calc() .

Responsywne obrazy

Jak wspomniano, użyj obrazów siatkówki przy 1,5× do 3× i ustaw wymiary obrazu w linii.

 <img src="https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo.png" height="100" width="600" alt="Company Logo">

Nie możemy polegać na max-width: 100%; ponieważ niektórzy klienci to ignorują. Będziesz także chciał osadzić następujący kod CSS:

 @media only screen and (max-width: 620px) { img { height: auto !important; max-width: 100% !important; width: auto !important; } }

Automatyzacja przepływu pracy

Proces tworzenia kuloodpornej wiadomości e-mail jest złożony. Jest wiele kroków i jest miejsce na wiele rzeczy, które mogą pójść nie tak.

Jak każde monotonne zadanie z krokami, polecam automatyzację tego, co się da, aby raz zbudować system i ułatwić przyszłą pracę.

Brian Graves ma dobry post na temat tworzenia modułowych wiadomości e-mail. Tak jak masz system projektowania i bibliotekę wzorów dla witryny internetowej lub aplikacji, powinieneś to zrobić dla poczty e-mail, dzięki czemu komponenty można ponownie wykorzystać i wiadomości e-mail będą spójne w całym produkcie i firmie.

Kevin Mandeville zaleca używanie fragmentów kodu wielokrotnego użytku w celu optymalizacji przepływu pracy, dzięki czemu nie trzeba ciągle przepisywać kodu . W swoim poście opisuje, jak korzystać z fragmentów w nowoczesnych edytorach (takich jak Atom i Sublime) i wskazuje na dostarczoną przez społeczność bibliotekę fragmentów hostowaną przez Litmus.

Ze swojej strony przygotowałem i udostępniłem przepływ pracy Grunt do automatyzacji kompilacji wiadomości e-mail. Wykonuje różne zadania, takie jak wstawianie CSS , kompresowanie obrazów, przesyłanie obrazów do CDN, wysyłanie podglądu i testowanie za pomocą Litmusa, a wszystko to za pomocą jednego polecenia. Jeśli jesteś nowy w Grunt, napisałem szczegółowy samouczek na temat tego, jak to działa. Foundation for Email ma również kilka świetnych narzędzi do automatyzacji dla programistów, podobnie jak Mailjet z jego responsywnym frameworkiem pocztowym MJML.

Patrząc w przyszłość

Google niedawno wdrożył obsługę zapytań o media; Microsoft właśnie nawiązał współpracę z Litmusem, aby „ulepszyć pocztę e-mail”; a Alto firmy AOL obsługuje teraz responsywną pocztę e-mail. Tak więc przyszłość wygląda znacznie jaśniej.

Coraz więcej firm i programistów eksperymentuje z tym, co jest możliwe w technologii poczty elektronicznej: animacja CSS, audio, koszyki w e-mailu. Spodziewaj się, że w 2017 r. pojawi się więcej przypadków interaktywnych i kinetycznych wiadomości e-mail.

Wniosek

Projektowanie i tworzenie wiadomości e-mail to bestia. To trochę jak budowanie strony internetowej… 10 lat temu . Dostawcy klientów poczty e-mail nie byli tak postępowi w przyjmowaniu nowych standardów, jak dostawcy przeglądarek internetowych, a my, użytkownicy i firmy, nie przyjmujemy nowych klientów poczty e-mail tak, jak robimy to w przypadku przeglądarek internetowych. Dodaj do tego wzrost popularności urządzeń mobilnych, a zostaniemy w takim stanie, że musimy obsługiwać zawiłą mieszankę klientów i wersji .

Moje wprowadzenie tutaj jest ogólnym przeglądem; możesz zagłębić się w każdy z tych punktów. Mamy nadzieję, że dało ci dobry wgląd w świat tworzenia i wysyłania e-maili, a fragmenty kodu i zasoby dodały ci kilka godzin wstecz do twojego życia.

Polecane zasoby

• Naprawdę prosty responsywny szablon wiadomości e-mail w formacie HTML, Lee Munroe (mój darmowy szablon wiadomości e-mail o otwartym kodzie źródłowym)
• Profesjonalne projektowanie e-maili , Jason Rodriguez
• „Demaskowanie wiadomości e-mail w formacie HTML” (oczywiście), Dan Denney, Code School
• „Najlepsze projekty e-maili we wszechświecie (które trafiły do ​​mojej skrzynki odbiorczej)” Naprawdę dobre e-maile
• „Przykłady i techniki dynamicznych i interaktywnych (kinetycznych) wiadomości e-mail”, Justin Khoo

Blogi do obserwowania

• Monitor kampanii
• PocztaChimp
• Lakmus
• E-mail na temat kwasu