6 Metode Simple pentru a-ti imbunatati e-mail-urile HTML

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!