Ohjeet graa­fi­selle suun­nit­te­li­jalle

Meitan tuot­tama WordPress ympä­ristö “Julk­kari” on koko­nai­suus, joka on suun­ni­teltu niin, että voimme yllä­pitää ison määrän sivus­toja turval­li­sesti ja niin että ne kestävät aikaa mahdol­li­simman pitkään. Graa­finen suun­ni­telma on usein kerta­luon­toinen päivitys. Tekni­sesti ympä­ristö kuitenkin päivittyy jatku­vasti ja ulkoasun pitää kestää rikkoon­tu­matta muutokset.

Meita ottaa huomat­ta­vasti enemmän vastuuta lopul­listen sivujen yllä­pi­dosta ja toimi­vuu­desta, jos verra­taan perin­teisin WordPress hosting palve­lun­tar­joa­jiin. Siksi meillä on myös omat sään­tömme.

Meitan WordPress sivus­tojen säännöt ulkoasu toteu­tuk­sessa ovat:

• Saavu­tet­ta­vuus
• Väri­pa­letti
• Kirjain­tyypit (Fontit)
• Ikonit ja kuvak­keet
• Skaa­lau­tu­vuus ja mobiili
• Näkymät
• Elementit / lohkot
• Muuta huomioi­tavaa

Saavu­tet­ta­vuus

Vaati­muk­sena on teeman osalta saavu­tet­ta­vuus­taso AA. Useim­miten graa­fi­sessa suun­nit­te­lussa kompas­tu­taan heti alla luetel­tuihin kohtiin. Meita ei voi hyväksyä ulkoasua, jossa joku näistä ei toteudu. Siinäkin tapauk­sessa, että sivuston tilaaja asiakas haluaa ehdot­to­masti jotain muuta. Ohjeista siis tilaajaa saavu­tet­ta­vuuden osalta ja tutustu itse AA ason saavu­tet­ta­vuus­vaa­ti­muk­siin. Alla on vain osa vaati­muk­sista, mutta nämä ovat ylei­simmät kompas­tus­kivet.

• Väri­kont­rasti on liian pieni tekstin ja taustan välillä. Kont­rasti pitää olla vähin­tään 4.5:1 suhteessa. Netistä löytyy työka­luja joilla voit tarkistaa asian. Teksti suoraan valo­kuvan tai yksi­tyis­koh­taisen grafiikan päällä melkein poik­keuk­setta rikkoo tätä vaati­musta.
• Merki­tyk­set­tömät linkit tarkoit­tavat link­kejä jotka vievät eteen­päin ilman tietoa kohteesta. Linkit pitää suun­ni­tella niin, että linkki kertoo itses­sään mitä linkin kohteessa on. Esim. “Lue lisää …”, “Avaa tästä” tai pelkkä nuoli ikoni eivät ole saavu­tet­tavia. Suun­nit­tele linkki esim. otsik­koon tai niin että linkin teksti kertoo kohteesta. “Lue lisää …” on semi OK, jos se on otsikon ja lyhen­nelmän yhtey­dessä, mutta esim. pelkän kuvan kanssa nounou.
  
  Kun loppu­käyt­täjä on jo sivus­tolla on väärin houku­tella häntä arvoi­tuk­silla eteen­päin. Tarjoa sen sijaan jokin kuvaus sisäl­löstä välit­tö­mästi. Tarjoa infor­maa­tiota älä tyhjiä mainoksia
  
  
• Otsi­kointi hierarkia puuttuu tai on sekava. Jokaisen sivun tai näkymän sisäl­löstä pitäisi löytyä looginen otsi­koin­ti­hie­rarkia. Sivulla pitää löytyä ainoas­taan yksi H1 tason otsikko ja sen alla loogi­sesti pienenpiä. Näin esim. ruudun­lu­ki­jalla pysyy kärryillä mikä on sivun pää tarkoitus tai sisältö.

Väri­pa­letti

Väri­pa­le­tissa on aina mukana musta, valkoinen, pääväri (primary) ja komple­ment­ti­väri (secon­dary). Näistä on lisäksi hyvä olla toinen tummuusaste, jotta ei jouduta saavu­tet­ta­vuus ongel­miin. Paletin maksimi kokoa ei ole muuten rajattu.

Doku­mentoi kehit­täjiä ja sisäl­lön­tuot­tajia varten värien käyt­tö­pe­ri­aat­teet esim. mitä kuuluu yhdis­tellä toisiin väreihin ja mitä yhdis­telmiä ei saa käyttää. Pyri tässä kuitenkin yksin­ker­tai­suu­teen.

Nimeä värit loogi­sesti. WordPres­sissä palet­ti­värit nime­tään samoilla nimillä. Muista saavu­tet­ta­vuus­kont­rasti 4.5:1. Eli testaa kaikki väriyh­dis­telmät käyt­tä­mällä ao. väriä taus­ta­vä­rinä, jolloin joko musta tai valkoinen teksti värin päällä saavuttaa vähim­mäis­kont­rastin. Voit testata kont­rastia esim. täällä https://webaim.org/resources/contrastchecker/

Kirja­sin­tyypit (Fontit)

Kirja­sin­tyy­peissä on hyvä ottaa huomioon alla luetellut seikat. Huono kirja­sin­tyyp­pien valinta hidastaa sivun­la­tausta ja aiheuttaa monen­laista epämu­ka­vuutta sivua ladat­taessa.

• Meita yllä­pitää kirja­simet omalla palve­li­mel­laan. Näin ollen tiedos­toja ei ladata kolmannen osapuolen lähteistä sivun­la­tauksen yhtey­dessä eikä synny ongelmia mm. GDPR vaati­musten kanssa. Tämä tarkoittaa sitä, että käytet­tä­vistä Font­ti­tie­dos­toista on toimi­tet­tava kaikki tarvit­tavat tiedostot Meitalle. Usein tämä myös rajoittaa font­ti­va­linnan “Ei maksul­li­siin” font­teihin. Emme voi esim. asentaa JavaSc­riptiä joka tarkistaa fontin lisenssin ladat­taessa sivua (esim. Adobe TypeKit Fontit). Ilmaiset Google fontit esim. käyvät, koska ne voidaan ladata ilman eril­listä lisen­sointia ja yllä­pitää Meitan palve­li­milla.
• Pystymme käyt­tä­mään ainoas­taan web font­teja. Toisin sanoen font­ti­tie­dos­toja joista löytyy valmiiksi verk­ko­si­vuilla käytet­tävä tiedos­to­muoto.
• Listaa kaikki käytet­tävät fontin paksuudet mitä tarvi­taan. Monissa Fonteissa on kymmeniä eri paksuuksia ja muotoja, asen­namme vain ne mitä tarvi­taan. Suosit­te­lemme Variable fontti tiedos­toja joissa eri muodot kulkevat samassa tiedos­tossa, mutta muutkin käyvät. Älä poimi fontin tyyli­ver­siota suoraan esim. Adobe XD, tai Figma ohjel­masta vaan sieltä mistä font­ti­tie­dosto lopulta lada­taan, samalla huomaat näyt­tääkö fontti samalta käyt­tä­mäs­säsi suun­nit­te­luoh­jel­massa kuin verkossa.
• Suosit­te­lemme käyt­tä­mään maksi­mis­saan kahta täysin eri fonttia. Esim. Otsikko fontti ja leipä­teksti fontti. Useamman fontin käyttö sekä lisää sivun kokoa että myös sisäl­lön­tuot­ta­jien hämmen­nystä käyt­tö­ta­voista.
• Fontin on tuet­tava kaikkia sivus­tolla käytet­täviä kieliä. Eli kun esim. venäjän kieli on käytössä sama fontti pitäisi tukea lati­na­laisten aakkosten lisäksi kyril­lisiä. Tästä voidaan poik­keus­ta­pauk­sissa joustaa, kun kieliä on paljon, jolloin muille kielille lada­taan eri font­ti­tie­dostot. Taiteel­linen peruste ei tässä kohtaa riitä.
• Fontin base­line on oltava pysty­suun­nassa mahdol­li­simman keskellä. Esim. suosittu “Anek Deva­na­gari” fontin base­line on erityisen korkealla, jolloin kaik­kien painik­keiden teksti jää painik­keen alareu­naan eikä sijoitu pysty­sun­nassa keskelle. Tätä ominai­suutta ei vält­tä­mättä graa­fisen suun­nit­telun ohjel­mis­toilla huomaa. Vaih­toeh­tona on käyttää painik­keilla vaih­toeh­toista fonttia.
• Suosit­te­lemme määrit­te­le­mään font­tien koko käyt­täen suhteel­lisia REM tai EM arvoja. Eli koko on määri­telty suhteessa muihin element­tiin. REM Tarkoittaa, että sivun tyylien hierar­kiassa ensim­mäi­senä on esim. leipä­tekstin koko vaikka 16px ja tämä siis on 1rem (2rem on silloin 32px). Tämä järjes­telmä auttaa skaa­lauson­gel­missa lait­teiden kesken.

Ikonit ja kuvak­keet

Näillä sään­nöillä sivuston ikonit ja graa­fiset elementit säilyt­tävät tark­kuu­tensa kaikilla reso­luu­tioilla sekä mahdol­lis­te­taan sisäl­lön­tuot­ta­jille mm. ikonien värin vaihto ohjel­mal­li­sesti ilman kenen­kään apua.

Julk­ka­rissa käytettän Iconify (https://iconify.design/) ikoni­kir­jastoa, josta löytyy valtava määrä eril­laisia ikoni­kir­jas­toja. Parasta olisi jos kaikki graa­fi­sessa suun­ni­tel­massa käytet­tävät ikonit löytyi­sivät tuosta kirjas­tosta. Kun valitset ikonia Iconify kirjas­tosta muista kirjoittaa ylös mitä ikonia käytit. Iconify palve­lussa ikonit on nimetty muodossa “set:icon”, jossa “set” on ikoni­ryhmä ja “icon” on ikonin nimi ryhmässä. Tämän tiedon Meita tarvitsee sivuston ulkoasun toteu­tuk­sessa.

Muut kuin Iconify kuvak­keet pitää toimittaa Meitalle SVG tiedosto formaa­tissa. Myös kaikki muutkin suun­ni­tel­massa käytetyt graa­fiset elementit kuuluu toimittaa SVG formaa­tissa. Jos käytös­säsi oleva tiedosto ei ole alun­perin vekto­ri­gra­fiikkaa, niin toimita silloin alku­pe­räinen tiedosto mahdol­li­simman korkealla reso­luu­tiolla. Älä muuta bitti­karttaa esim. JPG tiedostoa SVG formaat­tiin tästä ei ole mitään hyötyä.

• Sivuston logo pitää olla toimi­tettu SVG formaa­tissa ilman suoja-alueita. Suoja-alueet on määri­tel­tävä, jotta niitä voidaan noudattaa, mutta ne eivät saa sisältyä itse logoon.
• Sivuston selain ikoni (favicon) on toimi­tet­tava SVG tai PNG tiedos­tona ja on oltava kool­taan vähin­tään 512 x 512 pikseliä. Ikoni on oltava väreil­tään sellainen, että se toimii yhtä­aikaa sekä tummalla, että vaalealla taus­talla. Eli toimii käyt­täjän käyt­tö­jär­jes­telmän dark ja light modessa. Ikonin pitää olla yhtä leveä kuin korkeakin.

Skaa­lau­tu­vuus ja mobiili

Graa­fi­sessa suun­ni­tel­massa on esitet­tävä ja otet­tava huomioon kaikki selain­re­so­luu­tiot. WordPress teema on raken­nettu jous­ta­vaksi, niin että sama sisältö ja rakenne toimii sekä mobii­li­re­so­luu­tioilla, että työpöy­tä­ver­siona. Mobiili ja työpöy­tä­ver­sioiden erot on toteu­tettu ainoas­taan CSS:llä. Älä siis suun­nit­tele mobii­li­nä­kymää raken­teel­li­sesti sellai­seksi, ettei sitä voida samalla raken­teella esittää. Esimerk­kinä, jos työpöy­tä­ver­siossa teksti on laatikko elementin sisällä, niin älä suun­nit­tele tekstiä mobii­li­ver­siossa laatikon ulko­puo­lelle. Kysy jos olet epävarma.

Teema sisältää ensi­si­jai­sesti yhden “break­point” leveyden jonka alituk­sesta sivuston pääna­vi­gaatio ja useat muut elementit vaih­tavat muotonsa mobii­li­ver­sioksi. Oletuk­sena tämä leveys on 600px, mutta sitä voidaan poik­keus­ta­pauk­sissa säätää joil­lekin elemen­teille. Sivuston sisältö ei tässä kohtaa muutu vaan vaihtaa ulkoa­sul­taan erilai­seksi.

Tämä yksi “break­point” raja siis tarkoittaa sitä, että graa­fi­sessa suun­ni­tel­massa on oltava vähin­tään kolme eri esitys­kuvaa skaa­lau­tu­vuu­desta. Kun suun­ni­tel­masi on laaja, voit toteuttaa kaikki näkymät yhdellä reso­luu­tiolla kunhan nämä kolme on mukana ja näistä kolmesta pystyy päät­te­le­mään miten muut näkymät skaa­lautuu. Skaa­lau­tu­vuutta ei tarvitse kaikilla sisäl­tö­ele­men­teillä esittää, vaan tärkeintä on sivun ylätun­nis­teen (logo, navi­gaatio …) skaa­lau­tu­minen. Näistä kolmesta suun­ni­tel­masta tarvi­taan vähin­tään yksi esitys­kuva.

Mobiili versio (Esitys­kuva)

Tätä käyte­tään kaikilla reso­luu­tioilla, jotka ovat alle “break­point” leveyden 600px. Navi­gaatio on tässä piilo­tet­tuna ja näkyy niin­kut­sut­tuna hampu­ri­lai­si­ko­nina, jota klik­kaa­malla mobi­lii­na­vi­gaatio avautuu. Kaikki mahdol­liset sisäl­tö­ele­mentit myös rivit­tyvät pääl­lek­käin.

Työpöytä versio (Esitys­kuva)

Tämä on 1px leveämpi kuin “break­point” leveys. Eli juuri se reso­luutio jolla mini­mis­sään aloi­te­taan työpöy­tä­ver­sion käyttö. Tämä usein suun­nit­te­li­joilta unohtuu ja aiheuttaa käyt­tö­kel­vo­tonta jälkeä hyvin kapeilla, mutta ei kuiten­kaan mobiili reso­luu­tioilla. Tämä on kapein reso­luutio, jolla navi­gaa­tiona ei enää ole mobii­li­na­vi­gaatio. Huomaa, että ylätun­nis­teessa elementit rivit­tyvät.

Täysi leveys (Esitys­kuvat)

1920px tai leveämpi, jolla raja­taan mikä on sisällön maksi­mi­le­veys. Sivu näyttää myös kaamealta, jos se on suun­ni­teltu skaa­lau­tu­maan ääret­tö­myyk­siin levey­del­tään. Usein sivun maksi­mi­le­veys suun­ni­tel­laan johonkin 1024px — 1400px välille.

Kuvaa suun­ni­tel­massa myös mahdol­liset kirjau­tu­mis­linkit ja sivus­to­ha­ku­toi­minto, jos ne kuuluvat navi­gaa­tion yhtey­teen.

Navi­gaa­tiot

Sivu­tolla on yksi “Pää” navi­gaatio, joka sijaitsee jokaisen sivun ylätun­nis­teessa. Tämä pääna­vi­gaatio muuttuu mobii­li­na­vi­gaa­tioksi tarpeeksi kapealla reso­luu­tiolla katsot­taessa. Mobii­li­na­vi­gaa­tion sisältö ja link­kien järjestys on siis tarkal­leen sama kuin mitä normaa­lissa pääna­vi­gaa­tiossa. Älä siis suun­ni­tele mobii­li­na­vi­gaa­tioon mitään mitä ei pääna­vi­gaa­tios­ta­kaan löydy. Sama link­ki­hie­rarkia toteutuu kummas­sakin. Jos tarvitset useampia navi­gaa­tioita sivus­tolla, niin suun­nit­tele ne toimi­vaksi sisällön yhtey­dessä kaikilla reso­luu­tioilla.

Pää navi­gaatio on tekni­sesti lista, jossa on link­kejä. Linkeille voidaan valita tekstin lisäksi ikoneita, mutta ei muuta sisältöä. Huom! mega­menun suun­nit­te­lijat. Älä suun­nit­tele merki­tyk­sel­listä kuva tai teks­ti­si­sältöä pääna­vi­gaa­tioon, sitä ei voida sinne tekni­sistä eikä saavu­tet­ta­vuus­syistä laittaa. Pääna­vi­gaatio on ruudun­lu­ki­jalle ihan tietty erityinen elementti. “Mega menu” tyyp­pinen navi­gaatio voidaan kyllä tehdä, mutta vain navi­gaa­tion linkeistä.

Mobii­li­na­vi­gaa­tion tyylejä voidaan hieman muuttaa mutta tälle on rajoi­tuksia. Värejä voidaan mobii­li­na­vi­gaa­tiossa myös muuttaa tietyin rajoi­tuksin, mutta normaa­listi ne periy­tyvät pääna­vi­gaa­tiosta.

Saavu­tet­ta­vuus ja mobii­li­käyttö syistä kaikille aliva­li­koille pide­tään näky­villä ikoni, josta aliva­likko avautuu.

Voit toki suun­ni­tella navi­gaa­tio­va­li­koita vaikka kuinka monta, ne voidaan liittää sitten sisällön sekaan, mutta eivät näy mobiili navi­gaa­tiossa.

Mega­menu

Meitan teemassa tulee mukana yhden tyyp­pinen Mega­menu ratkaisu. Logiikka toimii seuraavan listan mukaan:

• Päätason linkit ovat aina näky­villä sivus­tolla
  • 2 taso näyte­tään, kun päätason linkin päälle siir­re­tään hiiri. 2 tason yksit­täiset linkit muodos­tavat pysty­sa­rak­keet mega­me­nuun.
    • 3- tason linkit näyte­tään sarak­kessa oman 2‑tason linkin alapuo­lella.

(Kuva tulee myöhemmin)

Näkymät

Suun­nit­tele vähin­tään alla luetel­tujen näky­mien tyyli ja aset­telut. Nämä ovat näkymiä mitkä ovat sivus­tolla käytössä aina riip­pu­matta siitä mikä on sivuston tarkoitus tai aihe.

Haku­tu­lokset

Näkymä joka listaa sivus­to­haun tulokset. Tälle sivulle päädy­tään myös muualta sivuston sisältä, kun käyte­tään haku­toi­mintoa. Tällä sivulla on hyvä olla myös isompi haku kenttä, vaikka se olisikin pienenä upotettu esim. navi­gaa­tioon.

Etusivu

Etusivu on erikois­sivu joka toimii koko sivuston ensim­mäi­senä sivuna

Sivu

“Sivu” on perus sisäl­tö­sivun näkymä, kuten esim. “Yhteys­tiedot” tai “yrityksen historia”. Tätä oletuk­sena käyte­tään aina, kun mikään muu näkymä ei sovellu.

Artik­keli

Artik­keli näkymä on tarkoi­tettu näyt­tä­mään yksi “Uutinen” tai esim. “blogi” artik­keli. Näillä on ominai­suu­tena mm. että ne voivat kuulua kate­go­rioihin ja niihin voidaan liittää avain­sa­noja

Kate­goria tai Avain­sana artik­ke­leiden listaus

Listaus näkymä. Tämä näkymä listaa kaikki johonkin tiet­tyyn kate­go­riaan kuuluvat artik­kelit. Sama näkymä näyte­tään kun käyt­täjä klikkaa avain­sanaa sivus­tolla.

Elementit / lohkot

WordPress sisältö raken­ne­taan lohkoista ja niitä on paljon. Lohkot myös näyt­tävät eriltä eri asetuk­silla, joten niitä enempää luet­te­le­matta tässä on muutamia yhteisiä asioita, joita graa­fi­sessa suun­nit­te­lussa on hyvä ottaa huomioon. Viime kädessä Meita ja sisäl­lön­tuot­tajat päät­tävät millä lohkoilla mikäkin koko­nai­suus luodaan.

Tee graa­finen suun­ni­telma kaikille taval­li­sessa teks­ti­do­ku­men­tissa käyte­tyille elemen­teille. Kuten tekisit esimer­kiksi Word malli­pohjaa. Näiden element­tien tyyli sitten toistuu koko sivus­tolla. Suun­nit­tele esimerk­kinä ainakin:

• Otsik­ko­tasot H1 — H6
• Taval­linen teksti kappale
• Kuvitus kuvien käyttö teks­ti­kap­pa­leiden yhtey­dessä
• Nume­roi­mat­tomat ja nume­roidut listat
• Teks­ti­linkit tekstin joukossa, niiden värit ja huomio­värit
• Lainaus, siis lainaus toisesta sisäl­löstä tai sitaatti
• Painik­keet, eril­laiset CTA nappulat
• Ylei­simmät lomake kentät ja nappulat
• Taulukko otsake rivillä
• Yhteys­tieto nosto, alue jossa henkilön yhteys­tiedot

Muuta huomioi­tavaa

Graa­fisen suun­nit­te­lijan on myös hyvä huomioida muita asioita.

Meita tarjoaa tuen koko WordPress sivus­tolle mukaan lukien käytetyt lisä­osat ja teeman, jollei muuta sovita. Tämän tuen on tarkoitus jatkua senkin jälkeen, kun alku­pe­räiset suun­nit­te­lija ovat jättä­neet työnsä. Esimer­kiksi monia kamppis tai hanke sivus­toja joudu­taan rahoit­ta­jien vaati­muk­sesta yllä­pi­tä­mään ja tieto­tur­va­päi­vit­tä­mään vuosia sen jälkeen kun asia ei ole enää ajan­koh­tainen.

Meitan tuki riippuu mm. seuraa­vista seikoista:

• Sivus­tolla käyte­tään Meitan valmis­tamaa teemaa. Uusin versio tästä tukee täysin WordPressin omaa Guten­berg lohkoe­di­toria. Teema on raken­nettu ensi­si­jai­sesti tuke­maan WordPressin kehi­tystä ja mahdol­lis­ta­maan ulkoasun “tuunaus”. Teemassa on hyvin vähän itses­sään varsi­naista ulkoasua, se ei ole tietyn näköinen. Jos WordPress on tuttu, niin tiedät että koko sivuston ulkoasua pääsee hallin­ta­puo­lelta jo oletuk­sena muok­kaa­maan. Teemasta luodaan sivus­tolle aina lapsi­teema, jossa pide­tään kaikki sivus­to­koh­taiset yksi­tyis­kohdat.
• Sivus­tolle ei ole asen­nettu mitään site builder tyyp­pistä lisä­osaa tai teemaa kuten esim. Beaver­builder, Divi, Elementor jne. Joten älä suun­nit­tele sivustoa edel­lyt­täen jotain näistä. Nämä kaikki aiheut­tavat lukuisia ongelmia sivuston ylläi­dossa pitkällä tähtäi­mellä ja vähin­täänkin lisäävät riip­pu­vuuden jolloin päivi­tyksiä ei voida ajaa ennen­kuin lisä­osan toimit­taja tukee uusinta WordPress versiota. Yleensä myös mene­te­tään mahdol­li­suus vaikuttaa saavu­tet­ta­vuus vikoihin. Page builder tyyp­piset lisä­osat olivat tarpeel­linen osa aikana ennen WordPressin Guten­berg lohkoe­di­toria.
• Kaikki käytetyt lisä­osat ovat Meitan hyväk­symiä. Ulkoa­suun tarvit­ta­viin erikoi­suuk­siin Meita koodaa poik­keukset lapsi­tee­maan. Meitalta voi myös tilata erik­seen mitä tahansa lisä­osia ja tällöin asia suun­ni­tel­laan erik­seen.

HUOM! Tarkista sopi­muk­ses­tasi tuen katta­vuus

Loppu­huo­mautus

Älä ota näitä ohjeita liian vaka­vasti Jumalan sanana. Paras ratkaisu erikoi­siin tilan­tei­siin on ratkaista ne yhdessä. Eli jos olet epävarma voidaanko joku toteuttaa, niin ota yhteyttä.

Tämä Ohjeet sivusto itse ei ole täydel­linen vaan ennem­minkin kuin suutarin lasten kengät.