IZRADA WEB RJEŠENJA TEMELJENIH NA CMS-U (2. DIO)

Kako poboljšati i ubrzati proces izrade web rješenja temeljenih na CMS-u?

Sviđa vam se članak?

Preporučite ga prijateljima i kolegama putem društvenih mreža!

Nakon što smo se prisjetili kako su se webovi radili prije 10 godina te kako se njihovom razvoju pristupa danas, može se primijetiti kako je napredak golem, ali i da ima još popriličnog prostora za poboljšanje. U ovom ćemo se dijelu baviti upravo time – analizom svega onoga što bismo mogli poboljšati kako bi proces izrade web rješenja temeljenih na CMS-u bio što učinkovitiji.

lukac-cms

Čak i uz bitno poboljšani proces opisan u prvom dijelu, još uvijek postoji i dosta problema. Često se događa da se klijent ne uključi dovoljno (rano) u sam projekt pa očekivanja nisu usuglašena. Velik broj klijenata i dalje očekuje da agencija sama obavi cijeli proces, a da će oni na kraju unositi gotov sadržaj. Usporedimo proces izrade web rješenja s, primjerice, preuređenjem ureda: znamo da ćemo za preuređenje ureda pozvati majstora, ali da je dobro što češće ga obilaziti kako bismo bili sigurni da cijeli proces ide u optimalnom smjeru. Ista je situacija i s izradom web rješenja.

Glavni je problem u samom vođenju procesa koji se uglavnom vodi kao waterfall s pokušajem da se isplanira cijeli proces, da se jasno definiraju koraci između faza i između timova. Kod web projekata velika je mogućnost da će se opseg posla prilagođavati i mijenjati. Čak bih ustvrdio da se to uvijek na kraju i dogodi. To često rezultira neispunjenim očekivanjima i nezadovoljstvom rezultatima. Članak How to ship good design odlično objašnjava mane waterfall pristupa.

Važno je napomenuti da u procesu još uvijek ima dosta gubitaka i rasipanja. U izradu wireframea i trostruke PSD-ove ulaže se mnogo truda i vremena, da bi se na kraju taj trud de facto bacao (premda postoje neki alati za konverziju PSD-a u HTML/CSS, ali to radi samo u idealnim i jednostavnim situacijama). Isto se tako baca i trud uložen u prototipiranje, mada u ovom slučaju neki alati imaju izvoz u HTML/CSS (ali bez ikakvih CMS funkcija).

Klijenti i nedostatak alata usporavaju agilnost

U zadnjih godinu ili dvije dana susrećem se s mnogo agencija koje pokušavaju prijeći na neki agilniji način vođenja projekta, s manje ili više uspjeha. Otpor klijenata i nedostatak pravih alata za podršku tom procesu usporavaju taj pomak.

Web rješenje nije uobičajena softverska aplikacija koja služi ažuriranju suhoparnih podataka, već rezultat rada većeg broja različitih ekspertiza. U konačnici se radi o virtualnom uredu klijenta, o njegovom brendu, njegovom sadržaju, njegovoj osnovnoj djelatnosti (eng. core business). Krucijalno je da se na početku projekta odredi tim koji se sastoji od vanjskih (digitalne, marketinške, prevoditeljske agencije i dr.) i internih resursa. Zaposlenike klijenta potrebno je što ranije uključiti u proces kako bi bili u tijeku i što ranije počeli doprinositi, i to ne samo na početku kad se postavljaju ciljevi, definiraju ciljana tržišta, rade fokus grupe, već i tijekom projekta (davanjem smjernica, kreiranjem sadržaja, testiranjem i slično).

Moguće je objasniti i olakšati klijentima ovakav agilniji način rada. Možemo im pomoći tako da agencije poboljšaju proces, inzistiraju na čestoj (agilnoj) komunikaciji i ponude klijentima alate koji će im omogućiti efikasniji način rada. Primjerice, Invision aplikacija omogućuje cloud-based izradu prototipa na kojima se može uključiti klijenta u proces. Neki od tih alata za prototipiranje podržavaju responzivnost, a neki omogućuju izvoz rezultata u HTML/CSS predloške. S radom u CMS-u može se (i poželjno je) krenuti u ranoj fazi i unositi stvaran sadržaj.

Manje Photoshopa, više CSS-a

Radi efikasnosti nužno je što manje dizajnirati u Photoshopu, a što više u samom CSS-u. Čak ni tri nacrtane dimenzije u Photoshopu (za desktop, mobilne uređaje i tablet) ne pokrivaju sve moguće varijante. Još je dugotrajnije i skuplje izrađivati posebne PSD datoteke za ostale varijacije kao što su jezik, različit sadržaj, podstranice, i dr. Na kraju treba biti svjestan da nacrtano nikad ne može biti istovjetno načinu na koji će se prikazati na webu.

Naravno, alati za crtanje, kao što je Photoshop, i dalje su korisni za dizajniranje elemenata koji se koriste na stranici, počevši od logotipa preko knjige online vizualnih standarda do interaktivnih kontrola i ilustracija. Sve manje ima smisla crtati cijele stranice u grafičkim editorima, osim ako se ne radi o vrlo jednostavnoj stranici, ali ovdje ionako ne pričamo o tome.

Postoje dobri alati koji olakšavaju osmišljavanje i testiranje koncepata (na početku procesa papir ili ploča i cloud-based prototipiranje), upravljanje sadržajem (CMS-ovi, servisi za prevođenje, itd), development i integraciju. Ono što nedostaje u cijeloj priči je dodirna točka svim tim različitim aktivnostima. Koraci su još uvijek serijski: kreativna faza, crtanje koncepta, vizualni dizajn, implementacija, punjenje sadržaja, testiranje, dorada. Još uvijek je teško uskladiti i istovremeno izvoditi sve korake na agilan način. Pogledajmo što bi nam moglo omogućiti da to ostvarimo.

Idealan proces

Papir i olovka ili kreda i ploča

Papir i olovka ili kreda i ploča idealni su za konceptualnu fazu.

Zamislimo ovakav proces:

  • Nakon prikupljanja prvih informacija i definiranja ciljeva, formira se tim (kao i do sada).
  • Tim prikuplja što više ostalih informacija nužnih za što bolje definiranje koncepta (faza istraživanja i analitike kao i do sada).
  • Sastaje se na prvoj radionici na kojoj rade na konceptu. Najbolje je koristiti po starom dobrom principu papir i olovku ili kredu i ploču jer to najmanje ograničava maštu i inovativnost.
  • Nakon definiranja i usuglašavanja prvih koncepata, grubi wireframei/prototipovi unose se u sustav (pretpostavimo da CMS ima alat za prototipiranje) s osnovnom informacijskom arhitekturom.
  • Budući da već imaju CMS, u ovoj fazi moguće je migrirati postojeći sadržaj ili unositi novi stvarni sadržaj, slijedeći postavljenu informacijsku arhitekturu novog rješenja.
  • Alat za prototipiranje kompletno je baziran na postojećim web tehnologijama (među ostalima, na Bootstrapu ili sličnom responzivnom grid frameworku) te se vanjske stranice mogu početi dizajnirati preko generiranog responzivnog HTML grida.
  • Iako će dosta blokova u ovoj fazi biti funkcionalno generički, jedan će dio sigurno biti specifičan za projekt pa developeri mogu odmah početi s implementacijom takvih blokova.
  • Web rješenje kreira se zajedničkim snagama svih uključenih istodobno i na istom mjestu što omogućuje agilno vođenje projekta.
  • Svi u timu rade završnu doradu: testiranje funkcija, ujednačavanje izgleda, završavanje unošenja sadržaja, pripremanje za launch.

Zvuči dobro, zar ne? Mislim da je i izvedivo uz zadovoljavanje sljedećih uvjeta:

  • Fleksibilna platforma s wireframing/prototyping mogućnostima i CMS mogućnostima.
  • Agencija koja može odraditi opisani agilni proces.
  • Klijent koji razumije i prihvaća opisani pristup.

Ako pretpostavimo da su i agencija i klijent motivirani za poboljšanje procesa, preostaje nam pronalazak odgovarajuće platforme. Vjerovali ili ne, tržište se već pokrenulo u tom smjeru. Pojavljuju se startupi koji nude izradu prototipa i dizajn web rješenja u cloudu od kojih neki već imaju ponešto funkcija za upravljanjem sadržaja (npr. Webflow i Webydo).

Kreator Webflowa Vlad Magdalin napisao je odličan članak Let’s Redesign Web Design gdje opisuje kako trenutni alati za web dizajn nemaju iste karakteristike kao sam medij weba i to predstavlja problem za produktivnost. Očit primjer je kako se sam CSS kod piše u tekstualnom alatu, sasvim drugačijem mediju od samog internetskog preglednika koji prikazuje taj CSS.

Što Netgen radi po tom pitanju?

Mi u Netgenu uvijek pokušavamo unaprijediti svoj proces. U više od deset godina rada na web rješenjima naučili smo kako biti efikasniji i isporučivati brže i/ili više. Ima prostora da se neki koraci ubrzaju, dok se drugi, povezani s komunikacijom prema klijentu i općenito stvarima specifičnima za projekt, teško mogu ubrzati. Za značajnu optimizaciju potrebno je omogućiti da se većina koraka istovremeno izvodi.

Neka od postojećih rješenja koja idu u tom smjeru uglavnom su alati za wireframing i prototipiranje kojima se dodaju osnovne CMS funkcionalnosti. Mi već koristimo moćan CMS i orijentirani smo na kompleksne projekte u kojima su nam nužne sve CMS funkcionalnosti, što druga rješenja čini neadekvatnima.

Plan nam je kreirati alat za upravljanje blokovima i prikazima (layout and block management) baziran na CMS-u koji koristimo, koji bi se po mogućnostima približio alatima za prototipiranje. Cilj nije napraviti idealan alat za sve moguće web projekte (to bi ipak bio prevelik zalogaj), već alat koji će ubrzati cijeli proces na složenijim projektima na kakvim sami radimo.

Ako se bavite izradom web rješenja, kako izgleda vaš trenutni proces? Što je po vama najveći izazov kod unaprjeđenja procesa i uvođenja agilnijeg pristupa? Bi li vam pomogao alat za kreiranje prikaza i blokova integriran s CMS-om s kojim biste mogli prototipirati s pravim sadržajem te brže implementirati rješenje?

Posebna zahvala za pomoć oko pisanja ovog podužeg članka Maji Nebes, Marku Dugonjiću, Igoru Vrdoljaku i Vjeranu Vlahoviću. Ne propustite ni prvi dio članka – Kako je proces izrade web rješenja izgledao prije 10 godina – a kako danas?