fbpx

Case study – ikosoft.com.hr

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 … Više

“Zaslužujete pohvalu i moju otvorenu preporuku”

Zahvalan sam ekipi koja stoji iza tvrtke obART GRAF jer svoj posao shvaćaju više nego ozbiljno i odgovorno. I ne samo da su u potpunosti ispunili moja očekivanja, već su ih svojim iskustvom i znanjem nadopunili i pretvorili u savršen web koji je povezan s Facebookom. Tako smo umjesto klasične web stranice dobili atraktivan i vrlo živi alat koji danas odrađuje većinu našeg marketinga ciljano i s velikim uspjehom direktno prema našim strankama. Uz sve to moram istaknuti i vrlo realnu i povoljnu cijenu za sve što smo dobili, pa svakako zaslužujete pohvalu i moju otvorenu preporuku.

Ivica Pavlačić, vlasnik tvrtke Merlinka d.o.o. (web stranica ikosoft.com.hr i merlinka.hr)
Razvili smo koncept
Dizajn orijentirali prema klijentovim potrebama
Isprogramirali specifičnosti
Vodili računa o responzivnosti
Case study – ikosoft.com.hr - logotip

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)

Naslovni izmjenjivač sadržaja animiran pomoću GSAP library
Uređivanje sadržaja u back-endu kroz custom kreirani Gutenberg blok, s mogućnošću dodavanja teksta, fotografija, linkova, te pozicioniranja teksta u odnosu na okvir (lijevo / desno)

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.

Segment prednosti na front-endu kreiran je kroz klasične Gutenberg blokove…
…dok je u back end-u kreiran obrazac kojeg klijent može “ubaciti” jednim klikom i po potrebi urediti bez bilo kakve potrebe za uređivanjem strukture, samo sadržaja

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:

Carousel slider na front-endu

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

Performanse i sigurnost

Kako bi web stranica bila maksimalno brza, napravili smo sljedeće:

  1. 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.
  2. Upotreba modernog WebP formata fotografija, što reducira veličine fotografija za u nekim slučajevima i do 80%.
  3. Lazy-load fotografija – odgođeno učitavanje fotografija izvan viewport-a (ekrana), što znatno smanjuje opterećenje servera i ubrzava rad web stranice
  4. Kompresija i minifikacija svih JavaScript i CSS datoteka
  5. 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.

Unajmite nas za svoj idući projekt!

Planirate razvoj vlastitog projekta?

Agencija ste koja traži partnera?