Prenovljen blog Pomagalnik 5.0

BLOG-Pomagalnik-v5

Blog Pomagalnik si je zaslužil novo preobleko z izvirnim imenom Pomagalnik 5.0. Na prvi pogled je podoben verziji Pomagalnik 4.0, vendar je v tej verziji design veliko bolj prečiščen in pregleden. Posebej pa sem se posvetil uporabniški izkušnji, spletni dostopnosti, uporabi pametnejšega serviranja slik različnim napravam in optimizaciji hitrega nalaganja strani.

Ugibanja pri prenovi spletnih strani so najbolj tvegan del, zato se je pri prenovi dobro nasloniti na trdne podatke analiznih orodij in podatkov, ki jih imamo na voljo. Pri tokratni prenovi sem uporabil tudi orodje HotJar, natančneje njihove heatmape in snemanje uporabnikov na strani. Na podlagi pridobljenih podatkov pa sem se lotil določenih vizualnih sprememb, ki naj bi na dolgi rok izboljšale uporabo bloga. Ena glavnih sprememb, ki so že nekaj časa aktualne je enostolpična postavitev, informacije si tako sledijo ena drugi, spremljevalni del ob strani pa se je popolnoma umaknil oz. so se nekatere vsebine preselile v nogo.

Spletna dostopnost je bila dobro pokrita že v prejšnji verziji in je bila v novi samo še dograjena. Za lažje odločanje o branju članka pa je bil dodan še predviden čas branja. Celotno besedilo in vnosne forme so se ustrezno povečale oz. se besedilo sedaj prilagaja na zaslon oz. določene parametre uporabnikovega zaslona. Slike imajo končno odzivno podporo (RWD), res je da ta podpora ni idealna, vendar je za blog, ki uporablja platformo WordPress več, kot dovolj. Za hitrejše nalaganje pa so bili sprejeti različni načini kompresije datotek, tako v obliki kode (.htaccess), kot slikovnih gradiv (Tinypng).

Glavno pohitritev bloga pa je prinesla uporaba metode »Critical CSS«, ki CSS, ki se uporabi na uporabnikovem zaslonu naloži takoj, medtem ko v ozadju naloži še celoten CSS. Metoda deluje po principu, da se na podlagi piškotka naloži delna koda CSS v sam HTML, če pa piškotek obstaja pa naloži že obstoječ CSS, ki se je prenesel v ozadju. Za boljše razumevanje logike preverite Enhance.js podjetja Filament Group.

Za testiranje optimizacije strani sem uporabljal tri različna orodja, in sicer: PageSpeed Insights, GTmetrix in WEBPAGETEST. Spodaj pa so primerjave starega bloga in novega bloga.

PageSpeed-Insights GTmetrix WEBPAGETEST

Dodatno sem izpostavil modul za zbiranje prijav na Newsletter oz. obveščanje o novih objavah. Prav tako se je prenovila oblika Newsletterja. Iz analiz je bilo razvidno, da je komentiranje objav v zatonu, zato sem jih temu primerno potisnil v ozadje in so na voljo le na zahtevo uporabnika. Design strani je tako postal veliko bolj čist in pregleden.

Za razliko od prejšnjih prenov sem se tokrat lotil tudi nekaj vsebinskih sprememb, in sicer se bodo razpršena področja združila v manjše število kategorij, kjer bodo obstoječe kategorije postale podkategorije novih. Nova področja so: WEB, Grafika, Izobraževanje, Marketing, Programska oprema in Prosti čas. Določene vsebine pa bodo ustrezno predelane oz. dodelane in prerazporejene.

Na koncu bi se rad zahvalil vsem, ki me spremljate redno in občasno. Vaš obisk, branje, komentarji, način uporabe mi daje energijo za nadaljevanje in hkrati pomaga pri nadaljnjem razvoju, zares hvala!

Oznake: Pomagalnikprenova

  • matej

    Odlično in veselo naprej do 10.0! Še vedno pa čakamo na prvi video blog ;)

    Odgovori

Komentiraj


*