Sivupohjat
Tältä sivulta löydät esimerkkejä ja malleja erilaisten sivupohjien suunnitteluun.
Tältä sivulta löydät esimerkkejä ja malleja erilaisten sivupohjien suunnitteluun.
Sivupohjalla tarkoitetaan sivun perusrakennetta, joka toistuu samanlaisena kaikissa palvelun näkymissä. Sivun peruselementtien (esimerkiksi ylä- ja alatunnisteen) sijainti ja asettelu toteutuu siten samalla tavalla käyttöliittymän eri osissa.
Sivupohja rakentuu navigaation ehdoilla, sillä navigaatioon käytettävät elementit toistuvat palvelun kaikissa osuuksissa.
Tästä osiosta löytyvät mallisivupohjat ovat tarkoitettu palvelun suunnittelun tueksi. Pohjat toimivat suuntaa antavina esimerkkeinä, joita voi soveltaa myös sellaisenaan sivuston rakenteen suunnittelussa ja toteutuksessa.
Kaikista sivupohjista löytyy yksinkertaistettu esimerkkitoteutus. Sivupohjat eivät sisällä toiminnallista navigaatiota tai muita toiminnallisuuksia.
KDS ylläpitää myös toiminnallista esimerkkisovellusta, jonka lähdekoodia voi hyödyntää esimerkiksi navigaation tai sivurakenteen toteuttamiseen.Sivupohja ilman navigaatiota sisältää yksinkertaisimmillaan ylä- ja alatunnisteen (MainBar ja Footer). Tämä sivupohja soveltuu parhaiten yksittäisiksi kokonaisuuksiksi tarkoitettuihin näkymiin kuten laskureihin tai virhesivuille.
Sivupohja, jossa päänavigaationa MainBar soveltuu parhaiten yksinkertaisiin sivustoihin joissa navigaation voi asettaa ylätunnisteeseen. Tätä sivupohjaa voi käyttää muun muassa etusivun rakentamiseen.
Näyttökoon leventyessä yli isoimman breakpointin, sisällön tulee keskittyä, myös MainBarin ja Footerin sisältö toimivat samalla periaatteella. Näin voidaan varmistaa, että sisältö pysyy järkevissä mittasuhteissa myös erityisen leveillä näytöillä.
Palvelun logo tulee asettaa ylätunnisteen vasempaan yläkulmaan. Huomaathan, että pienellä näyttökoolla tämä rajoittaa näytettävien navigaatiolinkkien määrää ylätunnisteessa.
Sivunavigaatioon perustuva sivupohja on suunniteltu erityisesti asiakaskäytössä oleviin palveluihin (OmaKela, OmaKanta).
Tämä sivupohja eroaa rakenteeltaan sivupohjista joissa päänavigationa on MainBar tai TabNav. Sivupalkki on sivurakenteessa ylimpänä ja toimii aina pääasiallisena navigaationa. Sivupohja eroaa myös siten, että leveillä näytöillä sisältöä ei keskitetä, vaan sivupalkki pysyy vasemmassa reunassa. Skaalautuessaan tyhjää tilaa lisätään sivun oikeaan reunaan.
Vasemmalle keskitetty sivupalkki mahdollistaa enemmän tilaa puurakenteeseen perustuvalle linkkirakenteelle. Huomaathan, että mobiilikoossa sivupalkki tulee avata MainBarin kautta hampurilaisvalikosta ja puurakenne pitää pystyä toisintamaan myös pienellä ruudulla.
Kun palvelu vaatii monimutkaisemman sisältörakenteen, Sivupohja, jossa päänavigaationa TabNav on sopiva ratkaisu. Tässä sivupohjassa on kaksi mahdollista navigaatiokokonaisuutta:
Jos palvelussa käytetään molempia navigaatiomalleja, Sidebar on aina alisteinen TabNav:lle. Jos käyttäjä siirtyy eri osioon, Sidebarissa tulee näyttää vain kyseisen osion linkit.
Tätä sivupohjaa voi käyttää myös toimivasti ilman sivupalkkia, jos osuuksia on monta. Jos osuuksia on vain vähän, päänavigaatio kannattaa siirtää TabNav MainBariin.
Seuraavat palveluesimerkit havainnollistavat käytännön toteutuksia. Kuvissa on korostettuna päänavigaatioelementti.