Ilmeen tekninen toteutus

Verkkopalvelun ilmeen voi suunnitella useassa eri ohjelmassa. Osa suunnittelijoista suosii vektoripohjaisia ohjelmia, kuten Illustratoria, Freehandia tai InDesignia, osa käyttää kuvankäsittelyohjelmia, kuten Photoshop. Kaikista näistä voi tuottaa nettikelpoisia kuvia ja muita elementtejä. Vektoripohjaisissa ohjelmissa on hyvänä puolena se, että sen tuottamia tiedostomuotoja voi käyttää myös Flashissa. Vaikka vektoriohjelmissakin voi tallentaa nettikelpoista materiaalia, usein kuitenkin lopullinen ilme tai osia siitä siirretään vasta kuvankäsittelyohjelman kautta verkkoon. Syynä tähän on kuvankäsittelyohjelmien parempi kyky näyttää suunnitellun verkkopalvelun ilme sellaisena kuin se lopullisessa muodossaan on netissä - eli pikselin tarkkuudella. Jos suunnittelija tekee ilmeen valmiiksi kuvankäsittelyohjelmassa, se yleensä pienentää sivuston toteuttamisen kustannuksia, koska siirtoa esimerkiksi vektoriohjelmista ei tarvitse tehdä.

Käytettävät mittayksiköt

Verkkopalveluiden leveyttä ja korkeutta ilmaistaan pikseleillä (eng. – pixels), joka bittikarttagraafikassa on kuvan pienin yksittäinen osa. Pikselillä ei ole kiinteää fyysistä kokoa, vaan kuvatiedoston koko näytöllä riippuu muun muassa kuvatiedoston sisältämien pikselien määrästä, näyttölaitteen koosta sekä näytön resoluutiosta. Resoluutio tarkoittaa näytön pikselien kokonaismäärää. Esimerkiksi resoluutio 800 x 600 tarkoittaa, että näytössä on 800 pikseliä leveyssuunnassa ja 600 pikseliä korkeussuunnassa. Resoluution ensimmäinen luku on aina leveys ja jälkimmäinen korkeus.

Resoluutiolla on myös toinen merkitys, joka vaikuttaa verkkoon tuotettavien kuvien laatuun. Näyttöjen optimaalinen erottelukyky on 72 dpi, joten kaikki kuvat on muutettava tähän arvoon ennen viemistä verkkopalveluun. Isompi tarkkuus ei tuo merkittävästi laatua kuvan tarkkuuteen – toisin kuin painotuotteissa. Lisäksi verkossa on hyvin tärkeätä optimoida kuvat viemään mahdollisimman vähän tilaa, jotta niiden latausajat olisivat pieniä.

Mikä on verkkopalvelun sopiva leveys ja korkeus?

Suurin osa verkossa olevista sivustoista pohjautuu johonkin tiettyyn maksimileveyteen. Maksimileveys taas perustuu käyttäjien sen hetkiseen näyttöjen keskileveyteen. Tällä hetkellä tämä keskileveys on 1024 pikseliä (noin 990 pikseliä, kun otetaan huomioon selaimen reunat), vaikkakin se on suurenemaan päin leveiden näyttöjen yleistymisen vuoksi. Keskileveys kuitenkin auttaa suunnittelemaan sivuston niin, että mahdollisimman moni käyttäjä näkee sen ilman vaakavierityspalkkeja, jotka ilmaantuvat selaimeen, kun sisältö on leveämpää kuin selaimen leveys. Sivuston voi tietenkin suunnitella myös kapeammaksi. Usein portaalisivustoissa on käytetty kaikki mahdollinen leveys hyväksi ja pienemmissä sivustoissa, joissa ei ole niin paljon sisältöä, voi leveys olla esimerkiksi 800 pikseliä. Tämän sivuston leveys on 900 pikseliä.

Joissakin tapauksissa sivusto voidaan määritellä myös skaalautumaan selainikkunan leveyden mukaan. Tällöin sisältöosuuden leveyttä ei voi etukäteen tietää ja siinä olevat elementit pitää testata useilla leveyksillä. Tämä tekniikka sopii runsasta tekstipohjaista materiaalia sisältävään sivustoon.

Korkeus (tai pituus) kannattaa varsinkin sivuston etusivulla pyrkiä pitämään maksimissaan yhden näytön korkuisena. Se voi olla esimerkiksi 600-800 pikseliä tai vieläkin pienempi (kannettavien näytöt). Alasivuilla korkeutta voi olla enemmänkin, mutta 2-3 näytön ylimenevää sisältöä kannattaa jo alkaa pätkimään pienempiin osiin.

– Torsti Niiranen