Thl.fi:n graafinen ohjeisto ORANSSIT KOHDAT TARKISTAMATTA 1 Suunnitteluperiaatteita 2 Responsiivisuus 2.1 Pääosio eri päätelaitteilla 2.2 Aihesivusto eri päätelaitteilla 3 Käyttöliittymän yhteiset osat 3.1 Header 3.2 Murupolku 3.3 Aiheen header 3.4 Sisältöalue 3.5 Sivukartta 3.6 Footer 4 Logojen käyttö 5 Typografia 5.1 Fonttiperhe 5.2 Fonttikoot 6 Väriteemat 6.1 Oletusväriteema 6.2 Aihesivustojen väriteemat 6.3 Yleisiä ohjeita värien käyttöön 7 Kuvat, taulukot ja videot 7.1 Kuvien käyttö 7.2 Kuvien koot 7.3 Kuvien tyyli 7.4 Taulukot 7.5 Videoiden upottaminen 8 Sivupohjat ja web-sisältörakenteet 8.1 Etusivu 8.2 Aiheen etusivu 8.3 Pääosioiden 3-palstaiset etusivut (laskeutumissivut) 8.4 8.5 Pääosioiden 2-palstaiset etusivut (uudet laskeutumissivut) 8.6 Sisältösivut (alasivut) 8.7 Sivupohjalista 8.8 Web-sisältörakenteiden lista (rakenteiset artikkelit) 9 Sanasto Suunnitteluperiaatteita Ulkoasu Rakenne Ulkoasu pohjautuu THL:n alkuperäiseen graafiseen ohjeistoon, mutta on optimoitu verkkokäyttöön. Värikontrastit ovat tarpeeksi suuria ja tukevat esteettömyyttä. Perusvärimaailma on neutraali, mutta sivustosta riippuen korostusvärinä käytetään vihreää tai aihesivustolla aiheen omaa väriä. Yleisilme on selkeä ja ilmava, ja välttää turhaa efektikikkailua. Rakenne on selkeä, yksi asia aina omassa portletissaan. Portlettien nimeämiseen tulee kiinnittää huomiota; otsikoiden pitää olla mahdollisimman ytimekkäitä ja kuvaavia. Lyhyet otsikot ovat ulkoasun ja käytettävyyden kannalta parhaimpia, mutta tärkeää myös on, että käyttäjän ei tarvitse arvailla otsikoiden ja linkkien sisältöjä vaan nimi on tarpeeksi kuvaava. Alasivuilla kapeaan vasempaan palstaan ei sijoiteta mitään muuta kuin sivuvalikko-portletti. Sivun otsikko ja pääsisältö ovat aina keskellä ja mahdollinen lisäinfoa antava sisältö oikeassa palstassa. Etusivut eroavat alasivuista rakenteellisesti. Responsiivisuus Koko verkkopalvelu skaalautuu eri päätelaitteille. Pääosio eri päätelaitteilla Tietokone-näkymässä sivuvalikko, pääsisältö ja oikea palsta ovat rinnakkain.
Tabletti-näkymässä sivuvalikko on piilotettu painikkeen taakse ja pääsisältö ja "oikea palsta" ovat allekkain.
Mobiili-näkymässä sivuvalikko on piilotettu painikkeen taakse ja pääsisältö ja "oikea palsta" ovat allekkain.
Aihesivusto eri päätelaitteilla Tietokone-näkymässä aiheen päävalikko on vaakatasossa ja aihe-ikoni on tämän päällä vasemmassa laidassa. Pääsisältö ja "oikea palsta" ovat rinnakkain.
Tabletti-näkymässä aiheen päävalikko ja sivuvalikko on piilotettu saman painikkeen taakse. Aihe-ikoni on piilotettu kokonaan. Pääsisältö ja "oikea palsta" ovat allekkain.
Mobiili-näkymässä aiheen päävalikko ja sivuvalikko on piilotettu saman painikkeen taakse. Aihe-ikoni on piilotettu kokonaan. Pääsisältö ja "oikea palsta" ovat allekain.
Käyttöliittymän yhteiset osat
Header Header sisältää THL:n logon joka on linkki THL.fi:n etusivulle, linkin yhteystietoihin ja medialle-sivulle, kielivalikon, haun, ja THL.fi:n päävalikon. Tabletti- ja mobiili-näkymissä päävalikko piiloutuu painikkeen taakse. Murupolku Murupolku on aina headerin alapuolella, paitsi mobiilinäkymässä, jossa se putoaa sivun alaosaan. Tietokone-näkymässä murupolku on merkittävässä osassa navigoinnin kannalta. Mobiili/tabletti-valikon ollessa täysin erilainen, murupolun merkitys vähenee. THL.fi:n etusivulla murupolkua ei näytetä. Aiheen header Aiheen header sisältää sivuston otsikon eli aiheen otsikon, sivuston päävalikon ja sivuston ikonin. Tabletti- ja mobiilinäkymässä sivuston päävalikko piiloutuu painikkeen taakse ja sivuston ikoni piilotetaan. Sivuston päävalikko näyttää sivuston ensimmäisen tason sivut. Etusivu on piilotettu päävalikosta, mutta siihen pääsee sivuston otsikkoa klikkaamalla. Sisältöalue Sivuvalikko Sivuvalikossa näytetään valittu sivu ja sen alatasot. Valittu sivu on ylimpänä lihavoituna ja suuraakkosilla. Alasivut näkyvät sisennettynä sen alla. Jokaisen sivulinkin kohdalla on myös nuoli-ikoni, joka viittaa navigointiin.
Sivuvalikossa ei haluttu käyttää perinteistä "puurakennetta", koska THL.fi:n sivurakenne on hyvin syvä. Sivuja voi laajimmillaan olla noin seitsemässä tasossa ja sivujen nimet ovat usein melko pitkiä. Puurakenne olisi ollut valtava ja se olisi tehnyt sivun ilmeestä sekavan syvissä sivuhierarkioissa. Sen sijaan käyttäjä voi nyt navigoida valitsemansa sivun alasivuille tai siirtyä taaksepäin joko murupolun tai päävalikon kautta. Sivuvalikkoa ei näytetä etusivuilla eikä yksipalstaisilla sivuilla. Tabletti- ja mobiili-näkymässä sivuvalikko menee piiloon painikkeen taakse. Mobiilikäyttäjän oletetaan käyttävän hakua melko paljon, koska syvien sivurakenteiden selaaminen voi olla työlästä. <
Sivun otsikko Sivun otsikko (H1) on värillinen (palvelualuesivut) tai musta (aihesivut) otsikko keskipalstassa. Uutta sivua luodessa otsikko tulee näkyviin automaattisesti. Sivun otsikko ja valikossa näkyvä nimi vastaavat aina toisiaan. Jos otsikko halutaan piilottaa, se tapahtuu sivun asetuksista, hallintapaneelista: hallinnoi > sivuja > ulkoasu > asetukset > piilota sivun
otsikko. Otsikon saa piilottaa vain silloin, kun H1 tulee jostakin muualta, esim. yksittäisen uutisen näyttösivuilla. Sivukartta Sivukartta sisältää THL:n logon joka on linkki THL.fi:n etusivulle, sosiaalisen median painikkeet sekä ensimmäisen ja toisen tason sivulinkit. Mikäli toisen tason linkkejä on yli 10, loput piilotetaan painikkeen taakse. Mobiilinäkymässä sivukartassa näytetään vain ensimmäisen tason sivulinkit. Footer Footer sisältää THL:n vuosileiman, päätoimipaikan yhteystiedot sekä linkit sivuille "Palaute", "Tietoa sivustosta" ja "Yhteystiedot". Sen alapuolella on stmfooter, joka kertoo laitoksen tehtävän ja tarjoaa linkit hallinnonalan virastojen verkkosivuille. Logojen käyttö THL.fi:n logo sijaitsee aina headerissa vasemmassa ylälaidassa sekä sivukartan vasemmassa ylälaidassa (footer-alue). Logo on linkki THL.fi:n etusivulle ja se on niin sanottu pitkä versio, eli "Terveyden ja hyvinvoinnin laitos" yhdistettynä helmi-merkkiin. Tarkempia ohjeita THL:n logon käyttöön löytyy THL:n graafisesta ohjeistosta. Jos sivulla täytyy näkyä muita logoja (niin että ne eivät ole osa keskipalstan sisältöä), sijoitetaan ne oikeaan palstaan omaan portlettiinsa. Vasen palsta on varattu sivuvalikolle, eikä siihen saa sijoittaa logoja tai muita portletteja. Logoilla on aina olemassa turva-alue, toisin sanoen logon ympärille on jätettävä tarpeeksi tyhjää tilaa. Logon turva-alueen koko selviää yleensä graafisesta ohjeistosta.
Typografia Fonttiperhe THL.fi-verkkopalvelun fontti on Googlen tarjoama Source Sans Pro. Mikäli Googlen tarjoamaan kirjastoon ei saada yhteyttä, varafonttina on Arial. Source Sans Pro on päätteetön, moderni verkkokäyttöön sopiva fontti, joka sisältää useita leikkauksia aina erittäin ohuesta erittäin paksuun. Verkkopalvelussa käytössä ovat normal 400, italic, semibold 600, bold 700 ja bold italic. Muita fontteja tai leikkauksia ei tällä hetkellä käytetä. Käytössä olevat fontit on merkitty oheiseen kuvaan ympyrällä. Fonttikoot Kaikki fonttikoot tulevat teemasta. Responsiivisuuden ja esteettömän fonttikoon säätämisen (suoraan sivuston käyttöliittymästä tai selaimesta) takia fonttikokoja ei saa määritellä suoraan web-sisältöön. Alla olevasta listassa on kerrottu fonttien alkuperäiset pikselikoot. Koko voi kuitenkin vaihdella riippuen selaimen asetuksista. Oletusfonttikoko on 16px (100%) ja pienin sallittu koko 14 px. Oletus-rivinkorkeus on 1.4em. Oletusväri on musta #303030. Oheisessa taulukossa vain aihesivustoihin liittyvät kohdat on merkitty keltaisella. Elementti Koko (px) Leikkaus Kirjainvälistys Väri Rivinkorkeus (em) Muut efektit Aiheen otsikko (sivuston otsikko) Aiheen päävalikko: a Aiheen päävalikko:.selected a Aiheen päävalikko: a:hover 26 bold - #ffffff 1.2 all-caps, text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); oletus normal -0.01em #ffffff 1.4 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); / bold / / / text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); taustaväri: aiheen väri / normal / / / text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); taustaväri: #444444 H1 sivun otsikko 34 bold - #519B2F (palvelusivu) / oletus (aihe) 1.3 -
H2 portletin otsikko, keskipalsta 20 bold - #519B2F (palvelusivu) / oletus (aihe) 1.2 all-caps H2 portletin otsikko, sivupalsta oletus bold - #519B2F (palvelusivu) / oletus (aihe) 1.2 all-caps H2 perussisällössä 26 normal - oletus 1.4 - H3 perussisällössä 20 semibold - oletus 1.4 - H4 perussisällössä 17 semibold - #000000 1.4 - H5 perussisällössä Ei käytetä! Ingressi pääsisällössä 20 normal - oletus 1.5 - Leipäteksti oletus normal - oletus 1.5 - Linkki a - normal - #0060a6 - - Linkki a:hover - / - / - alleviivaus Murupolku 14 bold -0.01em #707070 1.6 linkit linkin värillä, all-caps Painike: a 14 bold - #606060 1.2 all-caps, taustaväri: #e6e6e6, border: 1px solid #999999, box-shadow: 0px, 1px, 0px, 0px, rgba(0, 0, 0, 0.4). Painikkeen väri voi erityistilanteissa olla muutakin, mutta kaikissa painikkeissa on oltava tautaväriä tummempi ääriviiva ja edellä mainittu varjostus. Painike: a:hover / / / #ffffff / all-caps, taustaväri: #606060, border: 1px solid #606060, ei varjostusta "Näytä kaikki" -linkki Pieni nosto: otsikkolinkki Pieni nosto: ingressi oletus semibold - linkin väri oletus oletus semibold - linkin väri oletus oletus normal - #606060 oletus Päivämäärätiedot 14 normal - #606060 oletus Päävalikko: a 14 bold -0.01em #606060 1.1 all-caps Päävalikko:.selected a Päävalikko: a:hover Sivuvalikon otsikko valittuna Sivuvalikon otsikko ei valittuna Sivuvalikon muut tasot, sivu valittuna Sivuvalikon muut tasot, sivu ei valittuna / / / #ffffff / taustaväri: #606060 / / / / / alleviivaus oletus bold -0.01em #ffffff 1.2 all-caps, taustaväri: #519B2F (palvelusivu) / aiheväri (ai he), text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); oletus normal -0.01em #303030 1.2 all-caps oletus bold -0.02em #ffffff oletus taustaväri: #519B2F (palvelusivu) / aiheväri (aihe), text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); oletus normal -0.02em #303030 oletus - Väriteemat THL.fi-verkkopalvelun värimaailma jakautuu pääosioiden vihreään oletusväriteemaan ja aihesivustojen seitsemään väriteemaan (color schemes). Perusvärimaailma on neutraali valkea-harmaa, joka antaa hyvän pohjan kahdeksalle erilaiselle väriteemalle.
Kaikki verkkopalvelun värikontrastit noudattavat verkkosisällön saavutettavuusohjeita (WCAG 2.0), AA-tasoa. Tämän takia korostusvärit ovat melko tummia. Kontrastisuhteen esteettömyyden voi tarkistaa internetistä löytyvillä laskureilla, esimerkiksi WebAIM-sivustolla. Huom. Liferay-portaalissa myös etusivu on oma "väriteemansa". Tämä johtuu etusivun poikkeavasta rakenteesta. Värit ovat samat kuin oletusväriteemassa. Oletusväriteema Pääosioiden oletusväriteeman korostusväri on luonnollisesti THL:n pääväri, vihreä. Vihreästä käytetään kahta eri sävyä, joista vaaleampi on grafiikkaa varten ja tummempi tekstiä varten. Muut ohessa luetellut värit ovat yleisesti koko portaalissa käytettyjä värejä. vaaleanvihreä #7bc143 R 123 G 193 B 67 Käytetään grafiikassa. keskivihreä #519b2f R 81 G 155 B 47 Käytetään otsikoissa, sivuvalikossa korostusvärinä ja mouseover-efektinä listoissa. vaaleanharmaa #f2f2f2 R 242 G 242 B 242 Käytetään sivupalstan portlettien taustavärinä. harmaa musta #606060 R 96 G 96 B 96 Käytetään päävalikko-, painike- ja lisäinfoteksteissä. #303030 R 48 G 48 B 48 Käytetään leipätekstissä.
sininen #0060a6 R 0 G 96 B 166 Käytetään vain linkin värinä. oranssi #faa61a R 250 G 166 B 26 Kriisikentän korostusväri, käytetään vain mustan tekstin kanssa. Aihesivustojen väriteemat Aihesivustojen korostusvärit ovat periytyneet entisistä teemapalveluista, mutta sävyt on korjattu esteettömyysvaatimusten mukaisiksi. Eri väreillä halutaan korostaa, että aihesivustot ovat omia isoja kokonaisuuksiaan THL.fi-verkkopalvelun alla. Koska väriteemoja on vain seitsemän ja aihesivustoja paljon enemmän, jotkin aiheet joutuvat käyttämään samaa väriteemaa. Suositus on, että kaikki seitsemän väriteemaa ovat tasapuolisesti käytössä. Aihesivustolla käytetään jotakin seuraavista väriteemoista: 1 turkoosi #079e9e R 7 G 158 B 158 2 sininen #2472b2 R 36 G 114 B 178 3 violetti #9171bc R 145 G 113 B 188 4 pinkki #bc4ba7 R 188 G 75 B 167 5 punainen #d64176 R 214 G 65 B 118 6 ruskea #b26d09 R 178 G 109 B 9 7 syanin sininen #29a0c1 R 41 G 160 B 193 Yleisiä ohjeita värien käyttöön Kaikki verkkopalvelussa tarvittavat värit tulevat Liferay-teemasta. Muiden värien käyttö ei ole suositeltavaa, koska se rikkoisi sivuston yhtenäisen ilmeen. Jos pääsisällössä halutaan korostaa yksittäisiä sanoja, voidaan harkinnan mukaan käyttää lihavointia (bold). Kirkas oranssi on kriisikentän väri. Oranssin käyttöä kannattaa välttää muissa tilanteissa. Kuvat, taulukot ja videot Kuvien käyttö Pääsisältö voidaan mainiosti aloittaa yhdellä isolla kuvituskuvalla, mutta pakollinen se ei ole. Aloituskuvan täytyy olla vaakamallinen ja sisällöltään sellainen, että se kuvaa koko pääsisältöä. Jos pääsisällössä on ingressi, kuvituskuva tulee heti ingressin jälkeen. Muut kuvat sijoitetaan tekstin sekaan, asiayhteyteensä. Oikeaan palstaan sijoitetaan kuvia vain silloin, kun ne liittyvät johonkin oikean palstan sisältöön. Kuvateksti syötetään kuvan jälkeen ja siinä käytetään kuvateksti-tyyliä, joka löytyy sisältöeditorista nimellä image caption. Kuva-elementti on tyylitelty niin, että sen jälkeen syötetty teksti alkaa aina uudelta riviltä. Kuvan oikealle puolelle ei siis voi sijoittaa tekstiä. Jos näin kuitenkin halutaan tehdä jossakin erikoistilanteessa, kuvalle on annettava ylimääräinen luokka: "thl-inline-image". Tällöin kuva pakotetaan vasemmalle niin, että teksti rivittyy sen rinnalle. Kuvan on oltava tarpeeksi kapea, jotta teksti mahtuu. Kuvalle on aina annettava alt-teksti eli vaihtoehto kuvalle. Alt-teksti on itsenäinen: kuvan sisältö täytyy pystyä ymmärtämään näkemättä kuvaa, pelkän tekstin perusteella.
Kuvien koot Rakenteellisissa web-sisällöissä käytettävien kuvien on oltava tietyn kokoisia. Katso oikeat koot kohdasta Web-sisältörakenteiden lista. Rakenteettomassa web-sisällössä (pääsisältö/keskipalsta, 3-palstainen sivu) kuville on määritelty vain maksimikoot: Vaakakuvien maksimileveys on 920 px (2-palstaisessa sivupohjassa 970px). Näin kuva on koko sisältöalueen levyinen. Pienemmällä kuvalla kuvan oikealle puolelle jää tyhjää. Pystykuvien maksimikorkeus on 460 px, näin kuva mahtuu pienelle tietokone-näytölle kokonaan. Korkeampaakin kuvaa voi siis käyttää, jos kuvan sisältö sen vaatii. Lisää kuvien koko-ohjeita THL:n intrassa. Kuvien tyyli Kuvat tuovat verkkopalveluun eloa ja visuaalisuutta, joten niiden käyttö kannattaa. Sisältökuviksi kannattaa etsiä raikkaita, ammattimaisia ja mahdollisimman luonnollisia valokuvia. Verkkopalvelun ilme on kevyt ja vaalea, joten tummanpuhuvat ja raskasilmeiset kuvat eivät sovi yleisilmeeseen. Pääkuvitustyyppi on valokuva. Ihmiskuvissa tärkeintä on uskottavuus. Jos oikeisiin kuvauksiin ei ole mahdollisuutta, suositaan suomalaisia kuvapankkeja. Aktiiviset, eri-ikäiset ihmiset ja mielenkiintoiset kuvakulmat ja jännitteet ovat avainsanoja kuvia valittaessa. Joihinkin aihepiireihin voi olla vaikea löytää tarpeeksi kuvaavia valokuvia. Tällöin voidaan harkita abstraktimpien valokuvien käyttöä. Kannattaa kuitenkin olla tarkkana, ettei viljele "sisällöttömiä" kuvia liikaa. Perussisältösivulla 1-3 kuvituskuvaa on sopiva määrä. Kuvien käytöstä on linjattu tarkemmin THL:n kuvakonseptissa. Taulukot Taulukoilla esitetään vain taulukkomuodossa olevaa tietoa, eikä niitä pidä käyttää koko sivun taittamiseen responsiivisen käyttöliittymän vuoksi. Taulukon asetuksiin ei tarvitse puuttua, eli taulukon leveys, kehykset, marginaalit ja taustaväri tulevat automaattisesti teemasta. Kehykset ja marginaalit selkiyttävät taulukkoa ja erottavat sarakkeet toisistaan, eikä niitä tämän takia saa poistaa. Liferayn taulukkoeditorissa ylätunnisteeksi voidaan asettaa ensimmäinen rivi tai ensimmäinen sarake. Jos taulukko on leveämpi kuin sille varattu alue, taulukon alapuolelle ilmestyy rullauspalkki. Näin taulukkoa voi selata myös mobiili-näkymässä. Taulukon otsikkoa (caption) ei käytetä. Jos otsikko tarvitaan, voidaan käyttää sisältöeditorin otsikkotyylejä (H2-H4). Sisällöntuottaja voi halutessaan testata taulukon skaalautumista selainikkunan leveyttä muuttamalla. Videoiden upottaminen Verkkopalveluun voidaan upottaa Youtube-videoita, joko sivun alkuun omaan web-sisältörakenteeseen tai rakenteettoman web-sisällön sisään. Videoupotus rakenteeseen Rakenteen nimi on Video. Rakenteeseen syötetään Youtube-videon ID, joka löytyy videosivun osoiteriviltä ensimmäisen yhtäsuuruusmerkin (=) jälkeen. Rakenne huolehtii videon koon skaalautumisesta. Videoupotus ilman rakennetta Jos video halutaan upottaa rakenteettoman web-sisällön sisään, se vaatii hieman koodausta. Youtuben upotuskoodi (iframe-koodi) kopioidaan web-sisällön koodinäkymään. Sivupohjat ja web-sisältörakenteet Etusivu Etusivun rakenne on suunniteltu erikseen määritellyille sisällöille eikä siinä ole sivuvalikkoa, joten sitä ei voi käyttää muilla sivuilla. THL.fi:n etusivu sisältää ajankohtaisnostoja ja ajankohtaisvirran, sosiaalisen median painikkeet, aihelistauksen, tuote-karusellin, tapahtumat, oikopolut
sekä blogi-virran. Kriisitilanteessa etusivun yläosaan voidaan sijoittaa kriisikenttä. Huomioitavaa asettelussa: jos uutisvirta on pidempi kuin vasemmalla olevien nostojen sisällöt, uutisvirran alalaita ei tasaannu nostojen kanssa vaan menee alemmas kuin ne. > Uutisvirran pituutta kannattaa tällöin lyhentää asettamalla näkyviin vähemmän uutisia.
Aiheen etusivu Aiheen etusivun rakenne on vapaampi. Pakollinen elementti header-alueella on aiheen ikoni. Pääpalstassa (vasemmalla) puolestaan bannerikuva ja slogan, 2-6 nostoa, 2-10 linkkilistaa/kuvaa/vapaata sisältöä. Alimmaksi voidaan sijoittaa viittauksia muihin verkkopalveluihin (Muualla verkossa). Oikeaan palstaan sijoitetaan dynaamisempaa sisältöä, esim. ajankohtaisnostoja, ajankohtaisvirta ja tapahtumavirta. Alimmaksi sijoitetaan Aihe-info.
Pääosioiden 3-palstaiset etusivut (laskeutumissivut) Pääosioiden etusivut ovat koostemaisia sivuja, jotka sisältävät paljon erilaisia sisältöjä. Tätä sivupohjaa voidaan käyttää myös Aiheiden ajankohtaista-sivuna tai etusivuna myös isosti markkinoitavalle tapahtumalle, jolla on paljon alisivuja. Pääosion etusivu aloitetaan aina kuva-teksti-bannerilla tai videolla. Jos aloitetaan videolla, banneri sijoitetaan videon alle (ilman kuvaa). Näille kaikille on olemassa omat rakenteensa, katso Web-sisältörakenteiden lista. Keskipalstaan voidaan lisätä vapaasti kuvallisia sisältönostoja tai listauksia. "Muualla verkossa" tulee aina viimeiseksi. Useimmilla sivuilla kuvallinen sisältö on keskellä, kun taas vähemmän tärkeä (ja yleensä kuvaton) sisältö on oikeassa palstassa. Pääosioiden 2-palstaiset etusivut (uudet laskeutumissivut) Pääosioiden uudet etusivut ovat koostemaisia sivuja, joiden nostomahdollisuuksien avulla voidaan tarjota käyttäjille monipuolinen "kattaus" osion teeman sisällöistä. Pääosion etusivu aloitetaan aina pääkuvalla. Myös ingressi ja jatkolinkki kuvan alla ovat mahdolliset.
Sivulla on paikat kahdelle nostoalueelle. Yksi nostoalue koostuu alueen otsikosta, nostoista (1-12 kpl) ja jatkolinkistä. Nostossa on aina kuva ja linkkiteksti sekä vapaavalintainen lisäteksti. Nostoja on rivillä mielellään 4 kappaletta (täysi rivi). Nostoalueiden alle voi lisätä uutisvirran (asset-julkaisijalla). Uutisvirrassa jatkolinkki mahdollinen, ei RSS-syötteen tilaus. Uutisvirran alapuolelle voi tehdä nostoja Muualla verkossa -rakenteella. Yllämainituille on olemassa omat sisältörakenteensa, poislukien nostoalueen otsikko (tehdään sisältö-portletin oletusasetuksilla) ja nostoalue (toteutuu kun nostoja tiputellaan määriteltyihin soluihin sivupohjassa). (Rakenteet ks. Web-sisältörakenteiden lista.)
Sisältösivut (alasivut) Sisältösivut sisältävät yhden pääartikkelin. Sen lisäksi oikeaan palstaan voidaan sijoittaa oheismateriaalia, esim. lyhyt teksti, "Lisää aiheesta" -linkkilista ja "Muualla verkossa". Sivupohjalista Kuva Nimi Kuvaus Etusivu THL.fi:n etusivu. Ei käytetä muualla.
Pääosion etusivu Ensimmäisen tason sivut, esim. Ajankohtaista tai Julkaisut. Voidaan käyttää etusivuna myös: isosti markkinoitavalle tapahtumalle, jolla on paljon alisivuja poikkeustapauksissa, joissa kokonaisuuden on tarpeen profiloitua erityisen houkuttelevasti Pääosion etusivu (uusi 2-palstainen nimeltään " THL-laskeutumissivu (2-palstainen)" Uutisen sivu Käytetään vain piilosivuilla yksittäisen uutisen/tiedotteen näyttämiseen. Murupolkua konfiguroitu niin, että piilosivun nimen sijaan näytetään asset publisherin artikkelin otsikko. THL-Uutisarkistosivu 3-palstainen sisältösivu Sivu näyttää uutisvirtaa ja tarjoaa mahdollisuuden selata uutisia vuosi- ja kuukausitasolla, kun keskipalstaan pudotetaan News-archive-portletti ja oikeaan palstaan Uutisarkiston suodatusportletti. Yleisin sivupohja. Pääsisältö on keskellä ja lisäinfoa tuova sisältö oikealla.
2-palstainen sisältösivu Käytetään sivuilla, joissa sisältö tarvitsee erityisen paljon tilaa leveyssuunnassa. Täysleveä sivu Vain yksi palsta. Käytetään Aiheet-sivulla ja tilaa vaativilla upotus-sivuilla. Aihe: etusivu Aihe-sivuston etusivu. Ei käytetä muilla aihe-sivuilla, koska sivuvalikkoa ei ole. Aihe: Ajankohtaista Aiheen Ajankohtaista-sivu.
Aihe: uutisen sivu Käytetään vain aihe-sivuston piilosivuilla yksittäisen uutisen/tiedotteen näyttämiseen. Murupolkua konfiguroitu niin, että piilosivun nimen sijaan näytetään asset publisherin artikkelin otsikko. Aihe: 3-palstainen sisältösivu Yleisin sivupohja aihe-sivustolla. Pääsisältö on keskellä ja lisäinfoa tuova sisältö oikealla. Aihe: 2-palstainen sisältösivu Käytetään aihe-sivuston sivuilla, joissa sisältö tarvitsee erityisen paljon tilaa leveyssuunnassa. Aihe: täysleveä sivu Vain yksi palsta. Käytetään aihe-sivuston tilaa vaativilla upotus-sivuilla.
THL-Aihe: Uutisarkistosivu ks. kohta "THL-Uutisarkistosivu" Web-sisältörakenteiden lista (rakenteiset artikkelit) Nimi Missä käytetään Kuvaus Etusivu Lista Etusivu Linkin otsikko+linkki sekä valintapainike, mikäli lista jaetaan kahteen palstaan Etusivu Ajankohtaisnosto Etusivu (sivun alun ajankohtaisnostot ja Kuukauden aihe) Kuva+tyyppi+otsikko+teksti+linkki. Ajankohtaisnostoissa kuvan koko: 600 x 400. Tämä on yleinen, järjestelmäkameran 2:3 kuvasuhde. Kuukauden aiheessa kuvan koko 920x420 (sama kuin aihesivuston etusivun bannerikuvassa). Etusivu Tuoteslider Etusivu Tuotesliderin yksi sivu. Linkkiotsikko (ulkoinen tai sisäinen)+teksti+kuva. Rakenne toistettavissa max. 2 kertaa (ei rajoitettu, mutta sisällöntuottajan otettava tämä huomioon!). Mahdollisuus lisätä lisälinkkejä sisällön loppuun. Kuvan koko: 100 x 100. Etusivu Kriisikenttä Etusivu Otsikko+kuva+teksti+linkkipainike. Kuvaa käytetään vain jos sisältö sen ehdottomasti vaatii. Kuvan max. leveys 900, voi olla pienempi. Etusivu Banneri Etusivun taustakuva Kuva+otsikko+linkin otsikko+sisäinen/ulkoinen linkki. Ainoastaan kuva on pakollinen. Kuvan minimileveys1800 pikseliä, korkeus aina 550. Käytössä oleva lehdet-kuva on mitoilla 2560 x 550. Sosiaalisen median linkit Etusivu ja ajankohtaista-sivu. Teksti + 1-7 some-ikonia linkkeineen. Ikonin koko: 22 x 22. Uutinen Uutissisällöissä, ei määriteltyä sivua. Uutistyyppinen web-sisältö. Tiedote Tiedotesisällöissä, ei määriteltyä sivua. Tiedotetyyppinen web-sisältö. Aihesivut: aiheikoni Kaikilla aihesivuilla vasemmassa ylälaidassa. Yksittäisen kuvan rakenne. Aiheikonin on oltava valmiiksi oikean näköinen ja kokoinen. Kuvan koko: 145 x 145. Tällä hetkellä ei käytössä, koska aiheikonina käytetään sivuston logoa. Aihesivut: etusivun ajankohtaista-slider Aihesivut: etusivun banneri Aiheen etusivu. Aiheen etusivu. Ajankohtaista-sliderin yksi sivu. Otsikkolinkki+teksti. Kuva+teksti. Teksti on slogan-tyyppinen, ei yhtä lausetta pidempi. Kuvan koko: 920 x 420. Aihesivut: Nostoalue Aiheen etusivu tai ajankohtaista-sivu. Kuva+teksti+linkkiteksti. Sisältönosto. Kuvan koko: 600 x 400. Tämä on yleinen, järjestelmäkameran 2:3 kuvasuhde. Aihesivut: etusivun aiheinfo Aiheen etusivu. 3 tekstikenttää: kohderyhmä, THL:n kommentti ja THL:n rooli. Tekstikenttien ikonit tulevat teemasta. Aihesivut: Bannerilinkit Aiheen etusivu. Kuva+alt-teksti+linkin otsikko+sisäinen/ulkoinen linkki. Koko rakenne on toistuva, kaikki kentät ovat pakollisia, paitsi sisäinen/ulkoinen linkki. Kuvan koko: 560 x 65. Aiheet "Aiheet"-sivu. Otsikkolinkki+kuva+teksti, toistettavissa rajattomasti. Käytetään vain Aiheet-sivulla. Kuvan koko 145 x 145. Laskeutumissivun infograafi Pääosion etusivu (2-palstainen) Kuva + leipis + linkki. Linkki ja teksti eivät pakollisia. Kuvan koko 940 x 440. Laskeutumissivun jatkolinkki Pääosion etusivu (2-palstainen) Linkki. Sijoitetaan laskeutumissivun nostoalueen alapuolelle. Vapaaehtoinen. Laskeutumissivun nostoalue Pääosion etusivu (2-palstainen) Kuva + linkki + linkin otsikko ja teksti. Kuvan koko 600 x 400. Linkille syötettävä vähintään otsikko tai teksti.
Banneri kuvalla ja tekstillä Video Pääosion etusivu (3-palstainen) Pääosion etusivu (3-palstainen), käy myös sisältösivujen alkuun. Kuva+teksti. Teksti kertoo sivun pääidean ytimekkäästi. Voidaan käyttää myös ilman kuvaa silloin, kun video aloittaa sivun sisällön. Kuvan koko: 920 x 613. Tämä on yleinen, järjestelmäkameran 2:3 kuvasuhde. Youtube-videoupotus, vaatii videon ID:n. Koko: automaattinen, katso kohta Videoiden upottaminen. Twitter-nosto Ajankohtaista-sivu. Näyttää twitter-feediä asetusten mukaisesti. Ajankohtaista-uutisnosto Ajankohtaista-sivu. Manuaaliset uutisnosto(t) Ajankohtaista-sivun alussa. Otsikk olinkki+julkaisupäivämäärä+tiivistelmä+kuva, voidaan toistaa kerran (ei rajoitettu mutta sisällöntuottajan otettava tämä huomioon). Kuva ei ole pakollinen. Muualla verkossa stmfooter Voidaan käyttää lähes kaikilla sivuilla joko keskipalstassa viimeisenä (etusivut) tai oikeassa palstassa (sisältösivut). Voidaan käyttää myös muihin tarkoituksiin, joissa tarvitaan kuva-teksti-rakennetta. Näkyy kaikkien sivujen lopussa alimpana elementtinä. Linkkiotsikko+kuva+teksti, toistettavissa rajattomasti. Huom. voidaan käyttää myös esim. kirjakauppa-nostoihin. Tämän takia rakenteen lopussa on paikka ulkoisille linkeille. Kuvan koko 100 x 100. Kirjakauppa-noston kuva-korkeus kannen koon mukaan. Hallinnonalan yhteinen alatunniste-elementti Sanasto Sana Merkitys aihesivusto / aihesivu Liferay Liferay-teema / teema pääosio pääsisältö sivumalli sivupohja sivustomalli sivuvalikko väriteema / color scheme Jokaiselle aiheelle (esim. Lapset, nuoret ja perheet) on oma sivustonsa. Sivustolla on oma värimaailma ja päävalikko. Verkkoportaali, toimii alustana THL.fi-verkkopalvelulle. Teema määrittää verkkopalvelun oletus-ulkoasun ja käyttöliittymän yhteiset osat. Teema voi sisältää useita väriteemoja. Pääosioiksi kutsutaan niitä sivukokonaisuuksia, jotka eivät ole Aiheet-otsikon alla. Yksi pääosio on esim. Julkaisut. Alasivun keskipalstan sisältö eli sivun tärkein sisältö. Dynaaminen mallipohja, jonka voi ottaa käyttöön uutta sivua luodessa. Tärkeimmät portletit on aseteltu ja konfiguroitu sivulle valmiiksi. Määrittää sivun palstajaon ja sen, miten portletit asettuvat sivulle. Voi sisältää myös kiinteitä elementtejä. Dynaaminen mallipohja, jonka voi ottaa käyttöön uutta sivustoa luodessa. Tärkeimmät sivut on luotu ja nimetty sivustoon valmiiksi. Vasemmassa laidassa oleva valikko, jonka avulla navigoidaan valitun sivun alasivuille. Väriteemalla voidaan kustamoida yksittäisestä sivusta tai sivustosta tietyn näköinen. Sisältää vain tyylimäärityksiä, eli värejä, fontteja ja taustakuvia.