E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  Diverse (6)

6 Metode Simple pentru a-ti imbunatati e-mailurile HTML

14.02.2009
6 Metode Simple pentru a-ti imbunatati e-mailurile 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.

Total vizualizari: 5824 5824 afisari   |   Comentarii  0   |   Rating   |   (4 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  www.nettuts.com  
Autor:  Bob Ricca
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 1 2
comenteaza printeaza

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?

Pagina:
« 1 2
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(4 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4795
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4730
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4605
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4540
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4400
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
HTML Flash Python Fireworks Powerpoint JSON StyleSheet Bridge PSD Photoshop Gimp SWF MySQL Fotografie XHTML AJAX Outlook Vista Ruby on Rails PHP XML COREL DRAW Verilog Excel Illustrator Java Lightroom RoR Dreamweaver Word Swift 3D SEO Action Script CSS Sony Vegas Javascript
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software