Izdelava spletnih strani se je drastično spremenila skozi desetletja. Prešli smo iz poplavljenih flash animacij k minimalnem in grafično dovršenem spletnih straneh. V 2021 je v osrčju uporabnik in njegova izkušnja na spletu. Informacije so se začele luščiti do bistva in dostopnost je na najvišji prioriteti.
Mojstri digitalnega oblikovanja tekmujejo z visoko funkcionalnimi animiranimi spletnimi stranmi katere je užitek preskrolat. Sekcije oživijo v fantastičnih barvah in se zlivajo iz ene v drugo kot neke digitalne mojstrovine slikarjev.
Zaradi široke uporabe skozi že vse generacije se je v industriji izdelave spletnih strani postavilo veliko mejnikov in vedno višji kriteriji. Kajti spletne strani morajo biti funkcionalne, privlačnega izgleda, hitre in predvsem varne. Strogi zakoni skrbijo, da je uproabnik na vsakem koraku zaščiten – tako on kot njegovi podatki.
Tudi proces sam se je preoblikoval prvo v eno panogo in kasneje v specializirane panoge. Zaradi velikega obsega napredka obstajajo specialisti za vsak segment posebej: Raziskovalec, UX načrtovalec, UI oblikovalec, frond end izdelovalec, back end programer.
Da boste pa bolje razumeli zakaj je ta niša tako obsežna vas bomo peljali skozi celoten proces profesionalne izdelave spletne strani v wordpres platformi. Dotaknili se bomo vsakega segmenta posebej in predstavili kakšen je namen in delo pri vsakem koraku.
Profesionalna izdelava spletnih strani v WordPress-u
Proces bomo predstavili iz perspektive izvajalca, ki se loti takšnega projekta Dobili boste globok vpogled nad procesom kateremu (če ste dovolj zagnani) lahko tudi sledite sami.
Razumeti poslovne cilje projekta
Žargon: temu enostavno rečemo spoznavni sestanek, ki je za vse projekte brezplačen.
V prvem koraku je pomembno, da ugotovimo zakaj bomo delali, kar bomo delali. Kakšni so vaši poslovni cilji za izgradnjo spletnega mesta? Kako bomo merili uspeh? Kakšen bo obseg dela in kakšna je časovnica. Po teh informacijah se odločimo ali projekt sprejeti ali priporočiti katero od partnerskih podjetij.
Študija podjetja, ciljnih skupin in tržišča
Ko smo začrtali okvirje projekta nas čaka spoznavanje in raziskovanje. Za vsakim uspešnim prodjektom stoji dobro razumevanje podjetja, njihovih uporabnikov in tržišča. To izvedemo v treh fazah:
- Spoznavanje podjetja – skupaj z naročnikom odgovorimo na nekaj temeljnih vprašanj preko katerih želimo razumeti podjetje in njihovo poslovanje. To lahko traja 15 min ali pa 2 uri – popolnoma je odvisno od velikosti prodjetja. Kdo so, kaj ponujajo, komu pomagajo, k čem strmijo ipd. Komaj ko podjetje in njene cilje razumemo se lahko nadaljno lotimo projekta.
- Ciljne skupine – izvedemo študijo ciljnih skupin. Informacije o uporabnikih črpamo iz analitičnih programov, dosedanjih izkušenj naročnika, spletnih raziskav in enostavnih tez, ki jih preko zbranih informacij oblikujemo. Ko imamo dovolj podatkov lahko ustvarimo persone popolnih kupcev. Dodamo jim ime, določimo demografske podatke, psihografske podatki in krajšo ozadje. Te persone definiramo kolikor globoko je le smiselno (če uporabnik kupuje zavese ni pomembno katere zvrsti filmov rad gleda).
- Študija tržišča – kot ime namiguje je naslednji korak, da pregledamo konkurenco pri nas in drugod. V prvi vrsti iščemo direktne konkurente. Če teh ni se lahko obrnemo tudi na ne-direktne. Cilj je ugotoviti kaj imajo uporabniki v damen trenutku na razpolago, kaj že obstaja, kaj manjka in kako se od obstoječe ponudbe razločiti. Pozorni smo tudi na to, kaj so neke standardne smernice v izbrani industriji, kaj uporabniki pričakujejo in razumejo. Na podlagi tega lahko iščemo priložnosti, kako izstopati iz povprečja.
Določanje strani (strukturno drevo) + user flow
Žargon: Ta del spada pod storitev načrtovanje uporabniške izkušnje (t.i. UX) in mu pravimo načrtovanje hirarhije strani.
Dobro poznamo podjetje, razumemo njene uporabnike in vemo, kje se skrivajo potencialne priložnosti za izboljšavo. Naslednji korak je, da se ponovno z naročnikom srečamo na sestanku in se pogovorimo o hirarhiji strani.
Na podlagi zbranih informacij že vemo, kaj so tiste tipske strani, ki jih uporabniki pričakujejo in strani, ki imajo močno dodano vrednost. Skupaj z temi informacijami in povratnimi informacijami naročnika sestavimo strukturno drevo strani, ki je smiselno za podjetje in njene poslovne cilje.
V tej fazi določimo tudi tipe konverzij (načine kako bomo uporabnike/bralce pretvorili v dejanske kupce).
Načrtovanje poteka informacij na strani in definiranje konverzij (low fidelitywireframe)
Žargon: Ta del spada pod storitev načrtovanje uporabniške izkušnje (t.i. UX) in mu pravimo nizko fidelični žični izris spletnih strani.
Strukturno drevo strani imamo izrisano. Začnemo lahko načrtovati posamezne strani. Tega se lotimo v prvem koraku čisto enostavno kajti ne potrebujemo nič druga kot kos papirja in kuli z zlomljenim zatičom (vsi ga mamo 😊). Pogovor z naročnikom nam razkrije katere informacije bi želeli na vsaki strani izpostaviti.
Enorog v tem primeru je, da ima naročnik vsebino že pripravljeno a vsi izdelovalci spletnih strani vemo, da je to le mit :D. Med pogovorom podamo tudi svoje predloge, ki jih bi bilo smiselno implementirati. Z tesnim sodelovanjem lahko začrtamo konkretno pot informacij na vsaki strani.
Končen izdelek pa izgleda tako, da naberemo veliko kvadratkov in v njih drug pod drugim nekaj težko berljivih napisov.
Razvrstitev informacij po sekcijah (high fidelity wireframe)
Žargon: Ta del spada pod storitev načrtovanje uporabniške izkušnje (t.i. UX) in mu rečemo visoko fidelični žični izris spletnih strani.
Po prej definiranem načrtu informacij začnemo informacije, podatke, slike in grafike neoblikovane zlagati po posamezni strani.
To fazo si lahko predstavljamo kot izdelavo okostja spletnega mesta. V tej točki (če nimamo še končnih vsebin) se uporablja začasno besedilo »Lorem ipsum« in sivi kvadratki za slike in ozadja. Cilj tega koraka je informacije razporedit po strani po vrstnem redu, ki smo ga v prejšnjem koraku skupaj z naročnikom določili.
UX oblikovalec probava in eksperementira z različnimi postavitvami in načini kako izpostaviti informacije. Pozorni smo tudi na točke konverzij, da uporabnika ne ustavimo na njegovi poti ampak ga vedno držimo v ciklu.
Korak visoko fideličnega izrisa zahteva veliko raziskovanja različnih postavitev, znanja uporabniške poti in dobro poznavanje splošnih smernic izdelovanja spletnih strani.
Trendi in standardi se iz meseca v mesec spreminjajo in moramo biti vedno v koraku s časom. Ko najdemo tipsko postavitev, ki bo delovala jo prenesemo skozi celotno stran in jo modificiramo kakor jo potrebujemo.
Ko imamo enkrat končen UX design, ga skupaj z naročnikom pregledamo. Cilj je ustvariti stran, ki bo smiseln za uporabnike, zato imamo v mislih skozi cel proces le njih. Ko naročnik potrdi UX preidemo na naslednjo fazo, kjer se začnejo stvari združevati v simpatično celoto.
Opomba: Nekatera podjetja že med samo UX fazo izvajajo testiranja, da vidijo ali so postavljene teze korektne, ali bodo potrebne modifikacije in spremembe.
Grafično oblikovanje spletne strani
Žargon: Ta del spada pod storitev oblikovanja uporabniškega vmesnika (t.i. UI) in mu rečemo oblikovanje designa za spletno stran.
Na podlagi visoko UX začnemo z oblikovanjem spletne strani. V tej fazi pričnemo z vstavljanjem končnih vsebin, slik, grafik in drugih multimedijskih materialov.
Če gledamo na UX kot okostje, lahko rečemo da oblikujemo obraz spletne strani (kar je zelo intuitivo). Preden pa začnemo z oblikovanjem pa si moramo ustvariti oblikovalski sistem, ki nam bo OGROMNO lajšal celoten proces.
Ta sistem vsebuje informacije kot so velikost pisav, barv, razmiki in velikosti. Z takšnim sistemom dosežemo konsistentnost na strani ki je nujna za razumevanje uporabnikov. Pomaga nam globalno določati nekatere stile in razmerja med elementi.
Vredno je vedeti, da je tak sistem tudi »živi« organizem in se lahko spreminja po potrebi. Služi kot vodič, ki drži vizualno strukturo spletne strani na mestu.
Oblikovalski sistem in stanja
Velikost pisav
Po strani bomo kot v kakšni knjigi potrebovali naslove, podnaslove, nadnaslove, citate in še veliko več. Zato si preko izbranega sistema določimo vse tipske velikosti pisav. Najbolj pogoste so: Hero (naslov na vhodni strni), H1 (Glavni naslovi posamezne strani), podnaslovi (največ krat H2, H3 in H4), mali tekst (copyright, capction ipd.), nadnaslov (kadar ga uporabljamo) in nesmemo pozabiti paragraf (osnovna velikost pisave – priporočljivo 16+ px).
Nasvet: sistem velikosti pisav si lahko ustvarite na spodnji povezavi https://type-scale.com/
Barve
Vizualno hirarhijo ne določajo le velikosti pisav temveč barve. Barve imajo veliko nalogo na spletni strani, kajti razločujejo sekcije, izpostavljajo informacije in vodijo oko na točke, kjer bi želeli voditi uporabnike.
Zraven zaščitne barve podjetja potrebujemo še nekaj drugih: zaščitna barva (naj zapolni max 20%), bela (ozadje strani), črna (sekundarna, glavni naslovi, temna sekcija), temno siva (za paragrafe).
Dodatne barve so: barva uspeha (zelena ali zaščitna barva), barva neuspeha (rdeča – NE sme biti zaščitna barva), barva opozorila (največ krat oranžna). Paziti moramo, da je vidljivost in kontrast teh barv dovolj velik na svetli in temni podlagi.
Namig: kadar določamo barve za spletno stran se držimo pravila 80/20 s tem, da je 80 % sekundarne barve in 20 % primarne (zaščitne). Če imate dve zaščitni barvi lahko uporabite 60/30/10 pravilo.
Razmiki med elementi
Na spletnem mestu so razmiki med elementi zelo pomembni. Z negativnim prostorom (prostor, ki je prazen) lahko ločujemo in združujemo informacije ali sekcije.
Lahko povemo uporabniku: Hej to dvoje spada skupaj; ali pa elemente približamo še bolj in z tem povemo: Hej, ta dva elementa sta direktno povezana drug z drugim.
Prostori med elementi narekujejo tudi vzdušje celotne strani. Ali je strnjena in deluje informacijsko ali pa ima velike prazne prostore in daje občutek prestiža ali kreativnosti.
Razmiki med elementi si določimo preko množenja z enako vrednoto (x0.25) ali prištevanjem enake vrednote (+4).
Dodaten material:
- material.io/design/layout/spacing-methods.html#spacing
- carbondesignsystem.com/guidelines/spacing
Velikosti slik
Slike imajo pomembno nalogo pri narekovanju vzdušja spletne strani. Njihova velikost pa pri poteku informacij.
Zato si je vredno ustvariti v naprej določene mere katerih se držimo skozi spletno stran. Tako dosežemo konsistentnost in se izognemo nevšečnim postavitvam. Predlagamo dimenzije slik 750×0 v z max velikostjo datoteke 200kb.
Dodatni material:
- material.io/design/layout/spacing-methods.html#containers-and-ratios
Gumbi
Gumbi vodijo uporabnike do pomembnih strani ali jih nagovarjajo k pomembnim dejanjeem. Zato morajo biti oblikovani na način, ki je enostaven, vpadljiv in intuitiven.
Na spletni strani morajo biti tako vidni in zgrabiti pozornost uporabnika. Dodatno jih lahko dodamo minimalistične animacije, ki res kličejo po pozornosti.
Posebnost pri gumbih so stanja. Gubom lahko določimo 4 stanja: Splošna oblika (kadar uporabni še ni interaktiral z njim), stanje lebdenja (t.i. :hover – kadar ga preidemo z miško), aktivno stanje (kadar smo na strani/sekciji do katere vodi – je stisnjen), onemogočen (kadar gumba ni mogoče stisniti).
Za vsako stanje je potrebno določiti svojo barvo tako, da bodo uporabniki vedno razumeli kje se nahajajo in kakšne so njihove možnosti.
Kontaktni obrazci
Kontaktni obrazec je glavni vir prihodka marsikateri spletni strani. Oblikovani morajo biti enostavno in pregledno, njihov slog pa ne sme ovirati uporabnosti.
Naslovi in napisi morajo biti vizualno razdeljeni z dovolj kontrasta, da bodo berljivi tako na pametni uri kot na velikem konferenčnem zaslonu. Splošne smernice za oblikovanje kontaktnih obrazcev nas vodijo skozi proces, uporabnike do nakupa.
Druge smernice oblikovanja
Kot oblikovalci spletne strani se moramo držati nekih oblikovalskih načelij kot so:
- vzdrževati dovolj dober kontrast med ozadjem in vsebinami,
- vzpovstaviti vizualno hirarhijo, ki ločuje informacije med seboj.
- z pomočjo barve voditi uporabnika na pomembne točke na strani,
- držati razmerja med sekcijami
Responzivnost – Widescreen, namizni računalnik, tablica, telefon
Ne smemo pozabiti na design za druge medije. V današnjem času se koncept mobile-first že globalno izvaja. Je pa resnica, da večina podjetij še kar začenja razvijati spletna mesta (prvo) za namizne računalnike.
Ampak brez bojazni, tudi te strani se ob koncu lahko prilagodijo zaslonom manjših naprav tako, da za povprečno stran ni toliko pomebno.
Responzivnost spletne strani pa je v današnjem času nepogrešljiva in ena izmed najbolj pomembnih lastnosti, ki jih spletna stran mora imeti. Preko dinamičnih vrednot (%, vw,vh, flexbox ipd.) se vsebina prilagaja razpoložljivemu prostoru.
Tako bomo vsebine brez težav lahko prebirali doma iz naslonjača kot jih predstavljali novemu poslovnemu partnerju na projektorskem platnu.
Ko imamo oblikovalski sistem postavljen začnemo z oblikovanjem. Kot pri UX je tudi pri UI oblikovanju prisotnega veliko raziskovanja.
Celostna podoba podjetja, priročnik blagovne znamke ali le predhodnja študija so nam smernice za oblikovanje. Preko dovršenih grafik, tekstur in barvnih kombinacij povežemo spletno stran z blagovno znamko. Z uporabnikom v mislih se oblikuje simpatičen design pripravljen za izgradnjo.
Strežnik in domena
Čas je, da vso dosedanjo delo spremenimo v realnost. Razvoja spletnega mesta se začne z zakupom domene (vašega naslova spletne strani) in prostora, kjer bo spletna stran »živela«.
Zakup je zelo preprost. Zakup lahko opravimo kar preko telefona. Izberemo si ponudnika gostovanja in se z njim dogovorimo za zakup. Po možnosti lahko najdemo tudi paket v katerem ponujajo za eno ceno domeno in gostovanje (strežniški prostor). Tudi za postavitve DNS lahko zaprosimo kar ponudnika in bodo tehnične stvari uredili oni.
Namestitev SSL
Po zakupu se prijavimo v nadzorno ploščo spletnega gostovanja. Tam poiščemo možnost SSL nastavitvami kjer naložimo brezplačni strežniški »Lets enctypt« certifikat. Tako bomo zavarovali vse povezave pod svojo domeno kot tudi e-mail predal.
Instalacija CMS WordPress
Med orodiji poiščemo spletne aplikacije. Od tam naložimo »Content managment« sistem WordPress. Izbrali bomo domeno na katero bomo naložili CMS, direktorij, uporabniško ime in geslo administratorja ter nato nadaljevali z namestitvijo sistema. Ko bo Wordpres nameščen se lahko na www.domena.si/wp-admin pijavimo na nadzorno ploščo naročnikove nove spletne strani.
Izgradnja strani na podlagi potrjenega designa
Začenja se izgradnja spletne strani. Potrjen UI design programerjem služi kot načrt po katerem bodo stran gradili. Izgradnjo začnemo z nastavljanjem osnov spletne strani kot so: nameščanje potrebnih vtičnikov (in pravilna konfiguracija teh), nastavitev pravih oblik url naslovov, nastavljanje identitete spletne strani ipd.
Naslednji korak je ostvariti vse tipske strani katere lahko posledično začnemo graditi. Ko imamo osnovno strukturo na mestu se stran programira po načrtu UI.
Implementacija GDPR
Zakon o varstvu podatkov narekuje, da noben ponudnik spletnih storitev ne sme shranjevati in deliti osebnih podatkov obiskovalcev spletnega mesta. Za to je potrebno vzpovstaviti sistem preko katerega spletno mesto obvešča o morebitnih piškotkih in mu daje možnost te zavrniti. Potrebno je tudi vzpovstaviti strani kot so varstvo podatkov in splošni pogoji.
Sistemska orodja – vtičniki
Vzporedno v prvem koraku se namestijo tudi nekateri sistemski vtičniki katere je vredno omeniti.
- Cache – predpomnilnik
Ko uporabnik prvič obišče spletno mesto se vsi podatki hranijo v začasni datoteki. Z predpomnilnikom lahko ob ponovnem obisku te podatki hitreje dostavite, kar poveča hitrost spletne strani in hkrati razbremeni strežnik. Hitrost spletne strani je v današnjem času izredno pomembna. Hitrejša je stran, boljša je uporabniška izkušnja.
Vtičniki: Wp rocket, Wp super Cache - SMTP
Pošiljajte vsa nativna sporočila preko lastnega strežnika.Vtičniki: WP Mail SMTP - Login limiter
Omejite prijave na enem IP. Preprečuje t.i. »brute force« vdore v spletno stran.Vtičniki: Limit Login Attempts Reloaded - Antivirus
Za spletna mesta z občutljivimi vsebinami namestimo anti-virusni vtičnik ki preprečuje vdore in skrbi za varnost podatkov na strani.Vtičniki: Wordfance - Spam blocker
Na spletu je veliko robotov, ki neprestano objavljajo komentarje, ponudbe in nezaželene vsebine na vse strani, ki jih lahko najdejo. Takšnim sporočilam pravimo »spam«. Te nevšečne komentarje preprečimo z anti-spam vtičnikom.
Vtičniki: Akismet Anti-Spam - Minify IMG
Slike pretvarjamo v sodobne zapise in tako pridobimo na hitrosti spletnega mesta kot zmanjšamo obremenitev strežnika.
Marketinška orodja – vtičniki
Marketing je srce vsakega posla. Zato ne smemo pozabiti na povezavo z marketinškimi orodiji kot so:
- Google analytic – spletno stran povežemo z analitiko tako, da lahko merimo uspešnost njenih strani in drugih marketinških naporov
- Pixel by Facebook – v kolikor bi želeli voditi marketing na družbenih omrežjih kot so Facebook in instagram, je nujno da vzpovstavimo Facebook-ovo kodo sledenja Pixel.
- Hotjar – za nadaljne optimizacije uporabniške izkušnje uporabnikom preko analitičnega programa Hotjar sledimo na njihovi poti in iz teh informacij iščemo priložnosti za izboljšave.
- Mailnekaj – Mailchinmp – za vsako email marketing strategijo je potrebna točka, kjer email naslove naših potencialnih strank dejansko pridobivamo
- RankMath – Yoast – Nepogrešljiva vtičnika za on-site SEO optimizacijo spletne strani. Izberite svojega favorita.
Izdelava spletne strani je skoraj že zaključena. Od objave nas loči le še nekaj korakov. Postavili smo vse strani in tudi izgled je tak kot po potrjenem UI. Namestili in konfigurirali smo vse vtičnike kot tudi povezali vse zunanje programe. Čas za zadnjo preizkušnjo pred lansiranjem naročnikove nove spletne strani.
Testiranje delovanja spletne strani in njene kakovosti pred predajo
Pred vsako objavo je nujno potrebno mesto testirati. Izvajamo dve glavni vrsti testiranja. Sistemsko testiranje kjer iščemo funkcionalne nepravilnosti kot so nedelujoče povezave in nepravilno postavljene slike. In uporabniško testiranje (t.i. User testing). Na povprečni strani tega koraka ne izvajamo. Za velike projekte, kadar so vložki izredno visoki in je uspeh od projekta odvisen le od digitalnega produkta je pa ta korak izredno pomemben. Več o tem v nadaljevanju.
Sistemsko testiranje spletnega mesta
Gre za odpravljanje funkcionalnih nepravilnosti. Cilj je odpraviti vse napake in izpopolniti končni produkt tako, da uporabniki nebodo naleteli na kakšne 404 kode, kjer povezava ne vodi nikamor.
Ali pa se bodo čudli kdo za vraga je gospod Lorem Ipsum (to je nadomestno besedilo 😊). Glavne stvari na katere smo pozorni so:
- Povezave – ali vsi gumbi in povezave vodijo na prava mesta?
- Responzivnost – ali se spletna stran prilagaja na prav vseh medijih? In ali tudi izgleda odlično na njih
- Prikaz v različnih brskalnikih – ali spletno mesto deluje pravilno na vseh brskalnikih kot so Firefox, Internet explorer, Edge, Crome ipd.?
- Kompatibilnost z operacijskimi sistemi – ali se spletno mesto pravilno prikazuje na vseh operacijskih sistemih?
- Hitrost – se spletna stran hitro nalaga? Hitrost testiramo v Google Speed test insight
Testiranje spletnega mesta z pravimi ljudmi
Kot smo že omenili uporabniško testiranje je nujno pri velikih projektih. Gre za korak kjer stran testirajo resnični ljudje (t.i. User tester) preko katerih pridobivamo globok vpogled v uporabniško izkušnjo.
Ti testerji dobijo specifična navodila od naše ekipe kjer morajo opraviti neko vrsto opravila – naročiti se na e-novice ali ugotoviti IBAN podjetja.
Pozorni smo na to, koliko časa jim vzame, da opravijo neko opravilo, ali se jim pri tem kje zatika, ali imajo težave z navigacijo ipd. Obstaja več vrst takšnih preizkusov in obstajajo tudi podjetja, ki ponujajo izključno to storitev.
A za povprečno predstavitveno spletno stran takšen korak ni ne smiseln ne profitabilen (tudi te ljudi je potrebno plačati 😊).
Zato se zanašamo na naša dolga leta izkušenj, dobrih praks in splošne standarde izdelave spletnih strni, da to ni potrebno.
Popravki in lansiranje
Ekipa podrobno pregleda spletno stran in izpiše vse najdene pomanjkljivosti. Po odpravi le teh smo pripravljeni počakati še samo datum lansiranja.
SEO optimizacija in izboljševanje
Po objavi čaka najtežje opravilo. Neprestano pridobivanje novih uporabnikov. Za stran, ki ni obiskana je tudi najbolj učinkovit sistem ali najlepše grafike ne rešijo.
Zato je potrebno posrbeti, da se bo neprestano prikazovala ljudem, ki njeno vsebino dejansko iščejo. Z SEO optimizacijo dosežemo dolgoročno uspešnost spletnega mesta. Google servira strani po uporabniški izkušnji, kvaliteti in vitalnosti strani.
Z kombinacijo dobre vsebine je naročnikova stran lahko skozi prihajajoča leta močen konkurent že obstoječim spletnim mestam.
Kot dodatno še lahko stran opazujemo in preko programov za sledenje uporabnikov (podobno kot pri »User testing« fazi) in opazujemo za morebitne popravke ali izboljšave spletne strani.
Vedno znova se lahko pokaže kakšna priložnost, da še izboljšamo uporabniško izkušnjo. Le pozorni moramo biti na male indikatorje.
