Sivuston rakenne

Uudessa Lukkarissa kaikki seurakunnat ja seurakuntayhtymät käyttävät samaa verkkosivustomallia. Yhteinen rakenne helpottaa sivuston käyttöä, tukee jatkuvaa kehittämistä ja tekee eri seurakuntien verkkopalveluista käyttäjälle tuttuja.

Tällä sivulla esitellään sivuston rakenne, päävalikon konsepti sekä tärkeimmät rakenteelliset ratkaisut.

Lisätietoja Lukkari-palvelun toimintaperiaatteista, vastuista ja yhteisestä konseptista poikkeamisesta löytyy sivulta Lukkari-palvelun kuvaus ja käyttöperiaatteet.

Yksi yhteinen verkkosivustomalli

Samaa verkkosivustomallia käytetään sekä seurakunnissa että seurakuntayhtymissä.

Yhteinen malli mahdollistaa esimerkiksi:

sisältöjen jakamisen sivuston eri osiin
yhteisten toimintojen hyödyntämisen
keskitetyn ylläpidon
yhden kirjautumisen koko sivustolle

Jos seurakunta kuuluu seurakuntayhtymään, sen sivusto muodostaa oman osionsa yhteisellä verkkosivustolla. Itsenäiset seurakunnat käyttävät samaa rakennetta omana sivustonaan.

Verkkokokonaisuutta suunniteltaessa voidaan tarpeen mukaan hyödyntää myös supersivuja, erillisosioita tai erillissivustoja.

Päävalikon konsepti

Päävalikon rakenne perustuu käyttäjätutkimukseen, verkkopalveluiden analytiikkaan sekä seurakuntien kanssa tehtyyn suunnitteluun. Sen tavoitteena on auttaa kävijää löytämään tarvitsemansa tiedot mahdollisimman helposti riippumatta siitä, mistä hän saapuu sivustolle.

Yhteinen päävalikkorakenne tekee eri seurakuntien verkkopalveluista käyttäjälle johdonmukaisia. Siksi suosittelemme säilyttämään yhteisen rakenteen myös silloin, kun sivustoa muokataan oman seurakunnan tarpeisiin.

Kuvankaappaus seurakunnan navigaatiosta.

Seurakuntayhtymän sivustolla päävalikon osio on nimeltään Tietoa meistä, kun taas seurakunnan sivustolla käytetään nimeä Oma seurakunta.

Muut sivustoratkaisut

Tarpeesta riippuen verkkokokonaisuus voidaan toteuttaa eri tavoilla. Alla esitellään kolme tavallisinta vaihtoehtoa.

Supersivu suppealle aliseurakunnalle tai kappelisivustolle

Supersivu sopii erityisesti pienille aliseurakunnille tai kappeliseurakunnille, joiden sisältö mahtuu yhdelle pitkälle sivulle.

Sisältö jaetaan sivun sisäisiin osioihin, joihin käyttäjä voi siirtyä yläreunan linkkien avulla. Ratkaisu toimii hyvin silloin, kun sisältöä on melko vähän eikä erilliselle sivurakenteelle ole tarvetta.

Hääsivu evl.fi:ssä on hyvä esimerkki supersivusta.

Erillisosio sivuston alla

Erillisosio on oma kokonaisuutensa varsinaisen sivuston sisällä. Se soveltuu esimerkiksi laajan työalan, kampanjan, leirikeskuksen tai matkailijoille suunnatun sisällön esittelyyn.

Erillisosiossa voidaan hyödyntää sivuston yhteisiä sisältöjä, kuten tapahtumia, uutisia, yhteystietoja ja kuvia.

Jos sisältöä on vain vähän, supersivu on usein tarkoituksenmukaisempi ratkaisu.

Erillissivusto

Erillissivusto on oma verkkosivustonsa, jolla on oma verkkotunnus ja oma ylläpitonsa.

Se sopii esimerkiksi useamman seurakunnan yhteisiin hankkeisiin tai toimintaan, joka halutaan erottaa omaksi kokonaisuudekseen.

Erillissivusto ei jaa sisältöjä varsinaisen seurakuntasivuston kanssa, ja sitä ylläpidetään erikseen.

Päävalikon osiot

Toiminta

Toiminta-osioon sijoitetaan säännöllisesti järjestettävä toiminta, kuten kerhot, kuorot, leirit, kurssit ja muut pidempikestoiset kokonaisuudet.

Tapahtumat

Tapahtumahaku sisältää yksittäiset tapahtumat ja avoimet tilaisuudet, kuten jumalanpalvelukset, konsertit ja avoimet ryhmät.

Juhlat ja hautajaiset

Osioon kootaan kirkollisia toimituksia koskevat tiedot, kuten kaste, avioliittoon vihkiminen ja hautaan siunaaminen sekä niihin liittyvät käytännöt ja yhteystiedot.

Apua ja tukea

Osio kokoaa yhteen diakonian, keskusteluavun ja muun hengellisen, henkisen sekä käytännön tuen palvelut.

Tietoa meistä / Oma seurakunta

Osiossa esitellään seurakunta tai seurakuntayhtymä, sen toiminta, hallinto ja päätöksenteko. Sinne voidaan sijoittaa myös ilmoitustaulu.

Sivuston yläosa

Sivuston yläosa näkyy kaikilla sivuilla ja sisältää tärkeimmät navigointielementit.

Yläosassa sijaitsevat:

seurakunnan tai seurakuntayhtymän nimi ja logo
päävalikko
kielivalikko
sivustohaku
linkit asiointiin, tiloihin ja yhteystietoihin

Tavoitteena on, että tärkeimmät toiminnot löytyvät helposti kaikilla sivuilla.

Etusivu ja osioiden etusivut

Etusivun ylätunniste muodostaa kävijän ensivaikutelman sivustosta. Siinä voidaan käyttää näyttävää kuvaa sekä nostaa esiin ajankohtainen teema tai kampanja.

Osioiden etusivuilla käytetään vastaavaa johdantoaluetta, jossa esitellään osion sisältö otsikon, ingressin ja kuvien avulla.

Ajankohtaisia sisältöjä voidaan nostaa näkyville myös alempana etusivulla.

Sivurakenne

Suosittelemme pitämään sivurakenteen mahdollisimman selkeänä.

Hyvä lähtökohta on, että sivustolla on enintään kolme sivutasoa. Pitkien alasivuketjujen sijaan sisältöä kannattaa koota laajemmille sivuille esimerkiksi sisältöhaitareiden tai supersivujen avulla.

Kuvankaappaus navigaatiosta avautuvaan näkymään.

Kieliversiot

Uudessa Lukkarissa eri kielet toteutetaan saman verkkosivuston sisällä.

Jokaiselle sivulle voidaan luoda tarvittavat kielivastineet, eikä eri kieliversioiden tarvitse olla sisällöltään samanlaisia. Jos vastaavaa sivua ei ole olemassa valitulla kielellä, käyttäjä ohjataan kyseisen kieliversion etusivulle.

Kielivastineita voidaan lisätä myös myöhemmin.

Visuaalinen ilme

Uudessa Lukkarissa käytetään kirkon yhteistä visuaalista ilmettä.

Sivustolle voidaan valita jokin valmiista pääväreistä tai käyttää omaa väriä. Valmiiden värien saavutettavuus on tarkistettu etukäteen. Jos käytetään omaa väriä, saavutettavuusvaatimusten täyttämisestä vastaa seurakunta.

Sivustolla voidaan käyttää joko uuden ilmeen mukaista logoa tai nykyistä seurakunnan logoa.

Esimerkit väreistä

Tarkastele kuvaa isompana klikkaamalla.

Räätälöidyn väriteeman ohje

Kun valitset sivustolle räätälöidyn väriteeman vastuu digipalvelulain mukaisten saavutettavuusvaatimusten täyttymisestä jää seurakunnalle.

Räätälöityyn väriteemaan tulee määrittää neljä eri värisävyä: pääväri, tumma väri, vaalea väri ja erittäin vaalea väri. On tärkeä huomioida värejä valittaessa, että värit ja niitten yhdistelmät tulee täyttää kontrastivaatimukset

kun niitä vertaa toisiinsa
kun niitten päälle tulee mustaa tai valkoista tekstiä.

Kontrastien tulee olla vähintään 4.5:1. Kontrastit tulee tarkistaa kontrastityökalun avulla, yksi työkalu on WebAIM:in Contrast Checker. Selainten (Edge/Chrome) DevTools näkymästä voi myös tarkastaa värien kontrastin.

Räätälöityyn väriteemaan voi myös määrittää oman värin sivujen H1-tason otsikolle sekä valita painikkeiden tekstin väriksi valkoisen tai mustan.

Alla listattu, miten eri värit näkyvät sivustolla ja mitkä värit vaikuttavat keskenään.

Pääväri

Näkyy erityisesti:

etusivun ylätunnistelohkon taustavärinä
- tekstin väriksi voi valita valkoisen tai mustan, tärkeää on varmistaa hyvä kontrasti tekstin ja taustan välillä, vähintään 4.5:1.
painikkeissa
- tekstin väriksi voi valita valkoisen tai mustan, tärkeää on varmistaa hyvä kontrasti tekstin ja taustan välillä, vähintään 4.5:1.
korostuksessa, joka näyttää valitun sivun

Tumma väri

Vaikuttaa lähinnä:

joidenkin valmiiden teemojen H1-otsikoihin

Vaalea väri

Käytetään:

väritaustalohkon taustavärinä
- on täytettävä kontrastivaatimus 4.5:1 mustan tekstin kanssa
navigaation elementeissä
- on erotuttava valkoista taustaa vasten

Navigaation elementti.

Erittäin vaalea väri

Käytetään isojen sisältöalueiden taustana, esimerkiksi:

teksti + kuva -lohko
- huom.! linkin väri lohkon sisällä on vihreä (#005E2C), tarkista, että vihreän tekstin kontrasti taustaväriin on riittävä (4.5:1)
Päivän sana -lohko
tapahtuma- ja uutisnostot
sisältöhaitariryhmälohko
- huom.! linkin väri lohkon sisällä on vihreä (#005E2C), tarkista, että vihreän tekstin kontrasti taustaväriin on riittävä (4.5:1)
sitaattilohko
kuvakarusellilohko
ikonilinkit-lohkojen taustat
väritaustalohkon taustavärinä, jos on valinnut vaalean sävyn taustaväreistä
osioiden etusivuilla ylätunnistelohkon taustavärinä
- jos olet määrittänyt sivujen H1-tason otsikolle oman värin väriasetuksissa, tarkista, että valitun tekstin väri ja erittäin vaalea väri täyttävät kontrastivaatimukset (4.5:1)
taulukoiden solujen taustaväri, jos lisää taulukkoon otsikkorivin/ylätunnisterivin ja alatunnisterivin
sivuvalikon taustavärinä
- on erotuttava valkoista taustaa vasten ja on täytettävä kontrastivaatimus 4.5:1 mustan tekstin kanssa

Erittäin vaalea väri tulee toimia sekä mustan tekstin että päävärin kanssa siten, että kontrastivaatimus 4.5:1 täyttyy.

Lohkot

WordPressissä sivut rakennetaan lohkojen avulla.

Lohkojen ansiosta sisältöjä voidaan rakentaa ja muokata joustavasti ilman teknistä osaamista.

Lisätietoja löytyy sivuilta Lohkot ja Kuvaohjeet.

Tutustu lohkoihin Lohkot-sivulla Tutustu kuvaohjeisiin