Reguli pentru realizarea unui Newsletter care sa se vada bine indiferent de clientul de mail

Realizarea de newsletter-e este una dintre cele mai frustrante munci posibil, motiv pentru care, iti vine sa crezi sau nu, exista pe lumea asta si specialisti in newsletter design.

De ce este frustrant sa realizezi un newsletter? Pentru ca newsletterul, desi arata bine in browserul tau (mai bine chiar decat site-ul pentru care il produci), acesta va arata cu totul altfel vazut cu un client de mail.

“Dar cum? Newsletterul nu respecta standardele HTML???” Ei bine, oricat ar respecta stantardele un newsletter facut in html, nu acelasi lucru se intampla cu clientii de email. In fapt, nu exista standarde ale html-ului pentru email-uri care sa fie respectate de toti clientii de mail.

“Dar cum asa? Pai voi face newsletterul pentru Yahoo Mail, GMail si Outlook. Simplu!”. Si tocmai ti-ai raspuns la nelamuriri. Nu exista un standard unitar pentru cei trei clienti de email.

Cu toate acestea, exista cateva reguli in realizarea unui newsletter, reguli care, daca le respecti, ar trebui sa te impace cu gandul ca tu ai facut tot ce ai putut:

Regula 1 – Foloseste… FOLOSESTE!… tabelele pentru design-ul newsletter-ului

“Cuuuuuuuuuuuuum? Sa folosesc tabele pentru layout??? Blasfemie!!!”

Ei bine, aici trebuie sa calci peste mandrie si sa inghiti galusca. Vrei, nu vrei, clientii de mail asculta de tabele atunci cand te vei folosi de ele pentru design.

Folosirea tabelelor este utila doarece majoritatea clientilor de email (ma refer aici la Outlook si chiar la Gmail) vor elimina din codul newsletter-ului orice considera ca este “nenecesar”, ca de exemplu CSS-urile ce tin de float sau de pozitionare in pagina.

Asadar, NU pentru DIV-uri si DA pentru TABELE.

Cea mai buna solutie va fi chiar si sa pui tabele in tabele. Foloseste-te de width=”pixeli” pentru toate celulele tabelelor. Clientii de mail vor asculta de acestea. Renunta la padding sau margin; mai bine foloseste celule goale pentru asta.

Regula 2 – Foloseste-te de masurarea in pixeli

MEREU. Lasa em, lasa procentele. Fie ca masori elemente din pagina, fie ca stabilesti inaltimea fonturilor, foloseste ca unitate de masura pixelul.

De asemenea, desi asta nu este obligatoriu, ar fi preferabil ca, indiferent de intaltime, lungimea newsletterului sa fie de 500-600… hai… 620 de pixeli.

Regula 3 – Foloseste-te de CSS inline. Nu pune stilul CSS in head-ul paginii si nici nu folosi CSS-uri externe

Nu folosi CSS-uri externe pentru ca unii clienti de mail ar putea sa nu iti incarce fisierele. De asemenea, gandeste-te ca atunci cand interpreteaza un mail, clientul care iti afiseaza mesajul in browser nu iti va scrie doua head-uri de pagina, la fel cum nu iti va scrie doua body-uri. CSS-ul, care se afla in newsletterul tau in head, risca sa nu mai fie incarcat.

Gmail sterge orice css definit intre tag-urile <style></style>. Asadar, muta totul inline. Cand ai ceva de modificat cu CSS, pune totul intr-un atribut style. De asemenea, nu te folosi de prescurtari ale CSS-ului (font:bold 1em/1.2em georgia,times,serif;). S-ar putea ca clientilor de mail sa nu le placa asta.

Si la o adica…

Regula 4 – Foloseste-te… FOLOSESTE-TE!… de stilurile definite prin atribute HTML

“Blasfemie! Blasfemie! De trei ori, Blasfemie!” Mda… Fa-te frate cu dracu’ pana treci Iadu’!” Cu alte cuvinte, nu te sfii sa folosesti width=”pixeli”, height=”pixeli” border=”0″, valign=”top”, align=”left”, cellpadding=”0″, cellspacing=”0″ sau bgcolor=”#fff” peste tot pe unde aceste atribute sunt disponibile.

Si, ca sa ma fac si mai bine inteles…

Regula 5 – Repeta-te!

O lectie pe care am invatat-o din newsletterele pe care le-am realizat este aceea ca repetitia este mama invataturii. Repeta-te. Cu alte cuvinte, daca ai definit un paragraf prin intermediul atributelor html, fa-o si cu style=””. Nu se stie niciodata ce client de mail iti va citi newsletterul, dar un lucru este sigur. Indiferent pe ce limba i-o vei spune, el tot va trebui sa inteleaga ce vrei de la el.

Iar cand zic “repeta-te” vreau sa duci totul la extrem. Ai un link care vrei sa aiba o culoare anume? Scrie-l asa:

<a href=”http://siteulmeu.ro/” style=”color:#ff00ff”><span style=”color:#ff00ff”>REPETA-TE!</span></a>

Regula 6 – Nu te folosi de imagini ca background

Pentru ca nu va merge peste tot. Pur si simplu… Iar daca ai imagini…

Regula 7 – Include de fiecare data dimensiunea imaginilor

Pentru ca daca nu o vei face, te vei pomeni ca clientii de mail vor inventa propriile dimensiuni pentru imaginile care sunt blocate. Nu uita sa te folosesti de atributul alt cand vei afisa o imagine.

Regula 8 – Nu te folosi doar de imagini pentru realizarea newsletter-ului

Sa nu te folosesti doar de imagini pentru realizarea newsletterului, crezand ca astfel vei scapa de orice stres privind realizarea newsletter-ului. Pentru ca, odata ce vei face asta, vei avea un alt motiv de stres: Clientii de mail vor considera newsletterul drept spam.

Regula 9 – Fa si o versiune text pentru newsletterul trimis

Daca trimiti un newsletter care sa fie doar de tip HTML, asteapta-te ca o parte din abonatii tai sa-l primeasca in folderul de spam.

Este important ca newsletterul tau sa contina si o versiune de tip text.

Regula 10 – Intotdeauna ofera un link catre o versiune a newsletterului care sa poata fi vazuta cu browser-ul

Nu intotdeauna cititorii newsletterului vor putea vedea cum trebuie ce le-ai trimis. Asa ca asigura-te ca le oferi si o versiune ce poate fi vazuta cu un browser.

Regula 11 – Testeaza, testeaza si iar testeaza

Ai terminat de facut newsletterul? Nu-l trimite. Testeaza-l in: Yahoo Mail, Gmail, Outlook, un device iOS, un device Android. Daca arata cum trebuie (cat de cat…), atunci poti trimite newsletterul.

Citeste si:

Group Mail: Tips to Create HTML Email That Works with All Email Clients (Part 1) – http://group-mail.com/html-email/tips-to-create-html-email-that-works-with-all-email-clients-part-1/

Hongkiat: 9 Tricks To Design The Perfect HTML Newsletter – http://www.hongkiat.com/blog/design-perfect-newsletter/

Campaign Monitor: Email Design Guidelines – http://www.campaignmonitor.com/resources/will-it-work/guidelines/

Design Festival: How to Test Your HTML Email Newsletter Before You Hit Send – http://designfestival.com/how-to-test-your-html-email-newsletter-before-you-hit-send/

Litmus: Why Do Email Clients Render Emails Differently? – http://litmus.com/blog/why-do-email-clients-render-emails-differently

Reach Customers Online: How To Code HTML Email Newsletters (Updated Version) – http://www.reachcustomersonline.com/how-to-code-html-email-newsletters-all-new-version/

M-am servit de poza de la adresa: http://photo.icedcoffee.ie/2009/04/27/cross-eyed/