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).

Przede wszystkim trzeba zapewnić jego responsywność, czyli zadbać o czytelność na różnych ekranach zwłaszcza tzw. „komórce”

Oraz 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 nazwy obrazków (wyświetlane, jeśli obraz nie jest wczytany)
  • Czcionki – najlepiej używać tzw. “bezpiecznych fontów”, które wyświetlają się one poprawnie 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
  • krótki temat emaila ma lepszą skuteczność
  • 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). Oczywiście, klawisz CTA może być powtórzony
  • 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 – tel. 501 469 329

tomasz kita z katowic Autor:
Tomasz Kita [bio]
Absolwent Wydziału Prawa Uniw. Śląskiego
20 lat praktyki w reklamie internetowej.
Nastawiony na mimalizm i skuteczność.
Właściciel Studio72

Studio72 / Katowice
Masz pytania, uwagi ? Napisz do mnie (mini-formularz tutaj).