
Iza branda Ikosoft stoji tvrtka Merlinka d.o.o., koja je naš dugogodišnji klijent (praktički, “pratimo” se od naših početaka i do sada smo za ovog klijenta razvijali nekoliko web stranica, za nekoliko njegovih brandova). Naš klijent Ivica Pavlačić (vlasnik tvrtke Merlinka d.o.o.) prije nekoliko tjedana nas je stavio pred vrlo zanimljiv izazov:
- Trebali smo replicirati dizajn i koncept osnovne tj. inozemne web stranice branda Ikosoft (uzor je trebala biti web stranica www.ikosoft.com/en-gb/) kojeg zastupa, omogućiti mu pri tome vrlo specifične sadržajne okvire i ono najvažnije – osigurati da bez ikakvog programerskog znanja može samostalno upravljati svim specifičnim segmentima naslovnice i unutarnjih stranica.
- Jedini način da ovo postignemo bio je da kreiramo custom web stranicu, proširimo nativne mogućnosti WordPressa i kreiramo specifične blokove za uređivanje sadržaja proširujući osnovne mogućnosti Gutenberga.
WordPress i Gutenberg – idealan spoj za maksimalnu fleksibilnost, brzinu i stabilnost
Kod izrade većine WordPress web stranica i trgovina korištenje uređivača sadržaja uglavnom nije opravdano, no, ako se on već i koristi, predlažemo da to bude Gutenberg. Projekt koji u nastavku opisujemo podrazumijevao je dati klijentu ogromnu slobodu za samostalnu izgradnju sadržaja, definiranje sadržajnih okvira, pa čak i velik utjecaj na dizajn i koncept naslovnice i unutarnjih stranica – a korištenje Gutenberga je značajno ubrzalo projekt, samim time donijelo financijske uštede. I na koncu, što je najvažnije, klijentu donijelo očekivano zadovoljstvo.
Gutenberg uređivač sadržaja / block builder je dio jezgre WordPressa, što ga čini maksimalno kompatibilnim, brzim i stabilnim – za razliku od mnogih drugih uređivača / page buildera. S druge strane, Gutenberg razvija Automattic (vlasnik WordPressa) uz ogromnu podršku programerske zajednice, što ga čini definitivno najnaprednijim uređivačem sadržaja na svijetu. Gutenberg je izveden u React-u, nevjerojatno je brz, sa velikim mogućnostima proširivanja.
Bilo kako bilo, kroz nativni WordPress i Gutenberg smo klijentu omogućili uređivanje svih front end elemenata na njegovoj web stranici, i to bez da mora posjedovati bilo kakva programerska predznanja. Uz projekt smo isporučili i video edukaciju koja svim našim klijentima pomaže da savladaju osnove uređivanja sadržaja i postanu uspješni urednici svojih web stranica i trgovina.
Za izgradnju naslovnice i sadržaja su korišteni uglavnom custom kreirani Gutenberg blokovi i obrasci (patterns). Evo kako to izgleda:
Naslovni izmjenjivač sadržaja (slider)


Segment prednosti
Gutenberg obrasci za klijenta znače ogromnu uštedu vremena – to su naime preddefinirani sadržajni (ali i funkcionalni) okviri koji se mogu ubaciti u tijek stranice jednim klikom, te po potrebi samo zamijeniti sadržaj bez potrebe za uređivanjem strukture okvira. Ovime se štedi vrijeme, ali i osigurava konzistentnost prikaza i dizajna.


Carousel slider
Tzv. carousel slider, tj. izmjenjivač sadržaja s prikazom više od jednog elementa u jednom pregledu, kreirali smo kroz custom blok, te klijentu omogućili odabir različitih dizajnerskih funkcionalnosti:

Priču s blokovima mogli bismo nastaviti u nedogled, jer smo za klijenta kreirali još mnogo prilagođenih, ali i grupiranih obrazaca. Poanta je da je klijent s Gutenbergom u kombinaciji s razvojem custom WordPress teme dobio veliku fleksibilnost u kreiranju sadržaja, koji se kroz cijeli web prikazuje konzistentno, responzivno i atraktivno.
Neki dodatni zanimljivi elementi web stranice
Skrivena tražilica u zaglavlju Pomoćni izbornik koji smo razvili od nule i koji se prikazuje samo uz tematski vezani sadržaj. Kreirali smo i prilagođeni backend (sljedeća fotografija). Osim što je moguće dodavati elemente izbornika, moguće je kreirati više izbornika, te odrediti koji se izbornik prikazuje na kojoj podstranici Kretanje kroz podstranice vezanih tema izvedeno je AJAX tehnologijom, što ubrzava rad te smanjuje opterećenje web servera, bez potrebe da se na svaki novi klik osvježava cijela stranica.
Performanse i sigurnost
Kako bi web stranica bila maksimalno brza, napravili smo sljedeće:
- CloudFlare integracija – CloudFlare je CDN mreža sa nizom značajki, između ostalog posjeduje ultrabrze servere sa lokacijama po cijelom svijetu, što znači da se sadržaj web stranice isporučuje s najbliže lokacije korisniku. CloudFlare također ima vlastiti page caching, što znači da se posjetitelju servira statički sadržaj, što čini učitavanje web stranice gotovo trenutnim. CloudFlare pruža još mnogo alata za ubrzanje rada web stranice, no oni izlaze van opsega ovog case study-a. Što se tiče sigurnosti, CloudFlare posjeduje napredni firewall (s različitim mogućnostima filtriranja), te dedicirane alate za blokiranje zlonamjernih botova, IP adresa, DDoS zaštitu, te još mnogo toga.
- Upotreba modernog WebP formata fotografija, što reducira veličine fotografija za u nekim slučajevima i do 80%.
- Lazy-load fotografija – odgođeno učitavanje fotografija izvan viewport-a (ekrana), što znatno smanjuje opterećenje servera i ubrzava rad web stranice
- Kompresija i minifikacija svih JavaScript i CSS datoteka
- Konfiguracija page cachinga (serviranje statičkih datoteka umjesto PHP datoteka)
Zaključak
Web stranica ikosoft.com.hr je svojim konceptom i dizajnom živopisna, moderna, a ujedno jednostavna za korištenje (klijent to potvrđuje svojom video izjavom). Najveći izazov je ležao u tome da zaista isporučimo web koji će se svojim izgledom podudarati s osnovnim webom branda Ikosoft, gdje su određeni, vrlo specifični sadržajni okviri trebali biti isprogramirani na način da su funkcionalni, a ujedno jednostavni za korištenje administratoru koji nema programerskog predznanja.
Nije loše imati smjernicu, međutim, teško je ne imati puno prostora za manevar, pa smo mišljenja da smo ovim projektom dokazali da možemo izaći na kraj i sa najneobičnijim zahtjevima, i pokazali svoju izverziranost WordPressom i Gutenbergom.
Naš klijent Ivica kaže da smo u tome uspjeli, zbog čega smo iznimno zadovoljni.
Zahvaljujemo mu na povjerenju koje nam godinama poklanja i radujemo se svim budućim projektima s njim.