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

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?

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.

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.

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!

Oprócz zamieszczonych tutaj odpowiedzi przeczytaj ten artykuł:

http://24ways.org/2009/rock-solid-html-emails

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

„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.

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.