Projekt Newslettera HTML/CSS

Trzeba przygotować projekt Newslettera według poniższej specyfikacji. Treść i zdjęcia zapewniam:

Specyfikacja w skrócie:

Kodowanie: UTF-8

Szerokość: 600-650px

-Treść zamknięta w <table> i wycentowana

-Wszytskie przyciski „call to action” muszą mieć zakodowane hiperłącza

-Większość tekstu zwykłego powinno być w formie tekstów zamiast w grafikach (zwiększa to prawdopodobieństwo odczytania maila w przypadku blokowania obrazków).

Pełna specyfikacja:

Kodowanie w standardzie UTF-8

Szablon musi mieć formę tabelaryczną sformatowaną za pomocą stylów CSS.

Szerokość maila, którą rekomendujemy to ok. 600 px. Zazwyczaj, możemy polecić przedział pomiędzy 600 a 650 pikseli. Większe kreacje u użytkowników, którzy korzystają z ekranów o mniejszej rozdzielczości, mogą wymagać przewijania w poziomie, a jak wiadomo jest to niezgodne z utartymi zasadami użyteczności i projektowania.

Konieczne, przy załączaniu w e-mailu elementów graficznych, jest stosowanie tagu alt, z odpowiednio przygotowaną treścią, przekonywującą do pobrania grafiki, gdy jest ona automatycznie blokowana (np. „Pobierz grafikę i zobacz co przygotowaliśmy dla Ciebie”). Do każdego obrazka dodajemy border="0" i display:block.

Marginesy najlepiej określić za pomocą margin (cell – Margin, padding (cellPadding) wyznaczając w komórkach odpowiednią wartość wyrażoną w pikselach (TABLE cellMargin-10 cellPadding=5>). Trzeba jednak pamiętać, że padding może być niepoprawnie odczytywany przez programy typu Lotus.

Najlepiej stosować czcionki Verdana, Tahoma, Arial lub Times New Roman z określeniem ich wielkości.

Zalecamy też aby nie używać atrybutu <style> w sekcji HEAD.

Grafiki powinny mieć rozszerzenia: JPG, JPEG, GIF, PNG (IMG src=”[url removed, login to view]”alt=”Pobierz grafikę, aby zobaczyć całą treść wiadomości”>). Grafika z płynnymi przejściami kolorów powinna mieć format JPG, ta składająca się z kilku kolorów powinna mieć format GIF lub PNG (8 bit).

Wszelkie bloki dokumentu zawierające kod powiązany z językiem Javascript lub Flash są przeważnie pomijane przez większość popularnych programów pocztowych.

Paddingi nie zadziałają.

Wszelkie przestrzenie uzyskujemy tylko poprzesz zakodowanie pustych komórek tabel o określonych szerokościach.

Wszystkie szerokości tabel i komórek w nich zawartch muszą zgadzać się co do piksela i muszą być określone (choćby HTML-owo).

Im wiecej w newsletterze tekstu, tym lepiej. Obrazki nie zawsze otwierają się domyślnie. Czasami trzeba kliknąć "Pobierz obrazki", żeby je zobaczyć. Text widzimy od razu. Dlatego mailing, który powstał w oparciu tylko o obrazki to nie jest dobry pomysł. Nie mówiąc już o tym, że zbyt duże

obrazki (rozmiarowo/wagowo) najprawdopodobniej spowodują, że newsletter wpadnie w spam. Jeżeli taka sytuacja się zdarzy, trzeba je pociąć na mniejsze.

Atrybut line-height jest bardzo trudny do kontrolowania. W każdym kliencie pocztowym interpretowany jest nieco inaczej. Dlatego nie zaleca się projektowania kreacji newsletterów, w których występują boksy otoczone borderem z zaokrąglonymi rogami. Tych ostatnich nie da się bowiem skodować czystym HTML- em, czy CSS- em. Wstawianie borderów, jako grafiki jest z kolei bardzo ryzykownym przedsięwzięciem.

CSS Graphic Design HTML Newsletters

Project ID: #9167061

About the project