La scurt timp dupa ce am venit la INOVEO si am prins putina incredere, mi-am propus sa fac un update substantial la site-ul INOVEO. Rezultatul a fost INOVEO 2.0, un website dinamic care a fost laudat de clientii nostri, dar cu mici inadvertente.

De ce a fost nevoie de acest update substantial?

Tranzitia de la o tema wordpress cumparata la crearea propriei noastre teme custom nu a fost usoara si a necesitat foarte mult timp de dezvoltare, lucru care ne-a fortat sa facem compromisuri. In timp am reusit sa corectam multe din lucrurile care nu erau facute bine sau care nu ne placeau prin update-uri constate la website. Acest lucru ne-a permis sa adaugam din ce in ce mai mult content, fie ca vorbim de articole de blog, testimoniale, proiecte noi, pagini interioare cu functionalitati speciale sau alte texte in website.

Dar s-a ajuns la un punct in care toate “pecetele” de programare facute in trecut in graba incepeau sa faca probleme prin performanta redusa si bug-uri enervante. In acelasi timp, scheletul folosit pentru tema custom nu mai putea primi update-uri din cauza problemelor de compatibilitate, lucru care a limit foarte mult ce puteam face si era o problema mare de securitate, site-ul nostru find constant atacat.

Asa ca am decis sa facem un update la backend substantial la website. Acest lucru a necesitat rescrierea completa a mii de linii de cod PHP, CSS si JS. Nu voi intra in detalii acum cu exemple de cod in acest articol, dar vreau sa scriu alte articole in care voi da exemple concrete.

Ce am facut?

1. Am inceput prin a face update-ul la scheletul temei. Am inlocuit baza temei cu ultima versiune disponibila si am creat o tema copil pentru a face viitoarele update-uri mult mai usoare. Aceasta include acum un nou mod de compilare a codului SASS si JS, unul din motivele pentru care nu se putea face update direct la backend, trecerea de la Bootstrap 4 la versiunea 5, fix-uri pentru securitate si multe alte modificari importante.

2. Acum ca aveam un nou schelet am inceput sa rescriu codul pentru paginile majore existente in site, incepand cu homepage-ul nostru. Primul lucru pe care am vrut sa-l fac a fost sa rezolv problemele de performanta, sa mut o parte din cod in adminul de la WordPress sa nu mai fie nevoie sa fie editat fisierul sursa pentru anumite modificari pe care le facem des si sa pastrez aceeasi animatie dinamica de scroll orizontal si pe mobil.

Am reusit sa imbunatatesc si sa cresc performanta pentru homepage substantial prin:
– Redus foarte mult numarul de elemente ce trebuie incarcate de DOM in pagina
– Rescris cod JS mult mai eficient care nu mai misca toate “casutele” din pagina simultan, ci doar cele care trebuie sa intre in viewport
– Acelasi algoritm pentru miscare acum permite infinite scroll in care elementele pot face loop
– Simplificat si imbunatatit modul in care pagina este responsive
– Am impartit tot codul JS si CSS in doua parti, pentru homepage si pentru pagini interioare, reducand astfel foarte mult numarul de linii de cod ce trebuie sa se incarce si sa ruleze
– Acum nu mai este necesar sa intru in codul sursa si pot modifica direct din Worpress ce proiecte sau content vreau sa apara in prima parte a site-ului si este mai usor de tradus
– Animatia la scroll acum functioneaza si pe mobil
– Sunt sanse mult mai mici ca un anumit proiect sa apara simultan la scroll in mai multe cadrane de dimensiuni diferite
Animatii noi la hover pe proiecte si multe alte mici modificari si imbunatatiri

3. A urmat rescrierea meniului. Desi initial ne-am dorit ca zona de meniu sa fie folosita pentru afisarea de mesaje si titlul paginii pe care te afli, in practica acesta a fost mai mult o problema de UX din cauza marimii sale foarte mari si a pozitionarii sale ce restrictiona cat putea vedea un vizitator pe pagina si nu era usor de folosit.

Asa ca am schimbat meniul complet mutand totul in partea de sus, facandu-l sa pluteasca peste content cu doar cateva elemente vizibile. Deschiderea meniului il face fullscreen, cu text mare si un design placut ce permite adaugarea de text alaturi de butoane. Pentru a putea fi vizibile butoanele peste orice, isi schimba culoarea in negativul culorii de sub ele.

Imediat dupa eliminarea zonei negre mari de jos a meniului vechi intreg site-ul a devenit mult mai aerisit. Culorile minunate de pe homepage nu mai sunt ingramadite peste o bara neagra.

4. Desi am pus foarte mult accentul pe homepage, paginile interioare au primit si ele update-uri substantiale, multe dintre ele fiind rescrise complet sau partial. Aici timpul a devenit un factor limitator de cat de mult am putut sa modific.

Cea mai mare atentie a fost acordata paginilor individuale de proiect si la paginile de testimoniale. Nefiind timp pentru rescrierea a sute de pagini interioare am folosit modificari de template-uri, CSS si JS pentru a face aceste update-uri:
– Meniul lateral ce listeaza proiectele a fost refacut complet si acum se poate da scroll fara sa mai fie necesar ca acesta sa se lipeasca de zona de jos a ecranului cand ajunge la ultimul proiect
– Toate paginile ce erau dimensionate sa tina cont de meniul mare vechi au primit update sa se incarce fara acea limitare
– Listarea testimonialelor este acum corecta din punct de vedere responsive, iar formularul de pe paginile individuale a fost refacut
– Multe din paginile interioare au primit update de texte si traduceri

Ce urmeaza?

Este clar ca mai putem face multe lucruri sa imbunatatim site-ul, in special la paginile interioare unde am deja o lista mare de modificari pe care vreau sa le fac. Acest update ne va permite sa lucram mult mai eficient cu rezultate mai bune.

Avem planuri mari pentru viitor si cand vor fi gata veti citi despre ele intr-un articol nou de blog. 🙂