Share
I de siste ukene hadde teamet vår ganske krevende oppgave å designe ti e-postmaler i tide for lanseringen av Canvas, en ny og brukervennlig e-nyhetsbrevbygger i Kampanje Monitor.
På toppen av de vanlige kravene som følger med byggemaler for en e-postmarkedsføringstjeneste som designere bruker (for eksempel, at kampanjene ser bra ut, selv på mobile enheter!) Var det et par ekstra ting vi trengte å adressere. Først og fremst var det samarbeidende med design, testing og selvfølgelig blant e-postkodere for å få dette prosjektet til å skje. Som det viser seg, utviklet en prosess rundt det som egentlig var et prosjekt i seg selv.
Arbeide i og på tvers av lag er a) hardt, og b) krever virkelig at både verktøy og prosesser skal være på plass på forhånd. Hvis du sliter med å få de resultatene du ønsker fra designprosjektene dine - selv om de ikke er e-postrelaterte - så vil du sannsynligvis forholde seg til disse punktene. Med noen hell vil du finne våre erfaringer nyttige når du overvinter dine egne utfordringer med teamsamarbeid.
Som e-postkoder som i mange år har tatt en kort> kode> leveringsmetode til oppgaver, var det naturlig å bruke en lignende vannfallstilnærming når man utviklet hver av Canvas-malene. For å gi deg en ide om oppgavets kompleksitet består hver av de ti malene av flere oppsett og et utvalg av elementer (tekstfelter, knapper osv.), Med hvert stykke som krever tett samarbeid mellom både vår e-postkode og designteam. Som det var tilfellet da jeg startet for mange år siden, kan samarbeidet være fulle av fare, selv blant de mest opptatt av oss.
Så, her er en titt på de sju trinnene, fra kickoff til testing og overlevering, som vårt team jobbet gjennom for å lage malene. Igjen, mens disse refleksjonene er på et e-postprosjekt, finner du sannsynligvis disse arbeidsflyttipsene akkurat som gjeldende for nettet.
Det var veldig viktig at vi fant et middel til å samarbeide og dele mellom design, e-postkoding og den som ønsket å hoppe inn i prosjektet.
Vi prøvde en rekke tilnærminger for å diskutere og klargjøre problemer, inkludert bruk av forsendelse (for design vurderinger), LayerVault (for versjonskontroll) og et HipChat-rom (for lagsprat). På slutten av dagen valgte vi Basecamp, et populært teamsamarbeidsprogram. Ikke bare var det allerede i bruk og kjent for mange innen Kampanje Monitor, men det er ganske bra for å organisere kodende oppgaver og legge til rette for dypere diskusjoner i lag.
Vi bruker Basecamp til å samarbeide internt og mellom lagFor malproblemer (for eksempel gjengivelse av glitches), JIRA, en problem- og prosjektsporingsprogram, ble valgt - igjen, et verktøy som er godt kjent for teamet. Ved å bruke JIRA fikk vi også å sløyfe i våre kohorter i testteamet, uten å tvinge dem til å bruke verktøy utenfor deres eksisterende arbeidsflyt.
Når alle ble avgjort på samarbeidsverktøy, var det på tide å motta Photoshop-mocksene i PSD-format fra designteamet. Dette var litt av en funnfase (og kanskje ikke så fossen-jo tross alt) som krever at e-postutviklere som meg selv ser godt ut på PSD-er av både desktop og mobile versjoner av en mal.
Et skrivebordsmottak for Mason-malenTing vi fokuserte på, var å identifisere standardoppsett som e-postkodere generelt er kjent med (f.eks. 1-3 statiske kolonner), vs ikke-standard, mer eventyrlystne. Å se hvordan samme layout eller element ser ut oversatt mellom skrivebord og mobil er alltid veldig interessant; Heldigvis er våre designere ganske vant til å jobbe med responsive e-postmeldinger (og deres quirks), så er ikke tilbøyelige til å gjøre opprørende krav så langt som oppsett går!
Alle som har kodet et web- eller e-postdesign fra grunnen av, vet at det ofte er å finne ut hva som fungerer, og hva som ikke går over flere plattformer, som er ganske utforskende. Med våre maler måtte noen av elementene bli kodet og testet bortsett fra malen i gang, for å sikre at de kunne innlemmes i designet. Som alltid kan det hende at noen ting ikke ser nøyaktig ut på samme måte over alle e-postklienter (eller nettlesere, som med nettet), men de skal i det minste nedbrytes grasiøst - og se bra ut.
Også, hvis noe i en mock viste seg å være faktisk umulig å oppnå, var det godt å gi den tilbakemeldingen tidlig, siden designendringer ofte kan ha rippleeffekter.
Når du er ganske sikker på at mallmocksene fra våre designere kan bli omgjort til en solid e-postmal, var det på tide å skjære bort og lage ressurser. Dette inkluderer både grafiske elementer i selve malen og plasseringsfotografier fra mockup.
For å sikre at bildene er optimalisert for Retina-skjermer, eksporterte vi dem fra PSDene som ble levert med 2x størrelse, og deretter resized ned til 1x ved hjelp av bildens bredde- og høydeattributter. Ja, dette er noe e-postdesignere gjør også!
Et av ikonene, zoomet inn for detaljert arbeidUnntaket til dette var bakgrunnsbilder (for eksempel de som ble brukt i bulletproof knapper), som vanligvis ble eksportert i både 1x og 2x størrelser.
Mens hver lerretmal er utformet for å være ganske dynamisk så langt som å kombinere oppsett og elementer går, fant vi at koding av en lang, statisk HTML-fil med plassholderinnhold hjalp oss med å tenke på sluttproduktet. Vi utviklet et rammeverk fra grunnen basert på MINDRE, med hver malens styles.less-fil som inneholder en rekke variabler for grunnleggende stiler og beregninger, etterfulgt av stiler som er spesifikke for malen. CodeKit ble brukt til å behandle MINDRE filer og øke hastigheten på nettlesertesting.
Som en side opprettet den stadig hjelpsomme Stig på teamet vårt en Chrome-utvidelse for overlegg av PSD-designene via HTML-sider. Kalt Blueprint, tillot denne utvidelsen laget til å oppnå en enestående grad av piksel-perfeksjon.
Selv om mange folk kan skinne mot at ting ser ut som "det samme" på tvers av alle e-postklienter - eller nettlesere for den saks skyld - er det absolutt dyd i å håpe på det målet, å oppnå et kvalitetsnivå og kanskje til og med appellere en masete klient til en viss grad!
Når det gjelder å teste både "desktop" og "mobile" versjoner av en e-postdesign, gikk prosessen ikke så annerledes enn hva som skjer på nettet. Dessverre, men virkelig, ville vi gjøre mye å knuse og strekke nettleseren.
Men i det minste når det gjelder testing går det ganske enkelt ikke å se malen i Chrome (eller din valgte nettleser). På dette stadiet vil vi vanligvis importere kampanjen til Kampanjeovervåkning for å kjøre en rask Design og Spam-test (som et e-postprosjekt) og / eller testet i Litmus (som også gir automatiserte skjermbilder av nettleseren). Hvis designen så ut i virtuelle tester, ville vi utvikle seg til å leve enhetstester.
I tillegg til å bruke noen virtuelle maskiner i VMware, har vi også vendt til vår "enhetslab" - i hovedsak bestående av mobile telefoner - for å teste så grundig som mulig. Hvis du ikke har nytte av enhetslab på arbeidsplassen, sjekk ut OpenDeviceLab for å se om det finnes en offentlig tilgjengelig samling av enheter i ditt område.
Når du er fornøyd med vårt arbeid, ble kodingen disse malene ikke annerledes enn noe annet prosjekt. På Campaign Monitor bruker vi GitHub til å forplikte arbeidet vårt og samarbeide om eventuelle utestående gjengivelsesproblemer, samt loop i testing og design der det er nødvendig. Hvis du ikke har brukt GitHub før, har readwrite en utmerket nybegynners guide for å komme i gang.
Ganske vist, vil disse trinnene ofte bløde i hverandre, eller bli gjentatt; Web- og e-postkoding og testing er sjelden rask, ren eller uten hendelser. Men sluttresultatene snakker for seg selv - en første serie med ti robuste maler, levert til tiden og nå klar for alle å bruke. Sjekk ut Lerret når du neste må sende et nyhetsbrev som ser bra ut på mobile enheter, samt Gmail, Apple Mail og alle de vanlige klientene..
Både prosessene og verktøyene som ble brukt til å skape og samarbeide med andre, kom ikke til oss på et øyeblikk - men gitt flere ukers tidslinje av prosjektet, og at vi på flere måter jobbet på lignende oppgaver, hadde vi fordelene ved å være kunne forbedre vår arbeidsflyt mens vi gikk. Etter dette prosjektet er våre anbefalinger til andre:
Ovennevnte trinn ble skissert i vår interne wiki før arbeidet startet; Å ha denne veiledningen / tilgjengeligheten tilgjengelig for alle, fikk nye og eksterne ansatte til å få fart raskt, samtidig som andre lag gir synlighet over hvordan kodene fungerer. Dette dokumentet ble raffinert når vi gikk sammen, og ga alle med den nyeste informasjonen.
Mens det alltid er fristelsen til å "shoppe" for det nyeste og beste når man påbegynner et nytt prosjekt, tvinger alle til å vedta ukjente apps, kan det oppstå unødvendige utfordringer. Snakk med andre lag om hva de bruker til å samarbeide og se hvordan de kan tilpasses for dine egne oppgaver.
I både e-post og web-prosjekter kan det koble fra i hvilke designere, markedsføringsteam, salg og andre tror det er mulig og hva som kan gjøres som en koder ... Spesielt når det er frister for å møte. Ta deg tid til å gjennomføre din egen oppdagelse og sette forventninger - å tilbringe noen ekstra dager eksperimenterer og diskuterer oppgaver er alltid bedre enn å mangle en viktig milepæl eller underleveranse!
Hvordan ser designet ditt ut på Android-enheter? Selv om du ikke bruker en person til å bla, gjør 33% av USA - og denne prosentdelen er mye høyere andre steder. Jo flere plattformer du kan teste på, desto bedre.
Så, selv om det kan være store forskjeller mellom hvordan e-post og webarbeid er kodet og produsert, er de trinnene som kreves for å bringe en designers visjon til liv, like relevante. Forhåpentligvis vil våre erfaringer hjelpe deg med å formulere en plan for ditt neste kodeprosjekt, samt sørge for at teamet ditt fortsatt er lykkelig og produktivt når du samarbeider sammen.
Accentsconagua