Posodobljeno 14. 12. 2022
Spletne strani so se včasih izdelovale veliko bolj enostavneje kot danes, saj je bila njihova struktura sestavljena iz velikih blokov besedil ter iz elementov, kot so slike ter flash animacije.
Razlog, zakaj so ljudje strani zasipavali z vsebinami, je bil enostaven: več je več.
V takratnem času je bila moderna stran z veliko elementi, ki so kar kričali po pozornosti. Takšne spletne strani so se zelo počasi nalagale, bile so slabše odzivne, v ospredju pa je bila vsebina, uporabniški izkušnji pa ni bilo posvečenega veliko časa.
Prav tako je bila velika nevarnost za sesutje ali zablokiranje računalnika, če smo kliknili na napačen gumb oziroma povezavo. Tudi računalniki so bili v preteklosti veliko bolj dovzetni za viruse in napake.
Torej, če ste rojeni v tistih letih, ko so spletne strani bile izdelane iz neoblikovanih besedil, številnih tabel in simbolično podčrtanih modrih povezav, veste, kako kaotična so lahko bila spletna mesta z vsemi temi dodanimi elementi.
V današnjih časih, ko smo informacijsko bogati in časovno revni, vemo, da so te prakse (več je več) postale kontraproduktivne, zato so se čez leta začela prej omenjena gnezda elementov in povezav, spreminjati v uporabne in vizualno privlačne strani, katere je užitek prebirati in uporabljati.
Internet je iz računalnika prešel najprej na telefone. Kasneje, ko je prihajalo vedno več digitalnih naprav, se je internet moral prilagoditi na še več različnim dimenzijam zaslonov. To je praksi pomenilo potrebo po prilagajanju spletnih strani na ekran računalnika, tablice in pametnega telefona.
Proces izdelave spletnih strani je šel z roko v roki z razvojem tehnologije in je v zadnjih nekaj letih močno napredoval. Spremenil je spletne strani, sestavljene iz velikih blokov besedil, v zanimive digitalne mojstrovine, ki jih je v užitek obiskati.
Več je bilo uporabnikov na spletu, bolj so oblikovalci in programerji dvigovali standard uporabniške izkušnje ter kasneje še uveljavili Atomic Design, ki ga je narekoval Google, za izgradnjo UI (user interface – videz, estetski elementi, s katerimi uporabniki komunicirajo).
Tako smo prešli iz spletnih strani z vsebinami, k spletnim stranem z vrednoto, pri katerih je uporabnik na prvem mestu.
V nadaljevanju članka so predstavljene štiri najpomembnejše smernice izdelovanja spletnih strani – odzivnost, varnost, delovanje ter optimizacija. To so štiri smernice, za katere priporočamo, da se jih držite, ko gre za izdelavo spletne strani.
4 večje spremembe, ki v današnjih časih krojijo podobo novodobnih spletnih strani:
- “Mobile-first” razvoj spletnih strani
- SSL, GDPR in Spletna varnost
- Core Web Vitals
- SEO optimizacija
Kazalo
1. Mobile-First Development
Mobile First Development je razvoj, kjer najprej načrtujemo izdelavo spletne strani prilagojene za pametne telefone, šele nato za računalniške zaslone. Vsebine, kot so slike, besedila, video posnetki ipd. so prilagojeni po višini in širini tako, da se optimalno prikazujejo na vseh mobilnih napravah.
Še do nedavnega se je spletna stran najprej izdelala za računalnik in se kasneje prilagodila za ostale naprave, kot so tablični računalniki in mobilni telefoni.
Pri principu Mobile First pa je postopek ravno obraten – najprej se izriše dizajn za pametne telefone in se kasneje prilagodi za večje zaslone. Tak način oblikovanja izhaja predvsem iz dejstva, da vse več obiska spletnih strani prihaja z naslova mobilnih naprav.
Proces izdelave spletne strani za pametne telefone:
- Priprava vsebine in vsebinske strukture strani: zasloni pametnih telefonov so manjši kot računalniški zasloni, zato moramo še pred izdelavo natančno določiti vse podstrani, ki jih želimo vključiti ter jih smiselno razporediti po navigacijskem meniju.
Pozorni morami biti tudi na količino vsebine, saj smo s prostorom omejeni in se je zatorej smiselno ravnati po načelu manj je več. - Vizualna hierarhija: potrebno je določiti, katerim elementom na spletni strani bo pripadlo več prostora in katerim manj ter jih smiselno razporediti. Če je za vas ena storitev, npr. polaganje parketa bolj pomembna kot storitev brušenje parketa, potem je smiselno prvi storitvi nameniti več prostora.
- Začnite oblikovanje z najmanjšimi prelomnimi točkami in jih nato povečajte: najprej pripravite wireframe za pametne telefone in le-tega nato uporabite kot model za večje prelomne točke. Najprej torej pripravite dizajn za vse vrste zaslonov mobilnih telefonov, naslednji korak je prilagoditev dizajna tabličnim računalnikom, kot zadnji pa nastopijo računalniški zasloni, pri čemer bodite pozorni, da je zaslon prenosnih računalnikov običajno manjši kot velikost monitorjev.
- Povečajte gumbe in klikabilne elemente: ker so prsti večji in širši od računalniške miške, potrebujete večje elemente, na katere bo uporabnik lahko povsem preprosto kliknil s prstom. Povezavam dodajte dovolj prostora in predvsem povečajte gumbe za izvajanje akcije (angl. “Call to Action”).
- Spletna stran kot aplikacija: uporabniki mobilnih naprav so navajeni uporabljati mobilne aplikacije, ki jim omogočajo enostavno navigiranje in nadzor nad uporabo, zato pri snovanju mobilne spletne strani pomislite na vtičnike ali druge elemente na zaslonu, s katerimi lahko uporabniki komunicirajo, ne da bi bilo potrebno stran osvežiti.
- Izogibajte se velikim grafikam: zapletene grafike in velike ležeče fotografije se na manjših zaslonih ne prikazujejo dobro, ali celo popačijo spletno stran. Zato uporabljajte le fotografije, ki so prilagojene za prikazovanje na mobilnih napravah.
- Test, test, test: vedno svoj izdelek preizkusite sami! Pojdite na mobilni telefon, odprite svojo spletno stran in jo preizkusite. Dotikajte se različnih elementov in preverite, ali je vse na svojem mestu, če je stran enostavno krmariti; če se dobro nalaga; če sta besedilo in grafika enostavno berljiva ter bodite pozorni na to, kako se počutite ob brskanju po vaši spletni strani – če vas karkoli zmoti, to popravite. Kajti, če je zmotilo vas, bo verjetno zmotilo tudi ostale obiskovalce. Ko ste vi zadovoljni z vašo spletno stran, jo pred objavo pokažite še sodelavcem, družini, prijateljem… več oči več vidi in morda vas bodo tudi oni znali opozoriti na morebitne pomanjkljivosti.
“Mobile First” pristop je plod vedno večjega števila uporabnikov mobilnih telefonov, ki preko svojih mobilnih naprav dostopajo do spletnih strani. Pred časom, ko stran na telefonu ni bila odzivna, so jo uporabniki hitreje zapustili.
Odstotek uporabnikov, ki dostopa na spletne strani preko mobilnih naprav je danes že bistveno večji kot preko računalnikov. Ta odstotek pa bo v naslednjih letih še drastično zrastel, zato uporaba principa “mobile first” ni le priporočljiv, temveč nujen!
2. GDPR, Cybersecurity in SSL
Ker je svetovni splet postal tako razširjen in ker je danes že skoraj ¾ prebivalstva na spletu, se je – glede na pretekla vdiranja in kraje osebnih identitet podjetjem in posameznikom – postoma moralo uveljaviti veliko varnostnih ukrepov.
Pred časom je napačen klik na spletni strani lahko pomenil zablokiran, izbrisan ali celo uničen računalnik. Seveda so bili osebam z nekaj programerska znanja lahko enostavno dostopni tudi občutljivi in zasebni podatki .
Na spletu je od vedno bilo prisotnih veliko nevarnosti, virusov, računalniških črvov in še mnogo zlonamernih skript. Osebni podatki so se na spletu prodajali kot na tržnici, izsiljevanja in zlorabe podatkov pa so marsikoga stisnile v kot.
V času, ko je na spletu vedno več uporabnikov, je tudi vedno večji pritisk na ponudnikih, da preprečijo vdore in varnostne luknje. Seveda se je s povečanjem uporabnikov povečalo tudi število virusov, a današnji visoki standardi varnosti pripomorejo k večji varnosti uporabnikov na spletu.
Živimo v digitalni dobi in hočemo ali nočemo je na spletu velik del našega življenja. Posledično pa smo ljudje izgubili nadzor nad vsemi podatki, ki krožijo po medmrežju – ti podatki pa so ob nepravlinem ravnanju in neustrezni zaščiti, zelo enostavno dostopni.
Zato so bili ustvarjeni varnostni ukrepi, ki podjetja in fizične osebe, medtem ko so aktivni na spletu, zavarujejo. Ti varnosti ukrepi so:
SSL certifikati
To so certifikati, ki so nameščeni na strežniku in šifrirajo podatke, ki se pošiljajo od uporabnika do strežnika in obratno. Torej osnova varne izmenjave podatkov v omrežju so algoritmi, ki so zasnovani za varno povezovanje računalnikov in varovanje podatkov.
Prednosti uporabe SSL certifikatov so:
- zaščita podatkov;
- zagotavljajo pristnost vaše spletne strani;
- zaradi certifikata bo vaša stran uvrščena višje na iskalniku Google;
- omogoča varna spletna plačila s kreditnimi karticami;
- zaupanje strank.
GDPR (General Data Protection Regulation) ali uredba o varstvu podatkov
To je uredba EU o varstvu podatkov, ki določa nova in strožja pravila glede varovanja in obdelave osebnih podatkov in določa, da se podatki lahko zbirajo le na podlagi izrecne privolitve posameznika. Torej mora uporabnik ob vstopu na vašo spletno stran soglašati z uporabo tako imenovanih piškotkov, po tem, ko je obveščen o namenu njihove uporabe.
Cilj te uredbe je, povečati nadzor uporabnika, kako se uporabljajo njegovi osebni podatki in zmanjšati število potencialnih zlorab podatkov za zlonamerne dejavnosti.
Cybersecurity ali Kibernetska varnost
Kibernetska varnost je opredeljena kot skupek dejavnosti in ukrepov – tehničnih in netehničnih, katerih namen je zavarovati računalniška omrežja, računalnike, programsko in strojno opremo ter informacije, ki jih vsebuje ter obravnava, pred različnimi grožnjami.
Vdori v spletne strani in njihove baze podatkov, lahko ogrozijo poslovanje podjetji in posameznike. Med najbolj nevarne, spadajo kraje podatkov o kupcih, njihovih osebnih podatkov ali celo podatkov o kreditnih karticah.
Vizija za vzpostavitev sistema kibernetske varnosti je seveda prispevanje k zagotovitvi varovanega in odprtega prostora, kar bo osnova za nemoteno delovanje infrastrukture, pomembne za državne organe, gospodarstva ter prav tako za življenje vsakega posameznika.
3. Core Web Vitals (CWV)
Core Web Vitals ali prevedeno osnovni podatki za splet, je skupina metrik, ki so ključne za optimalno delovanje spletnih strani in zagotavljanje dobre uporabniške izkušnje.
Vsak od teh vitalnih elementov, predstavlja poseben vidik uporabniške izkušnje in je merljiv v praksi ter odraža dejanske izkušnje s spletno stranjo.
Če je torej vaša spletna stran pravilno izdelana in optimizirana, vam ni treba skrbeti, da bi bila ocena CWV slaba.
Med osnovne podatke za splet spadajo:
- Largest Contentful Paint – LCP: meri hitrost nalaganja strani. Za dobro uporabniško izkušnjo si morajo spletna mesta prizadevati, da se celotna spletna stran pojavi v prvih 2,5 sekundah od začetka nalaganja.
- First Input Delay – FID: meri interaktivnost. Za dobro uporabniško izkušnjo si morajo spletna mesta prizadevati, da imajo FID manj kot 100 milisekund. To je čas od začetka nalaganja strani, do polne interaktivnosti.
- Cumulative Layout Shift – CLS: meri vidno stabilnost. Podatek nam pove koliko se stran ob nalaganju in sestavljanju “premika” oziroma “skače”. Za dobro uporabniško izkušnjo si morajo spletna mesta prizadevati, da bodo imela oceno CLS manj kot 0,1.
CWV vaše spletne strani lahko redno spremljate z orodjem Google Search Console, o katerem si lahko več preberete v članku.
Kako izboljšati CWV?
Z upoštevanjem spodnjih nasvetov boste poskrbeli za boljše rezultate uporabniške izkušnje:
1. Zmanjšante izvajanje JavaScripta
Po meritvah, ki ste jih opravili z Google Search Console, ste dobili oceno. Med drugim je znotraj te ocene oznaka FID (prva interakcija uporabnika z naloženo stranjo)- nižji kot je FID, bolj je stran uporabna za uporabnika.
Če orodje pokaže, da stran komunicira z uporabnikom več kot 300 milisekund, pomeni, da je ocena slaba in da je najverjetneje treba optimizirati izvajanje JavaScripta. To naredite tako, da na svoji spletni strani kliknete desni klik miške in izberete »Preveri«. Nadaljujete s klikom na »Viri« in poiščete tri pike na dnu, ter dodate orodje »Pokritost« in ga omogočite. Program vam bo pokazal, koliko kode je neuporabne.
2. Uporabite t. i. “Lazy Loading” za nalaganje slik:
Če imate na svojem spletnem mestu veliko slik, videoposnetkov in animacij, je ključnega pomena, da uporabite “lazy loading”, saj bodo tako rezultati uporabniške izkušnje boljši.
Naj vas ime ne zavede – “lazy loading” omogoča nalaganje slik in drugih elementov šele takrat, ko se uporabnik pomika po strani in dejansko potrebuje omenjene slike. Na ta način boste izboljšali hitrost, zmogljivost ter optimizacijo spletne strani.
Oceno hitrosti svoje spletne strani lahko preverite v Googlovem orodju Page Speed Insights.
3. Optimizirajte in kompresirajte svoje slike
Ključnega pomena je, da so naložene slike na spletni strani optimizirane in pomanjšane, saj tako izboljšate hitrost nalaganja, uporabniško izkušnjo in uvrstitev v brskalnikih. Na spletno stran priporočamo nalaganje slik v formatih: JPG, PNG ali WEBP.
Velikost spletne strani lahko zmanjšate tako, da slike kompresirate v različnih programih za zmanjšanje slik, kot so na primer TinyPNG.
4. Izboljšajte odzivni čas strežnika
Preverite odzivni čas strežnika na s pomočjo enega od spletnih orodji, na primer ByteCheck.
Google svetuje, da je najboljša ocena nalaganja prvega byta nižja od 600 milisekund. Ko zakupite gostovanje pri določenem ponudniku, imate možnost izbire, da ponudnik skrbi za vzdrževanja in nadgradnjo vašega strežnika, kar pomeni hitrejše odzivne čase, redne varnostne posodobitve strežnika in monitoringa (nadzor strežnika, odprava kritičnih napak, proaktivno delovanje).
Priporočljivo je preveriti tudi vtičnike, saj lahko včasih ob nalaganju, skripte kradejo strežniku moč in s tem drastično upočasnijo spletno stran. Preglejte jih in tiste, ki jih stran ne potrebuje za delovanje, odstranite ali de-aktivirajte.
Več možnosti izboljšav vaše spletne strani si lahko ogledate tudi v spodnjem videu posnetku:
4. SEO optimizacija
Optimizacija ni bila vedno nujno potrebna. Spletne strani so zajemale malo vsebine ter tu in tam kakšno sliko. Uporaba spletnih strani ni bila tako razširjena, kot je danes, prav tako pa na spletu ni bilo prisotne toliko vsebine.
Dandanes je SEO optimizacija za novo zgrajeno spletno stran zelo pomembna, da lahko že v samem začetku Google prepozna ciljane ključne besede in jih uvrsti na svoj seznam. Optimizacija pa ni le izbira ključnih besed, temveč zajema širok spekter drugih elementov, med drugim:
- poimenovanje slik (brskalniki berejo slike preko alt teksta, zato jih je smiselno poimenovati po variaciji ključne besede za glavno kategorijo) in video posnetkov;
- meta naslovi in opisi;
- poimenovanje izdelkov (poimenovanja naj bodo unikatna). Izdelki se lahko poimenujejo po principu: znamka | vrsta | produkt | lastnost.
Več o SEO optimizaciji se lahko naučite v Spletnik tečaju SEO optimizacije ali pa vam pri SEO optimizaciji pomagamo mi.
Velike spremembe skozi desetletja
Izdelava spletnih strani včasih in danes se zelo razlikuje, v prvi vrsti zaradi novih načinov uporabe interneta in novih naprav s katerimi dostopamo do svetovnega spleta.
Prenosne naprave in mobilni telefoni so postali glavni vir prometa na spletu, temu trendu pa so seveda sledile tudi spremembe pri oblikovanju spletnih strani.
Vse večja količina podatkov na spletu je razlog za spremembe na področju optimizacije, saj si želimo, da uporabniki najdejo to kar iščejo in pri tem ne porabijo veliko časa. Bolj je spletna stran oprimizirana, večja je verjetnost, da bodo obiskovalci na spletu našli prav vas.
Nova doba nas je prav tako potisnila v bolj varno in zavedno brskanje spletnih vsebin z SSL certifikati, povezavami HTTPS, napredno optimizacijo in prilagajanjem oblikovalskih vsebin.
Oblikovanje spletnih strani se dandanes torej večinoma vrti okrog dobre uporabniške izkušnje, uporabnosti, kvalitetne vsebine in varnosti na spletu. Ste poskrbeli za vse?
Za dodatna vprašanja, pomoč in nasvete pri izdelavi spletne strani, smo vam kot vedno na voljo na e-mail naslovu: blog@spletnik.si
Srečno!
