Każdy kto miał kiedykolwiek do czynienia z kodowaniem newsletterów wie, że rządzą się one własnymi prawami. Większość zasad, które obowiązują i doskonale sprawdzają się przy kodowaniu stron internetowych, przy e-mailingu niestety nie mają zastosowania. A szkoda. Życie programistów byłoby o wiele łatwiejsze i przyjemniejsze 🙂
Pomińmy jednak mało realne marzenia i skupmy się na tym by produkt finalny, czyli nasz newsletter, był najwyższej jakości. Można to osiągnąć stosując odpowiednio wybrane elementy kodu html / css.

W tym wpisie skupimy się na podstawowych wytycznych w kodowaniu newsletterów oraz na obrazkach, które nie zawsze się wyświetlają.

Kilka podstawowych wytycznych

Nadrzędnym celem w programowaniu newsletterów jest zastosowanie takich rozwiązań, które pozwolą na prawidłowe wyświetlenie emaila w każdym kliencie pocztowym, w każdej przeglądarce i na każdym urządzeniu. Ograniczenia w stosowaniu kodu polegają na tym, że trzeba wykorzystać tylko takie możliwości, które zadziałają u każdego odbiorcy bez względu na stopień zaawansowania narzędzi z jakich korzysta.

Idąc tym tropem można wyodrębnić kilka sprawdzonych zasad:

  • newslettery definiujemy przy pomocy tabel <table>,
  • formatowanie css odbywa się inline,
  • dobrym zwyczajem jest stosowanie w nagłówku pliku html niektórych reguł reset.css,
  • nie używamy reguły „float”,
  • stosujemy zagnieżdżanie kolumn zamiast „colspan” czy „rowspan”,
  • każda komórka <td> zawierająca teksty musi mieć ustawione formatowanie tekstu,
  • każdy obrazek <img> musi mieć reguły style=”display: block; border: none;” co pozwoli uniknąć niechcianych odstępów i obramowań,
  • używamy podwójnych deklaracji wymiarów, np.: width=”600” style=”width: 600px;” aby reguła była zrozumiała dla różnych klientów pocztowych,
  • nie używamy skrótów w postaci: border-bottom: 1px solid #b2b2b2 – zamiast tego: border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #b2b2b2;

Kiedy obrazków brak

Zdarza się tak, że z różnych powodów nie wyświetlają się obrazki. Wówczas nasz newsletter zamienia się w pustą, irytującą tabelkę. O skuteczności takiego przekazu nie ma mowy.
Jak temu zaradzić, by e-mail w wersji bez obrazków wciąż był atrakcyjny i spełniał funkcję informacyjną?

Alt
Dobrym nawykiem jest stosowanie atrybutów „alt” przypisanych do obrazka <img>. Krótkie opisy są doskonałym sposobem na poinformowanie odbiorcy o znaczeniu jakie niósłby ze sobą obrazek. Dobór słów jest tu bardzo istotny. Nie tyle chodzi o opis ilustracji, ile o przekazanie konkretnej informacji, tej najistotniejszej dla odbiorcy.

Kolory
Atrakcyjność newslettera bez obrazków podnosi także zróżnicowanie kolorów i rozmiarów czcionek wyświetlanych altów. Te drobne zmiany pozwolą na wyróżnienie najistotniejszych fragmentów maila oraz wpłyną na jego przejrzystość. Warto też poświęcić chwilę uwagi na dopasowanie kolorów tła poszczególnych komórek do kolorystyki obrazków. Dzięki temu zyskujemy możliwość oddania „klimatu” projektu graficznego, co wpłynie na pozytywny odbiór newslettera.
Kilka minut dodatkowej pracy istotnie zwiększa czytelność maila w każdej sytuacji.

Title
Warto też pamiętać o stosowaniu „title” dla linka <a>. Title jest napisem wyświetlanym w chmurce po najechaniu kursorem na aktywny element. Powinien być spójny z przekazem obrazka bądź alta, lub też uzupełniać go. Wszystko zależy od konkretnego przypadku, a dobór treści powinien być warunkowany zwiększeniem spójności i czytelności przekazu.

Niebawem opiszemy kolejne wskazówki jak prawidłowo kodować newslettery.

0 Comments

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*