Siirry sisältöön

14.5.0

Sivupohjat

Tältä sivulta löydät esimerkkejä ja malleja erilaisten sivupohjien suunnitteluun.

Yleistä

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.

  • Verkkopalveluiden sivupohjat koostuvat vakiintuneista elementeistä kuten ylä- ja alatunniste (MainBar, Footer). Sivuston rakenteeseen vaikuttaa pitkälti sen sisältö sekä kohdeyleisö.
  • Sivun rakennetta määrittäessä on tärkeää huomioida responsiivisuus. KDS tarjoaa tätä varten breakpointit sekä näytön kokoon mukautuvia komponentteja.
  • Tärkein sisältö kannattaa siksi sijoittaa lukusuunnassa ensimmäiseen paikkaan, yleensä vasempaan yläkulmaan.

Sivupohjien mallit

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

Sivupohja ilman navigaatiota.

Esimerkkitoteutus

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

Sivupohja MainBar navigaatiolla.

Esimerkkitoteutus

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.

Sivupohja, jossa päänavigaationa SideBar

Sivupohja SideBar navigaatiolla.

Esimerkkitoteutus

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.

Sivupohja, jossa päänavigaationa TabNav

Sivupohja TabNav navigaatiolla.

Esimerkkitoteutus

Kun palvelu vaatii monimutkaisemman sisältörakenteen, Sivupohja, jossa päänavigaationa TabNav on sopiva ratkaisu. Tässä sivupohjassa on kaksi mahdollista navigaatiokokonaisuutta:

  1. Välilehdet (TabNav) joka määrittää sivuston osion
  2. Sivupalkki (Sidebar), joka toimii eri osioiden navigaationa

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.

Palveluesimerkit

Seuraavat palveluesimerkit havainnollistavat käytännön toteutuksia. Kuvissa on korostettuna päänavigaatioelementti.

Palveluesimerkki KDS.
MainBar päänavigaationa (KDS)
Palveluesimerkki OmaKela.
Sidebar päänavigaationa (OmaKela)
Palveluesimerkki Kela.fi.
TabNav päänavigaationa (Kela.fi)