Jaki jest najlepszy sposób na sformatowanie biuletynu e-mail w formacie HTML (np. Biuletyn SO) bez zewnętrznego css?

Question

Próbuję przygotować newsletter w formacie HTML (podobny do newslettera stackexchange) i próbować znaleźć najlepszą praktykę dla układu, ponieważ nie ma możliwości włączenia zewnętrznego css. Jeśli istnieje jakieś lepsze rozwiązanie niż po prostu popychanie całego zestawu stylów css w liniach div, tabelach itp.?

Należy również upewnić się, że jest widoczny/możliwy do renderowania na jak największej liczbie klientów poczty e-mail.

Answer 1

Kodowanie szablonów wiadomości e-mail w formacie HTML to ostateczne pole minowe. Jest to spowodowane głównie brakiem wsparcia dla CSS przez klientów poczty e-mail, najgorszym sprawcą jest MS Outlook which uses Word to render the code.

Najlepiej postępuj zgodnie z wypróbowanymi i zaufanymi materiałami do projektowania e-maili, takimi jak te z Campaign Monitor, MailChimp i Email on Acid, aby wymienić tylko kilka. Wszystkie te polecają projektowanie według najniższego wspólnego mianownika, który może być czymś w stylu Outlook 2003, co może sprawiać, że rzeczy wyglądają dość nieprzyjemnie, jeśli nie jesteś ostrożny. This guide for what CSS works and what doesn't work jest naprawdę przydatny.

Moja rada to próba zachowania prostoty i przygotowania do tego, aby układ był różny dla różnych klientów poczty e-mail z nieoczekiwanym dopełnieniem, marginesem, zmianą koloru tekstu itp., Chyba że jesteś przygotowany do przeprowadzenia szeroko zakrojonych testów. wyeliminuj błędy.

Answer 2

Użyłem Action Mailer

http://www.nuget.org/packages/ActionMailer/

to wtedy oznacza utworzenie normalnego widoku ze wszystkimi normalnymi Razor składniowych i stylów CSS etc i wysyła go HTML dbanie o wszystko dla ciebie. Używany w kilku witrynach teraz i jest bardzo dobry i najlepszy ze wszystkich.

Cliff.

Answer 3

To naprawdę nie jest tak źle, jeśli wiesz, co robisz. Musisz być w stanie dobrze koduować przy pomocy html/css. Następnie wystarczy przestrzegać wytycznych i wiedzieć, co działa, a co nie, a następnie TEST TEST TEST.

warte pamiętać:

1. Użyj tabel dla układu
2. dala od zaawansowany wyposażony np CSS box-shadow, pozycja: stała, marginesy ujemne, niestandardowe czcionki
3. Wyszukaj i znajdź, co klienci obsługują to, co CSS i projekt wokół niego.
4. Pamiętaj filtry antyspamowe, nie używaj zbyt wielu obrazów i trzymaj się z dala od słowa takie jak „Viagra” czy „promocja”
5. nie należy dołączać obrazów, załadować je do hostingowego i używać trwałych powiązań dla obrazów
6. Zapewnić zwykłego tekstu alternatywy dla klientów gównianych
7. Upewnij się wysłać wiadomości e-mail z właściwego serwera SMTP jest to najbezpieczniejszy sposób (podpisywanie To i S/MIME), aby zapewnić, że nie zostanie odfiltrowany spam. Unikaj rzeczy takich jak funkcja php mail(). To nie przejdzie.
8. Sprawdź wiadomości e-mail we wszystkich klientach, których oczekujesz od swoich użytkowników (zwłaszcza klientów sieciowych, takich jak Gmail i Yahoo, i perspektywy z powodu perspektywy).
9. NO JAVASCRIPT

Co do Twojego pytania o CSS formatowania. Będziesz musiał wpisać WSZYSTKIE css, ponieważ wielu klientów (na przykład Gmaila) usunie wszystkie znaczniki stylu ze względów bezpieczeństwa (abyś nie mógł zmienić ich css).

Proponuję napisać wszystkie swoje CSS w tagu stylu, a następnie użyć narzędzia inliner przed wysłaniem.

Inline narzędzie: http://beaker.mailchimp.com/inline-css

Answer 4

Niestety, jeśli jesteś ustawiony na toczenia własne i nie korzystanie z usług takich jak MailChimp, tak naprawdę nie ma lepszego sposobu niż układania wszystkiego w tabelach i wykorzystaniem inline CSS - to znaczy, jeśli chcesz zapewnić spójność między niezliczonymi klientami poczty e-mail, każdy z własnym unikalnym [i datowanym] renderingiem.

Polecam Kaseta e-mail z kodem HTML - podobnie jak Kaseta z płytką HTML5 - można znaleźć here. Po pierwsze, jest to solidny punkt odskocznia, ale najważniejsze jest to, że jego komentarz jest informacyjny, wyjaśniając, dlaczego ta lub ta klasa musi zostać zastosowana w celu poprawienia Hotmail, Gmail, Outlook, ..., cokolwiek.

To powiedziawszy, nie dlatego, że pytasz o poradę projektową, ale myślę, że to Projekt badawczy Pew Internet w końcu powiedział, że większość wiadomości e-mail jest obecnie odczytywana z telefonu i może sprawić, że Twój e-mail będzie zawierał więcej biuletynów. Efektywny, jeśli zaprojektujesz do tego: duży typ, minimalna falbanka, pojedyncza kolumna. Uważaj, że prawie każdy klient domyślnie uniemożliwia ładowanie obrazów z jakichkolwiek wiadomości e-mail, które nie są wyraźnie wymienione na białej liście przez użytkownika, więc oparty na tabelach, wbudowany biuletyn e-mailowy w formacie CSS, który nie jest aż tak ciężki na oślepiającym oślepieniu, może nie być takim ból budować tak, jak by to było inaczej :).