Jak utworzyć szablon wiadomości e-mail za pomocą HTML i CSS?

Zarówno jako projektanci, jak i programiści, pewnego dnia Twój klient poprosi Cię o szablon wiadomości e-mail do swego rodzaju biuletynu. Muszę powiedzieć, że szablony wiadomości e-mail nie są tak ekscytujące po prostu dlatego, że istnieje duża luka w obsłudze HTML i CSS. Można by pomyśleć, że w dzisiejszych czasach nie byłoby tak, ponieważ posuwamy się naprzód z HTML5 i CSS3. Jednak ze smutkiem stwierdzam, że jeśli chodzi o renderowanie wiadomości e-mail, zdecydowanie tak nie jest.

Pierwszą rzeczą, o której należy pamiętać podczas tworzenia szablonu wiadomości e-mail HTML, jest fakt, że wszystkie style CSS powinny być wykonane w tekście. W każdym innym przypadku jest to bardzo duże nie-nie. Ale ponieważ w nagłówku jest bardzo mało wsparcia dla zewnętrznego CSS, a nawet CSS, sposobem na to jest inline. Dodatkowo – i jestem pewien, że już o tym słyszałeś – szablon musi być stworzony z TABLE, a nie DIV. Po raz kolejny jest to niefortunne, ale jest to droga do zrobienia. Biorąc pod uwagę, że e-maile nie są ogólnie takie duże, projektowanie i tworzenie ich nie jest trudne – jest po prostu nudne w porównaniu z projektowaniem internetowym lub mobilnym.

Projektowanie

 Polecane dla Ciebie: Jak przyspieszyć proces projektowania przy użyciu nowoczesnych frameworków CSS?

Struktura

W treści strony HTML wklej poniższy kod. Po prostu patrząc na kod, możesz stwierdzić, że struktura tego e-maila jest niewielka. To właściwie bardzo dobra rzecz, ponieważ e-maile nigdy nie powinny być skomplikowane. Jak dotąd istnieje również niewielka ilość stylizacji, tylko ta, która określa całkowitą szerokość tabeli i że nie ma nic między komórkami tabeli.

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>

Styl

Dobra, teraz dodamy trochę CSS w treści dokumentu. To nic nadzwyczajnego, tylko reset i definicja koloru i stylu łącza. Byłbym bardzo ostrożny z tym, jaki kod CSS tu wstawisz, ponieważ jest on często ignorowany przez klientów poczty e-mail.

 <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>

Treść

Nadszedł czas, aby wypełnić tabele treścią. Możesz znaleźć obrazy w pliku podanym powyżej – na początku tego samouczka. Teraz powinieneś wypełnić cały tekst i obrazy, które mają znaleźć się w tym e-mailu. Pamiętaj, że w samouczku nie musisz łączyć hiperłączy z czymkolwiek i możesz również używać własnych obrazów. Do tej pory w kodzie zdefiniowałem szerokość dla wszystkich trzech obrazów, aby upewnić się, że ich rozmiar jest ustawiony.

Jest coś, czego musisz być bardzo świadomy: obrazy świetnie nadają się do wiadomości e-mail, o ile są a: małe i b: mają tag alt, który dobrze je opisuje. Jestem pewien, że wiesz, że aby obrazy pojawiły się w wiadomości e-mail, odbiorca tej wiadomości musi zezwolić na wyświetlanie obrazów. Jeśli tego nie zrobią, nic nie powie im, czego mają się spodziewać. Jest to również problem z dostępnością, jeśli nie podasz opisu dla niewidomych użytkowników. Jednak to już inna historia. Lekcja jest taka: zawsze używaj małego obrazu ze znacznikiem alt!

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>

Styl Inline

Ostatnią rzeczą, jaką zrobimy, to udostępnienie wbudowanego stylu CSS dla tego szablonu wiadomości e-mail w formacie HTML. To właśnie sprawia, że ​​e-mail wygląda tak, jak widać, że do tej pory ten e-mail nie wyglądał tak ładnie. Podzielę tę część na małe kawałki, aby nie była zbyt przytłaczająca.

 Możesz także polubić: 7 przydatnych wskazówek, dzięki którym wiersz tematu e-maila będzie bardziej klikalny.

Ciało

Najpierw ustawmy kolor tła całej strony e-mail oraz domyślny rozmiar i kolor czcionki.

 <body bgcolor="#f7d973" ></body>

Tabela

Następną rzeczą do zrobienia jest wyśrodkowanie treści wiadomości e-mail i nadanie jej własnego koloru tła, aby się wyróżniała.

Pierwszy rząd – nagłówek

W komórce pierwszego rzędu dzieje się wiele rzeczy. Zwróć uwagę, że styl wbudowany znajduje się w <td>, a nie w <tr>. To, co tutaj robimy, to nowy kolor tła pasujący do koloru logo. Dodatkowo jest też trochę wyściółki i wyrównania. Teraz zmieniam kolor tekstu na biały, ponieważ tekst alternatywny będzie domyślnie czarny. Nie będziesz w stanie tego zobaczyć na tym tle, więc upewniam się, że możesz, zmieniając kolor tekstu. Może ci się to wydawać bezużyteczne, ale tak jak powiedziałem, jest to bardzo ważne dla osób, które domyślnie nie mają dozwolonych obrazów.

 <tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>

Drugi rząd

W wierszu ponownie jest tylko jedna komórka obejmująca dwie kolumny. Ta komórka jest nieco modyfikowana przez dodanie do niej wypełnienia i linii przerywającej na dole, aby oddzielić jej zawartość od wiersza poniżej. Mamy też duży nagłówek, który zajmuje trochę miejsca na marginesach. I to tyle w tym rzędzie.

 <tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>

Trzeci rząd

Dla obu komórek tutaj ustawiamy zarówno szerokość, jak i dopełnienie. Są dokładnie takie same, więc komórki są podzielone równo na pół. Poza tym nie ma nic więcej, ponieważ komórki są wypełnione obrazem i tekstem na jego temat.

 <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>

Czwarty rząd

To zdecydowanie najbardziej stylizowana sekcja tego szablonu wiadomości e-mail w formacie HTML. Jak widać na poniższym kodzie, dużo się dzieje. Po pierwsze, cały wiersz otrzymuje nowy kolor tła i kolor tekstu, aby tekst był widoczny – tak jak w nagłówku. Zarówno pierwsza, jak i druga komórka oraz ich zawartość otrzymują dokładnie te same zmiany stylu. Po pierwsze, sama komórka otrzymuje nowy kolor tła i tekstu. Następnie link w jego nagłówku zmienia kolor na żółty. Wreszcie, ostatni akapit jest podkreślony i aby dodać pewną separację, dodano również margines. Jak powiedziałem, druga komórka i jej zawartość otrzymują dokładnie taką samą stylizację.

 <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
 I na koniec stopka. Niewiele się tu dzieje; tylko trochę odstępów przez dopełnienie i to wszystko!
		








<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
Ostatnie słowa

Ten samouczek jest trochę długi, ale mam nadzieję, że teraz rozumiesz, co jest potrzebne do stworzenia od podstaw szablonu wiadomości e-mail w formacie HTML. Nie jest to skomplikowana koncepcja, ale może być nużąca. Teraz Twoja kolej, aby wyjść i zacząć tworzyć niesamowicie wyglądające, wysokiej klasy e-maile! Możesz połączyć kilka technik tworzenia szablonu wiadomości e-mail, aby uczynić go bardziej unikalnym.
Ten artykuł został napisany przez Hannah Butler. Pracuje jako programista i projektant stron internetowych. Poza tym lubi dzielić się swoim doświadczeniem w formie artykułów. W tym przypadku ma własną sekcję na stronie WriteMyPaper4Me.co. W przyszłości zamierza zacząć pisać bloga, aby opisywać innym swoje metody pracy.