V urejevalnikih spletnih strani lahko vsebino, teme ali izdelke razvrstite v kategorije s ključnimi besedami. Te oznake so še posebej koristne za uporabnike, ki želijo dobiti hiter pregled nad podobnimi temami na spletnem mestu in enostavno krmariti med njimi. Obstajajo še številne druge oblike oznak, kot so hashtagi, meta oznake ali HTML oznake.
V neposrednem prevodu iz angleščine "tag" pomeni "oznaka" ali "etiketa". Včasih slišimo tudi izraz "značka". Če uporabljate oznake na spletnih straneh, ustvarite boljšo strukturo in učinkovito iskanje spletnih strani za uporabnike s pomočjo določenih ključnih besed. Če članke, strani z izdelki ali vodnike označite z oznakami, povezanimi s temo ali vsebino, lahko obiskovalci spletnega mesta z enim klikom ali vnosom ustreznih oznak prikažejo podobno vsebino. V skladu s tem je osrednja ali glavna prednost funkcije oznak optimizirana uporabnost spletnega mesta (prijaznost do uporabnika).
Pri ustvarjanju spletnih mest, vsebine ali spletnega trženja so na voljo še številne druge oznake. V nadaljevanju vam bomo predstavili najpomembnejše vrste le-teh:
Ko govorimo o oznakah, večina ljudi pomisli na skupke ključnih besed, ki se nanašajo na različne teme na spletnem mestu ali blogu. V blogovskem članku o kuhanju ali električnih avtomobilih bi kot tematske oznake uporabili izraze, kot sta "zajtrk" ali "e-avtomobil". Če uporabniki te ključne besede iščejo v iskalnih funkcijah spletnega mesta, se prikažejo tematsko povezani in označeni članki.
Na ta način lahko na primer v spletno mesto vključite tudi oblak oznak, s katerim lahko posebej priljubljene oznake poudarite z različnimi velikostmi pisave ali skupnim številom člankov. Tako imajo oznake pomembno vlogo pri jasnosti, prijaznosti do uporabnika in času zadrževanja obiskovalcev na spletnem mestu.
Vendar označevanje ni tako pomembno za optimizacijo za iskalnike, saj oznake za kategorizacijo predvsem optimizirajo zasnovo uporabniške izkušnje in grafični uporabniški vmesnik, vključno s funkcijo iskanja.
Družbeno označevanje se nanaša na oznake, ki jih uporabniki spletnega mesta, družbenega medija, bloga ali druge spletne vsebine nastavijo, da bi bila zanimiva ali podobna vsebina dostopna skupnosti. V nasprotju z označevanjem in indeksiranjem s strani ustvarjalcev vsebine se družbene oznake nanašajo na skupno označevanje.
Znani primeri družabnega označevanja so Instagram, Flickr in Pinterest, ki uporabnikom omogočajo, da slike s pomočjo oznak pregledno razvrščajo po temah in kategorijah. Sem spada tudi nastavljanje zaznamkov ali hashtagov. Treba je omeniti, da družbeno označevanje ne sledi nobenim fiksnim pravilom indeksiranja in da vsi uporabniki sodelujejo pri kategoriziranju vsebine in zagotavljanju njene dostopnosti.
Hashtagi ne pomenijo neposredne vsebinske ali tematske povezave med spletno stranjo ali internetno vsebino. Čeprav so hashtagi namenjeni tudi tematskemu strukturiranju vsebine ali objav v družbenih medijih, ne gre za lokalno označevanje, ki je specifično za spletno stran, temveč za označevanje med stranmi. Hashtagi se večinoma uporabljajo v družbenih medijih, npr. za trženje s hashtagi ali kot sestavni del orodij družbenih medijev. Posamezniki, podjetja ali spletne trgovine lahko ustvarijo lastne hashtage in tako dosežejo večji doseg, nagovorijo ciljne skupine ali spodbujajo kampanje.
Meta oznake so vstavljene v glavo ustrezne spletne strani in vsebujejo informacije o vsebini strani, npr. opis in ključne besede. V nasprotju z oblaki oznak v blogih, iskalnikom posredujejo pomembne informacije o spletni strani. Zato so meta oznake pomembne za optimizacijo za iskalnike in dobro uvrstitev v iskalnikih s pomočjo optimizacije za iskalnike (SEO).
Naslednje meta oznake so pomembni dejavniki razvrščanja:
HTML oznake se uporabljajo za strukturiranje dokumenta spletne strani in dajejo spletnim brskalnikom natančna navodila, kako ga prikazati. Te HTML oznake se nanašajo na osnovno strukturo strani, integrirano medijsko vsebino, različne pisave ter obrazce, povezave in poudarke.
Za ponazoritev navajamo nekaj HTML oznak:
Oznake se uporabljajo tudi v spletnem trženju in e-trgovini, in sicer v obliki nizov kode, ki se uporabljajo za analizo učinkovitosti spletnega mesta in uspešnosti trženjske strategije. Med drugim jih je mogoče uporabiti za ocenjevanje dejavnosti in vedenja obiskovalcev strani, ogledov strani in konverzij ter za izvajanje ponovnega usmerjanja.
Najpogostejše oznake v spletnem trženju so:
Ker različne oznake za spletno trženje opravljajo različne funkcije, je učinkovito upravljanje oznak v kompleksnem spletnem mestu ali arhitekturi tretjih oseb bistvenega pomena. To še posebej velja za zamenjavo ponudnika, uvedbo novih kampanj ali novih oglaševalskih ukrepov in projektov.
Prednosti oznak se razlikujejo glede na vrsto. V nadaljevanju se bomo osredotočili predvsem na prednosti, ki jih označevanje ponuja na platformah, kot je YouTube, v blogih ali pri spletnem trženju.
YouTube oznake so iskalni izrazi in ključne besede, ki jih lahko dodate svojim videoposnetkom. Imajo pomembno vlogo pri tem, da YouTube algoritem deluje za vas in izboljšuje vašo pozicijo v iskalniku. Pametno nameščene oznake povečajo možnost, da jih YouTube algoritem oceni kot pomembne in se tako uvrstijo višje. Na ta način povečate svoj doseg in ogled ter usmerite več obiskovalcev v svojo spletno trgovino ali na spletno stran podjetja. Nastavljanje oznak v YouTubu mora biti vedno ciljno usmerjeno in ne nesorazmerno, da ne bi bilo ocenjeno kot nezaželeno. Če želite dodati oznake, pojdite v YouTube Studio v razdelek "Vsebina" pod ustreznim videoposnetkom ali v razdelek "Več možnosti" za nove prenose.
Oznake v blogih so sestavljene iz določenih ključnih besed, ki se nanašajo na teme in vsebino prispevkov v blogih. Obiskovalcem olajšajo iskanje podobnih člankov o določenih temah in ključnih besedah z uporabo funkcije iskanja ali filtrov. Poleg tega lahko z oblakom oznak poudarite posebej zanimive ali priljubljene teme in tako optimizirate čas zadrževanja in promet na spletnem mestu.
Oznake v spletnem trženju ponujajo prednosti zlasti za upravljavce trgovin. Medtem ko si uporabniki ogledujejo ali kupujejo članke, podstrani ali izdelke, spletne tržne oznake beležijo dejavnosti, analizirajo vedenje ob kliku ali nakupu ter pomagajo optimizirati tržne kampanje in oglaševalske ukrepe. S tem ne boste le povečali števila konverzij, temveč tudi izostrili svojo poslovno strategijo.
Oblikovanje in postavitev sta še vedno pomembna dejavnika uspeha pri spletnem poslovanju. Oblikovanje ne določa samo identitete podjetja, temveč zagotavlja tudi osrednjo vrednost prepoznavnosti. To pa je pomemben dejavnik pri komunikaciji s strankami - tako v e-trgovini kot pri ponudnikih storitev.
Predvsem mora biti spletna stran oblikovana profesionalno in privlačno. Ker je spletno mesto vodilno mesto podjetja, je prvo, kamor se potencialna stranka obrne, ko išče informacije in ponudbe. Glede na panogo so primerne bolj ali manj inovativne oblikovalske rešitve. Če vam običajna zasnova spletne strani ne zadostuje, vam bo morda všeč enostranska spletna stran oz. one page spletna stran. Kot alternativa standardnim spletnim rešitvam ponuja številne prednosti.
Spletne strani so praviloma strukturirane podobno kot klasični tiskani mediji. Pri iskanju informacij in vsebine uporabnik preskakuje s strani na stran - tako kot prelista revijo v tiskani obliki, se prek spleta premika po navigaciji.
One page spletne strani, imenovane tudi enostranske spletne strani, prekinjajo to navado "skakanja s strani na stran" in prinašajo drugačno strukturo, kjer je obiskovalec omejen na eno stran. Vse pomembne informacije, ki se običajno nahajajo na različnih podstraneh, so na eni sami strani. Uporabniki lahko brez dodatnih klikov vidijo vso pomembno vsebino; preprosta navigacija jih intuitivno vodi skozi koncept ene strani.
Dober primer one page oz. enostranske strani:
Obišči: www.upstatelaundromat.com
Spletno mesto z enostransko zasnovo je sestavljeno iz enega samega HTML dokumenta. Vsebina se dinamično ponovno naloži. Klasično spletno mesto ima običajno več HTML dokumentov, ki so med seboj povezani. Ker je običajna navigacija po podstraneh opuščena, so za enostranske strani potrebni posebni koncepti navigacije, ki uporabniku omogočajo intuitivno upravljanje.
V večini enostranskih strani je navigacijska vrstica fiksna. Navigacija vedno ostane vidna na vrhu zaslona, uporabnik pa lahko kadar koli preskoči na drug element na strani.
Z oznakami za preskok ali drugimi pozivi k akciji (Call-to-action) lahko uporabnik preskoči na različna mesta na strani.
Zaradi tako imenovanega učinka gladkega pomikanja se premikanje med različnimi elementi ali vrnitev na vrh strani ne zdi nenadno.
Interaktivne infografike in animacije so pogosto v središču enostranske strani.
V kombinaciji z oblikovanjem enostranske strani se pogosto uporablja plosko oblikovanje, pri katerem se spletni oblikovalci namerno izogibajo sencam, gradientom, tridimenzionalnim elementom in realističnim teksturam na splošno. Plosko oblikovanje naj bi okrepilo okrnjen, minimalističen značaj enostranske postavitve s poudarkom na nekaj vsebinah v njihovi preprostosti in strukturi. Poleg tega manjša zasnova omogoča krajši čas nalaganja in boljšo zmogljivost spletnega mesta.
Dober primer plosko oblikovane spletne strani:
Obišči: skyward.digital
Enostavna enostranska struktura ima veliko prednosti, vendar ni primerna za vse vrste spletnih mest. Za koga pa je namenjen ta trend spletnega oblikovanja?
Prvi pomemben dejavnik je vsebina. Če želite predstaviti veliko informacij, morda celo v različnih kategorijah, je enostransks spletna stran precej neprimerna. Pri tem je priporočljivo ustvariti jasno strukturo in navigacijo s podkategorijami oz. podstranmi, da uporabniku zagotovite informacije na jasen način. Novičarski portal, na primer, bi bilo težko izvesti z enostransko spletno stranjo. Običajne večstranske rešitve so zaradi obilice informacij in kategorij bolj smiselne.
Poleg količine informacij je pomemben dejavnik tudi namen, s katerim so bile posredovane. Enostranske oz. one page strani so primerne predvsem, če imate v mislih prodajo. S korporativnim spletnim mestom z enostransko zasnovo imate idealno priložnost, da obiskovalcem jasno in jedrnato sporočite svoje ključne prednosti. Če so informacije predstavljene v razumnem vrstnem redu, potencialni stranki ni treba iskati posameznih informacij na različnih podstraneh, temveč ima vse pomembne informacije na dlani.
V nekaterih primerih pa so primernejše klasične večstranske spletne strani z navigacijsko vrstico in različnimi podstrani. To so predvsem trgovine z raznoliko ponudbo izdelkov ter strani z daljšimi besedili in močnim poudarkom na vsebini (novice).
Najbolje je, če obiskovalca vodimo v eno smer - neposredno do konverzije. Zato imajo enostranske strani skoraj vedno na koncu strani CTA (Call-to-Action), ki uporabnika poziva k nakupu, registraciji, naročilu, sodelovanju in podobno. Da bi uporabnika vodili v želeno smer, morajo biti tudi vsebine ustrezno pripravljene in medsebojno povezane.
Če želite prepričati uporabnika, mu morate povedati zgodbo. Oblikovanje na eni strani je odlična priložnost za predstavitev zgodbe o izdelku, aplikaciji ali kampanji. Preplet besedila in večpredstavnostne vsebine ustvarja posebno uporabniško izkušnjo, pri kateri se tok branja ne prekine.
Eenostranska spletna stran ima veliko prednosti, če se uporablja v pravem kontekstu ter s pravo vsebino in strategijami. Če se osredotočite na bistvene elemente, je spletna stran običajno preprosto in jasno oblikovana, upravljanje pa je za uporabnika enostavno in intuitivno.
Stroga in pripovedna razporeditev vsebine omogoča pripovedovanje skladne zgodbe. Z logičnim, zaporednim vrstnim redom vsebine so ponudbe in izdelki predstavljeni na razumljiv način. Prednosti in prodajni argumenti so še bolj jasni in vodijo uporabnika neposredno do konverzije. Oblikovanje one page strani je še posebej primerno za preproste spletne strani, povezane s projekti ali dogodki, saj so lahko vse pomembne informacije jasno vidne na eni strani.
Vendar ima enostranska spletna stran tudi slabosti. Kot je pojasnjeno zgoraj, to pomeni, da se krši običajna rutina navigacije. Vsak uporabnik se ne znajde takoj, kar lahko privede do nezadovoljive uporabniške izkušnje.
Pri optimizaciji za iskalnike (SEO) velja pravilo "vsebina je kralj" (content is king). Pri oblikovanju one page strani je vsebina namenoma omejena na bistvene elemente, vendar je celovito strategijo vsebine in ključnih besed težko izvajati, če je besedilo samo na eni strani. Optimizacija je običajno omejena na eno glavno ključno besedo in stranske ključne besede, pomembne za podjetje.
Glede na obseg, velikost in število slik ali večpredstavnostnih elementov se zaradi enostranske izvedbe pogosto podaljša čas nalaganja - zgoraj omenjeno plosko oblikovanje je poskus, da bi to preprečili.
Odzivno spletno oblikovanje, ali kot mu radi rečemo kar odzivni dizajn, opisuje pristop k razvoju spletnega mesta, ki je optimalno prikazano na različnih končnih napravah. Izraz odzivni dizajn je star le toliko kot mobilni splet in je postal splošno znan okoli leta 2013.
Pred pojavom mobilnega spleta je bila izbira naprav, ki omogočajo internet, zelo homogena: obstajali so namizni ali prenosni računalniki, ki so si bili precej podobni glede vhodnih in izhodnih medijev. Obe vrsti naprav sta imeli tipkovnico in miško ali sledilno ploščico ter zaslon s širino približno 1.000 do 2.000 slikovnih pik.
Za razvoj spletne strani, ki bi se pravilno prikazovalo na večini uporabljenih naprav, v tistem času ni bilo treba vložiti pretiranega truda. Najpreprostejša rešitev je bila omejitev širine strani na najmanjši skupni imenovalec. Priljubljen pristop je bil prikazovanje strani v širini 800 slikovnih pik in sredinsko ali levo poravnano. Na večjem zaslonu je morda nekoliko več belega prostora, vendar so bile strani dobro berljive na vseh napravah.
S pojavom mobilnih naprav se je položaj spremenil in prišlo je do velike raznovrstnosti naprav. Zasloni mobilnih in tabličnih računalnikov se razlikujejo v več pogledih: Po eni strani so pomembne dimenzije slikovnih pik, po drugi strani pa je s pojavom retina zaslonov v ospredju tudi fizična ločljivost. Poleg tega teh naprav ne upravljamo z miško, temveč s prstom. Danes se temu pridružujejo še veliki monitorji visoke ločljivosti, tako da mora sodobno spletno mesto delovati na zaslonih širine od 320 do več kot 4.000 slikovnih pik.
Odzivna spletna stran se prilagodi razpoložljivemu prostoru na zaslonu. To se imenuje tudi "zaslonska površina". Spletno mesto mora biti pregledno na vseh napravah in hkrati zagotavljati optimalno uporabniško izkušnjo (UX).
Razvoj odzivne spletne strani ima več prednosti. Poudarek je na uporabniški izkušnji. Načeloma lahko dobro uporabniško izkušnjo zagotovite tudi brez odzivnega oblikovanja. Vendar pa je za to potrebna ločena mobilna spletna stran ali uporaba JavaScripta. Na splošno je to veliko bolj zapleteno in zahteva več truda pri vzdrževanju večih različic spletišča, kot pristop odzivnega spletnega oblikovanja, ki temelji na CSS-u.
Oblika spletne strani je eden od odločilnih dejavnikov, ki vplivajo na to, kako obiskovalec dojema predstavljene informacije. Dobra zasnova odraža identiteto organizacije, ki stoji za spletno stranjo, in pomaga obiskovalcu, da se poveže z blagovno znamko. Obiskovalec se mora na spletni strani počutiti udobno in imeti pozitivno izkušnjo. Oglejmo si dva primera, kako odzivno spletno oblikovanje prispeva k optimalni uporabniški izkušnji:
Neodzivna spletna stran se na majhnem zaslonu mobilne naprave prikaže na enak način kot na namiznem računalniku, le da je veliko manjša. To uporabnika prisili, da poveča posamezne dele strani. Zato je bolje ponuditi optimizirano različico. Nekaj primerov:
Danes velik delež uporabnikov do spletnih vsebin dostopa prek mobilnih naprav. Če spletna stran ni zgrajena popolnoma odzivno, ima to lahko neprijetne posledice. Med njimi zlasti:
Odzivni dizajn vključuje različne pristope in tehnologije. Običajno obstaja več rešitev za različne scenarije. Razvoj se še vedno spreminja.
Izvajanje zapletenih postavitev na spletnih straneh je že od začetka svetovnega spleta znanost sama po sebi. HTML ima različne vrste elementov, ki se različno obnašajo glede postavitve. Obstajajo vrste elementov kot so block, inline in inline-block. Blokovni elementi zavzamejo celotno razpoložljivo širino in se postavijo v vrsto. Vmesni elementi zavzamejo le tisto širino, ki jo dejansko zahteva njihova vsebina, in se postavijo drug poleg drugega
Če želite izvesti postavitev, morate elemente blokov običajno postaviti enega poleg drugega. Za to se uporabljajo različne metode. Pred pojavom CSS so bile standardne postavitve, ki so temeljile na tabelah, s CSS pa so bile dodane postavitve, ki so temeljile na plavajočih postavitvah. Modul CSS Flexbox se danes uporablja za preproste postavitve, ki temeljijo na vrsticah ali stolpcih, modul CSS Grid pa se uporablja za kompleksne postavitve. V vseh primerih se za spreminjanje števila elementov, ki so prikazani drug ob drugem, uporabljajo relativne dimenzije CSS.
Za optimalno uporabniško izkušnjo je treba velikost pisave besedilnih elementov na spletni strani prilagoditi razpoložljivemu prostoru na zaslonu. Pri odzivnem spletnem oblikovanju se za to uporabljajo različne tehnike pisav.
Kot osnovno merilo se uporablja CSS enota rem ("korenski (root) element"), ki veže velikost pisave elementa sorazmerno s korenskim elementom. Potem je dovolj, da velikost pisave v korenskem elementu prilagodite s CSS prelomnimi točkami in tako dosledno skalirate vse pisave.
Drug pogost pristop je uporaba enot CSS vh in vw za tekoče prilagajanje velikosti pisave višini ali širini zaslona. Ta pristop načeloma ne zahteva prelomnih točk, vendar se lahko pisava na majhnih zaslonih prikaže majhna. V tem primeru se selektivno uporabljajo točke preloma ali pa se za določitev najmanjše velikosti uporabi funkcija CSS-calc().
Za optimizacijo celozaslonskih naslovov na napravah z majhnimi zasloni se uporablja pristop brez uporabe CSS. Naslovi morajo pritegniti pozornost obiskovalca. Uporabnik tako lažje in hitreje razume vsebino strani. Vendar so lahko besede zelo dolge, kar lahko povzroči težave s prikazom. Pri tem sta v pomoč HTML enoti "Non-breaking space" ( ) in "Soft hyphen" (­). Z njimi lahko natančno določite, kje se lahko ločijo besede v naslovu.
Poleg postavitve in tipografije je v ospredju odzivnega oblikovanja tudi optimiziran prikaz slik. Očitno je nesmiselno, da bi v mobilni telefon s 400 pik širokim zaslonom naložili sliko z robom dolžine 1.920 pik. Po eni strani je treba sliko, ki je veliko prevelika, nato v brskalniku pomanjšati, kar zahteva relativno veliko računalniške moči. Drugič, velikost slike se kvadratno povečuje z velikostjo najdaljše stranice.
Slika z 1920x1080 slikovnih pik bo potrebovala približno štirikrat več prostora za shranjevanje kot slika z 960x540 slikovnih pik. Tudi prenos take slike v mobilno napravo bo trajal ustrezno dlje. Če slike niso odzivno optimizirane, ima to skupaj izrazito negativen učinek na zmogljivost in uporabnost spletnega mesta.
Z uvedbo standarda HTML5 sta bila uvedena dva nova atributa. Atributa srcset in sizes se uporabljata za določitev več grafičnih datotek za sliko; te se imenujejo tudi "sredstva". Vsaka posamezna datoteka je povezana s poizvedbo medijske funkcije CSS. Tako lahko brskalnik s seznama razpoložljivih sredstev naloži tisto, ki je optimalno za zadevno napravo.
Navigacija je običajno prikazana v glavi strani. Pogosto je to vodoraven seznam menijskih elementov s podmeniji, ki se prikažejo, ko se z miškinim kazalcem pomaknete nanje. Tega ni mogoče izvesti v mobilnih napravah. Prvič, na majhnih zaslonih ni dovolj prostora za meni, drugič, ni kazalca miške.
Obstajajo različni pristopi za prikazovanje navigacijskih menijev v mobilnih napravah. Vsi ti načini varčujejo s prostorom in ne zahtevajo kazalca miške. Aktiviranje navigacije pogosto spremlja animacija, ki pritegne uporabnikovo pozornost. Najpogostejši pristopi k odzivni navigaciji so:
