CMS-suunnitteluopas – Osa 4: Ilmeen tekninen toteutus

Verkkopalvelun ilmeen voi suunnitella useassa eri ohjelmassa. Osa suunnittelijoista suosii vektoripohjaisia ohjelmia, kuten Illustratoria tai InDesignia, osa käyttää kuvankäsittelyohjelmia, kuten Photoshop. Kaikista näistä voi tuottaa nettikelpoisia kuvia ja muita elementtejä, mutta usein vektoriohjelmissa 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ä.

Tämä artikkeli on osa sarjaa, jossa esittelen vinkkejä kuinka voit suunnitella nettisivuston graafisen ilmeen julkaisujärjestelmän päälle.

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ä (tai kuvassa) on 800 pikseliä leveyssuunnassa ja 600 pikseliä korkeussuunnassa. Resoluution ensimmäinen luku on aina leveys ja jälkimmäinen korkeus.

Tähän liittyen, printtitoteutuksessa tärkeät painoresoluutiot eivät päde verkossa. Kuvan resoluutio voi olla esimerkiksi 300, 150 tai 72 ppi, mutta sillä ei ole mitään merkitystä sen kanssa, minkä kokoisina se näkyy nettisivuilla. Ainoa tärkeä tieto on kuvan pikselimitat.

Eli kuvia ei tarvitse muuttaa 72 dpi:n resoluutioon, jos ne menevät verkkosivuille.

Olin itsekin tämän harhaluulon vallassa vielä tähän asti, mutta itseäni fiksummat edesmenneen Pingstate.nu:n keskustelupalstalaiset onnistuivat kääntämään pääni.

Mikä on verkkopalvelun sopiva leveys ja korkeus?

Modernit verkkopalvelut suunnitellaan 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ätä tekniikkaa nimitetään responsiivuudeksi ja siitä voi lukea lisää myöhemmässä artikkelissa.

Maailmalla on tällä hetkellä trendinä esittää yksi kokonainen verkkosivusto yhdellä ainoalla sivulla, jolloin sisältöä voi lukea liu’uttamalla pystyvierityspalkkia. Tämä tekniikka toimii, jos sisältö ei ole liian raskasta luettavaa – isot kirjainkoot, pienet tekstipalkit ja havainnolliset kuvat auttavat tässä tapauksessa. Kannattaa kuitenkin yrittää sisällyttää ydinasia ensimmäiseen näyttöön ylimmäksi, koska sen perusteella kävijä päättää, jatkaako hän lukemista.

Jatka lukemista seuraan artikkeliin: Osa 5: Kuvat

Kirjoita kommentti