Dobrodošli na našu novu web stranicu!
Prijašnja web stranica dobro nam je služila i zahvalni smo joj na tome, ali došlo je vrijeme za promjene. Tehnologija napreduje, trendovi se mijenjaju, a mi se kao IT tvrtka, u praćenju istih moramo posebno istaknuti. Zato smo stvorili moderniju, bržu i funkcionalniju web stranicu! Kako je izgledao proces njezine izrade, s kakvim smo se izazovima susreli i jesmo li ispunili svoja očekivanja?
Prije početka izrade stranice, skuhali smo kavu, sjeli u “konfu” i jasno definirali ciljeve koje želimo postići:
- moderniziranje i poboljšanje korisničkog iskustva,
- zadržavanje postojećeg backenda i poznatog CMS WordPress s kojima većina zaposlenika zna raditi,
- prebacivanje frontenda na novo rješenje temeljeno na Reactu kako bismo ubrzali prikazivanje stranice posjetiteljima,
- zadržavanje postojećih SEO postavke (uključujući i strukturu poveznica).
Osim zajedničkih ciljeva koje smo postavili kao tim, ovaj projekt bio je prilika i za ostvarenje osobnih ambicija gdje se posebno istaknuo kolega Zoltan, koji je imao ključnu ulogu u stvaranju nove web stranice:
“Neki ciljevi koje sam si ja postavio su bili naučiti Typescript, GraphQL, (Framer) Motion i NextJS. Osim prilagodbe novog dizajna cilj mi je bio omogućiti puno veću kontrolu nad sadržajem kako bi se sama struktura stranica mogla mijenjati bez da moram kodirati već da se može kroz “drag and drop” sučelje lako promijeniti redoslijed sadržaja.”
I onda smo krenuli…
Prva faza projekta bila je rezervirana za kolegicu dizajnericu Adrianu, koja je zaključujete, zaslužna za lijepi izgled stranice na kojoj čitate ovaj blog. U kratkom razgovoru, pojasnila nam je zašto se odlučila za ovakvu vrstu dizajna.
“S obzirom da trendovi čistog dizajna s tipografijom i fotografijama rastu u popularnosti, odlučila sam našu web stranicu prilagoditi tome te napraviti novi dizajn kako bismo postigli moderniji, pregledniji i profesionalniji izgled. Prethodna web stranica sadržavala je dosta ilustracija, što je često odvraćalo pažnju i otežavalo korisnicima pronalazak ključnih informacija. Inspirirana suvremenim trendovima u web dizajnu, usmjerila sam se na jednostavnost i funkcionalnost, omogućivši jasniju strukturu i bolji korisnički doživljaj. Novi dizajn odražava vrijednosti naše firme, a istovremeno osigurava da posjetitelji lako i brzo pronađu ono što traže.”
Nakon što je dizajn završen, na red je došao kolega programer Zoltan. A tko bi bolje objasnio taj proces od njega samog?
“Veću kontrolu sadržaja ostvarili smo na backendu koristeći naš omiljeni plugin Advanced Custom Fields (ACF), točnije komponentu Flexible Content, čije je sučelje poznato svima koji rade s ACF-om. WordPressov blok editor nismo koristili kako bismo izbjegli dvostruko kodiranje – backend i frontend komponenti – jer blok editor prikazuje sadržaj na način kako će ga vidjeti krajnji korisnici.
Ova fleksibilnost odrazila se i na frontend, omogućujući korisnicima WordPressa da vide promjene dok uređuju sadržaj, prije nego što ih konačno spreme, baš kao što su navikli. Tu nam je pomogao Next.js Preview Mode, koji omogućuje otvaranje pregleda promjena tijekom uređivanja jednim klikom.
Kad spremimo sve promjene, želimo ih što brže prikazati krajnjim korisnicima bez ponovnog prolaska kroz cijeli proces buildanja. Tu nam pomaže značajka Incremental Static Regeneration (ISG) u Next.js-u. ISG omogućuje korisnici da vide brzo isporučenu statičnu stranicu, dok se ažurirani sadržaj automatski osvježava u pozadini nakon što dođe do promjene.”
Posljednji cilj, zadržavanje postojećih SEO postavke, ostvaren je statičkom generacijom koja nam je omogućila uređivanje istih unutar našeg WordPress SEO plugina. Dodatno, značajka Image u Next.js platformi olakšava unos sadržaja jer omogućuje automatsko posluživanje optimiziranih slika krajnjim korisnicima. Na taj način više nije potrebna ručna optimizacija slika niti korištenje CDN-a (što je posebno razveselilo kolegice iz marketinga).
Jesmo li ostvarili ciljeve?
Nova web stranica, dizajnirana s naglaskom na jednostavnost i moderne trendove, značajno je poboljšala korisničko iskustvo. Intuitivna navigacija i optimizirana struktura sadržaja omogućuju lako snalaženje, dok brže učitavanje i automatska optimizacija slika osiguravaju fluidno pretraživanje. Izrađena u React-u, ne samo da je unaprijedila rad web tima, već je i obogatila našu ponudu. Sve u svemu, svi ciljevi su uspješno ostvareni, a krajnji rezultat je odličan! Prosudite i sami – veselimo se čuti komentare!
Autor:
Ana Božić