Suunnittele selkeät sivupohjat

Verk­ko­si­vus­ton saa­vu­tet­ta­vuu­den ja ylei­sen käy­tet­tä­vyy­den kan­nal­ta on tär­ke­ää, että si­vu­poh­jat ovat sel­kei­tä. Si­vu­poh­jien on ol­ta­va yh­den­mu­kai­sia kai­kis­sa pal­ve­lun eri osis­sa.

Var­mis­ta, että si­vun osat (ks. kuva 1) erot­tu­vat toi­sis­taan sel­keäs­ti ja että eri osat ovat tun­nis­tet­ta­vis­sa.

Eri­tyi­sen tär­ke­ää on, että si­vul­la ole­va olen­nai­nen si­säl­tö erot­tuu sel­väs­ti muus­ta si­säl­lös­tä. Tär­keim­mät asiat tu­li­si esit­tää si­vun alus­sa, jot­ta ne erot­tu­vat il­man si­vun pys­ty­suun­tais­ta vie­rit­tä­mis­tä.

Si­vun osat: pää­si­säl­tö, pää­ot­sik­ko, ingres­si, lei­pä­teks­ti

Var­mis­ta, että si­vun olen­nai­sin osa eli pää­si­säl­tö erot­tuu sel­väs­ti ja sel­keäs­ti si­vun muus­ta si­säl­lös­tä ja muis­ta osiois­ta. Si­vul­la pi­tää erot­tua sel­keäs­ti, mis­tä pää­si­säl­tö al­kaa ja mi­hin se päät­tyy.

Pää­si­säl­lön tu­lee erot­tua sekä vi­su­aa­li­ses­ti että oh­jel­mal­li­ses­ti. Kun kaik­ki pää­si­säl­töön kuu­lu­va si­säl­tö kir­joi­te­taan HTML-koo­din <main>…</​​main> -ele­ment­tien vä­lis­sä ole­vaan osioon, se on tun­nis­tet­ta­vis­sa myös oh­jel­mal­li­ses­ti.

Si­vun pää­si­säl­lön eri osat on esi­tet­tä­vä sel­keäl­lä ja ym­mär­ret­tä­väl­lä ta­val­la. Pää­si­säl­lön pää­ot­si­kon, ingres­sin ja vä­liot­si­koi­den tu­lee erot­tua sel­väs­ti pää­si­säl­lön lei­pä­teks­tis­tä.

Na­vi­gaa­tio­lin­kit: pää­na­vi­gaa­tio, ala­na­vi­gaa­tio

Si­vul­la ole­vat na­vi­gaa­tio­lin­kit tu­lee erot­taa sel­väs­ti muus­ta si­säl­lös­tä. Käyt­tä­jäl­le tu­lee esit­tää sekä vi­su­aa­li­sin että oh­jel­mal­li­sin kei­noin, mikä koh­ta si­vus­ta on pää­na­vi­gaa­tio­ta ja mikä koh­ta on mah­dol­lis­ta ala­na­vi­gaa­tio­ta.

Oh­jel­mal­li­ses­ti tämä voi­daan to­teut­taa aset­ta­mal­la na­vi­gaa­tio­lin­kit <nav>…</​​nav> -ele­ment­tien si­sään.

Ha­ku­toi­min­to

Jos verk­ko­si­vus­tol­la on yli 20 ala­si­vua, si­vuil­le on syy­tä li­sä­tä ha­ku­toi­min­to. Ha­ku­toi­min­to kan­nat­taa si­joit­taa sel­lai­seen paik­kaan, jos­ta se on help­po löy­tää ja jos­sa se ei häi­rit­se si­vun muu­ta toi­min­taa.

Ala­vii­te (foo­ter)

Jos si­vul­la on käy­tös­sä ala­vii­te (foo­ter) (ks. kuva 1), sen tu­lee erot­tua sel­väs­ti si­vun muus­ta si­säl­lös­tä.

Usein ala­viit­tees­sä on tie­toa koko si­vus­tos­ta eikä yk­sit­täi­sis­tä ala­si­vuis­ta. Tä­män­kin ta­kia on tär­ke­ää, että käyt­tä­jä ei se­koi­ta ala­vii­tet­tä itse pää­si­säl­töön.

Pää­si­säl­töön kuu­lu­va yli­mää­räi­nen si­säl­tö

Joil­lain verk­ko­si­vuil­la saat­taa olla pää­si­säl­lön oi­keal­la puo­lel­la si­säl­töä, joka liit­tyy pää­si­säl­töön, mut­ta on ym­mär­ret­tä­vis­sä myös it­se­näi­se­nä ko­ko­nai­suu­te­na – esi­mer­kik­si pää­si­säl­lön ai­hee­seen liit­ty­viä yh­teys­tie­to­ja.

Ku­vas­sa 1 on esi­tet­ty esi­merk­ki­si­vun ra­ken­net­ta ja si­vun eri osioi­ta. Ku­vas­sa nä­kyy, kuin­ka esi­merk­ki­si­vun kaik­ki osiot on ero­tet­tu toi­sis­taan sel­väs­ti. Kuvassa on esitetty graafisesti esimerkkisivun rakennetta ja sivun eri osioita.