Ako sme robili náš nový web

Prečítajte si, ako sme tvorili náš nový web, ako sme ho vylepšili, čo všetko nové obsahuje a prečo je lepší ako ten predchádzajúci.

Web ako prezentácia firmy

Náš web slúži primárne ako prezentácia celej firmy a jej služieb, preto by mal byť vytvorený v súlade s našimi hodnotami, to znamená – moderné technológie, ľahká používateľnosť a vizuálna atraktivita pre konečného používateľa.

Niektoré z týchto bodov však náš starý web už nespĺňal, a preto prišla požiadavka na prerábku webu.

Nový dizajn

Pri tvorbe nového webu sme si dali zopár cieľov, ktoré by mala nová stránka spĺňať:

• rýchlejšia odozva webu
• lepšie spracovaný a svižnejší mobil
• lepšia predpríprava na SEO
• spustená sekcia Blog

Výber redakčného systému

Redakčný systém je nástroj, ktorý vám umožňuje spravovať obsah na webe. S WordPressom pracuje Q-čko interne už roky a používa ho ako backbone pre svoje jednoduché webové projekty. Pri voľbe redakčného systému pre náš nový web sme si tiež zvolili WordPress a to rovno z niekoľkých dôvodov, ako napríklad: prehľadná administrácia, jednoduché a ľahké rozšírenia pomocou pluginov, open-source alebo SEO friendliness.

Naša ďalšia voľba pozostávala z výberu frameworku. Nakódime si vlastný template alebo použijeme jednu z pripravených šablón? Použitie šablóny dokáže veľmi urýchliť samotnú tvorbu stránky, preto sme sa nakoniec rozhodli pre toto riešenie. Vybrali sme si šablónu Salient, ktorá najviac vyhovovala našim požiadavkám, avšak šablónu sme potom dodatočne ohýbali a upravovali podľa našich požiadaviek.

Vráťme sa naspäť

Prvotný plán bol len vizuálne skrášliť a zrýchliť predchádzajúci web. Na stránke sa pracovalo niekoľko mesiacov, ako bočný projekt s nie veľkou prioritou. Niekedy v novembri bola stránka takmer pripravená so starou obsahovou štruktúrou. Plán sa však trochu zmenil po príchode nášho nového kolegu – grafika.

Príchod nášho nového kolegu bol asi ten správny impulz na celý overhaul stránky a vytvorenie nových komponentov a častí. Preto stránka, ktorá bola z veľkej časti hotová už v novembri minulého roka, dostala stopku a začala sa robiť nanovo.

Grafika a komponenty

Výhodou šablóny Salient je, že má v sebe zabudovanú funkciu predvytvorených komponentov. Pri tvorbe novej stránky sme túto funkciu používali často v zmysle – grafik vybral komponenty a upravil ich podľa svojho návrhu, ja som komponenty nahadzoval na web a ohýbal podľa požiadaviek grafika.

Anglická verzia čiže všetko prerábať dvakrát

Z predchádzajúcej stránky sme jednoznačne chceli zanechať funkciu viacjazyčnosti stránky. Pre nás však táto viacjazyčnosť bola trochu nočnou morou. Ak sme napríklad niečo zmenili v slovenčine, prípadne grafik povedal vec typu „tu daj menšiu medzeru“, bolo potrebné túto zmenu preniesť aj na anglickú verziu. Dalo by sa teda povedať, že sme všetko robili dvakrát.

Tento problém sme sa snažili čo najviac oddialiť tak, že budeme anglickú verziu robiť až po zapracovaní všetkých úprav na Slovenskej verzii. To sme sa aj snažili urobiť, ale viete ako to je, final final final…

(Ne)zabudnuté veci

Naša nová webová stránka musela obsahovať aj niektoré funkcie a obsah z predchádzajúcej stránky. Museli sme si preto dávať veľký pozor, aby sme na niečo nezabudli, kedže na stránku za tie roky pribudlo mnoho informácií, ktoré jednoducho nemohli chýbať.

Presmerovania

Veľmi dôležitý komponent, ktorý používalo a naďalej používa naše marketingové oddelenie, boli presmerovania. Ak si zadáte napríklad qbsw.com/job, stránka vás automaticky presmeruje do sekcie kariéra. Presmerovania sa celkom hodia na sociálnych sieťach, alebo pri rôznych reklamách, ktoré naše marketingové oddelenie vytvára. Je to veľmi dôležitá funkcionalita, ktorú sme nakoniec preniesli aj do nového webu a celkovo sme zmigrovali okolo 30 rôznych presmerovaní z predchádzajúcej stránky.

Odkazy a privátna zóna

Webstránka je určená aj pre našich klientov, ktorí tam môžu nájsť dôležité informácie. Klienti majú prístup do “tajnej” zóny, kde môžu nájsť rôzne odkazy, napríklad na príručky alebo programy. Celú túto zónu bolo treba preklopiť zo starej stránky, vizuálne ju zatraktívniť a, samozrejme, bolo potrebné zachovať všetky odkazy pre našich klientov. Takýmto spôsobom sme manuálne zmigrovali až okolo 50 odkazov.

Portfólio

Jednou z úplne nových častí na webe je sekcia portfólio. Vybrali sme dvanásť našich najzaujímavejších projektov a vytvorili sme k nim vizuálne príťažlivé mikrostránky. Pri všetkých projektoch si môžete prečítať menší pokec od vedúceho projektu. Samozrejme, je tam aj jeho fotka a ďalšie informácie, štatistiky a vlastnosti projektu.

Fotky kolegov z rôznych pobočiek, ich pokec o projekte, jeho charakteristiku, štatistiky a zaujímavosti o ňom bolo však treba odniekiaľ dostať. A, samozrejme, bolo treba spraviť aj anglickú verziu stránky. A potom vám grafik povie, že treba niečo upraviť v komponente, ktorý sa nachádza celkovo na dvadsiatichštyroch rôznych miestach.

No dosť rečí, len samotnú sekciu portfólio aj s obsahom nám trvalo vytvoriť asi tak dva mesiace.

Blog

Spustenie blogu – cieľ, ktorý sme si dali pri tvorbe novej webstránky, bolo komplikovanejšie splniť, ako sme si mysleli. Aj keď máme firmu plnú odborníkov, nie každý má skúsenosti s písaním, čas a príležitosť do nášho firemného blogu prispieť. Vymysleli sme však typ odmeny pre každého zamestnanca, ak do nášho blogu prispeje. Ak si náhodou Q-čkar a chcel by si prispieť do nášho blogu, nezabudni napísať Lucii!

Optimalizácia stránky

Keď sme si povedali, že stránka je už naozaj vo finálnom stave a pripravená na migráciu, nastal čas na jednu z najdôležitejších a komplexnejších častí – optimalizáciu stránky.

Chceli sme dosiahnuť čo najrýchlejšie načítavanie stránky, a tak bolo potrebné použiť rôzne kombinácie praktík na zrýchlenie stránky. Nakoniec sa nám podaril celkom dobrý výsledok – 70/100 PageSpeed Insights na mobile a 97/100 na PC.

Tento dobrý výsledok sme dosiahli vďaka použitiu pluginov Cache Enabler a Fast Velocity Minify, ktoré sa nám podarilo po viacerých hodinách konfigurácie spôsobom pokus/omyl správne nastaviť.

Obrázky

Chceli sme spraviť peknú stránku a v našom prípade platila rovnica: pekná stránka = veľa obrázkov. Ak chcete mať čo najrýchlejšiu stránku a zároveň máte na nej veľa obrázkov, čaká vás práca. Dôležitá je komprimácia. Komprimáciu dokáže spraviť veľa rôznych pluginov, ktoré sa dajú do nášho redakčného systému implementovať, a tak je trochu hlúpe, aby sme si obrázky optimalizovali manuálne. 

My sme konkrétne siahli po riešení Optimus + Lazy Load by WP Rocker. Optimus je plugin, ktorý automaticky cez server redukuje velkosť obrázkov a vytvára zároveň .webp verziu pre prehliadače, ktoré .webp podporujú. Lazy Load plugin nám zas poskytuje možnosť Lazy Loadingu pre obrázky a aj iframe. Prehliadač teda nemusí čakať na načítanie všetkých obrázkov pri návšteve webu, načítava ich až podľa potreby.

Zlepšenia?

Po takmer roku vývoja našej novej stránky musím povedať, že sme spravili kopec dobrej roboty. Pri porovnaní našej predchádzajúcej stránky je táto určite o niekoľko rokov vpred. Zároveň ďakujem všetkým kolegom, ktorí sa podieľali na tvorbe nášho nového webu. Spomeniem ešte niekoľko bodov, prečo je naša stránka lepšia od tej predchádzajúcej:

• zlepšenie prehľadnosti stránky,
• priemerné načítavanie 1.7s (zlepšenie o 50% v porovnaní so starou stránkou),
• vysoké Google Page Insights skóre, resp. 70/97 (Mobil/PC),
• optimalizované obrázky a použitie lazy loadingu,
• moderný a svieži dizajn pre rok 2019.

Snáď sa vám bude nová stránka páčiť a ak náhodou nájdete priestor na zlepšenie, prípadne nejakú chybu, neváhajte sa ozvať na andrej.srna@qbsw.sk.