dispunerea HTML a mesajelor e-mail, în special 4 care trebuie luate în considerare - Yuri Klyuchevskii
În alte evoluții în acest domeniu în ultimii ani a fost apariția serviciului de e-mail Standarde de proiect. care are ca scop îmbunătățirea corespondenței dintre software-ul e-mail; Apariția serviciilor de modul în care vor fi afișate mesaje în diferite aplicații desktop și web poștale de testare; apariția de o varietate de template-uri gratuite pentru a utiliza pentru propriile lor scopuri. În acest articol ne uităm la unele dintre serviciile și template-uri pentru a vă ajuta să înțelegeți cum să corect HTML în format e-mail.
In ciuda acestor succese, aspectul poate fi o sarcină non-triviale. In acest articol voi încerca să dezvăluie toate secretele aspectul corect de litere și pentru a realiza astfel un ecran bun în majoritatea clienților de e-mail. Voi descrie rezultatele experienței mele personale în crearea de email-uri HTML, precum și legătura pe unele informații tehnice de pe Internet.
Când PSD a HTML de timp emailuri consumatoare factor este existența unui număr mare de diferite programe pentru a citi e-mail: de la aplicațiile desktop - Eudora, Outlook, AOL, Thunderbird și Lotus Notes; de lucru printr-o interfață web - Yahoo. Hotmail, Google Mail și altele. Dacă ați crezut că aderă la cross-browser, atunci când structura de pagini web a fost dificil, apoi gata pentru noul joc, deoarece fiecare dintre clienții menționate mai sus pot afișa același e-mail destul de diferit. Și chiar și atunci când aceste fonduri vor fi folosite pentru a afișa totul perfect, ar trebui să țină cont de faptul că cititorii pot schimba dimensiunea ferestrei în timp ce citiți, puteți experimenta tot felul de probleme.
Dacă decideți să se angajeze în e-mailuri HTML aspect manual (preferința mea) sau de a folosi un șablon existent, trebuie să ne amintim două lucruri:
- Utilizați tabelul (tabelul) în aspectul pentru a controla prezentarea și design. Probabil au folosit cele mai recente aspectul avansurilor XHTML / CSS pentru paginile web, dar aceste principii nu funcționează bine în clienții de e-mail.
- Utilizați etichete imbricate în codul HTML-CSS, de exemplu, culoarea de fundal sau stil pentru text.
Pasul 1: Utilizați tabele pentru a prezenta
Din acest tabel! standardele web au devenit norma în structura de pagini, dar nu și în acest caz. clienții de e-mail sunt un pic în urmă, în sprijinul CSS-standarde, ceea ce înseamnă că trebuie să ne întoarcem la mesele de joc pentru a reprezenta, dacă dorim ca la e-mailuri afișate corect pentru fiecare cititor.
În acest caz, va trebui să se mute departe de mari abilitățile de aspectul paginilor web, aici trebuie să utilizați o abordare ușor diferită.
În primul pas de a crea e-mailuri HTML, aveți nevoie pentru a decide cum va arăta. Dacă doriți cu adevărat pentru a da o mulțime de informații pentru cititor, în acest scop, se va apropia de una sau două coloane - acest lucru va ajuta la eficientizarea haos.
format o singură coloană de obicei, este format din:
email-uri cu două coloane conțin, de asemenea, antet și subsol, precum și ca pagină web pe două coloane au o coloană îngustă (dreapta sau stânga), care conține link-uri de navigație și informații suplimentare, precum și coloana mai larg.
Toate acestea pot fi create cu ușurință folosind un tabel, zdrobitor-le cu ajutorul unui document în blocuri. De fapt, utilizarea de tabele - singura modalitate de a realiza un ecran corect în diferite programe de e-mail.
Nu contează ce fel de design în scrisoarea dumneavoastră, lucrul cel mai important de reținut - pune informații importante cât mai mare posibil, astfel încât atunci când deschideți cititorul a văzut imediat cel mai important. Când deschideți o scrisoare de la un cititor de multe ori să acorde o atenție la partea din stânga sus, și doar apoi tot restul.
Asta abordare am folosi la crearea de mesaje în format HTML:
- Pentru prezentarea pe două coloane, de a crea trei mese - unul pentru capacele, una (două coloane) pentru conținut (partea principală) și una pentru pivniță. Pune aceste trei mese într-o singură masă mare. Utilizați aceeași abordare pentru documentul unic coloană. Nu este nevoie să drămui pe masă, utilizați pentru fiecare element al propriei sale, astfel încât veți fi sigur că mesajul va fi afișat bine în aproape toți clienții de e-mail.
- Utilizați atributele din tabelul tag-uri (tabel) și celule (TD), pentru controlul de afișare. De exemplu, border = »0" , valign =» top », align =» din stânga », cellpadding =» 0" și așa mai departe. Acest lucru va ajuta clientul de mail vechi pentru a afișa corect scrisoarea.
- Chiar dacă design-ul nu include un chenar în jurul valorii de mese, veți găsi foarte util în timpul de dezvoltare pentru a seta „1“ border = valoare, în scopul de a găsi posibile erori. După ce eroarea va fi corectat, setați border = „0“.
Abordarea folosind tehnicile descrise mai sus este cea mai potrivită pentru ziua de azi, deși poate părea ofensator pentru web designeri care sunt obișnuiți să folosească standarde moderne.
Să vedem cum puteți stiliza textul din e-mail.
Pasul 2: Adăugați stiluri CSS
Ti-am spus că sprijinul pentru stiluri CSS a fost foarte slabă în clienții de e-mail? Da, este. Iată câteva lucruri pentru care trebuie să le urmeze. Aici sunt metodele pe care le folosesc.
Mai întâi, utilizați inline-stiluri, după cum se arată aici:
Aceeași tehnică ar trebui să fie utilizate în tabele tag-uri, celule, paragrafe, link-uri și altele.
Pentru tabelul exterior ce cuprinde o lățime antet tabel, conținutul și documentul de subsol setat egal cu 98%. Este necesar pentru client de mail Yahoo! Mail. Puteți seta chiar și lățimea de masă de 95% -90%, în scopul de a se asigura că totul pare în regulă. Desigur, pentru tabelele din mijloc expune valoarea lățimii de 100%.
Prescrierea informațiile de bază despre stiluri de font pentru a eticheta celule
Utilizați div tag-ul pentru a poziționa blocuri stânga sau la dreapta într-o celulă de tabel. Google Mail ignoră blocuri descrise ca plutitoare (float), dar Yahoo! și Hotmail nu sunt probleme. În unele cazuri, cel mai bine este de a crea un tabel mai dificil, cu o mulțime de celule, mai degrabă decât bazându-se pe blocuri plutitoare
Deși etichetele de aproape div nu sunt potrivite pentru utilizare, durata de aproape întotdeauna poate fi utilizat, deoarece este elementul inline (cu litere mici). În unele cazuri, intervalul poate fi folosit nu numai pentru a ajusta dimensiunea și culoarea fontului, dar, de asemenea, pentru a poziționa textul de mai sus sau mai jos conținutul.
Rețineți că unele servicii care livrează e-mail-uri, se pot modifica stiluri, astfel încât, de exemplu, stilul de obicei scurt = »margin: 10px 5px 10px 0;“ va fi împărțit în mai multe reguli mai mici. Acest lucru se face în scopul de a scrisorii era clar pentru majoritatea clienților de e-mail. Testați fiecare literă și să vedem ce se întâmplă cu codul, să evite utilizarea frecventă a normelor scurte.
Dacă ați creat un e-mail HTML de lucru și bine afișate, folosind sfaturile descrise mai sus, aceasta este doar o parte a lucrării - există câțiva pași pe care trebuie să știți pentru a vă asigura că scrisoarea dumneavoastră este primită în cel mai bun mod posibil.
Următorul pas - testarea litere într-o varietate de clienti de mail. În acest stadiu, cel mai adesea sunt unele bug-uri care trebuie să fie corectate.
Tehnici importante în această etapă:
Este important ca scrisoarea ta si arata bine cu imagini oprit. În mod implicit, Thunderbird, Outlook și alți clienți de e-mail nu afișează imagini. De exemplu, dacă utilizați text alb pe un fundal întunecat, verifica, ceea ce cu imagini oprit de fond a fost întunecat.
Testul de e-mail, inclusiv testul de verificare „spam“. Puteți utiliza un serviciu gratuit SpamCheck.
Dacă toate testate, și toate erorile sunt corectate, următorul pas este de a verifica următoarele elemente:
Este important să se știe ce poate merge prost sau ce probleme pot apărea atunci când sunt afișate, încercați să le elimine înainte de scrisoarea va fi trimisă abonaților.
Unele dintre metodele de urmat pentru Google Mail și clienții vechi de e-mail:
- Prescrierea definirea culorii de fundal folosind bgcolor tag-ul atributul td nu este folosit pentru aceste scopuri, CSS-stiluri.
- Utilizați atributul de fundal pentru eticheta td, care ar folosi o imagine de fundal în loc de CSS-stiluri.
- Utilizați padding pentru capitonarea de control în celulele, marja, în acest caz, aceasta nu funcționează.
- Dacă aveți nevoie de o margine în jurul celulelor, utilizați tag-ul div suplimentar, care prescrie valorile limitelor, deoarece limitele direct numirea tag-ul TD nu va funcționa în Google Mail.
- Expune capitonarea 10 pixeli în jurul conținutului care ar avea textul nu este „a scăzut în“ la granița.
- Verificați cu atenție toate fonturile, se poate întâmpla ca uitați să vă înregistrați stiluri în mai multe locuri.
În principal pentru a afișa corect literele din clientul de e-mail - codul ar trebui să fie cât mai simplu posibil și ușor de înțeles.
Dacă aveți nevoie pentru a testa un e-mail în Lotus Notes, puteți descărca o versiune de încercare gratuită.
Oricare ar fi Lotus Notes afișează mesajul în format HTML corect, folosiți următoarele indicații:
- Așa cum am discutat mai sus, utilizați tabelul-container, care va include toate celelalte elemente ale scrisorii, precum și tabele individuale pentru antet, iar partea principală a pivniță.
- Crearea unui spațiu în jurul mesei principale, utilizați atributul cellpadding, stabilind-l egală cu cel puțin 5%.
- Nu utilizați stilurile de declarație din tag-ul cap, Lotus poate șterge pur și simplu.
- Utilizați căi absolute pentru imaginile care sunt stocate pe server.
- Încercați să nu utilizați tabelele de atribute colspan, versiunea timpurie a Lotus Notes nu le înțelege.
- Lățimea prescrisa a celulelor din td tag.
- Centrarea scrisoare de obicei, nu funcționează în Lotus.
Mulți utilizatori preferă să primească e-mailuri în format HTML în loc de format text simplu, iar acest lucru este de înțeles. Dar pentru programatori (DTP), creând astfel de scrisori, uneori până la sarcina nu este atât de simplu, deoarece nevoia de a realiza redarea lor excelente, mulți clienți de e-mail. Acest articol a fost whazzup unele metode și tehnici prin care se pot obține rezultate bune.
Link-uri conexe
E-mail Standarde de proiect - un site unde veți găsi o mulțime de sfaturi cu privire la ceea ce oferă diferitele tipuri de sprijin clienti de e-mail, modul de a realiza redarea corectă și mai mult.
Monitorul de campanie și MailChimp - o mulțime de diferite template-uri pentru email-uri în format HTML.
SpamCheck - verifica "spam" e-mailuri.
Turnesol - testarea șablon de scrisoare de servicii în toate serviciile de e-mail populare și clienții de e-mail.