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 e-maila do swojego biuletynu. Muszę powiedzieć, że szablony e-maili nie są tak ekscytujące, ponieważ 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 e-maili, to zdecydowanie nie jest to przypadek.

Pierwszą rzeczą, o której należy pamiętać podczas tworzenia szablonu wiadomości e-mail w formacie HTML, jest fakt, że wszystkie style CSS powinny być wykonane w linii. W każdym innym przypadku jest to bardzo duże nie. Ale ponieważ jest bardzo mało wsparcia dla zewnętrznego CSS, a nawet CSS w głowie, inline jest sposobem na zrobienie tego. Dodatkowo – i jestem pewien, że słyszałeś o tym wcześniej – szablon musi być tworzony za pomocą TABEL, 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 tak duże, projektowanie i tworzenie ich nie jest trudne – jest po prostu nudne w porównaniu z projektowaniem internetowym lub mobilnym.

Projektowanie

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

Struktura

W treści strony HTML wklej poniższy kod. Wystarczy spojrzeć na kod, aby stwierdzić, że struktura tego e-maila jest niewielka. To naprawdę bardzo dobra rzecz, ponieważ e-maile nigdy nie powinny być złożone. Do tej pory istnieje również maleńka ilość stylizacji tylko tej, która określa całkowitą szerokość tabeli i że między komórkami tabeli nie ma nic.

 <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, po prostu reset i definicja koloru i stylu łącza. Byłbym bardzo ostrożny z tym, jaki kod CSS tutaj wstawiasz, 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ą. Obrazy możesz znaleźć w pliku dostarczonym 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 niczym i możesz również używać własnych obrazów. Do tej pory w kodzie zdefiniowałem szerokość wszystkich trzech obrazów, aby upewnić się, że ich rozmiar jest ustawiony.

Jest coś, o czym musisz być bardzo świadomy: obrazy świetnie nadają się do e-maili, o ile są: małe ib: 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 im nie powie, czego powinni się spodziewać. Jest to również kwestia dostępności, jeśli nie podasz opisu dla niewidomych użytkowników. To jednak inna historia. Lekcja jest następująca: zawsze używaj małego obrazka z tagiem 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 wbudowany

Ostatnią rzeczą, jaką zrobimy, jest dostarczenie 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ć, jak dotąd ten e-mail wcale 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 chcieć: 7 przydatnych wskazówek, dzięki którym wiersz tematu wiadomości e-mail będzie bardziej klikalny.

Ciało

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

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

Stół

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. Należy pamiętać, że styl wbudowany znajduje się na <td>, a nie na <tr>. To, co tutaj robimy, to nowy kolor tła, aby dopasować go do 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ędzie można go 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 nie mają domyślnie 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 rzędzie ponownie znajduje się tylko jedna komórka, która obejmuje dwie kolumny. Ta komórka jest nieco manipulowana przez dodanie do niej wypełnienia i linii łamania na dole, aby oddzielić jej zawartość od wiersza poniżej. Mamy też duży nagłówek, który zapewnia trochę miejsca dzięki marginesom. I to wszystko 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, dzięki czemu komórki są podzielone równomiernie 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

Jest to zdecydowanie najbardziej stylizowana sekcja tego szablonu wiadomości e-mail w formacie HTML. Jak widać po poniższym kodzie, dużo się dzieje. Po pierwsze, cały wiersz otrzymuje nowy kolor tła i kolor tekstu, aby upewnić się, że tekst jest 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 łącze w jego nagłówku zmienia kolor na żółty. Na koniec podkreślono ostatni akapit i aby dodać trochę separacji, 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> <prsws_divider">