8/14/2019 6 Metode Simple Pentru a Imbunatati E-mail-urile

1/6

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!

8/14/2019 6 Metode Simple Pentru a Imbunatati E-mail-urile

2/6

Aceasta include dar nu se limiteaza la:

Yahoo

Gmail

AOL

Windows Live Hotmail

Outlook 2007

Outlook 2003

Lotus Notes

ThunderbirdEntourage

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.

8/14/2019 6 Metode Simple Pentru a Imbunatati E-mail-urile

3/6

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 potajuta sa invingi majoritatea problemelor de testare.

8/14/2019 6 Metode Simple Pentru a Imbunatati E-mail-urile

4/6

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?

8/14/2019 6 Metode Simple Pentru a Imbunatati E-mail-urile

5/6

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

8/14/2019 6 Metode Simple Pentru a Imbunatati E-mail-urile

6/6

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. Esterandul tau!