Email-urile de tip newsletter in format template HTML au cunoscut un progres semnificativ de-a lungu anilor. Emailul de tip template HTML este o metoda de comunicare de succes, un liant intre cititori si editori. Expeditorii acestor email-uri pot vedea cu exactitate de cate ori au fost deschise email-urile, de cate ori au fost trimise mai departe si pot masura interesul cititorilor pentru anumite produse si subiecte. Cititorilor le este prezentata informatia in formatul unei pagini web, intr-o maniera mult mai atractiva din punct de vedere vizual, si mult mai usor de scanat, dar si de navigat, in comparatie cu email-urile cu text simplu.

Codarea unui template HTML este chiar o chestiune distractiva, dar si practica, pe care programatorii trebuie sa o rezolve. Spre deosebire de codarea unei pagini web, template-urile HTML trebuie sa poata fi vizualizate foarte bine si pe un software de email mai vechi ca de exemplu Outlook sau Mac Mail, dar si sa se adapteze la ecranele telefoanelor smart si tabletelor. Va vom arata in cele ce urmeaza cum sa creati un free HTML template care arata bine pe orice tip de dispozitiv, dar si cum sa va adaptati codul template HTML curent pentru a putea fi vizualizat pe telefoane si tablete.

Principii de baza template HTML

Cea mai mare problema atunci cand codati un free template HTML este aceea ca exista atat de multe unelte software, capabile sa citeasca emailuri, de la softuri pentru desktop precum Eudora, Outlook, AOL, Thunderbird, si Lotus Notes, pana la servicii web de email, precum Yahoo!, Hotmail, si Google Mail, si aplicatii email pe telefoane si tablete. Software-ul folosit pentru a reda varianta HTML pentru fiecare email, determina codurile functionale HTML si CSS.

Daca va gandeati ca este dificil sa asigurati compatibilitatea intre browsere pentru site-urile dumneavoastra web, aceasta este o cu totul si cu totul alta problema, pentru ca fiecare dintre uneltele software pentru email poate afisa un singur email in mai multe moduri. Si chiar atunci cand aceste unelte sunt capabile sa afiseze varianta HTML a emailului in mod corect, exista neconcordante, spre exemplu, marimea ferestrelor deschise atunci cand se citesc email-urile pot complica mult lucrurile.

Daca alegeti sa codati un template HTML manual sau sa utilizati un template HTML deja existent, exista doua concepte fundamentale pe care trebuie sa le aveti in vedere:

1. Folositi tabele de tip HTML pentru a controla configuratia si modul de prezentare. Poate ca sunteti obisnuit sa folositi configuratii CSS pentru paginile dvs. web, insa aceasta abordare nu va mai rezista prea mult in lumea email-ului.
2. Folositi stiluri CSS pentru a controla celelalte elemente de prezentare in cadrul email-ului dvs., cum ar fi culorile de fundal si fonturile.

Cea mai rapida si mai usoara modalitate de a vedea exact cum interactioneaza tabelele HTML si stilurile CSS cu un email HTML, este aceea de a downloada cateva template-uri. Atunci cand deschideti aceste template-uri, veti observa cateva lucruri ce vor fi abordate in cele ce urmeaza, in cadrul acestui articol:

• Declaratiile CSS apar sub body, nu intre indicatiile
• Specificatiile CSS sunt folosite in urmatoarele situati: in loc sa folosim regula abrevierii font: 12px/16px Arial, Helvetica, ati putea sa impartiti aceasta specificatie in proprietatile sale individuale: font-family, font-size, si line-height.
• Span si div S sunt folosite indeosebi pentru a obtine efecte specifice, in vreme ce tabelele HTML se ocupa de mare parte a configuratiei.

Declaratiile CSS sunt de baza, si nu folosesc niciun fisier de tip CSS.

Pasul 1: folositi tabele HTML pentru configuratie

Este adevarat: tabelele s-au intors, la cel mai inalt nivel! Poate ca standardele web au devenit etalon pentru codarea paginilor cu display in browsere web, dar aici nu este vorba de web. Cei cativa clienti ai software-ului email sunt cu ani lumina in urma configuratiei de tip CSS, ceea ce inseamna ca trebuie sa recurgem la folosirea tabelelor daca ne dorim ca newsletterele pe care le trimitem sa poata fi citite asa cum trebuie de fiecare cititor in parte.

Asadar, lasati la o parte compatibilitatea cu standardele, si alte abilitati ale dumneavoastra, pentru ca vom aborda problema din alta perspectiva!

Primul pas in crearea unui template HTML este acela de a va decide ce tip de configuratie va doriti sa utilizati. Pentru newslettere, configuratiile cu o singura coloana sau cu doua coloane sunt cele mai bune, deoarece acestea controleaza haosul ce rezulta in urma unei cantitati ridicate de continut publicat, intr-un spatiu atat de restrans, asa cum este cazul unui email. Designul emailurilor pe o singura coloana determina usurinta si lejeritatea in afisarea acestora pe telefoane si tablete.

Configuratia pe o singura coloana consta, in general, in:

1. un antet, ce contine un logo si cateva (sau chiar toate) link-urile de navigare de la site-ul web principal, pentru a obisnui utilizatorii si vizitatorii site-ului cu continutul acestuia.
2. link-uri inserate in email catre relatari ce apar mult mai jos in cadrul email-ului, urmat de relatari si continut
3. o nota de subsol, la finalul email-ului, care contine in general link-uri identice cu navigarea de top, dar si instructiuni de dezabonare.

Emailurile pe doua coloane folosesc de asemenea un antet si o nota de subsol. La fel ca si in cazul unei pagini web pe doua coloane, acestea includ o coloana ingusta pentru gazduirea caracteristicilor si link-urilor pentru obtinerea informatiilor suplimentare, si o coloana mult mai mare pentru continutul emailului. Pentru a obtine o configuratie de email pe doua coloane, care sa se potriveasca si pe tablete si telefoane smart, aveti nevoie de cateva coduri, asa cum veti vedea in cele ce urmeaza, in cadrul acestui articol.

Emailurile promotionale se ghideaza dupa aceleasi reguli, insa contin mai putina informatie, in ceea ce priveste link-uri inserate si continut. Acestea includ in general una sau doua mesaje, si uneori folosesc o imagine mare cu un text micut explicativ, si cateva like-uri sub acea imagine.

Toate aceste posibilitati de configurare a email-urilor pot fi create foarte usor, folosind tabele HTML pentru impartirea spatiilor intre randuri si coloane. De fapt, folosiea tabelelelor HTML este singura modalitate de obtinere a configuratiei care se va comporta impecabil pentru toti clientii.

Indiferent de modul in care este conceput emailul, trebuie sa tineti cont de faptul ca cel mai important continut ar trebui sa apara la inceputul emailului, pentru a fi cat mai vizibil, imediat ce clientul isi deschide emailul. Partea din stanga sus a oricarui mesaj prin email este in general, primul loc in care destinatarii se uita atunci cand deschid email-ul.

Aceasta este abordarea cea mai comuna folosita pentru crearea emailurilor de tip HTML:

• Pentru un design al emailului pe doua coloane, creati un tabel pentru antet, doua coloane pentru continutul din centru, si inca un tabel pentru notele de subsol cu alte cuvinte, tre tabele per total. Incadrati toate aceste tabele in alt tabel, mai mare. Folositi aceeasi tactica si pentru emailuri pe o singura coloana, insa continutul emailului trebuie sa fie pe o singura coloana. Aceasta abordare este potrivita in special daca design-ul emailului dumneavoastra contine si imagini care sunt impartite in mai multe celule. Altfel, un singur tabel cu randuri td pentru antet, continut si note de subsol, ar trebui sa se incadreze perfect in toate software-urile email, mai putin in cel de tip Lotus Notes.

• Folositi insusirile in cadrul tabelului si randurilor td pentru a controla configuratia tabelului. Spre exemplu, setati border=”0″, valign=”top”, align=”left” (sau center), cellpadding=”0″, cellspacing=”0″ si asa mai departe. Acest lucru ajuta clientii mai vechi sa poate vizualiza emailurile intr-o maniera cat de cat acceptabila.
• Chiar daca designul email-ului dvs. nu include un cadru in jurul tabelului dvs., puteti seta border=”1″ in timpul crearii emailului, pentru a scapa de eventualele probleme ce pot aparea. La final, puteti schimba inapoi border=”0”.

In vreme ce aceasta abordare poate fi privita ca o adevarata ofensa de catre „puritanii” care prefera sa foloseasca codurile, in loc sa se conformeze celor mai noi tendinte si standarde, aceasta este singura abordare viabila la acest moment. Insa faptul ca folosim tabele pentru configuratie nu inseamna ca trebuie sa ne reintoarcem la metodele invechite, complet. Spre exemplu, indiferent de cat de rau ar arata un email HTML in Lotus Notes, nu ar trebui sa fiti niciodata obligat sa recurgeti la folosirea tag-ului font. Si in vreme ce dispozitivul de redare al email-urilor Outlook 2007 nu este chiar perfect, acesta poate reda tabelele de baza HTML foarte bine.

Pasul 2: adaugati stiluri CSS

Suportul CSS nu este foarte reusit pentru clientii email. Dar inca mai puteti utiliza CSS pentru stilurile din cadrul emailului dumneavoastra, o data ce ati creat si verificat configuratia tabelului. Sunt insa cateva lucruri la care trebuie sa fiti atent, si va prezentam totodata pasii ce trebuie folositi.

In primul rand, folositi stiluri inline pentru a stoca toata informatia dumneavoastra din punct de vedere al stilului.

Acestea includ table, td, p, a, si asa mai departe.

Nu folositi declaratia CSS style in tag-ul HTML head, asa cum o puteti face atunci cand lucrati pe paginile web. Puteti plasa declaratia Style exact dedesubtul tag-ului body – cu toate acestea, Google Mail cerceteaza documentul pentru orice declaratie style si o sterge cu succes. De asemenea, nu va deranjati sa folositi elementul link ca si referinta catre un document extern: Hotmail, Google Mail si alte software-uri vor ignora, modifica si sterge referintele externe.

Pentru tabelul dumneavoastra principal, care contine tabelele cu antetul, continutul si notele de subsol, setati latimea la 98 la suta. S-a constatat faptul ca Yahoo are nevoie de 1 la suta pentru a afisa emailul in mod corespunzator. Daca partile laterale sunt foarte importante pentru aspectul emailului dumneavoastra, atunci setati latimea la 95 la suta sau chiar la 90 la suta, pentru a evita problemele ce pot aparea. Desigur, tabelele din interior ar trebui setate la suta la suta.

Includeti informatii generale despre stilurile caracterelor alese in tabelul td  cel mai apropiat de continut. Este adevarat ca acest lucru poate rezulta declaratii repetate cu celule td multiple. Includeti definitii ale stilurilor caracterelor alese in antet (de ex. H1, h2, p sau a, atunci cand este necesar acest lucru).

Folositi div pentru a include mici casute de continut si link-uri catre partea stanga sau dreapta in interiorul celulei  ”td” a tabelului. Spre exemplu, Google Mail pare ca ignora declaratia CSS, desi Yahoo si Hotmail o accepta foarte bine. Cateodata este mai bine sa codati un proiect mult mai complex al tabelului, decat sa va bazati numai pe declaratia de tip float. Sau, de vreme ce este atat de simplu sa stricati aspectul unui email, cereti specialistului care va ajuta sa includa continutul de tip „float” in coloana ingusta din lateral.

Atunci cand optiunea div pare sa nu fie foarte utila, span functioneaza de fiecare data, datorita elementelor sale. In unele cazuri chiar, span poate fi folosit numai pentru a colora sau a aranja textul : acestea pot fi folosite pentru a pozitiona textul deasupra sau dedesubtul continutului.

Tineti cont de faptul ca unele servicii de livrare vor descarca definitiile de stil pentru a le face cat mai explicite si mai lizibile de catre toate softurile de email. Spre exemplu, varianta CSS style=”margin: 10px 5px 10px 0;” poate fi extinsa intr-o declaratie mult mai lunga, precum in exemplele anterioare. Testati cu atentie fiecare email si cautati sa vedeti ce se intampla cu codul email. Incepeti cu codul CSS deoarece, in cel mai rau caz, pare ca functioneaza perfect cu toate softurile de email.

Daca ati downloadat si studiat un template html, veti vedea ca tabelul principal este tratat in aceeasi masura ca si tagul html body. Din perspectiva CSS, acest tabel actioneaza la fel cum ar face-o optiunea html body daca servicii precum Google Mail nu ar ignora tag-ul body.