Najlepsze praktyki dotyczące stylizowania wiadomości e-mail HTML [zamknięte]

195

Projektuję szablon HTML biuletynu e-mail. Dowiedziałem się, że wiele klientów e-mail ignoruje połączone arkusze stylów, a wiele innych (w tym Gmail) całkowicie ignoruje deklaracje blokowe CSS. Czy atrybuty stylu wbudowanego są moim jedynym wyborem? Jakie są najlepsze praktyki dotyczące stylizowania wiadomości e-mail w formacie HTML?

Joe Mornin
źródło

Odpowiedzi:

128

Monitor kampanii ma doskonałą matrycę wsparcia, która szczegółowo opisuje obsługiwaną, a co nie jest wśród różnych klientów poczty.

Możesz skorzystać z usługi takiej jak Litmus, aby zobaczyć, jak e-mail pojawia się u kilku klientów i czy zostaną złapani przez filtry itp.

Jim
źródło
9
+1: Nie wiedziałem o Lakmusie. To wygląda na ogromną oszczędność czasu. Dziękujemy: D I nie zapomnij o wpisach na blogu w CampaignMonitor, które zawierają również kilka ciekawych wskazówek.
Horst Gutmann
249

Wcześniej brałem udział w bitwie e-mail w formacie HTML. Oto kilka moich wskazówek na temat stylizacji zapewniającej maksymalną zgodność między klientami e-mail.

  • Style Inline jesteś najlepszym przyjacielem. Absolutnie nie łącz arkuszy stylów i nie używaj <style>tagów (na przykład Gmail, paski tego tagu i cała jego zawartość).

  • Wbrew Twojemu osądowi, tabelom wykorzystania i nadużyć . <div>po prostu nie chce tego wyciąć (szczególnie w Outlooku).

  • Nie używaj obrazów tła , są nierówne i będą cię drażnić.

  • Pamiętaj, że niektórzy klienci poczty e-mail automatycznie przekształcają wpisane hiperłącza w łącza (jeśli nie zakotwiczysz <a>ich samodzielnie). Czasami może to osiągnąć negatywne efekty (powiedzmy, jeśli umieszczasz styl na każdym z hiperłączy, aby wyglądał na inny kolor).

  • Uważaj, hiperłączając rzeczywisty link z czymś innym. Na przykład nie wpisuj, http://www.google.coma następnie połącz go z https://gmail.com/. Niektórzy klienci oflagują wiadomość jako spam lub śmieci.

  • Zapisz zdjęcia w jak najmniejszej liczbie kolorów, aby zaoszczędzić na rozmiarze.

  • Jeśli to możliwe, umieść swoje zdjęcia w e-mailu. Wiadomość e-mail nie będzie musiała docierać do zewnętrznego serwera WWW, aby je pobrać, i nie będą wyświetlane jako załączniki do wiadomości e-mail.

Na koniec przetestuj, przetestuj, przetestuj ! Każdy klient poczty działa inaczej niż przeglądarka.

Michael Irigoyen
źródło
2
Podczas umieszczania koloru tła na <div>programie Outlook nie będzie przedłużać koloru poza treść, co oznacza, że ​​wypełnienie nie będzie kolorowe.
Michael Irigoyen
70
Dlaczego Internet? Dlaczego nie możemy mieć ładnego HTML dla e-maili? potrząsa pięścią
simonlchilds
8
Czy możemy uzyskać ładniejszy spam?
Brock Hensley,
6
@DavidRivers Być może należy zauważyć, że „osadzone obrazy” nie oznaczają dodawania obrazów jako załączników, zamiast tego powinny zostać uwzględnione jako ciągi zakodowane w standardzie base64 w celu zastąpienia adresu URL określonego w „normalnych” <img>tagach, tak jak poniżej:<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">
Timo
3
@MJafarMash To jest niewłaściwy sposób osadzania obrazów w wiadomości e-mail. Musisz utworzyć osobne koperty i odwołać się do obrazu na jego podstawie cid.
Michael Irigoyen,
37

Szympansy pocztowe mają całkiem niezły artykuł na temat tego, czego nie robić. (Wiem, że to brzmi niewłaściwie dla tego, czego chcesz)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

Ogólnie rzecz biorąc, wszystkie rzeczy, których się nauczyłeś, które są złą praktyką w projektowaniu stron internetowych, wydają się być jedyną opcją dla wiadomości e-mail w formacie HTML.

Podstawy to:

  • Posiadaj bezwzględne ścieżki do obrazów (np. Https://stackoverflow.com/random-image.png )
  • Użyj tabel do rozmieszczenia (nigdy nie myślałem, że polecam!)
  • Używaj stylów wbudowanych (i oldschoolowego css, najwyżej 2.1, box-shadow na przykład nie będzie działał;))

Po prostu przetestuj na jak największej liczbie klientów poczty e-mail lub użyj Litmus, jak sugeruje to ktoś inny! (podziękowania dla Jima)

EDYTOWAĆ :

Szympans poczty wykonał świetną robotę, udostępniając to narzędzie społeczności.

Stosuje twoje klasy CSS do elementów HTML w tobie!

SamMullins
źródło
1
link mailchimp jest zepsuty, być może jest to jeden z tych artykułów, kb.mailchimp.com/article/common-html-email-coding-mistakes lub ten kb.mailchimp.com/article/common-mistakes-to-avoid
Nathan Koop
Zaktualizowałem link, pierwszy, który zasugerowałeś, był poprawny. Niestety został przeniesiony bez dodawania przekierowań.
SamMullins,
Dzięki za narzędzie do wstawiania CSS. Chyba byłby pomocny.
Rajesh Paul
6

Zasobem, do którego zawsze wracam na temat e-maili HTML, jest przewodnik CSS CampaignMonitor .

Ponieważ ich działalność koncentruje się wyłącznie na dostarczaniu wiadomości e-mail, znają się na rzeczy, tak jak wszyscy

Gareth
źródło
5

„Oszukańcze tak. Zrobiłbym stronę HTML z arkuszem stylów, a następnie użyłem jQuery, aby zastosować arkusz stylów do atrybutu stylu każdego elementu. Coś takiego:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Następnie skopiuj DOM i użyj go w e-mailu.

Nathan MacInnes
źródło
2
Musisz być z tym trochę ostrożny ... to nie jest niezawodne. Jakby to mogło zepsuć różne rzeczy, więc po prostu sprawdź wszystko przed wysłaniem.
Nathan MacInnes
aby obejść ten problem, możesz najpierw ukryć cały dokument za pomocą jQuery, a następnie uruchomić ten kod (i może odkryć) - w ten sposób rzeczywiste reguły CSS są pobierane i stosowane zamiast obliczonego wyniku (np. dla szerokości.)
majick
1

Uważam, że mapowanie obrazów działa całkiem dobrze. Jeśli masz jakieś nagłówki lub stopki, które są obrazkami, upewnij się, że zastosujesz bgcolor = "wypełnij puste miejsce", ponieważ program Outlook w większości przypadków nie załaduje obrazu i pozostanie przezroczysty nagłówek. Jeśli przynajmniej wyznaczysz kolor, który będzie odpowiadał ogólnemu charakterowi wiadomości e-mail, będzie to mniej szokujące dla użytkownika. Nigdy nie próbuj używać żadnych arkuszy stylizacyjnych. Lub w ogóle CSS! Po prostu tego unikaj.

W zależności od tego, czy kopiujesz zawartość ze słowa, czy udostępnionego Dokumentu Google, upewnij się, że (polecenie + F) Znajdź wszystkie (') i (") i zamień je w swoim oprogramowaniu do edycji (zwłaszcza dreemweaver), ponieważ pojawią się one jako kod i to po prostu nie jest dobre.

ALT jest twoim najlepszym przyjacielem. użyj tagu ALT, aby dodać tekst do wszystkich zdjęć. Ponieważ są szanse, że nie zostaną poprawnie załadowane. A ten tekst ALT powoduje, że ludzie klikają przycisk (patrz obrazy). Zdefiniuj także szerokość, wysokość obrazów i ustaw wartość 0, aby wokół obrazu nie pojawiały się dziwne linie.

Rozważ edycję wszystkich zdjęć w Photoshopie z 15-pikselową ramką po każdej stronie (ustaw przezroczyste tło i zapisz jako obraz PNG 24). Czasami klienci poczty e-mail nie czytają żadnych stylów wypełnienia zastosowanych do obrazów, więc pozwala to uniknąć dziwnego formatowania!

Uważam też, że wiersz pod linkami jest szczególnie denerwujący, więc jeśli zastosujesz <style = "text-decoration: none; color: # dowolny kolor tutaj!" > usunie linię i zapewni pożądany wygląd.

Jest wiele rzeczy, które naprawdę mogą zadzierać z całym wyglądem i stylem.

Stephen
źródło