Jak zrobić graficznego maila ? Wytyczne HTML oraz wizualne do e-mailingu

Mówimy o wykonaniu pliku html zgodnie z projektem graficznym (często opracowanym przez Klienta w pliku Word).
Taki plik jest wykorzystywany do wiadomości email np.  jako masowe ofertowanie B2B na ogólne adresy e-mail (sekretariat@, info@, biuro@ itp).

1. Po pierwsze, trzeba zapewnić jego responsywność, czyli zadbać o czytelność na różnych ekranach zwłaszcza tzw. „komórce”.
2. Po drugie, utrzymać się poniżej ogólnej poprzeczki SPAM-u.

Pomogą w tym poniższe zasady (jest ich więcej, ale to najważniejsze).

WYTYCZNE TECHNICZNE E-MAILA (HTML, CSS)

• maksymalnie 600 pixeli szerokości
• waga całkowita emaila do 400 KB (tekst+zdjęcia+grafiki)
• grafiki i zdjęcia wyłącznie w formatach jpg, png i gif (ponieważ akceptują ją wszystkie systemy)
• UNIKAĆ dużych obrazków (wagowo – powyżej 100 KB). Duży obrazek można podzielić na kilka poziomych pasków, mniejszych
• stosować ALT-y czyli odpowiednie OPISY obrazków (wyświetlane, jeśli obraz nie jest wczytany)
• Czcionki – najlepiej używać tzw. “bezpiecznych fontów”, które wyświetlają się na wszystkich urządzeniach. Są nimi Arial, Helvetica, Tahoma, Times New Roman oraz Georgia
• całkowite ostylowanie powinno się odbywać w ramach jednego pliku html, w treści i/lub headzie. Przy okazji warto dodać, że Gmail (czyli najpopularniejszy system poczty) czyta stylowanie w headzie vide: https://developers.google.com/gmail/design/css

WYTYCZNE WIZUALNE / TREŚCIOWE E-MAILA

• nadawca z imienia i nazwiska podwyższa wiarygodność emaila
• warto w pierwszym zdaniu streścić e-maila, lub przedstawić największą jego korzyść, ponieważ część systemów pocztowych np. Gmail, pokazuje to obok nadawcy i tematu e-maila

• logo w nagłówku,
• układ jednokolumnowy, wyjątkowo – dwukolumnowy (jeśli druga kolumna jest mała treściowo)
• duży, wyraźny CTA (Call to Action – czyli klawisz do przekliku na stronę lub w inne miejsce, przykład niżej). Oczywiście, klawisz CTA może być powtórzony

Zadzwoń teraz

• w pisaniu reklamowym, także mailingów – strona czynna jest zwykle lepsza niż bierna
• warto umieścić link do podglądu wiadomości na serwerze, bo mimo spełnienia powyższych wymagań, nadal jakaś część systemów pocztowych może „pokiereszować” e-maila

Pytania ? Tworzymy graficzne e-mailingi, więc chętnie odpowiemy – KONTAKT Z NAMI

Autor:
Tomasz Kita [bio]
Studio72 / Katowice
e-mail: tomek@studio72.net
tel. 501 469 329

Wspieraj moją twórczość - https://buycoffee.to/tomasz-kita-studio72