Share
Ca mulți alți designeri web, am prosperat în ceea ce privește codarea unor pagini web frumoase, dar flexibile, care sunt aproape identice în fiecare browser web. Din păcate, proiectarea buletinelor de știri prin e-mail vă trimite înapoi zece ani. Etichete depreciate, tabele, styling inline, oh my! În acest articol, voi lista șase metode care vă vor îmbunătăți imediat planurile de e-mail.
Ca o nouă închiriere la opt-in serviciul de marketing de e-mail AWeber, prima mea sarcină a fost de a crea un cuplu de zeci de noi șabloane HTML newsletter-uri pentru clienții noștri. Pentru designerul web curat, codul HTML este un memento pentru un trecut nemaipomenit. După săptămâni de muncă și nenumărate dureri de cap, am livrat bunurile. De asemenea, am învățat multe despre proiectarea pentru e-mail.
Pentru a vă ajuta să evitați multe dureri de cap pe care le-am întâlnit în timpul testelor, aici sunt 15 lucruri pe care le puteți face pentru a crea e-mailuri HTML excelente.
Dacă luați doar un sfat din acest articol, vă rugăm să lăsați-l să fie acesta. În calitate de designeri, petrecem mult timp creând o experiență perfectă pe web și încercând experiența pe mai multe platforme. Cu toate acestea, când vine vorba de e-mail, prea mulți dintre noi nu reușesc să acorde aceeași atenție detaliilor.
La fel ca testarea pentru web, crearea unui layout de e-mail care afișează același lucru în fiecare client de e-mail poate fi un coșmar absolut.
Pentru a vă asigura că abonații dvs. vor primi mesajul conform intenției - testați tot ce puteți!
Aceasta include, dar nu se limitează la:
Dar așteptați - sunt mai multe!
Unii dintre acești clienți de e-mail au versiuni multiple, fiecare dintre acestea va face CSS și HTML diferit.
Acesta face parte dintr-un e-mail HTML care este redat de către versiunea veche a Yahoo.
Iată exact același e-mail care este redat de către noua versiune a Yahoo. 
Diferențe subtile, recunosc. Dar destul de multe dintre aceste diferențe subtile și se adaugă la un design desfrânat. Și dacă asta nu e de ajuns ... browser-ul de internet al utilizatorului poate juca, de asemenea, un rol în modul în care design-ul dvs. reda.
Acum, înainte de a vă arunca computerul pe fereastră în frustrare ... următorii câțiva pași vă pot ajuta să excludeți majoritatea problemelor de testare.
Sunt uimit să văd câțiva dintre cei mai mari agenți de publicitate care încalcă regulile de uzabilitate de bază referitoare la e-mailurile HTML.
Iată câteva linii directoare pentru a trăi după:
Acesta este un antet al unui e-mail pe care l-am primit de la Discovery Health:
Am luat această captură de ecran din contul Gmail - înainte de activarea imaginilor. Consultați modul în care textul ALT "bullet" și "spacer" intră în cale?
Adăugarea de etichete ALT la elementele care servesc doar pentru scopuri de proiectare aglomera designul și distrage atenția de la mesajul dvs..
Nu-i asa? Am petrecut tot timpul învățând CSS și acum trebuie să mă întorc la mese? Când vine vorba de designul de e-mail, tabelele sunt la fel de calde ca cele din 2003 - acestea sunt cele mai apropiate de standardele pe care le avem.
Cateva lucruri de luat in seama:
Notă: Imaginile dvs. de fundal se vor comporta ca și cum ar fi fost acoperite cu gresie ... așa planificați în consecință.
Nici eu n-am crezut.
Unii dintre cei mai cunoscuți clienți de e-mail ignoră codul din etichetele din cap. Gmail și Hotmail sunt niște vinovați speciali care vin în minte.
Cu aspectul setat în format tabelă, este timpul să aplicați stiluri textului și imaginilor.
Iată câteva sfaturi și trucuri pentru a vă asigura că mesajul dvs. pare aproape identic în fiecare
browser-ul:
Știați că linia de subiect a fiecărui e-mail trimis într-un cont Gmail este urmată de primele fragmente de text din acel e-mail?
De ce să nu folosiți acest lucru în avantajul dvs.!
Mai sus este o imagine din căsuța poștală Gmail.
Ambele buletine de știri au același conținut antet.
Doar o diferență - Buletinul informativ 1 profită de formatarea inbox a Gmail.
Iată cum am făcut-o:
Introduceți o imagine de 1px x 1px ca primul element din e-mailul dvs. Înfășurați imaginea în etichete Span pentru a seta culoarea fontului la aceeași culoare ca și fundalul. Indiferent de textul pe care îl puneți în etichetele ALT pentru imaginea dvs. de 1px x 1px, acesta va înlocui acum fragmentul Google în inboxurile utilizatorilor.
Este la fel de ușor ca asta! Această diferență subtilă vă va stabili mesajul în afară de alte e-mailuri din căsuța de e-mail a cititorului.
Am făcut tot posibilul pentru a împărtăși câteva lucruri pe care le fac atunci când creez e-mailuri HTML. E randul tau!
Cum vă gândiți la proiectarea, codarea și testarea campaniilor dvs. de e-mail?
Orice recomandări, sfaturi sau trucuri pe care doriți să le adăugați vor fi foarte apreciate de colegii dvs. de proiectare.
Accentsconagua