Jak stworzyć ładnie wyglądający e-mail za pomocą CSS?

Wielu użytkowników Sieci woli wysyłać e-maile korzystając z tak zwanego czystego tekstu. Taka wiadomość nie może zostać w żaden sposób sformatowana. Dlatego czasami trzeba skorzystać z trybu edycji HTML.

Wiadomości HTML-owe znajdują zastosowanie w profesjonalnej korespondencji biznesowej czy w graficznych newsletterach. Dzięki obsłudze znaczników HTML, internauta może zmieniać krój czy kolor czcionki, dodać obrazki, a w niektórych webmailach (np. w Gmailu) nawet osadzać klipy wideo.

Największym wyzwaniem jest stworzenie ładnie wyglądającego e-maila, który na każdym komputerze będzie prezentował się tak samo i zda egzamin w każdym kliencie pocztowym – zarówno desktopowym, jak i webowym. Niektórzy deweloperzy uważają, że właśnie dlatego można korzystać wyłącznie z najbardziej podstawowych tagów HTML.

Nie oznacza to, że korzystanie z kaskadowych arkuszy stylów jest zabronione. Aby jednak skutecznie z nich korzystać, należy przestrzegać kilku zasad. Oto one:

Nie należy linkować w wiadomości do plików CSS przesyłanych w formie załączników. Takie elementy są bowiem ignorowane przez większość programów do obsługi poczty elektronicznej.
Nie należy wykorzystywać CSS-ów umieszczonych w sekcji <head> dokumentu HTML. Gmail jak i wiele innych klientów ignoruje je. Jedynym wyjściem jest korzystanie ze stylów wewnętrznych (inline styles), używanych wewnątrz HTML-owych znaczników. Choć nie oferują wszystkich możliwości zewnętrznego CSS, to jedynie nieliczne klienty je ignorują.
Style wewnętrzne są definiowane w ramach znaczników HTML, w obrębie sekcji <body> dokumentu. Przykładowy kod wygląda tak:

<p style="color:green;font-family:sans-serif;">zielony tekst czcionką bezszeryfową</p>

Na tej samej zasadzie da się wykorzystywać znaczniki <span>. Jednocześnie warto unikać znaczników <div>. Są one usuwane przez wiele usług pocztowych, w tym Gmaila czy Hotmaila. Lepiej tworzyć tabele (znaczniki <table>, <tr> i <td>). Pływające elementy można osadzić np. tak: <table align="left">.
Znaczniki <div> są dopuszczalne tylko wtedy, gdy efektem końcowym ma być jednokolumnowy e-mail. Z drugiej strony, także w tej sytuacji mogą być wykorzystywane tabele.
Najlepszym sposobem na zapewnienie dokładnego odwzorowania kroju i koloru czcionek na ekranie adresata wiadomości jest wykorzystanie stylów wewnętrznych. Ich zastosowanie jest jednak dość czasochłonne. Dlatego można zdecydować się na oferujący mniejszą precyzję znacznik <style>.
Style wewnętrzne warto zawsze stosować przy nagłówkach i innych wyróżnionych elementach. Powinny one wyglądać świetnie, przyciągać oko użytkownika i zachęcać do dalszej lektury. Taki mechanizm sprawi, że – na przykład – kolor nagłówka e-maila oraz kolor logo będą takie same.
Dużym wyzwaniem dla nadawcy są obrazki. Wiele programów w ogóle ich nie wyświetla, chyba, że internauta się na to zgodzi. Niektóre aplikacje akceptują znacznik <img>, ale nie rozpoznają grafik zawartych w ramach kaskadowych arkuszy stylów (na przykład obrazka tła). Dlatego nie warto stosować ciemnego tła w wiadomościach. Jeśli klient je zignoruje, to użytkownik najpewniej niczego nie odczyta z wiadomości.