Share
E-mailul este un mediu minunat. Aceasta merge direct în cutia poștală, iar rentabilitatea investiției este raportată pe scară largă ca fiind prin acoperis la 4000%. Este, de asemenea, perpetuu greșit înțeleasă și prea des este făcută prost. Odată cu explozia recentă de smartphone-uri, citim mai des mesajele noastre de pe iPhone sau Galaxy, dar, din păcate, o mulțime de e-mail marketing nu a reușit să țină pasul. Văd acest lucru ca o oportunitate imensă ratată, deoarece un e-mail bine executat poate fi plăcut pentru a fi deschis și de mare succes.
Dacă ați încercat deja mâna la proiectarea și dezvoltarea de e-mail HTML, probabil că ați stabilit deja că poate fi destul de dificil. Și nu vă imaginați - este destul de greu. Iata de ce:
[Vom continua să folosim Word pentru crearea mesajelor de poștă electronică deoarece credem că este cea mai bună experiență de scriere a mesajelor de e-mail în jur.
Echipa Outlook
Atunci când codați pentru web, puteți conta cel puțin pe faptul că toate browserele majore (Chrome, Firefox, Internet Explorer, Safari și Opera) încearcă să adere la standardele web pentru redarea HTML și CSS.
Când vine vorba de clienții de e-mail, testați pe o grămadă de programe vechi și noi. Acestea variază de la telefoanele noi care rulează pe Android și iOS la IBM Lotus Notes sau Microsoft Office 2007 (care transformă infamat HTML-ul creat cu plăcere în motorul de redare HTML Word.) Versiunile anterioare ale Outlook au folosit un browser pentru a reda codul HTML - logic.Pentru ce treceți la un procesor de text pentru a reda HTML pe care îl întrebați? Ei bine, pentru "motive de securitate", spun ei). Și nici unul dintre aceste programe nu trebuie să adere la nici un standard. În principiu, tocmai tocmai au reușit. Puteți vedea cum arată suportul pentru standarde pentru unii dintre cei mai populari clienți de e-mail la proiectul Standarde de e-mail.
Dacă acest lucru nu este destul de rău, cupluți-l cu următorul fapt: există aproximativ un milion de combinații diferite de modalități pe care e-mailurile le pot face pe desktop și mobil.
Posibilitățile de redare sunt (aproape) nesfârșite. Iată o listă cu câțiva dintre cei mai obișnuiți clienți de e-mail:
Clienți mobili:
Clienți desktop:
Clienții Webmail:
Sunt multe dispozitive!
Dacă sunteți deja familiarizat cu dezvoltarea web, uitați tot ceea ce știți despre el.
Pentru a compune toate aceste lucruri, stilul conditionat nu este deloc o opțiune. Există câteva lucruri pe care le puteți face cu comentariile condiționate, dar este limitat la direcționarea anumitor versiuni ale Outlook sau totul cu exceptia anumite versiuni ale Outlook.
Dacă sunteți deja familiarizat cu dezvoltarea web, uitați tot ceea ce știți despre el. Singurul cel mai mare obstacol pentru dvs. este să vă așteptați ca lucrurile să funcționeze ca o dezvoltare web normală. Acest lucru vă va împiedica și vă va ține înapoi. Cel mai rău lucru pe care îl puteți face este să vă supărați că nu puteți folosi DIV-urile sau asta margine nu este pe deplin susținută. Așa că uitați tot ce știți despre HTML-ul semantic și cel mai recent CSS spec. Crede-mă, te va ajuta.
Să aruncăm o privire la unele sugestii privind fluxul de lucru pentru e-mail.
Construirea structurii primului e-mail vă poate ajuta să evitați multe bug-uri și probleme mai târziu în jos pe pistă. Nu construiți niciodată întregul lucru și apoi testați - puteți ajunge adesea cu prea multe bug-uri pentru a le rezolva și toate acestea pot influența reciproc.
Lucrați până când ajungeți la o etapă de dezvoltare minore (de exemplu, când ați terminat structura de bază) și apoi executați un test. Cea mai bună metodă de testare este folosirea litmusului sau a e-mailului pe acid. Vă recomandăm să luați un plan nelimitat cu oricare dintre aceste companii deoarece este capabil să testați frecvent este foarte important.
De asemenea, îmi place foarte mult să părăsesc toate frontierele mele de masă, astfel încât să pot vedea ceea ce creez, apoi le-am închis la sfârșit. De asemenea, puteți să culoarea fundalului anumitor celule pentru a vedea care sunt secțiunile unde se află. Fluxul meu de lucru ideal este de a crea un schelet, de a testa, de a adăuga conținutul meu, de a testa, de a schimba culorile și fonturile, de a testa din nou și de a-mi înlătura granițele și de a le testa din nou înainte de a trimite.
Validați-l folosind Validatorul W3C cât de des puteți. Acest lucru vă va ajuta să evitați detaliile mici și se va ridica la greșeli cum ar fi etichetele lipsă sau deschise.
Există un număr mare de opțiuni atunci când este vorba de trimiterea e-mailului. Cele două servicii pe care le folosesc cel mai mult sunt MailChimp și Monitorul de campanie. Acestea oferă prețuri competitive și sunt foarte ușor de utilizat. Există o mulțime de platforme comerciale - totul depinde de nevoile dvs. Înscrieți-vă pentru un cont gratuit cu oricare dintre acestea și aveți un tinker în sistemele lor pentru a vedea care vă place. Asigurați-vă că utilizați datele utile pe care le colectează ambele servicii despre e-mailurile dvs., cum ar fi orele deschise și utilizarea clientului de e-mail. Acest lucru vă poate ajuta să vă concentrați eforturile în zona potrivită data viitoare când trimiteți.
Când vine vorba de SPAM; conținutul, designul și dezvoltarea merg totul în mână. Este important să evitați tacticile tipice de tip spam, cum ar fi utilizarea de toate capacele și multe puncte de exclamare în linia subiectului. Există anumite cuvinte care ar putea declanșa filtre SPAM (cum ar fi "liber" și "investi"). Cu cât este mai curat codul, cu atât este mai puțin probabil ca e-mailul tău să fie marcat ca SPAM, iar raportul dintre imagini și text are și efect. E-mailurile bazate pe e-mail care nu conțin text sunt mai susceptibile de a fi marcate ca SPAM, la fel și e-mailurile cu nume de fișier foarte lungi.
Lumea scorurilor SPAM este una dificilă și este important să rulați un test de SPAM prin contul dvs. de testare cu Litmus sau e-mail pe Acid înainte de a vă trimite e-mailul, pentru a vă asigura că toată munca dvs. grea nu este îndreptată direct spre dosarul Junk.
Acum, pentru ninsoare-pietre de dezvoltare de e-mail ...
Veți avea nevoie de un editor de text care vă place (eu folosesc Sublime Text) și un cont de test cu Litmus sau Email pe Acid. Vă recomand să aveți un cont de testare nelimitat cu oricare dintre aceste companii, deoarece vă va face viața mult mai ușoară. Dacă nu plătiți o taxă lunară, veți plăti între 3 și 5 dolari pe test, care se pot adăuga destul de repede.
Cred că este bine să începeți cu o ardezie goală. Cadrele ca HTML Boilerplate sunt pline de trucuri și fragmente minunate pe care le puteți implementa cu bucăți. Cu toate acestea, dacă începeți, nu recomand să o folosiți ca punct de pornire, deoarece conține multe elemente pe care nu le veți avea nevoie. Plăcile de umplere pot face adesea mai dificilă depanarea oricăror probleme dacă există un număr mare de cod neutilizat în fișierul dvs..
Notă: Deoarece poate fi foarte precară să folosiți orice tip de editor (mai ales atunci când este timpul să depanați), nu ar trebui să utilizați niciodată un editor WYSIWYG sau orice fel de editor care promite să vă ia designul formatat și să-l transformați în magie HTML . Chestia asta nu funcționează niciodată.
Acest lucru ar putea părea ca un detaliu tehnic pentru a începe cu, dar aveți nevoie de un șablon gol pentru a începe să lucrați cu, și că șablonul are nevoie de un Doctype. Un doctype este în esență o linie de cod care informează programul care le citește despre ce etichete HTML să se aștepte și care set de reguli HTML și CSS respectă. Doisprezece clienți elimină Doctype, iar alții chiar aplică pe cont propriu. Mulți clienți îți onorează doctype-ul și pot face lucrurile mult mai ușor dacă poți valida în mod constant împotriva unui Doctype.
Utilizarea unui document XHTML doctype are, în general, cele mai puține întreruperi și incoerențe între documente. Folosesc XHTML 1.0 Transitional pentru că sa dovedit a fi cea mai fiabilă doctype din experiența mea. În următorul tutorial, pe parcursul căruia vom construi un șablon complet de e-mail HTML, vom folosi următorul cod pentru a începe documentul:
Demistificarea e-mailului
Tipul de conținut meta tag este pentru a spune motorului de randare destinație cum să procesați text și caractere speciale. În realitate, trebuie să codificați oricum toate caracterele dvs. speciale (de exemplu, & devine & pentru ampersand) pentru a fi sigur, dar merită să păstrați această linie acolo oricum.
Meta tag-ul "Viewport" indică dispozitivului să stabilească zona vizibilă pe lățimea ecranului dispozitivului. De asemenea, stabilește scala inițială la "normal", care nu este nici mărite, nici nu. Dacă nu specificați acest lucru, multe smartphone-uri vă pot scalni conținutul în jos, astfel încât conținutul să se potrivească în zona vizibilă, dar nu și în niciun fel de umplutură sau margini. Acest lucru poate determina textul și imaginile să ajungă la marginea ecranului.
În cele din urmă, introduceți întotdeauna un titlu semnificativ, deoarece acesta este ceea ce vor vedea oamenii atunci când văd e-mailul într-un browser sau îl împărtășesc prietenilor.
Din cauza lipsei de standarde de sprijin în e-mail, nu este posibil să se utilizeze divs, secțiuni sau articole - în schimb trebuie să utilizați tabele. În plus, trebuie să utilizați o mulțime de mese imbricate deoarece nici una colspan nici rowspan atributele sunt suportate corespunzător.
Din nou, din cauza lipsei de suport pentru standarde, nu este o idee grozavă de a utiliza etichete standard cum ar fi h1, h2, h3 sau p. Consider că acestea pot face într-adevăr inconsecvent între clienții de e-mail și pot crea câteva dureri de cap destul de mari.
Cel mai bun pariu este să plasați fiecare bloc de text în propria sa celulă și să aplicați stilul inline acelei celule, de exemplu:
Text
Aceasta este mai degrabă o alegere personală. Prefer sa pastrez toate stilurile inline (adica: in interiorul tag-urilor HTML), pentru ca imi place sa stiu exact unde este totul si ce afecteaza ceea ce. Puteți codifica folosind stiluri și apoi trageți-le pe toate în linie la sfârșitul anului (Campanie Monitor și MailChimp poate face acest lucru pentru tine în mod automat, puteți utiliza, de asemenea, Premailer sau ceva similar), dar motivul pentru care nu-mi place acest lucru este pentru ca te cunosc codul dvs., rulați-l printr-un inliner, iar apoi codul dvs. poate deveni oarecum nerecunoscut. Consider că acest lucru face mai dificilă depanarea. Spunând că, dacă acesta este modul în care doriți să lucrați, este bine; nu există niciun motiv tehnic pentru care nu ar trebui să faceți acest lucru.
Nu uitați: Nu puteți aplica mai multe clase lucrurilor din e-mail HTML deoarece acestea nu sunt acceptate. Fiecare element poate avea maximum o clasă.
De asemenea, nu uitați: Nu puteți folosi stenograma pentru lucruri precum dimensiunea fontului (adică) deoarece nu este acceptată.
Când salvați imagini, rețineți că este bine să le dați fotografiilor nume care sunt scurte și semnificative, deoarece vă vor îmbunătăți scorul de spam. Nume ca "campaign_054_design_0x0_v6_email-link.gif" sunt susceptibile de a avea un scor SPAM mult mai mare decât "email.gif".
Este, de asemenea, o idee foarte bună să încercați să păstrați întregul e-mail cât mai mic posibil din punct de vedere uman: sub 100kb este ideal, dar nu întotdeauna posibil, sub 250kb este destul de standard. Utilizați o aplicație de comprimare, cum ar fi JPEGmini sau tinyPNG, pentru a reduce cât mai mult posibil toate imaginile înainte de a le trimite. Timpii de încărcare mai slabi, mai ales pe telefonul mobil, pot face sau pot rupe e-mailul dacă dimensiunea generală a fișierului este prea mare.
Nu lăsați nimic clientului de e-mail. Specificați toate lățimile, pentru că în caz contrar s-ar putea ajunge la rezultate neașteptate. Pentru elementele principale ale containerului setați întotdeauna dimensiunea în pixeli. Apoi, puteți utiliza procentele din interiorul elementului care vă conține, dacă doriți.
Există multe lucruri de luat în considerare atunci când proiectați și dezvoltați e-mail HTML, dintre care majoritatea implică standarde de "ne-învățare" pe care le-ați încurajat să le practicați pentru designul web de-a lungul anilor. Cu toate acestea, acest tutorial ar fi trebuit să vă ofere o bază solidă de lucru și acum sunteți gata să faceți saltul în procesul actual de construire. depare!
Am făcut referire la câteva lucruri în timpul acestui tutorial - deci aici sunt din nou, toate într-un singur loc.
Accentsconagua