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?
html
css
html-email
Joe Mornin
źródło
źródło
Odpowiedzi:
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.
źródło
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.com
a następnie połącz go zhttps://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.
źródło
<div>
programie Outlook nie będzie przedłużać koloru poza treść, co oznacza, że wypełnienie nie będzie kolorowe.<img>
tagach, tak jak poniżej:<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">
cid
.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:
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!
źródło
Oprócz zamieszczonych tutaj odpowiedzi przeczytaj ten artykuł:
http://24ways.org/2009/rock-solid-html-emails
źródło
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
źródło
„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:
Następnie skopiuj DOM i użyj go w e-mailu.
źródło
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.
źródło