Verkkosivujen suunnittelussa etusivun pääkuva (header-kuva) on tärkeä osa sivuston visuaalisuutta. Sen valintaan liittyy kuitenkin kokorajoituksia, jotka on syytä ottaa huomioon. Kyseessä on verkkosivuja suunnitteleville perusasia, mutta silti siihen törmään työssäni todella usein. Eli yritän nyt selvittää kokorajoitukset mahdollisimman perusteellisesti muutaman esimerkin avulla.
Suunnitelma
Asiakkailtamme saamme useasti valmista suunnitelmaa verkkosivujen visuaalisesta ilmeestä. Tyypillisesti esimerkiksi PDF-dokumentin, jossa on verkkosivun visuaalinen suunnitelma ja mukana tarvittava kuva. Lisäksi asiakas kertoo, että haluaisi myös pääkuvan alla olevat kolme tuotelaatikkoa näkymään heti sivulle tultaessa – eli ei mitään pelkkää isoa taustakuvaa.
Näyttää nopeasti katsottuna hyvältä, mutta kokeneempi verkkosivujen toteuttaja huomaa heti ongelmat liittyen taustakuvaan. Sommittelussa tulee ongelmia normaaleilla näytöillä, sillä näkyvä alue on vaakasuunnassa leveä. Suunnittelussa pitäisi aina huomioida miltä sivusto näyttää näytöllä eikä pelkästään “paperilla”.
Esimerkkinä käyttämäni suunnitelma on toimiva pystymallin A4-sivulla, mutta tavallisella näytöllä se ei toimikaan halutulla tavalla. Seuraavassa kuvassa on punaisella rajattu alue, joka näkyy sivun auetessa.
Tuskin asiakas halusi, että sivustosta näkyy pelkkä pääkuva, joka sekin on leikkaantunut toisen henkilön leuan kohdalta. Jotain pitäisi tehdä asian korjaamiseksi.
Kompromissiratkaisuja
Yksi vaihtoehto on pysyä alkuperäisen suunnitelman kuvakorkeudessa, mutta kasvattaa taustakuvaa peittämään koko alue. Tällöin näkyvässä alueessa näkyy alkuperäisen suunnitelman mukaiset asiat eikä pelkkä pääkuva.
Ongelmana on kuvan leikkaantuminen, joka tässä tapauksessa se tarkoittaa, että henkilöiden päät eivät mahdu kokonaan kuvaan. Tällainen leikkaantuminen häiritsee erityisesti kuvissa, joissa on ihminen tai eläin, mutta vaikkapa maisemakuvissa se voi toimiakin.
Mikäli kuvan haluaa näkymään kokonaan ja silti näyttää aloitusnäkymässä myös riittävästi muuta sisältöä, on lopputulos seuraava.
Käyttämättömät alueet kuvan reunoilla on visuaalisesti huono ratkaisu, ellei kuvassa ole vaikkapa musta tausta, jota voisi taustavärillä jatkaa. Tällaisella taustakuvalla se ei ainakaan ole edes vaihtoehto, sillä tuo näyttää kummalliselta.
Yksi yleisesti käytetty vaihtoehto on tehdä koko sivustosta kapeampi, eli näyttää sisältöä vain kapeammalla alueella ja laittaa reunoille joku sopiva taustaväri.
Tällaisella kapeapalstaisella sivustolla menetetään visuaalisia mahdollisuuksia tehdä sivusta vaikuttavamman näköiset. Lisäksi tässäkin esimerkissä minun piti pienentää kolmea tuotelaatikkoa pääkuvan alapuolella, jotta ne mahtuisivat rinnakkain kapeammalle alueelle.
Paras ratkaisu
Mikä on siis paras ratkaisu? Huomioi asia jo taustakuvaa valitessa. Valitse sellainen taustakuva, joka toimii myös leveässä sommittelussa. Esimerkkikuvassa tärkeää olisi saada molempien henkilöiden päät mahtumaan kuvaan, joten taustakuvaksi pitää valita sellainen, jossa reunoilla on riittävästi “täytettä”. Eli henkilöiden päät eivät saa olla kuvassa liian isolla, vaan pitää osata hahmottaa kuva vaakasuunnassa leveälle alueelle.
Tällaisesta kuvasta voi tehdä leveällekin näytölle toimivan toteutuksen. Myös optimointi mobiilinäytölle onnistuu mainioisti.
Mikäli asiakkaalla ei ole ollut kuvasta parempaa versiota, eikä muuta kuvaa ole haluttu käyttää, niin mahdollista on myös photoshopata lisää reuna-alueita. Tämä ollaan tehty useille asiakkaille ja lopputulos on ollut hyvä. Aikaahan se vähän vie enemmän, joten ehdottomasti helpointa olisi valita jo alkuun oikeanlainen kuva.