|
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! Cum merge designul, codificarea si testarea campaniilor tale pe mail?
|
3008 afisari |
30 min
|
Incepator
