Jak napisać kod HTML newslettera pod Outlook i innych klientów poczty?

W tym wpisie chciałbym pokazać jak stworzyłem kod HTML newslettera, który prawidłowo wyświetli się we wszystkich klientach poczty, także w Outlook. Dzięki temu poradnikowi będziesz w stanie samemu napisać dowolny szablon HTML dla treści swojego mailingu.

W poprzednim artykule opisywałem jak działa mailing od strony technicznej oraz pokazałem jak samemu stworzyć projekt graficzny newslettera. Zapraszam do przeczytania:

Jak stworzyć responsywny newsletter na wszystkich klientów poczty? (klik)

Jak pisać kod HTML newslettera pod Outlook?

Tworzenie kodu pod Newsletter nie jest proste i pisałem o tym w poprzednim artykule. Większość klientów poczty idzie z duchem czasu i aktualizuje oprogramowanie swoich aplikacji email tak aby prawidłowo odczytywały dzisiejsze wiadomości HTML. Niestety, nie wszyscy idą z duchem czasu i aktualizują oprogramowanie o nowe trendy HTML czy CSS. Problematyczny okazuje się Microsoft i ich aplikacja Outlook.

Outlook ma największe problemy z czytaniem wielu popularnych styli CSS (np. border-radius, zaokrąglenie krawędzi) oraz struktur takich jak div. Co prawda odczyta nam tag <div> ale nie współpracuje dobrze z tą strukturą i często występują problemy. Ponadto pewne rzeczy będą działać na jednej wersji outlook na innej już nie i jest to zależne od wersji aplikacji. Wymusza to na programiście mnóstwo dodatkowych czynności przy pisaniu kodu i testowaniu go. No więc jak to prawidłowo stworzyć?

Najlepszym sposobem jest testowanie na bieżąco. Nie jesteśmy w stanie sprawdzać każdą funkcjonalność, kod, styl czy ma wsparcie w danej aplikacji czy nie. Dlatego najlepiej podczas tworzenia widoku newslettera wysyłać na bieżąco gotowe elementy i sprawdzać jak wyświetlają się w poszczególnych klientach poczty. Newsletter wysłany na aplikacje mailowe może mieć zupełnie inny wygląd niż w przypadku poglądu na przeglądarce. Dopiero po wysłaniu wiadomości okazuje się jak newsletter wygląda jako wiadomość email w danej poczcie i aplikacji.

Newsletter musi być napisany prosto – najlepiej przy pomocy tabel, a style mają być nierozbudowane i należy korzystać z podstawowych funkcjonalności. To zapewni nas, że zbliżymy się do prawidłowego wyglądu na większości klientów poczty.

Tabela w HTML – czym jest i jak jej używać?

Tabela w HTML jest strukturą pozwalającą na pozycjonowanie treści w widoku. Jak w przypadku każdej tabeli mamy do czynienia z wierszami oraz kolumnami. Wewnątrz tabeli możemy układać elementy w pozycjach poziomych i pionowych.

Dlaczego używać tabeli w przypadku newsletterów?

Pozycjonowanie treści w widoku za pomocą tabel daje nam gwarancję, że każda przeglądarka, aplikacja czy urządzenie odczyta ją prawidłowo. W przypadku widoków opartych na strukturze div sytuacja w przypadku mailingu wygląda różnie. Możemy zaryzykować użycie divów w przypadku newslettera i większość klientów poczty odczyta tą strukturę ale jeśli chodzi o style napisane dla divów niestety ale mogą nie działać prawidłowo.

Próby tworzenia układów za pomocą divów kończyły się rozjechanymi układami w przypadku skrzynek pocztowych microsoft (outlook).

Jak używać tabel?

To na prawdę proste. Co prawda jest dużo bardziej czasochłonne niż używanie zwykłych tagów div, ponieważ zamiast jednego tagu <div></div> musimy użyć 3 tagów:

<table>
	<tr>
		<td></td>
	</tr>
</table>

<table>

<tr>

</tr>

</table>

<table></table> – tag table jest tagiem tabeli i musi posiadać wewnątrz wiersze oraz kolumny,
<tr></tr> – wiersz tabeli,
<td></td> – kolumna tabeli.

Oczywiście, poza tym prostym układem kryje się dużo więcej tagów czy wartości tabel, których moglibyśmy używać. Są to takie tagi jak np. <thead> odpowiadający nagłówkowi tabeli czy <tfoot> odpowiadający stopce tabeli. Poza tym są funkcje takie jak scalanie kolumn itp. itd. Ale pytanie czy jest nam to wszystko potrzebne? Niekoniecznie. Większość widoków uda nam się stworzyć przy pomocy prostej konstrukcji nested tables czyli zagnieżdżonych tabel.

Na czym polega nested tables?

Tworzymy wewnątrz głównej tabeli kolejne tabele odpowiadające kolejnym elementom naszego widoku (oczywiście jeśli to potrzebne).

Outlook conditional CSS – wyświetlanie tylko w Outlook

Czasem zdarza się tak, że nasz newsletter wyświetla się poprawnie na wszystkich rodzajach klientów poczty a pewien element jest niemożliwy do przerobienia na aplikacje Outlook. Wówczas możemy użyć warunku dodającego pewien element lub styl tylko dla klienta Outlooka.

Przykład warunku:

<!--[if mso]>
    <table><tr><td>
        /* Outlook-specific HTML content goes here. */
    </td></tr></table>
<![endif]-->

<!--[if mso]>

/* Outlook-specific HTML content goes here. */

</td></tr></table>

<![endif]-->

W tym warunku widzimy jak działa Outlook conditional CSS. Najpierw sprawdzamy czy obecny klient to klient aplikacji outlook – [if mso]. Jeśli tak to dodajemy tabele w której możemy umieścić treść wyświetlającą się tylko dla aplikacji Outlook.

To samo możemy zrobić ze stylem, który może się aplikować tylko dla Outlooka:

<!--[if mso]>
    <style>
        .example-class {
            /* Outlook-specific CSS goes here. */
        }
    </style>
<![endif]-->

<!--[if mso]>

<style>

.example-class {

/* Outlook-specific CSS goes here. */

}

</style>

<![endif]-->

Dość teorii przejdźmy do praktyki 🙂

Tworzenie kodu HTML dostosowanego do wysyłki mailowej

We wcześniejszym wpisie stworzyliśmy projekt graficzny i napisaliśmy kod newslettera. Teraz czas omówić jak tworzyliśmy ten kod. Dla przypomnienia wstawię jak wygląda nasz gotowy newsletter:

Struktura projektu Newslettera

Poczty internetowe rozwijają się coraz mocniej i dzięki temu technologia w nich jest coraz bardziej aktualna. Dzięki temu możemy stosować w nich prawidłową strukturę HTML w wiadomościach. Kiedyś skrzynki pocztowe automatycznie ucinały sekcję head oraz trzeba było używać inline-styles do stylowania elementów. Dzisiaj możemy spokojnie zastosować strukturę html z head body i stylami w head.

Wklejam strukturę pustego projektu newsletter, którą już pokazywałem w poprzednim artykule:

<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>REDO Interactive Newsletter</title>
		<style type="text/css">
			/* STYLES HERE */
		</style>
	</head>
	<body style="margin: 0; padding: 0; background-color: #ffffff">
		<center>
			<table width="600" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td align="center" valign="top"></td>
				</tr>
			</table>
		</center>
	</body>
</html>

<!DOCTYPE html>

<head>

<title>REDO Interactive Newsletter</title>

/* STYLES HERE */

</style>

</head>

<tr>

</tr>

</table>

</center>

</body>

</html>

Jak widzicie jest to podstawowy szablon dla HTML i nie ma tu żadnych niespodzianek. Jest określony DOCTYPE, mamy tag html, wewnątrz sekcję head z meta tagami, tytułem i stylem. Wewnątrz znajduje się tag body, który ma zresetowane marginesy i padding. Potem mamy tag center aby wypośrodkować nasz widok tabeli głównej.

Tabela główna ma stale ustaloną szerokość na 600px width. Ma zresetowane wartości border, cellpadding i cellspacing aby prawidłowo nam się wyświetlała (w niektórych przypadkach z góry są ustawiane pewne wartości dla tych atrybutów i warto je ustawić na sztywno na 0 a w razie potrzeby ustawić jakąś wartość).

Tworzymy header Newslettera

Nasz newsletter składa się z głównego nagłówka obok którego po prawej stronie widnieje logo. Pod spodem znajdują się 4 zakładki odwołujące do odpowiednich stron naszej strony redo-interactive.com. Kod nagłówka wygląda następująco:

<table
	width="500"
	border="0"
	cellpadding="0"
	cellspacing="0"
	style="margin: auto; padding: 35px 0 15px 0"
>
	<tr>
		<td>
			<h1>
				<a href="https://redo-interactive.com/" target="_blank"
					>redo-interactive.com</a
				>
			</h1>
		</td>
		<td>
			<a href="https://redo-interactive.com/" target="_blank"
				><img
					height="44"
					width="auto"
					src="https://redo-interactive.com/assets/uploads/2021/04/nl-logo.png"
			/></a>
		</td>
	</tr>
</table>
<table
	width="500"
	border="0"
	cellpadding="0"
	cellspacing="0"
	style="margin: auto; padding: 15px 0"
>
	<tr>
		<td width="auto">
			<h3>
				<a
					href="https://redo-interactive.com/strony-internetowe/"
					target="_blank"
					>Strony WWW</a
				>
			</h3>
		</td>
		<td width="auto">
			<h3 style="text-align: center">
				<a
					href="https://redo-interactive.com/sklepy-internetowe/"
					target="_blank"
					>Sklepy Online</a
				>
			</h3>
		</td>
		<td width="auto">
			<h3 style="text-align: center">
				<a
					href="https://redo-interactive.com/projekty-graficzne/"
					target="_blank"
					>Grafika</a
				>
			</h3>
		</td>
		<td width="auto">
			<h3 style="text-align: right">
				<a
					href="https://redo-interactive.com/identyfikacja-wizualna/"
					target="_blank"
					>Marketing</a
				>
			</h3>
		</td>
	</tr>
</table>

<table

width="500"

border="0"

cellpadding="0"

cellspacing="0"

style="margin: auto; padding: 35px 0 15px 0"

<tr>

<td>

<h1>

<a href="https://redo-interactive.com/" target="_blank"

>redo-interactive.com</a

</h1>

</td>

<td>

<a href="https://redo-interactive.com/" target="_blank"

><img

height="44"

width="auto"

src="https://redo-interactive.com/assets/uploads/2021/04/nl-logo.png"

/></a>

</td>

</tr>

</table>

<table

width="500"

border="0"

cellpadding="0"

cellspacing="0"

style="margin: auto; padding: 15px 0"

<tr>

<h3>

href="https://redo-interactive.com/strony-internetowe/"

target="_blank"

>Strony WWW</a

</h3>

</td>

href="https://redo-interactive.com/sklepy-internetowe/"

target="_blank"

>Sklepy Online</a

</h3>

</td>

href="https://redo-interactive.com/projekty-graficzne/"

target="_blank"

>Grafika</a

</h3>

</td>

href="https://redo-interactive.com/identyfikacja-wizualna/"

target="_blank"

>Marketing</a

</h3>

</td>

</tr>

</table>

Tworzymy dwie oddzielne tabele dla głównego nagłówka i zakładek. Tabele ustawiamy na szerokość 500px. Następnie w inline-styles dodajemy margin: auto, aby marginesy automatycznie dopasowały się i wyświetliły tabele na środku tabeli głównej. Dodajemy również odpowiednie paddingi do naszych tabel.

W tabeli nagłówka tworzymy dwie kolumny jedna na nagłówek druga na logo. Zarówno nagłówek jak i logo linkujemy do strony głównej dodając tag <a href=”” target=”_blank”>. W przypadku głównego nagłówka dajemy nagłówek o najwyższej wartości h1. Później go ostylujemy żeby wyglądał jak najbliżej widoku z makiety. Obraz logo wstawiamy w tagu <img src=””/> i ustawiamy na sztywno wysokość obrazu, którą chcemy uzyskać a szerokość na auto dopasowanie.

Kolejną tabelę zakładek dzielimy na 4 kolumny <td> i w każdej kolumnie dajemy nasze zakładki jako h3 oraz linkujemy za pomocą tagu <a>. Poza tym musimy ustalić pozycję wyświetlania tekstu. Lewa boczna kolumna ma przywierać do lewej krawędzi. Prawa kolumna do prawej, natomiast środkowe do środka. Szerokości kolumn dajemy na auto aby dopasowały się do tekstu.

Sekcja z obrazem

Sekcja z głównym obrazem naszego newslettera posiada górny border oddzielający górny nagłówek od reszty treści. Poza tym wystarczy dodać odpowiedni padding i podlinkować obraz.

<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
	<td
		style="
			padding: 30px 0 50px 0;
			border-top: 3.5px solid #005b90;
		"
	>
		<a href="https://redo-interactive.com/" target="_blank"
			><img
				height="365"
				width="100%"
				src="https://redo-interactive.com/assets/uploads/2021/04/nl-banner.png"
		/></a>
	</td>
</tr>
</table>

<tr>

<td

style="

padding: 30px 0 50px 0;

border-top: 3.5px solid #005b90;

<a href="https://redo-interactive.com/" target="_blank"

><img

height="365"

width="100%"

src="https://redo-interactive.com/assets/uploads/2021/04/nl-banner.png"

/></a>

</td>

</tr>

</table>

Treść główna – zaproszenie do współpracy

Przyszła pora na trochę tekstu. Stylowanie tekstu zostawiamy na koniec, gdzie pokażę Wam jak dodałem style dla nagłówków i innych tekstów znajdujących się w newsletterze. Samą treść dodajemy podobnie jak sekcje z głównym nagłówkiem i obrazem. Czyli tworzymy tabele i wstawiamy odpowiednio treści oraz linkujemy do odpowiednich stron.

<table width="600" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td style="text-align: center; padding-bottom: 2px">
			<h2>
				<a
					href="https://redo-interactive.com/strona-glowna/#contact"
					target="_blank"
					>Współpraca</a
				>
			</h2>
		</td>
	</tr>
	<tr>
		<td style="text-align: center; padding-bottom: 20px">
			<p class="italic">twórz razem z nami</p>
		</td>
	</tr>
	<tr>
		<td style="text-align: center; padding-bottom: 30px">
			<p style="margin: auto; width: 420px">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
				do eiusmod tempor incididunt ut labore et dolore magna
				aliqua. Donec ac odio tempor orci.
			</p>
		</td>
	</tr>
	<tr>
		<td style="text-align: center; padding-bottom: 50px">
			<a
				class="cta-btn"
				href="https://redo-interactive.com/strona-glowna/#contact"
				target="_blank"
				>Kontakt</a
			>
		</td>
	</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td style="text-align: center; padding-bottom: 2px">
			<h2>20% rabatu</h2>
		</td>
	</tr>
	<tr>
		<td style="text-align: center; padding-bottom: 50px">
			<p class="italic">
				na hasło:<br />REDO Interactive Newsletter
			</p>
		</td>
	</tr>
</table>

<tr>

<h2>

href="https://redo-interactive.com/strona-glowna/#contact"

target="_blank"

>Współpraca</a

</h2>

</td>

</tr>

<tr>

<p class="italic">twórz razem z nami</p>

</td>

</tr>

<tr>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed

do eiusmod tempor incididunt ut labore et dolore magna

aliqua. Donec ac odio tempor orci.

</p>

</td>

</tr>

<tr>

class="cta-btn"

href="https://redo-interactive.com/strona-glowna/#contact"

target="_blank"

>Kontakt</a

</td>

</tr>

</table>

<tr>

<h2>20% rabatu</h2>

</td>

</tr>

<tr>

na hasło:<br />REDO Interactive Newsletter

</p>

</td>

</tr>

</table>

W odpowiednich kolumnach centrujemy tekst za pomocą text-align: center i ustawiamy odpowiednie paddingi.

Dodatkowo pojawiła nam się klasa italic. Klasa ta odpowiada ze pochyły tekst i znajduje się w stylach w sekcji head. Dodawana będzie do tekstów z pochyloną czcionką w naszym newsletterze.

Dodajemy również klasę cta-btn do tagu <a> odpowiadającemu przyciskowi Kontakt naszego newslettera. Klasa cta-btn ostyluje nasz link na formę przycisku.

Sekcja reklamowa z obrazami

Kolejna sekcja jest trochę bardziej rozbudowana. Zawiera obrazy oraz teksty, które zmieniają swoje pozycje w dwóch wierszach. Sekcja ta ma również górny border oddzielający sekcję.

Tworzymy tabelę główną naszej sekcji i dodajemy dwa wiersze. W każdym wierszu dodajemy dwie kolumny ustawione na 50% szerokości głównej tabeli. Dodatkowo dajemy padding dla każdej kolumny aby się ze sobą nie stykały i nie przywierały do krawędzi.

W pierwszym wierszu tabeli w pierwszej kolumnie dodajemy obraz z linkiem w formie kwadratu 265x265px. Obraz o tych samych wymiarach dodajemy w drugim wierszu w drugiej kolumnie.

W drugiej kolumnie pierwszego wiersza dodajemy kolejną tabelę, w której będzie treść reklamowa. To samo dodajemy w pierwszej kolumnie drugiego wiersza.

Treść reklamowa w zależności od wiersza jest wypozycjonowana do prawej lub do lewej strony za pomocą text-align: left, text-align: right.

<table
	width="600"
	border="0"
	cellpadding="0"
	cellspacing="0"
	style="
		text-align: center;
		margin: auto;
		padding: 30px 0 30px 0;
		border-top: 3.5px solid #005b90;
	"
>
	<tr>
		<td width="50%" style="padding: 5px">
			<a
				href="https://redo-interactive.com/strony-internetowe/"
				target="_blank"
				><img
					width="265"
					height="265"
					src="https://redo-interactive.com/assets/uploads/2021/04/nl-strony.png"
					alt=""
			/></a>
		</td>
		<td width="50%" style="padding: 5px">
			<table
				width="265"
				border="0"
				cellpadding="0"
				cellspacing="0"
				style="text-align: left; margin: auto"
			>
				<tr>
					<td style="padding-bottom: 20px">
						<h2 style="line-height: 1">
							<a
								href="https://redo-interactive.com/strony-internetowe/"
								target="_blank"
								>strony www</a
							>
						</h2>
					</td>
				</tr>
				<tr>
					<td style="padding-bottom: 5px">
						<p class="italic">tworzymy z pasją</p>
					</td>
				</tr>
				<tr>
					<td style="padding-bottom: 20px">
						<p>
							Ultricies integer quis auctor elit sed vulputate mi.
							Ornare massa eget egestas purus. Vitae sapien
							pellentesque habitant morbi.
						</p>
					</td>
				</tr>
				<tr>
					<td>
						<a
							class="details"
							href="https://redo-interactive.com/strony-internetowe/"
							target="_blank"
							>Szczegóły &#11166;</a
						>
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td width="50%" style="padding: 5px">
			<table
				width="265"
				border="0"
				cellpadding="0"
				cellspacing="0"
				style="text-align: right; margin: auto"
			>
				<tr>
					<td style="padding-bottom: 20px">
						<h2 style="line-height: 1">
							<a
								href="https://redo-interactive.com/sklepy-internetowe/"
								target="_blank"
								>sklepy online</a
							>
						</h2>
					</td>
				</tr>
				<tr>
					<td style="padding-bottom: 5px">
						<p class="italic">zakupy przez internet</p>
					</td>
				</tr>
				<tr>
					<td style="padding-bottom: 20px">
						<p>
							Ultricies integer quis auctor elit sed vulputate mi.
							Ornare massa eget egestas purus. Vitae sapien
							pellentesque habitant morbi.
						</p>
					</td>
				</tr>
				<tr>
					<td>
						<a
							class="details"
							href="https://redo-interactive.com/sklepy-internetowe/"
							target="_blank"
							>&#11164; Szczegóły</a
						>
					</td>
				</tr>
			</table>
		</td>
		<td width="50%" style="padding: 5px">
			<a
				href="https://redo-interactive.com/sklepy-internetowe/"
				target="_blank"
				><img
					width="265"
					height="265"
					src="https://redo-interactive.com/assets/uploads/2021/04/nl-sklep.png"
					alt=""
			/></a>
		</td>
	</tr>
</table>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<table

width="600"

border="0"

cellpadding="0"

cellspacing="0"

style="

text-align: center;

margin: auto;

padding: 30px 0 30px 0;

border-top: 3.5px solid #005b90;

<tr>

href="https://redo-interactive.com/strony-internetowe/"

target="_blank"

><img

width="265"

height="265"

src="https://redo-interactive.com/assets/uploads/2021/04/nl-strony.png"

alt=""

/></a>

</td>

<table

width="265"

border="0"

cellpadding="0"

cellspacing="0"

style="text-align: left; margin: auto"

<tr>

href="https://redo-interactive.com/strony-internetowe/"

target="_blank"

>strony www</a

</h2>

</td>

</tr>

<tr>

<p class="italic">tworzymy z pasją</p>

</td>

</tr>

<tr>

<p>

Ultricies integer quis auctor elit sed vulputate mi.

Ornare massa eget egestas purus. Vitae sapien

pellentesque habitant morbi.

</p>

</td>

</tr>

<tr>

<td>

class="details"

href="https://redo-interactive.com/strony-internetowe/"

target="_blank"

>Szczegóły ⮞</a

</td>

</tr>

</table>

</td>

</tr>

<tr>

<table

width="265"

border="0"

cellpadding="0"

cellspacing="0"

style="text-align: right; margin: auto"

<tr>

href="https://redo-interactive.com/sklepy-internetowe/"

target="_blank"

>sklepy online</a

</h2>

</td>

</tr>

<tr>

<p class="italic">zakupy przez internet</p>

</td>

</tr>

<tr>

<p>

Ultricies integer quis auctor elit sed vulputate mi.

Ornare massa eget egestas purus. Vitae sapien

pellentesque habitant morbi.

</p>

</td>

</tr>

<tr>

<td>

class="details"

href="https://redo-interactive.com/sklepy-internetowe/"

target="_blank"

>⮜ Szczegóły</a

</td>

</tr>

</table>

</td>

href="https://redo-interactive.com/sklepy-internetowe/"

target="_blank"

><img

width="265"

height="265"

src="https://redo-interactive.com/assets/uploads/2021/04/nl-sklep.png"

alt=""

/></a>

</td>

</tr>

</table>

Stopka newslettera

Przechodzimy do stopki naszego newslettera. Nie jest ona rozbudowana więc łatwo będzie stworzyć taki widok.

Stworzymy dwie tabele. Pierwsza tabela będzie zawierać trzy wycentrowane kolumny z obrazami linkującymi do wysłania maila za pomocą odpowiedniego linku kierującego do wysłania maila na dany adres: <a href=”mailto:mail@example.com”> oraz do facebooka i strony redo-interactive. Dodatkowo dodajemy border oddzielający górę i dół tabeli.

Druga tabela będzie zawierać jedną kolumnę z tekstem w nagłówku h4.

<table
	width="600"
	border="0"
	cellpadding="0"
	cellspacing="0"
	style="padding: 25px 0"
>
	<tr>
		<td>
			<h4>
				więcej szczegółów:<br />
				+48 692 140 920 | redo-interactive.com
			</h4>
		</td>
	</tr>
</table>

<table

width="600"

border="0"

cellpadding="0"

cellspacing="0"

style="padding: 25px 0"

<tr>

<td>

<h4>

więcej szczegółów:<br />

+48 692 140 920 | redo-interactive.com

</h4>

</td>

</tr>

</table>

Styl dostosowany do newslettera na Outlook i inne poczty

Jak pisać styl dostosowany do mailingu? Przede wszystkim trzeba korzystać z prostych styli. Takich, które istnieją już jakiś czas. Nie korzystać z nowych funkcjonalności takich jak np. flexbox czy grid. Jeśli mamy jakąś wątpliwość czy dany styl będzie działał na Outlook bądź innym kliencie należy sprawdzić to na support list np. tutaj: Email Client CSS Support od mailchimp.

Nie będę omawiał stylów, które napisałem. Są to podstawowe style do tekstu i na pewno będą wyświetlać się na wszystkich klientach poczty.

<style type="text/css">
	/* STYLES HERE */
	h1,
	h2,
	h3,
	h4 {
		font-family: Arial, sans-serif;
		text-transform: uppercase;
		line-height: 1.4;
		margin: 0;
	}
	h1 {
		font-size: 28.5px;
		letter-spacing: 3px;
		font-weight: 700;
	}
	h2 {
		font-size: 33.1px;
		letter-spacing: 2.5px;
		font-weight: 700;
	}
	h3 {
		font-size: 13px;
		letter-spacing: 2px;
		font-weight: 400;
		color: #707070;
	}
	h3 a {
		color: #707070 !important;
	}
	h4 {
		font-size: 12px;
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: 1.5px;
		text-align: center;
		color: #707070;
	}
	p.italic {
		font-family: "Times New Roman", serif;
		font-style: italic;
		font-size: 16.5px;
		font-weight: 700;
		color: #505050;
	}
	p {
		font-family: Helvetica, sans-serif;
		font-size: 14px;
		margin: 0;
		color: #808080;
	}
	a {
		font-family: Arial, sans-serif;
		text-transform: uppercase;
		margin: 0;
		text-decoration: none;
		color: #000 !important;
	}
	.cta-btn {
		display: inline-block;
		font-size: 17px;
		font-weight: 700;
		letter-spacing: 2px;
		padding: 5px 25px;
		border: 3.5px solid #005b90;
		text-align: center;
	}
	.details {
		font-size: 15.5px;
		font-weight: 700;
		letter-spacing: 2.5px;
	}
</style>

/* STYLES HERE */

h1,

h2,

h3,

h4 {

font-family: Arial, sans-serif;

text-transform: uppercase;

line-height: 1.4;

margin: 0;

}

h1 {

font-size: 28.5px;

letter-spacing: 3px;

font-weight: 700;

}

h2 {

font-size: 33.1px;

letter-spacing: 2.5px;

font-weight: 700;

}

h3 {

font-size: 13px;

letter-spacing: 2px;

font-weight: 400;

color: #707070;

}

h3 a {

color: #707070 !important;

}

h4 {

font-size: 12px;

font-weight: 400;

line-height: 1.2;

letter-spacing: 1.5px;

text-align: center;

color: #707070;

}

p.italic {

font-family: "Times New Roman", serif;

font-style: italic;

font-size: 16.5px;

font-weight: 700;

color: #505050;

}

p {

font-family: Helvetica, sans-serif;

font-size: 14px;

margin: 0;

color: #808080;

}

a {

font-family: Arial, sans-serif;

text-transform: uppercase;

margin: 0;

text-decoration: none;

color: #000 !important;

}

.cta-btn {

display: inline-block;

font-size: 17px;

font-weight: 700;

letter-spacing: 2px;

padding: 5px 25px;

border: 3.5px solid #005b90;

text-align: center;

}

.details {

font-size: 15.5px;

font-weight: 700;

letter-spacing: 2.5px;

}

</style>

Newsletter pod Outlook oraz inne aplikacje mailowe – pobierz gotowy kod

W ten sposób napisaliśmy newsletter dostosowany do wszystkich aplikacji mailowych. Jak widać ważne jest aby widok naszego newslettera nie był za bardzo przekombinowany a jednak estetyczny i na tyle ciekawy w treść aby zachęcił naszego odbiorcę. Jeśli przekombinujemy z wyglądem newslettera może być niezwykle ciężko odwzorować projekt na wszystkich klientach poczty.

Zobacz nasz newsletter (klik).

POBIERZ KOD NEWSLETTERA! (klik)