Jakie są wskazówki dotyczące projektowania wiadomości e-mail w formacie HTML? [Zamknięte]

Question 1

Jakie wskazówki możesz podać w sprawie bogatego formatowania HTML w wiadomościach e-mail przy zachowaniu dobrej stabilności wizualnej w przypadku wielu klientów i interfejsów poczty e-mail opartych na sieci Web?

Niepowiązana odpowiedź na pytanie dotyczące przepełnienia stosu sugeruje:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

Który zawiera następujące wytyczne:

Umieść arkusz stylów <body>zamiast<head>
Niektóre programy pocztowe usuwają CSS z głowy, ale zostawiają go, jeśli blok stylów znajduje się (nieprawidłowo) w treści.
Używaj stylów wbudowanych tam, gdzie to tylko możliwe
Gmail usunie każdy arkusz stylów, zarówno w, jak <head>i w <body>, ale honoruje style wbudowane przypisane za pomocą style=""atrybutu
Powrót do tabel
Standardy poczty elektronicznej zrobiły w ostatnich latach ogromny krok wstecz dzięki programowi Outlook 2007 wykorzystującemu silnik renderujący Microsoft Word. Oducz się większości tego, czego nauczyłeś się o pozycjonowaniu bez arkuszy stylów.
Nie polegaj na obrazach
Większość klientów i większość internetowych klientów poczty e-mail nie wyświetla obrazów, chyba że użytkownik wyraźnie zażąda ich wyświetlenia.

Mam też kilka „niepotwierdzonych” prawd, których nie pamiętam, gdzie je przeczytałem.

Nie używaj więcej niż dwóch poziomów zagnieżdżenia w tabelach
Czy to prawda. Co może się stać, jeśli to zrobię? Czy jest jakiś konkretny klient / klienci, którzy się tym dławią?
Uważaj na zagnieżdżanie obrazów tła w komórkach / tabelach.
Jak rozumiem, możesz napotkać sytuacje, w których obraz tła zostanie zastosowany w malejącej tabeli / komórce całkowicie od nowa, a nie tylko „prześwituje”. Znowu, prawda czy nie? Którzy klienci?

Chciałbym uzupełnić tę listę o więcej wskazówek i doświadczeń z okopów.

Czy możesz zaoferować dalsze sugestie?

Aktualizacja: Szczególnie proszę o wytyczne dotyczące części projektowej w HTML i ich spójności. Pytania dotyczące ogólnych wskazówek dotyczących unikania filtrów spamu i zwykłych uprzejmości są już na SO.

Question 2

To rzeczywiście bardzo ciężko, aby godnej HTML e-mail, jeśli podejście je z „nowoczesnym HTML i CSS” perspektywy.

Aby uzyskać najlepsze wyniki, wyobraź sobie, że jest rok 1999.

Wróć do tabel dla układu (lub najlepiej - nie próbuj żadnego złożonego układu)
Bój się obrazów tła (psują się w Outlooku 2007 i Gmailu).
Problem ze stylem w ciele polega na tym, że Hotmail akceptował to w ten sposób - jestem jednak prawie pewien, że teraz go usuwają. Używaj stylów wbudowanych zstyle atrybutem, jeśli musisz użyć CSS.
Zapomnij o wszystkim float
Pamiętaj, że Twoje obrazy prawdopodobnie zostaną zablokowane - użyj koloru tła i tekstu na swoją korzyść - upewnij się, że jest czytelny tekst z wyłączonymi obrazami
Należy być bardzo ostrożnym z linkami, należy szczególnie uważać na wszystko, co wygląda jak adres URL w tekście łącza - będzie gniew „phishing” filtry (np <a href="http://domain.tld">www.someotherdomain.tld</a>jest zły )
Pamiętaj, że „fałda” w klientach poczty internetowej zwykle znajduje się bardzo wysoko w górę strony (na ekranie 1024x768 większość interfejsów nie pokazuje więcej niż sto pikseli lub więcej) - umieść dane tożsamości na samej górze, aby odbiorca wie, kim jesteś.
Najnowsza wersja programu Outlook ma okienko podglądu „portret”, które jest znacznie węższe niż można by się spodziewać - uważaj na układy o stałej szerokości, jeśli musisz ich używać, zrób je tak wąskie, jak to tylko możliwe.
Nie myśl nawet o Flashu, Javascript, SVG, płótnie czy czymś w tym rodzaju.
Testuj dużo. Upewnij się, że testujesz w najnowszym Outlooku (wiele się zmieniło! Teraz używa Worda jako silnika renderującego HTML i jest uszkodzony: obsługa Word 2007 HTML / CSS ). Gmail jest również dość skomplikowany. Zaskakujące jest, że poczta internetowa Yahoo jest wyjątkowo dobra, z ładną obsługą CSS.

Powodzenia ;)

Zaktualizuj, aby odpowiedzieć na dalsze pytania:

Nie używaj więcej niż dwóch poziomów zagnieżdżenia w tabelach

Uważam, że jest to starsza wskazówka dotycząca Lotus Notes. Tabele zagnieżdżone powinny być w porządku, ale tak naprawdę, jeśli masz układ, który jest na tyle skomplikowany, że ich potrzebujesz, prawdopodobnie i tak będziesz mieć problemy. Zachowaj prosty układ .

Uważaj na zagnieżdżanie obrazów tła w komórkach / tabelach

Może to być związane z powyższym i to samo dotyczy, jeśli będziesz to komplikować, będziesz mieć problemy. Najnowsze wersje Outlooka w ogóle nie obsługują obrazów tła, więc najlepiej o nich całkowicie zapomnieć.

Question 3

Zawsze używaj wieloczęściowego MIME i udostępniaj alternatywę w postaci zwykłego tekstu.

Question 4

Osoby stojące za Campaign Monitor uruchomiły również witrynę internetową projektu standardów e-mail, zawierającą wiele przydatnych informacji.

Question 5

Spójrz na ten standardowy szablon, jest podobny do html5boilerplate, ale dla e-maili: http://htmlemailboilerplate.com/

Question 6

Myślę, że jest to poziom niższy niż pytanie, które zadajesz, ale jeśli naprawdę chcesz, aby e-mail w formacie HTML był poprawnie wyświetlany przez jak największą liczbę klientów, upewnij się, że używa on prawidłowego MIME. W szczególności, aby wiadomość e-mail została uznana za prawidłowy MIME, nagłówki MUSZĄ (w znaczeniu tego słowa) zawierać oba te nagłówki:

MIME-Version:
Content-Type:

Bardzo rygorystyczni klienci wyświetlą Twój HTML jako surowy tekst, jeśli brakuje jednego z nich. Zdziwiłbyś się, ilu dużych dostawców internetowych, którzy powinni wiedzieć lepiej, spieprzyło to (w szczególności otrzymałem e-maile HTML z brakującą wersją MIME: nagłówki z Amazon i ACM w przeszłości)

Question 7

Obrazy tła nie są wiarygodne.
Praktycznie bez myślenia, ale bez javascript .
Użyj edytora, który pozwala wysłać bieżący plik / bufor jako wiadomość e-mail lub przynajmniej znaleźć program, który pozwoliłby Ci wysłać zawartość pliku jako wiadomość e-mail w formacie HTML. nie testuj swoich e-maili, kopiując kod HTML i wklejając go do Outlooka (lub jakiegokolwiek innego programu pocztowego).

Question 8

Trzy słowa rady: test, test, test.

Sprawdź usługę testowania poczty e-mail LitmusApp.com. Wysyłasz im wiadomość, a oni renderują ją w grupie klientów i pokazują zrzuty ekranu z wynikami. Nie jest doskonały, ale jest całkiem niezły.

(Nawiasem mówiąc, Lotus Notes przed wersją 8.0 naprawdę śmierdzi pocztą HTML)

Poza tym, poza wbudowanymi stylami CSS, zalecam przełączanie się na tagi, gdy tylko jest to możliwe.

Question 9

Osadzaj swoje obrazy, nie łącz do nich.

To jest złe :

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

To jest dobre :

<img src=cid:myImage/>

Tak, wygląda to dziwnie, ale sprawdź ten przewodnik dotyczący osadzania obrazów w wiadomościach e-mail .

Question 10

Jeśli dołączasz blok stylu, nie zaczynaj żadnej nowej linii od „.classname” lub „.” byle co. Umieść klamrę lub coś przed kropką. Jeśli tego nie zrobisz, niektóre systemy poczty internetowej nie będą poprawnie wyświetlać arkuszy stylów.

Wiele osób błędnie założyło, że nie mogą używać bloków CSS w e-mailach z powodu takiego zachowania ... IIRC „.” jest ogranicznikiem treści dla SMTP. Systemy będą miały tendencję do ucieczki w swoich sklepach pocztowych, aby zapobiec błędnemu rozpoznaniu treści jednej wiadomości jako nowej wiadomości. Sposób, w jaki jest to traktowane, prowadzi do złamania każdego stylu, zaczynając od nowej linii z kropką.