6 Metode Simple pentru a-ti

imbunatati e-mail-urile HTML

Asemeni multor altor designeri web, am prosperat codificand pagini web frumoase si flexibile care se
afiseaza realmente identic in orice browser web. Din nefericire, designul newsletterelor te trimite
inapoi cu zece ani. Taguri condamnabile, tabele, stilizare inline! In acest tutorial sunt prezentate sase
metode care vor imbunatati rapid aspectul newsletter-ului tau.

Newsletters pentru mail

Unui web designer iubitor de coduri clare, formatele HTML pentru emailuri ii amintesc de trecutul
intunecat. In continuare vei putea citi despre15 lucruri pe care le poti face in vederea obtinerii de
mailuri HTML cu un aspect fantastic.

Setarea de conturi de email multiple pentru testare!

Daca vei retine un sfat din acest tutorial, atunci acesta ar trebui sa fie primul. Ca designeri, ne
petrecem o multime de timp creand experienta utilizatorului perfect pe web si testand acea experienta
pe platforme multiple. Si totusi, cand vine vorba despre mail, prea multi dintre noi uitam sa acordam
aceeasi atentie detaliilor.

Foarte asemanator testarii pentru web, crearea unui layout de mail care sa fie afisat la fel in orice
client de mail poate fi un adevarat cosmar.

Pentru a fi siguri ca abonatii tai vor primi mesajul asa cum s-a intentionat – testati in tot ce puteti!
Aceasta include dar nu se limiteaza la:

Yahoo
Gmail
AOL
Windows Live Hotmail
Outlook 2007
Outlook 2003
Lotus Notes
Thunderbird
Entourage
Mac Mail

Dar asteapta – mai sunt!

Unii dintre acesti clienti de mail au versiuni multiple, fiecare procesand in mod diferit codul CSS si
HTML.

Aceasta este o parte a unui mail HTML afisat de o versiune veche de Yahoo.
Acesta este exact acelasi mail afisat pe o versiune noua a Yahoo.

Desi diferentele sunt mici, ele contribuie la un design neingrijit. Si daca nu este suficient, browserul
internet al utilizatorului poate juca de asemenea un rol important in randarea designului tau.

Acum, inainte de a-ti arunca pe fereastra computerul din cauza frustrarii...urmatoarele etape te pot
ajuta sa invingi majoritatea problemelor de testare.
Proiecteaza-ti mailurile

Sunt uimit sa observ cum unii dintre cei mai mari advertiseri incalca regulile elementare ale mailului
HTML.

Acestea sunt cateva indrumari dupa care te poti ghida:

Niciodata nu te baza pe imagini pentru a transmite informatii importante..mai ales

pe imagini mari. Majoritatea clientilor de mail au imaginile blocate in mod prestabilit,
exceptand cazurile in care utilizatorul preia initiativa ... in caz contrar le-ai trimis un frumos
mesaj gol.
Niciodata nu te baza pe imagini de fundal pentru a face un text usor de citit. Asigura-
te ca textul tau beneficiaza de un contrast suficient cu sau fara imagini activate. De exemplu,
Outlook 2007 nu va afisa imagini de fundal in celule de tabel chiar daca imaginile sunt
activate.
Furnizeaza un link pentru cei care au probleme cu vizualizarea mesajului tau. Sigur,
aceasta nu este absolut necesar – dar este bine sa le oferi abonatilor optiunea de a vizualiza
mesajul in browserul lor web (mai ales daca este un design incarcat).
Utilizeaza tag-uri ALT in imaginile importante. Nu pot accentua acest lucru suficient! Cu
imaginile dezactivate in mod prestabilit, tag-urile descriptive ALT pot fi ultima ta sansa de a
convinge utilizatorul sa activeze imaginile.
Cand utilizezi tag-uri ALT, evita dezordinea. Completeaza tagurile ALT care conteaza si
lasa restul liber.

Observatie: Nu am zis sa le excluzi!

Acesta este un header dintr-un mail pe care l-am primit de la Discovery Health:

Am preluat aceasta imagine dinmtr-un cont de Gmail – inainte de activarea imaginilor. Observi cum
textele ALT "bullet" si "spacer" stau in cale?
Adaugarea de tag-uri ALT elementelor care servesc doar in scopuri de design aglomereaza layout-ul
si distrag atentia de la mesajul principal.

Foloseste tabele pentru a-ti structura layout-ul

Pofim? Am pierdut atata timp invatand CSS si acum trebuie sa ma intorc la tabele? Cand vine vorba
despre designul newsletterelor, tabelele sunt importante – si sunt cam singurele standarde de care
dispui.

Cateva lucruri de care trebuie sa tii cont:

Asigura-te ca ai setat toate atributele posibile ale tabelului. Aceasta include continutul
celulelor, spatierea celulelor, margini, aliniere, latime si inaltime.
Tabelele imbricate te ajuta. Asigura-te ca folosesti indentatia potrivita pentru o citire
usoara si clara a codului.
Utilizeaza atributul background pe o celula a tabelului pentru a seta imagini de
fundal. Acest lucru te va ajuta pe Gmail, care in mod implicit nu afiseaza imaginile.

Observatie: Imaginile tale de fundal se vor incarca pe sectiuni, deci planifica in conformitate cu acest
aspect.

Fii constient ca imaginile de fundal aplicate tabelelor sau div-urilor nu sunt suportate de Outlook 2007
De fapt, singurul mod de a utiliza o imagine de fundal in Outlook 2007 este prin incarcarea acesteia in
body, ceea ce, desigur nu este suportat de alti clienti de mail cum ar fi Gmail, Yahoo, sau Windows
Live Hotmail. Incredibil, nu-i asa?

Utilizeaza stiluri Inline la codificarea CSS

Unii clienti de mail populari ignora codul din tag-urile head. Gmail si Hotmail sunt principalii vinovati
care imi vin in minte.

Cu layout-ul construit din tabele, este timpul sa aplici stilurile textului si imaginilor. Iata cateva sfaturi
si trucuri pentru a te asigura ca mesajul tau arata aproape la fel in orice browser.

Utilizeaza tag-uri break ca inlocuitori pentru padding-ul pe verticala. Pentru

modificarea dimensiunii spatiului utilizat, incearca sa le incluzi in tag-uri span si seteaza o
dimensiune a fontului mai mica / mai mare.
Utilizeaza stilurile inline in mod repetat. Folosirea unui tag font pentru un tabel parinte nu
inseamna ca atributul va fi aplicat tuturor copiilor. Asigura-te ca stabilesti stiluri inline pentru
toate elementele HTML.
Aplica stiluri inline detaliate linkurilor. Mai ales in cazul utilizatorilor de Gmail – trebuie sa
setezi stiluri specifice fiecarui link. Altfel, vor mosteni familia de fonturi, dimensiuni si culori
prestabilita si setata de browserul fiecarui utilizator.
Utilizeaza tag-uri span pentu a include imaginile si seteaza atributele fontului pentru
stilizarea textului ALT in mod corespunzator. Aceasta iti permite sa stilizezi textul ALT,
facandu-l mai citet cand imaginile sunt dezactivate.
Utilizeaza formatul de Inbox al Gmail in avantajul tau

Stiai ca linia subiect a fiecarui mail trimis catre un cont Gmail este urmata de primele bucati de text
din respectivul email?

De ce nu ai utiliza asta in avantajul tau!

Deasupra este o imagine dintr-un cont de Gmail.

Ambele newslettere au acelasi continut al headerului, cu diferenta ca Newsletter 1 profita de pe

urma formatarii inbox-ului Gmail.

Iata cum am facut asta:

Insereaza o imagine 1px x 1px ca fiind primul element al mailului tau. Include imaginea intr-un tag
span, setand culoarea fontului la aceeasi nuanta ca si fundalul. Orice text ai aseza in tag-ul ALT pentru
imaginea ta 1px x 1px, va inlocui ceea ce google prezinta in inboxul utilizatorului.

Este chiar foarte usor! Acest lucru va diferentia mailul tau de celelalte din inboxul abonatului.

Si acum, ce urmeaza?

Am facut tot posibilul sa impartasesc cateva lucruri pe care le execut cand creez mailuri HTML. Este
randul tau!