Sprawdzone metody i uwagi dotyczące pisania wiadomości e-mail w formacie HTML [zamknięte]

Question 1

Tworzę strony internetowe od ponad dziesięciu lat, ale szybko odkryłem, że wiele z moich nawyków związanych z tworzeniem stron internetowych jest bezużytecznych podczas tworzenia aplikacji dla klientów poczty e-mail. To wywołało we mnie ogromną frustrację, więc pomyślałem, że zadam pytanie:

Jakie są najlepsze praktyki i niezbędne uwagi dla innych osób, takich jak ja, które mogą od czasu do czasu projektować dla Gmaila, Outlooka itp.?

Przykład: <style>...</style> vs inline CSS.

W skrócie: co przenosi się ze świata internetowego do świata poczty elektronicznej, a co nie?

Question 2

Wydaje się, że jest to świetne miejsce na listę zasobów dla każdego, kto próbuje nauczyć się e-maili w formacie HTML. To jest (prawdopodobnie) najbardziej obszerna lista zasobów HTML Email, jakie znajdziesz w sieci. Miłej nauki.

Przewodniki dla początkujących:

Wsparcie CSS i ogólne przewodniki:

Zawsze powinieneś umieścić swój CSS w html-email. Oto lista narzędzi do wstawiania CSS

Responsywne przewodniki:

Szablony i ramy:

Responsywne alternatywne przykłady:

Również powyższy link Ted Goas Responsive ma doskonały, płynny przykład.

Rozwiązywanie problemów i ogólne przewodniki:

Będziesz musiał użyć VML, aby obrazy tła działały w programie Outlook (z wyjątkiem tagu body ). Oto kilka linków VML:

Question 3

Robię to (czasami) dla mojej pracy już od jakiegoś czasu. E-maile w formacie HTML mają wiele pułapek. Różne klienty poczty e-mail renderują HTML inaczej i sprawiają, że IE6 wygląda na zaawansowany.

Oto podsumowanie tego, czego się do tej pory nauczyłem.

Używaj wbudowanego CSS : style nie zawsze są obsługiwane.
Używaj układów tabel : wiem, ale układy DIV zależą od CSS i wielu klientów poczty e-mail sobie z tym nie radzi.
Nie używaj rozpiętości wierszy : powoduje to dziwne problemy z odstępami.
Nie używaj obrazów tła : ich obsługa jest ograniczona.
Styl tagów obrazu za pomocą „display: block” : rozwiązuje dziwne problemy z odstępami w usłudze Hotmail.
Jeśli używasz wielu tabel zagnieżdżaj je w jednej tabeli nadrzędnej : To eliminuje bardziej dziwne problemy z odstępami.
Nie używaj JavaScript : ponownie nie jest obsługiwany zbyt dobrze.
Upewnij się, że Twój e-mail jest czytelny i nie zawiera obrazów : użytkownik nie może ich załadować.
Udostępnij wersję online i łącze do niej : Dzięki temu użytkownicy zobaczą zamierzoną treść, nawet jeśli ich klient poczty e-mail jest straszny.
Testuj, testuj, testuj : tylko dlatego, że działa w jednym kliencie poczty e-mail, nie oznacza, że działa w innych. Wielki jest Outlook 2007. Używa słowa do renderowania HTML (westchnienie).

Nie jest to wyczerpująca lista, ale powinna skierować większość ludzi na właściwą ścieżkę.

Question 4

Inline css i tabele - pomyśl o tworzeniu stron internetowych około 2000 roku, a wszystko będzie dobrze. Monitor kampanii to doskonałe źródło informacji, z którymi mogą sobie radzić klienci poczty e-mail. Używaj również http://www.emailonacid.com/ do testowania - oszczędza to konieczności wysyłania mnóstwa testów.