Header eli ylätunniste on verkkosivuston yläreunassa sijaitseva pysyvä osio, joka näkyy useimmiten kaikilla sivuston sivuilla. Se on käyttäjän ensimmäinen kontaktipiste ja tärkein navigointityökalu. Header sisältää tyypillisesti yrityksen logon, päävalikon, mahdollisesti hakutoiminnon ja call-to-action -elementin kuten “Ota yhteyttä” -painikkeen.
Headerin peruselementit
Vasemmassa reunassa on lähes aina yrityksen logo, joka toimii myös linkkinä etusivulle — tämä on niin vahva web-konventio, että käyttäjät odottavat sitä automaattisesti. Logon oikealla puolella tai keskellä on päänavigaatio eli linkit tärkeimpiin sivuihin: Palvelut, Referenssit, Tietoa meistä, Blogi, Yhteystiedot.
Oikeassa reunassa on usein toissijaisia toimintoja: hakukenttä, kielivalinta, kirjautumispainike tai korostettu CTA-painike, joka erottuu värillisesti ja houkuttaa toimintaan. Pk-yrityksen sivustolla tämä on usein “Pyydä tarjous” tai “Ota yhteyttä” -painike.
Headerin korkeus vaihtelee, mutta se on tyypillisesti noin 60–100 pikseliä desktop-näkymässä. Liian korkea header vie arvokasta tilaa sisällöltä, liian matala voi näyttää ahtaalta ja tehdä navigoinnista hankalaa.
Sticky vs. staattinen header
Staattinen header pysyy sivun yläosassa ja katoaa näkyvistä, kun käyttäjä vierittää sivua alaspäin. Sticky header (kiinnittyvä ylätunniste) sen sijaan pysyy näytön yläreunassa myös vierityksen aikana. Sticky on yleistynyt, koska se parantaa käytettävyyttä — navigaatio on aina käytettävissä ilman että täytyy vierittää takaisin ylös.
Sticky headerilla on kuitenkin haittapuolensa: se vie pysyvästi tilaa näytöltä, mikä voi olla ongelmallista pienillä näytöillä. Ratkaisu on usein kompromissi: sticky header, joka pienenee vierityksen jälkeen (esim. logo ja navigaatio pienemmällä) tai mobiilissa sticky vain tietyissä tilanteissa.
Pk-yrityksen sivustolla sticky header on suositeltava, jos sivusto on pitkä ja navigointia tarvitaan usein. Lyhyellä, yhden sivun landing pagella staattinen riittää.
Responsiivinen header
Desktop-näkymän horisontaalinen navigaatio ei mahdu kapean älypuhelimen näytölle. Mobiilinäkymässä header muuttuu tyypillisesti kompaktimmaksi: logo pysyy vasemmalla, mutta navigaatiovalikko piilotetaan “hamburger-menun” (☰) taakse. Nappia painamalla avautuu koko näytön tai osan peittävä valikko.
Hyvä käytäntö on pitää CTA-painike näkyvissä myös mobiiliheaderissa — se on usein tärkein yksittäinen toiminto. “Soita meille” -painike voi olla suora puhelu-linkki, joka toimii älypuhelimessa yhdellä napauttuksella.
Headerin rooli brändäyksessä
Header on jokaisella sivulla läsnä, joten se on kriittinen brändin näkyvyyden kannalta. Johdonmukainen, ammattimaisesti suunniteltu header rakentaa luotettavuutta ja tunnistettavuutta. Logo, värimaailma ja typografia luovat yhtenäisen ilmeen, joka vahvistaa brändiä jokaisella sivukäynnillä.
Epäselvä, epäjohdonmukainen tai huonosti toimiva header sen sijaan heikentää luottamusta. Jos käyttäjä ei löydä etsimäänsä headerista tai navigaatio on sekava, hän todennäköisesti lähtee kilpailijan sivuille.
Yhteenveto
Header on verkkosivuston ankkuripiste — pysyvä, joka ohjaa käyttäjää läpi sivuston. Se on sekä navigointityökalu että brändin edustaja. Pk-yritykselle hyvin suunniteltu header tarkoittaa helpompaa käyttökokemusta, vahvempaa brändiä ja parempaa konversiota. Header on pieni yksityiskohta, joka vaikuttaa suuresti — se ansaitsee huolellisen suunnittelun ja toteutuksen.