Share
În ultimele săptămâni, echipa noastră a avut sarcina destul de solicitantă de a crea zece șabloane de e-mail la timp pentru lansarea Canvas, un nou și ușor de utilizat builder de buletine de știri de e-mail în Monitorul de Campanie.
Pe lângă cerințele obișnuite care vin cu șabloanele de construcție pentru un serviciu de marketing prin e-mail pe care designerii îl folosesc (de exemplu, că campaniile arată bine, chiar și pe dispozitive mobile!), Au existat câteva lucruri suplimentare pe care trebuia să le abordăm. În primul rând, lucra în colaborare cu proiectarea, testarea și, bineînțeles, printre coderii de e-mail pentru a face acest proiect să se întâmple. După cum se dovedește, dezvoltarea unui proces în jurul acestuia a fost într-adevăr un proiect în sine.
Lucrul în echipă și între echipe este a) dificil, și b) într-adevăr, cere ca instrumentele și procesele să fie în loc înainte. Dacă te lupți cu obținerea rezultatelor dorite de la proiectele de design - chiar dacă acestea nu sunt legate de e-mail - atunci probabil că te vei referi la aceste puncte. Cu orice noroc, veți găsi experiențele noastre utile atunci când vă depășiți propriile provocări cu colaborarea în echipă.
Ca un coder de e-mail care, timp de mulți ani, a luat o scurtă abordare de "codificare" a sarcinilor, folosind o abordare similară a cascadei părea naturală atunci când dezvoltăm fiecare dintre modelele Canvas. Pentru a vă oferi o idee despre complexitatea sarcinii, fiecare din cele zece șabloane conține mai multe layout-uri și o selecție de elemente (câmpuri de text, butoane etc.), fiecare piesă necesitând o strânsă colaborare între codul nostru de e-mail și echipele de proiectare. Ca și în cazul în care am început cu ani în urmă, colaborarea poate fi plină de pericole, chiar și printre cei mai bine comportați dintre noi.
Deci, uita-te la cele șapte pași, de la kickoff la testare și predare, pe care echipa noastră a lucrat-o pentru a crea șabloanele. Din nou, în timp ce aceste reflecții se află pe un proiect de e-mail, probabil veți găsi aceste sfaturi privind fluxul de lucru la fel de aplicabile pe web.
A fost foarte important să găsim un mijloc de a colabora și de a împărtăși între design, codarea prin e-mail și oricine a vrut să sară în proiect.
Am încercat o serie de abordări pentru a discuta și a clarifica aspecte, inclusiv utilizarea Expedierii (pentru recenzii de proiectare), LayerVault (pentru controlul versiunii) și o cameră HipChat (pentru chat de echipă). La sfârșitul zilei, am selectat Basecamp, o aplicație populară de colaborare în echipă. Nu numai că a fost deja în uz și cunoscut de mulți în cadrul campaniei Monitor, dar este destul de bun pentru organizarea sarcinilor de codificare și pentru facilitarea unor discuții mai profunde în echipe.
Folosim Basecamp pentru a colabora intern si intre echipePentru problemele legate de șabloane (de exemplu, erori de redare), JIRA, o aplicație de urmărire a problemelor și a proiectelor, a fost selectată - din nou, un instrument foarte familiar pentru echipă. Utilizarea JIRA ne-a permis să luăm și în cohortele noastre în echipa de testare, fără a le forța să utilizeze instrumente în afara fluxului lor de lucru existent.
Odată ce toți au fost soluționați de instrumentele de colaborare, a venit timpul să primească machete Photoshop în format PSD de la echipa de design. Aceasta a fost un pic de faza de descoperire (si poate nu chiar atat de cascadorie), care impune dezvoltatorilor de e-mail ca mine sa aiba o privire buna prin intermediul PSD-urilor atat ale desktop-ului cat si ale versiunilor mobile ale unui template.
Un martor de desktop pentru șablonul MasonLucrurile la care ne-am concentrat au inclus identificarea structurilor standard pe care editorii de e-mail sunt familiarizați în general (de exemplu, 1-3 coloane statice), față de cele non-standard, mai aventuroase. Văzând cum arată aspectul sau elementul similar între desktop și mobil este întotdeauna foarte interesant; din fericire, designerii noștri sunt destul de obișnuiți să lucreze cu e-mailuri receptive (și cu quirks lor), astfel încât nu sunt predispuse la a face cerințe scandalos în măsura în care machete du-te!
Oricine a codificat un design web sau e-mail de la zero știe că de multe ori, aflarea a ceea ce funcționează și a ceea ce nu se întâmplă în mai multe platforme poate fi un proces exploratoriu. Cu șabloanele noastre, unele elemente au trebuit să fie codificate și testate în afara modelului în curs, pentru a se asigura că acestea ar putea fi încorporate în proiect. Ca întotdeauna, unele lucruri ar putea să nu pară exact la fel în toți clienții de e-mail (sau în browsere, ca în cazul web-ului), dar ar trebui cel puțin să se degradeze cu grație - și să arate bine.
De asemenea, dacă ceva dintr-o machetă s-a dovedit a fi imposibil de realizat, a fost bine să oferiți acel feedback devreme, deoarece modificările de proiectare pot avea adesea efecte.
Odată destul de încrezător că șmecherii șablonului oferite de designerii noștri ar putea fi transformate într-un șablon de e-mail de tip rock-solid, a fost timpul să se desprindă și să se creeze active. Acestea includ atât elementele grafice din șablonul în sine, cât și fotografiile de tip placeholder din mockup.
Pentru a asigura că imaginile sunt optimizate pentru afișajele retinei, le-am exportat din PSD-urile furnizate la dimensiunea 2x și apoi am redimensionat până la 1 x folosind atributele de lățime și înălțime ale imaginii. Da, acest lucru este ceea ce fac și designerii de e-mail!
Una dintre pictograme, mărite pentru o lucrare detaliatăExcepția la aceasta au fost imaginile de fundal (de exemplu, cele utilizate în butoanele de tip bulletproof), care au fost de obicei exportate atât la dimensiunile 1x și 2x.
În timp ce fiecare șablon Canvas este proiectat să fie destul de dinamic în ceea ce privește combinarea elementelor și a elementelor, am constatat că codarea unui fișier HTML lung, static, cu conținut de înlocuitori, ne-a ajutat să vă imaginăm produsul final. Am dezvoltat un cadru de la zero, bazat pe LESS, cu fiecare fișier de șablon al unui șablon care conține un număr de variabile pentru stiluri de bază și calcule, urmate de stiluri specifice șablonului. CodeKit a fost folosit pentru a procesa fișierele LESS și pentru a accelera testarea browserului.
Pe de altă parte, Stig din ce în ce mai util pe echipa noastră a creat o extensie Chrome pentru suprapunerea modelelor PSD prin pagini HTML. Numit Blueprint, această extensie a permis echipei să obțină un grad fără precedent de perfecțiune în pixeli.
În timp ce o mulțime de oameni se pot împiedica să facă lucrurile să pară "la fel" în toți clienții de e-mail - sau browserele pentru asta - există cu siguranță virtuți în aspirația pentru acest scop, pentru a atinge un nivel de calitate și, poate, chiar a potoli un client agitat un anumit grad!
În ceea ce privește testarea versiunilor "desktop" și "mobile" ale unui design de e-mail, procesul nostru nu a fost atât de diferit de ceea ce se întâmplă pe web. Din păcate, dar cu adevărat, am face o mulțime de squishing și întinderea browser-ului.
Cu toate acestea, cel puțin în ceea ce privește testarea, simpla vizualizare a șablonului din Chrome (sau browser-ul dvs. de alegere) nu este niciodată suficient. În acest stadiu, de obicei, am importa campania în Monitorul de Campanie pentru a rula un test rapid și Design Spam (fiind un proiect de e-mail) și / sau testat în Litmus (care oferă, de asemenea, capturi de ecran automate ale browserului). În cazul în care design-ul arăta în teste virtuale, am fi progresat pentru a trăi teste de dispozitiv.
În plus față de utilizarea câtorva mașini virtuale în VMware, ne-am îndreptat și spre "laboratorul nostru de dispozitive" - în mare parte format din telefoane mobile - pentru a testa cât mai bine posibil. Dacă nu beneficiați de un laborator de dispozitive la locul de muncă, consultați OpenDeviceLab pentru a vedea dacă există o colecție de dispozitive accesibile publicului în zona dvs..
Odată satisfăcut de munca noastră, codificarea acestor șabloane nu a fost diferită de orice alt proiect. La Campaign Monitor, folosim GitHub pentru a ne angaja și a colabora pe orice probleme restante de redare, precum și pentru a efectua teste și design atunci când este necesar. Dacă nu ați folosit GitHub înainte, citiți-le are un ghid excelent pentru începători.
Desigur, mai des decât acestea, acești pași ar sângera unul în celălalt sau ar fi repetate; codarea și testarea pe web și e-mail este rareori rapidă, curată sau fără incidente. Cu toate acestea, rezultatele finale vorbesc de la sine - un prim lot de zece template-uri robuste, livrate la timp și acum gata pentru utilizare. Check out Canvas când viitoare trebuie să trimiteți un buletin informativ care să arate excelent pe dispozitivele mobile, precum și Gmail, Apple Mail și toți clienții obișnuiți.
Atât procesele, cât și instrumentele folosite pentru a crea și a colabora cu alții nu au venit la noi într-o clipă - dar ținând seama de cronologia de mai multe săptămâni a proiectului și că trebuie să lucrăm în mod repetat la sarcini similare, am avut avantajul de a fi capabil să îmbunătățească fluxul de lucru în timp ce ne-am dus împreună. În urma acestui proiect, recomandările noastre către alții sunt:
Pașii de mai sus au fost descriși în wiki-ul nostru intern înainte de începerea lucrului; având acest ghid / specificație accesibil tuturor, a permis unui personal nou și îndepărtat să se ridice la viteză foarte repede, oferind în același timp altor echipe vizibilitate asupra modului în care codoarele funcționează. Acest document a fost rafinat pe măsură ce am mers, oferind astfel tuturor celor mai recente informații.
În timp ce întotdeauna există ispita de a "magazinul" pentru cele mai recente și mai mari atunci când începe un nou proiect, forțând pe toată lumea să adopte aplicații necunoscute pot crea provocări inutile. Discutați cu alte echipe despre ce folosesc pentru a colabora și pentru a vedea cum pot fi adaptate pentru sarcinile proprii.
În ambele proiecte de e-mail și web, se pot deconecta în ceea ce designeri, echipe de marketing, vânzări și alții cred că este posibil și ce se poate face ca un coder ... Mai ales atunci când există termene pentru a se întâlni. Acordați-vă timp pentru a vă desfășura propria descoperire și pentru a vă stabili așteptările - petrecând câteva zile în plus, experimentarea și discutarea sarcinilor este întotdeauna mai bună decât lipsa unei etape importante,!
Cum arată designul dvs. pe dispozitive Android? Chiar dacă nu o utilizați personal pentru a naviga, 33% din SUA - și acest procent este mult mai mare în altă parte. Cele mai multe platforme pe care le puteți testa, cu atât mai bine.
Deci, în timp ce pot exista diferențe mari între modul în care e-mailul și activitatea web sunt codificate și produse, pașii necesari pentru a aduce viata designerului la viață sunt la fel de relevanți. Sperăm că experiențele noastre vă vor ajuta să formulați un plan pentru următorul proiect de cod, precum și să vă asigurați că echipa dvs. rămâne fericită și productivă atunci când colaborează împreună.
Accentsconagua