Pred izdelavo spletišča pripravimo vsebino, datoteke in vire, ki jih bomo vključili na spletne strani. Dobro pripravljena vsebina je jasna, pregledna, točna, smiselno razporejena in prilagojena uporabniku. Pri sodobnem spletišču ne pripravimo samo besedila, temveč tudi logotip, ikono spletišča, slike, ikone, povezave in druga gradiva.
Pri pripravi vsebine spletišča upoštevamo predvsem:
- namen spletišča in potrebe uporabnikov,
- jasno razdelitev vsebine po posameznih straneh,
- pregledno poimenovanje datotek in map,
- uporabo kakovostnih in optimiziranih slik,
- smiselno uporabo ikon in zunanjih povezav,
- dostopnost vsebine za različne uporabnike,
- pravilno navajanje virov in spoštovanje avtorskih pravic.
Pomni: Vsebina je temelj spletišča. Oblika in tehnična izvedba sta učinkoviti šele takrat, ko podpirata jasno, koristno in dobro organizirano vsebino.
Osnovna pravila priprave vsebine
Vsebino pripravimo pred izdelavo posameznih HTML strani. Tako lažje določimo, katere strani potrebujemo, kako bo urejena navigacija in katere datoteke moramo vključiti v projekt. Pri tem je pomembno, da vsebina ni naključna, ampak povezana z namenom spletišča.
| Področje | Priporočilo |
|---|---|
| Besedilo | Besedilo naj bo razumljivo, slovnično pravilno, pregledno razdeljeno in prilagojeno uporabniku. |
| Slike | Slike naj bodo vsebinsko ustrezne, dovolj kakovostne, optimizirane in opremljene z opisnim besedilom, kadar je to potrebno. |
| Datoteke | Datoteke naj bodo smiselno poimenovane in shranjene v ustreznih mapah. |
| Ikone | Ikone naj podpirajo razumevanje vsebine in naj ne nadomeščajo pomembnega besedila. |
| Povezave | Povezave naj bodo delujoče, vsebinsko ustrezne in zapisane z razumljivim sidrnim besedilom. |
Pozor: Vsebina, ki je slabo pripravljena, lahko poslabša uporabniško izkušnjo tudi na tehnično dobro izdelani strani. Nepregledna besedila, prevelike slike, nedelujoče povezave in nejasni napisi zmanjšajo uporabnost spletišča.
Logotip in ikona spletišča
Logotip je pomemben element prepoznavnosti spletišča. Običajno se prikazuje v glavi strani, navigaciji ali nogi. Ikona spletišča oziroma favicon pa se prikazuje v zavihku brskalnika, med zaznamki in v nekaterih seznamih bližnjic.
Logotip naj bo preprost, čitljiv in primeren za različne velikosti prikaza. Ikona spletišča mora biti dovolj jasna tudi v zelo majhni velikosti.
V vzorčnem Bootstrap spletišču uporabimo logotip logo.png in ikono favicon.ico. Obe datoteki sta shranjeni v mapi slike oziroma v podmapi, kjer jih stran uporablja.
Logotip se prikazuje v zgornji navigaciji, ikona pa v zavihku brskalnika.
Logotip spletišča: 
Ikona spletišča (favicon.ico): 
Pomni: Logotip in favicon naj bosta pripravljena pred izdelavo strani, saj sta del identitete spletišča in se pogosto uporabljata na več mestih.
Besedila
Besedilo uporabniku posreduje glavne informacije. Zato mora biti razumljivo, vsebinsko pravilno in pregledno razdeljeno. Pri pripravi besedila najprej določimo, katere informacije so najpomembnejše, nato pa jih razporedimo v naslove, odstavke, sezname, kartice in druge vsebinske sklope.
Za spletno stran niso primerna predolga in nepregledna besedila brez naslovov. Uporabnik pogosto najprej pregleda naslove, poudarke in sezname, šele nato prebere podrobnosti.
Za vzorčno spletišče pripravimo besedilo za naslednje strani:
index.html– uvod v Bootstrap 5, opis tehnologij, predstavitev Sass/Less in izjave uporabnikov,bootstrap.html– pregled ogrodja Bootstrap,vodici.html– seznam vodičev in uporabnih povezav,kontakt.html– kontaktni podatki in obrazec,blog.html– kratke vsebinske objave,- dokumentacijske strani –
zacetek.html,postavitev.html,vsebina.htmlinkomponente.html.
Besedilo lahko najprej pripravimo v ločenih tekstovnih datotekah in ga nato prenesemo v posamezne HTML strani. Tako ga lažje pregledamo, popravimo in dopolnimo.
Primerjava besedil na spletni strani
| Vrsta besedila | Namen | Priporočilo |
|---|---|---|
| Naslov | Predstavi glavno temo strani ali razdelka. | Naj bo kratek, jasen in vsebinsko natančen. |
| Uvodni odstavek | Pojasni namen strani in uporabnika uvede v vsebino. | Naj pove bistvo in ne vsebuje nepotrebnih podrobnosti. |
| Opis kartice | Kratko predstavi posamezno vsebino, storitev ali povezavo. | Naj bo jedrnat in povezan z dejanjem uporabnika. |
| Besedilo gumba | Uporabniku pove, kaj se bo zgodilo ob kliku. | Naj bo jasno, na primer Preberi več, Pošlji sporočilo ali Odpri vodič. |
Pozor: Za končno različico spletišča ni priporočljivo uporabljati nadomestnega besedila, kot je Lorem ipsum. Pravo besedilo omogoča boljše načrtovanje postavitve in bolj realistično preverjanje uporabnosti strani.
Slike
Slike morajo biti vsebinsko primerne, dovolj kakovostne in optimizirane za splet. Pred uporabo jih pregledno poimenujemo ter razporedimo po mapah glede na stran ali vsebinski sklop. Imena datotek naj bodo kratka, razumljiva in brez presledkov ter posebnih znakov.
Pri slikah moramo upoštevati tudi velikost datotek. Prevelike slike lahko upočasnijo nalaganje strani, zato jih pred uporabo prilagodimo primerni velikosti in shranimo v ustreznem formatu.
Slike vzorčnega Bootstrap spletišča so razporejene v mapi slike in v podmapah:
blog,bootstrap,dokumentacija,index,vodici.
Na domači strani uporabimo slike za vrtiljak, tehnološke ikone, slike Sass in Less ter slike oseb v razdelku z mnenji uporabnikov. V dokumentaciji in vodičih pa uporabimo dodatne ilustracije in zaslonske prikaze.
Primer organizacije slik v mapah
Izbira oblike slikovne datoteke
| Oblika | Primer uporabe | Značilnost |
|---|---|---|
JPG |
Fotografije in slike z veliko barvnimi prehodi. | Dobro razmerje med kakovostjo in velikostjo datoteke. |
PNG |
Logotipi, slike s prosojnostjo in grafični elementi. | Podpira prosojnost, datoteke pa so lahko večje. |
SVG |
Ikone, logotipi in enostavne vektorske ilustracije. | Dobro se prilagaja različnim velikostim zaslona. |
WebP |
Sodobne spletne slike, kadar je podpora brskalnikov ustrezna. | Omogoča dobro stiskanje in manjše datoteke. |
Pomni: Slike naj bodo velike toliko, kot je potrebno za kakovosten prikaz. Slika, ki je na strani prikazana majhno, ne potrebuje zelo velike izvorne datoteke.
Ikone
Ikone uporabimo za vizualno podporo navigaciji, gumbom, opozorilom in povezavam do družbenih omrežij. Pomembno je, da so uporabljene zmerno in smiselno. Ikona mora uporabniku pomagati razumeti pomen elementa, ne pa ustvarjati dodatne zmede.
V vzorčnem spletišču uporabimo knjižnico Font Awesome.
Na strani vključimo slogovno datoteko za ikone Font Awesome:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">Primer ikon v nogi spletnih strani:
| Koda ikone | Primer |
|
|
|
|
|
|
|
Ikone lahko uporabimo tudi v vsebini strani, vendar zmerno in smiselno.
Pozor: Ikona sama po sebi ni vedno dovolj razumljiva. Pri pomembnih povezavah, gumbih in opozorilih naj bo dodano tudi besedilo ali ustrezno pojasnilo.
Povezave na zunanje spletne strani
Zunanje povezave vključimo takrat, ko uporabniku ponudijo dodatno koristno gradivo, uradno dokumentacijo, video vodiče ali druge preverjene vire. Pomembno je, da so povezave delujoče, vsebinsko primerne in zapisane z razumljivim besedilom.
Sidrno besedilo povezave naj opiše cilj povezave. Namesto nejasnih zapisov, kot je klikni tukaj, je bolje uporabiti opisno besedilo, na primer uradna dokumentacija Bootstrap.
Na strani Vodiči v datoteki vodici.html pripravimo zbirko uporabnih video vodičev in drugih zunanjih virov. Vsaka povezava naj ima jasen naslov, kratek opis in po potrebi sliko predogleda.
Pri zunanji povezavi je dobro uporabiti razumljivo sidrno besedilo, da uporabnik takoj ve, kam vodi klik.
Dostopnost vsebine
Dostopnost vsebine pomeni, da so informacije razumljive in dosegljive čim širšemu krogu uporabnikov. Pri pripravi vsebine pazimo na jasne naslove, dobro razdeljene odstavke, opisne povezave in smiselna nadomestna besedila pri slikah.
Pri slikah uporabimo atribut alt, kadar slika prenaša vsebinski pomen:
<img src="slike/logo.png" alt="Logotip spletišča eNSA Bootstrap">Če je slika samo okrasna in ne nosi pomembne informacije, je lahko nadomestno besedilo prazno:
<img src="slike/okras.png" alt="">Pomni: Nadomestno besedilo naj opiše pomen slike v danem kontekstu. Ni nujno, da opisuje vse podrobnosti slike, ampak naj pove tisto, kar je za uporabnika pomembno.
Priporočila za pripravo vsebine
- Pred izdelavo strani pripravi seznam vseh potrebnih besedil, slik, ikon in povezav.
- Besedila razdeli na naslove, odstavke, sezname in krajše vsebinske sklope.
- Datoteke poimenuj jasno, kratko in brez presledkov.
- Slike pred uporabo prilagodi ustrezni velikosti in jih optimiziraj za splet.
- Pri pomembnih slikah uporabi smiselno nadomestno besedilo.
- Ikone uporabljaj zmerno in jih po potrebi dopolni z besedilom.
- Zunanje povezave redno preverjaj in uporabljaj opisno sidrno besedilo.
- Pri uporabi tujih slik, ikon in besedil preveri dovoljenja za uporabo.
Pogoste napake
- Vsebina ni pripravljena pred začetkom izdelave strani, zato nastajajo nejasne in nepovezane podstrani.
- Besedilo je predolgo, nepregledno ali brez jasnih naslovov.
- Na končni strani ostane nadomestno besedilo, ki ni namenjeno objavi.
- Slike so prevelike in upočasnijo nalaganje strani.
- Datoteke so poimenovane nejasno, s presledki ali posebnimi znaki.
- Ikone se uporabljajo brez pojasnila, zato njihov pomen ni dovolj jasen.
- Povezave vodijo na nepreverjene, zastarele ali nedelujoče spletne strani.
- Slike, ikone ali besedila so uporabljeni brez preverjanja avtorskih pravic in pogojev uporabe.