WWW-sivujen suunnittelu ja toteutus on moniosainen tehtävä. Pelkän sisällön tuottamisen lisäksi on otettava huomioon myös sivujen ulkoasu ja käytettävyys. Jos sivut ovat vaikealukuiset ja epäloogisesti järjestellyt, ei niillä kukaan käyttäjä viihdy pitkään, vaikka sisältö olisikin silkkaa asiaa. Tämän dokumentin tarkoituksena on kertoa seikkoja, joita tulisi ottaa huomioon sivuja rakennellessa. Näitä seikkoja ovat Linjaman ja Sirolan (1996, 120) mukaan

• HTML-kielen rajoitukset
• kuvaruudun koko ja muoto
• dokumentin tiedostojen koko
• valmiiden elementtien käyttö ja niiden käyttöoikeuden varmistaminen

Sivujen toteuttamisen lisäksi vähintään yhtä tärkeä asia on sivujen ylläpito ja päivittäminen. Voisi hyvin lähteä siitä periaatteesta, että kun sivut on julkaistu, on samalla sitouduttu myös niiden ylläpitoon. Mitä kertoo firmasta esimerkiksi se, että sivulla on kaksi vuotta vanha hinnasto, joka ei enää pidä ollenkaan paikkaansa?

Jukka Korpela esittelee seuraavan ryhmittelyn web-julkaisemisessa tarvittaviksi teknisiksi valmiuksiksi:

• Webin käyttökokemus. Kukaan tuskin pystyy kirjoittamaan kirjaa, ellei itse ole ensin lukenut jotakin kirjaa, mieluiten useita. Samalla tavoin tarvitaan kokemusta Webin käytöstä dokumenttien katselemiseen, lukemiseen ja etsimiseen, ennen kuin kannattaa ruveta Web-julkaisijaksi. Erityisesti on syytä korostaa hakuohjelmien merkitystä, sillä niiden käyttökokemus auttaa tekemään omat dokumentit sellaisiksi, että ne on helpompi löytää hakuohjelmilla.
• Webin keskeisten toimintaperiaatteiden ymmärtäminen. Tämä ei tarkoita syvällistä tietämystä Webin tekniikasta vaan eräiden perusperiaatteiden tuntemista: Web-katseluohjelman ja Web-palvelimen ero, katseluohjelmien moninaisuus ja edellä mainittu rakenteellinen ajattelutapa.
• HTML-kielen perusteiden tuntemus. Vaikka tämä ei aina olekaan ehdottoman välttämätöntä, se on erittäin suositeltavaa. Mitä vaativampia dokumentteja halutaan tehdä, sitä tärkeämpää on tuntea HTML-kielen periaatteet ja myös sen yksityiskohtia.
• Jonkin tekstinkäsittelyohjelman, editorin tai muun sopivan ohjelman käyttötaito. Web-julkaisemiseen voidaan käyttää monia eri ohjelmia. On olemassa myös erityisiä Web-julkaisuohjelmia, joita käytettäessä ei tarvitse osata muiden ohjelmien käyttöä, mutta useimmiten tarvitaan jonkin editorin, esimerkiksi Notepadin käyttö.
• Yleinen tietokoneen käyttötaito. Tämä voi olla luonteeltaan hyvin monentyyppistä ja -tasoista muun muassa sen mukaan, millaista Web-palvelinta käytetään. Tarvittavat tiedot ja taidot eivät ole kovin syvällisiä, mutta niiden opettelu vie oman aikansa, jos Web-julkaisijalla ei ennestään ole kokemusta käytettävästä tietokonejärjestelmästä. Esimerkiksi meillä viikonpäiväkoneilla pitää hallita sen verran unix-järjestelmää ja ftp-ohjelman käyttöä, että osaa kopioida tiedostonsa oikeaan hakemistoon.

1. Yleistä

Sivujen suunnittelussa hyvin tärkeä periaate on sivujen perusilme. Ilmeeseen vaikuttavat värillisyys, kuvien ja tekstien määrä, niiden koko ja sijoittelu käytettävälle pinnalle. WWW-sivujen suunnittelu eroaa kuitenkin perinteisestä graafisesta suunnittelusta siinä, ettei yksinkään näistä tekijöistä pysy joka tilanteessa saman näköisenä. Käyttäjillä on erilaisia näyttöjä ja WWW-selaimia.

2. Minimiresoluution periaate

WWW-sivujen asioiden asemointi (tekstin ja kuvan sijoittelu dokumentissa) on hankalaa, koska ensinnäkään HTML-kieli ei tätä tue ja toiseksi suunnittelijalla ei ole olemassa mitään tietoa siitä, minkä kokoisessa selainikkunassa ja millaisella ruudun resoluutiolla (= näytön kuvapistemäärä vaaka- ja pystysuunnassa) käyttäjä sivuja katselee. Tänä päivänä normaalin PC:n tavallisia resoluutioita ovat 640 * 480, 800 * 600, 1024 * 768, 1152 * 864, 1280 * 1024 tai 1600 * 1200. Näin ollen käytettyjä resoluutioita on jo kuusi kappaletta. Tästä seuraa helposti kysymys "mitä noista minun pitäisi käyttää?"

Edellä mainitusta syystä varmin suunnitteluperiaate on ns. minimiresoluution periaate. Laaditaan sivut siten, että ne varmasti näkyvät kunnolla resoluutiolla 640 * 480. Tällöin ne ovat varmasti nähtävissä näissä kaikissa ainakin jotenkuten.

Usein näkee sivuja, joissa lukee kommentteja "suositeltu resoluutio 1024 * 768" tai muuta vastaavaa. Tällaiset sivut voivatkin olla hyviä katseltavia noilla resoluutioilla, mutta menettely ei kuitenkaan ole suositeltava:

• jos asemointi on todella optimoitu koolle 1024 * 768, pitää vielä tuolla resoluutiolla katsella sivua selaimella, jonka näyttö on koko ruudun kokoinen. Kuinka moni käyttäjä todellisuudessa katselee sivuja koko näytön täyttävällä selaimella? Työpöydän ideahan on se, että siinä on yhtä aikaa auki ja näkyvissä useita eri ohjelmia. Tätä suuret resoluutiot tukevat ja sitä on jo oman käyttömukavuuden puolesta järkevää käyttää.
• käyttäjän käyttämä PC ei välttämättä tue tällaisia resoluutioita. Sitä paitsi kaikilla ei ole viimeistä huutoa oleva laite, vaan se saattaa olla vähän vanhempikin. Esimerkiksi 15-tuumaiset näytöt ovat vielä hyvin yleisiä ja useat käyttäjät pitävät tällaisella näytöllä parhaana resoluutiona 800 * 600 –tilaa. 1024 * 768:lla kuvakkeet ja teksti alkavat olla jo varsin pieniä.

3. Värien käytöstä

Oletusvärit WWW-sivuilla ovat ankeat, harmaa tausta ja musta teksti. Tämän takia sivuja onkin syytä elävöittää ainakin jollakin muulla taustan värillä. Useimmiten riittää sekin, että määrittelee taustan valkoiseksi, sillä silloin ollaan samassa tilanteessa kuin oltaisiin lukemassa paperidokumenttia.

Kuitenkin muitakin värejä on olemassa ja niitä voi käyttää. Kannattaa kuitenkin pohtia muutamia seikkoja ennen kuin ryhdyt värittämään sivuja:

• luo sivuille yhtenäinen värimalli. Toisinsanoen samat värit toistuvat jokaisella sivulla. Jos yhdellä sivulla on sininen tausta ja toisella musta ja kolmannella keltainen, lopputulos on sekava ja epämukava luettava. Samaisessa värimallissa on myös syytä päättää tekstin ja linkkien värit taustan kanssa yhteensopivaksi.
• kaikki väriyhdistelmät eivät ole sopivia. Esimerkiksi punainen teksti vihreällä taustalla on useasti hyvin hankala yhdistelmä. Kannattaa tehdä hieman kokeiluja löytääkseen sopivan yhdistelmän.
• jos taustaväri on hyvin tumma, silloin pitää ehdottomasti vaihtaa tekstin väriksi jokin muu kuin musta. Esimerkiksi käänteinen väritys (musta tausta ja valkoinen teksti on joskus hyvä tehokeino).
• usein kuitenkin vaalea hillitty tausta tavanomaisella mustalla tekstillä on kaikkein paras ratkaisu.

Käytössä olevat värikoodit ja aiheeseen liittyviä linkkejä löydät esimerkiksi Lasse Lasasen sivuilta osoitteesta http://www.hit.fi/~lasanen/htmlcol.htm.

4. Taustakuvat

Taustavärin lisäksi on sivuilla mahdollisuus käyttää taustakuvaa, joka täyttää taustan koko alaltaan. Huomattavaa on, että taustakuvan koko on se, mikä se on, jolloin se kertautuu sivuilla useaan kertaan riippuen siitä, minkä kokoinen selainikkuna on. Näin ollen kaikki taustakuvat, joilla tehdään vasempaan laitaan jokin erivärinen palkki, ovat yleensä toteutettuja matalalla mutta varsin leveällä kuvalla, joka sitten leveytensä puolesta täyttää selainikkunan vaakasuunnassa.

Taustakuvien asettamisessa sivuille pätevät samat seikat kuin taustavärienkin kanssa, eli taustavärin on syytä olla samanlainen joka sivulla ja liian räikeitä väriyhdistelmiä olisi syytä välttää jne… Noiden lisäksi olisi kuitenkin syytä muistaa seuraavat seikat:

• kuvassa ei saa olla liikaa värivaihteluita tai kontrastia. Jos kuvassa on sekaisin sekä vaaleita että tummia kohtia, on vaikeaa löytää sellaista tekstin väriä, joka näkyisi kunnolla. Jos siis haluat esimerkiksi valokuvan sivuillesi taustakuvaksi, pitää sitä vaalentaa reippaasti. Yleensä kunnolliset kuvankäsittelyohjelmat hallitsevat tämän toimenpiteen. Tavallisesti aloitteleva sivujen laatija laittaa aina liian suurikontrastisen kuvan taustakuvaksi
• kuva ei saa olla liian suuri. Suuren kuvan lataaminen on hidasta varsinkin modeemiyhteyksillä. Lisäksi hitaasti latautuvat sivut vaikuttavat käyttömukavuuteen
• toisaalta liian pienetkin kuvat ovat hankalia: jos toteutat taustavärin vaikkapa yhden pikselin kokoisella kuvalla, joutuu sivun käyttäjän tietokone piirtämään kuvan useita kertoja erikseen sivulle ja vanhemmalla ja hitaammalla näytönohjaimella se saattaa olla hyvinkin hidasta. Joskus on esitetty nyrkkisääntönä, että alle 10 * 10 pikselin kuvia ei kannattaisi käyttää taustakuvina.
• taustakuvissakin paras taustakuva on jokin vaalea ja hillitty, josta teksti erottuu selvästi ja jonka tekstuuri (kuviointi) ei ole räikeä.

Ilmaisia taustakuvia (ja muutakin materiaalia) löydät mm. seuraavista osoitteista:

http://www.njet.net/heikki/index.shtml, Heikki Luhtalan sivut. Runsaasti taustakuvia (yli 2500 kpl) sekä muuta vapaata materiaalia

http://www.andyart.com/, Andys Art Attack. Runsaasti materiaalia ja hyvä esimerkki sekavasta ja liian täyteen kamaa tungetusta etusivusta.

http://www.meat.com/textures/, Texture Land

http://www.erinet.com/jelane/families/, Jelane K. Johnsonin sivut. Runsaasti muutakin materiaalia kuin taustoja.

5. Kuvista yleisesti

Kuvien tukevat kirjallista esitystä ja niiden tulee aina liittyä sivujen sisältöön. Mitään turhia "koristeita" ei kannata sivuilleen laittaa. Esimerkiksi kaikenlaiset sarjakuvahahmot ynnä muut vastaavat otukset ovat juuri tällaisia.

HTML-kieli ei oikeastaan tue minkäänlaista asemointia kuvan ja tekstin suhteen. Ainoat vaihtoehdot on vaakasuuntainen sijoittaminen vasemmalle, keskelle tai oikealle. Lisäksi kuvan ja tekstin välinen suhde riippuu siitä, millaisella resoluutiolla käyttäjä sivuja katselee:


Pienellä resoluutiolla (esim. 640 * 480) teksti menee kuvan ohitse (vasen kuvio), kun taas suuremmalla (1024 * 768) teksti jää kuvan viereen. Tämä luo oman ongelmansa siitä, miten haluaa tekstin ja kuvan suhtautuvan toisiinsa. Asian voi ratkaista esimerkiksi taulukolla (kuva taulukon vasempaan soluun ja teksti oikeaan). Näin teksti ei mene koskaan kuvan alle.

Periaatteessa muiden WWW-sivuilta voi "lainata" minkä tahansa kuvan. Kuitenkin tulee muistaa, että lähtökohtaisesti tekijänoikeudet ovat aina kuvan ottajalla, ellei tekijä ole niistä itse luopunut. Jos kuvaa haluaa käyttää omalla sivullaan, siihen tulee saada lupa kuvan oikeuksien omistajalta. Lisää tekijänoikeuskysymyksistä voit lukea Jukka Korpelan sivuilta http://www.hut.fi/~jkorpela/tekoik/.

Pari linkkiä aikaisempien lisäksi kuvapankkeihin, joissa olevia kuvia saa vapaasti kopioida:

http://www.edu.fi/koulu/oppimatj.html, Opetushallituksen sivuille koottua opetusmateriaalia.

http://www.iconbazaar.com, "Kuvakebasaari". Todellinen basaari onkin, sillä jaossa olevien sarjakuvahahmokuvakkeiden jakelun oikeudet hieman arveluttavat.

6. Marginaalit & sisennys

HTML-kieli tukee varsin heikosti marginaalirakennetta ja sisennyksiä, vaikka hieman sisennetyn tekstin lukeminen on huomattavasti mukavampaa kuin laidasta laitaan olevan. Blockquote-tagin käyttö on varsin hankalaa, sitä paitsi sen tuottama sisennys riippuu muun muassa käytetystä selaimesta. Se ei siis sovellu mihinkään tarkkaan sisentämiseen.

Sisennyksen voi toteuttaa taulukoilla. Määritellään kaksisoluinen ja yksirivinen taulukko, jonka vasemmalla solulla toteutetaan sisennys ja oikeanpuoleiseen tulee sitten varsinainen teksti. Sisennykseen voi käyttää pikselimäärityksiä solujen leveyksissä, mutta kaikkein varmin tapa on tehdä määrätyn levyinen "näkymätön" gif-kuva: siinä ei ole muuta kuin tietyn levyinen suorakaide taustaväriä, joka on määritelty läpinäkyväksi. Iltalehden verkkoversio, http://www.iltalehti.fi käyttää sisennykseen lehden logoa. Muutenkin sivut ovat hyvä esimerkki hyvin toteutetusta sisennyksestä.

Toinen tapa rakentaa sisennys on käyttää kehyksiä. Kehyksistä lisää myöhemmin tässä dokumentissa.

7. Animaatiot

Varsinkin käyttäjien omilla kotisivuilta löytää ties minkälaista vilkkua ja välkkyä sekä liikkuvaa kuvaa. Jos katsoo, että omat sivut kaipaavat tällaisia, niitä pitää käyttää ehdottomasti taiten. Liikkuva kuva on tehokas katseenvangitsija, mutta liiallisesti käytettynä se tekee sivuista levottoman. Yleensäkään mikään vilkkuva palkki ei anna mitään lisäarvoa sivuille, joten pitäisin niitä varsin turhina.

8. Java-koodi

Näihin voisi noudattaa samaa periaatetta kuin animaatioihin: kohtuudella. Nykyisin on yleistynyt valikkopalkin käyttö tyyliin, jossa hiiren kursori vietynä napin päälle vaihtaa värin tms. napista. Tämä on ihan mielekäs tyyliseikka, mutta pari seikkaa kannattaisi ottaa huomioon:

• kaikkien selaimilla eivät java-sovelmat (apletit) näy. Lisäksi käyttäjät ovat voineet kytkeä ne pois käytöstä selaimestaan
• java-sovelmien lataaminen hidastaan sivujen lataamista.
• liiallinen javan käyttö tekee sivuista levottomat.
• kaikenlaiset ponnahdus- eli popup-ikkunat, joita javalla voi toteuttaa, ovat useimmiten turhia. Huomiota voi herättää muillakin keinoilla.

Javaa voi käyttää myös huomaamattomasti esimerkiksi tarkistettaessa lomakkeiden kenttiä, onko niissä käypä arvo. Ei sen tarvitse välttämättä käyttäjän silmille hyppiä.

1. Yleistä

WWW-sivujen rakentaminen on oikeastaan käyttöliittymän (user interface) rakentamista hypertekstiesitykseen. Käyttöliittymällä tarkoitetaan niitä keinoja ja välineitä, joilla tietokoneohjelma ja käyttäjä vaihtavat tietoja keskenään, toisin sanoen käyttäjä käyttää ohjelmaa aina käyttöliittymän kautta. Yleensäkin ohjelma on juuri niin hyvä, kuin sen käyttöliittymä on. Sama pätee WWW-sivuihinkin. Vaikka sivut olisivat täynnä kaikille hyödyllistä tietoa, sivut eivät ole hyvät, jos sieltä ei löydä hakemaansa tai käyttäjälle tulee epämääräinen olo siitä, missä päin sivuja hän on.

2. Navigoinnista

Koska isoa materiaalia harvoin kannattaa tunkea yhteen dokumenttiin, on aiheellista aineiston loogisen järjestyksen lisäksi miettiä myös navigointi, eli liikkuminen sivujen välillä. Periaatteita:

• jos sivut ovat jonkun instanssin alla (esim. oppilaan sivut koulun palvelimella), tulee etusivulta olla linkki tämän etusivulle.
• vaikka selaimessa onkin back-nappula, jolla voi "peruuttaa" sivulta pois, pitää jokaisella sivulla olla myös linkki muualle. Mitään umpikujia ei saa olla.
• jokaiselta sivulta tulee päästä takaisin etusivulle
• jos rakennelma on hierarkkinen, pitää jokaiselta sivulta päästä etusivun lisäksi edelliselle sivulle.

Sivujen mahdollisiksi rakenteiksi esitetään usein peräkkäisrakenne, puumainen, sekä verkkorakenne. Näistä peräkkäisyys ja puurakenne ovat suunnittelijan kannalta "helpot". Niihin on helppo rakentaa looginen navigointi.

Peräkkäisrakenteessakin on aiheellista rakentaa jako siten, että voidaan pelkän eteen-taakse-navigoinnin lisäksi siirtyä loogisia kokonaisuuksia eteen- tai taakse päin. Tällä tavoin hyvin toteutetusta sivusta olkoon esimerkkinä Kari Lehtosen sähköpostiopas osoitteessa http://www.hit.fi/~lehtonen/Sposti/spos.htm.

Vaikein rakenne suunnittelijan kannalta on verkko. Jos samalle sivulle pääsee useaa eri reittiä, tyypillinen "takaisin edelliselle sivulle" – valinta ei toimi, koska HTML ei tue moista ominaisuutta. Suunnittelijan on siis päätettävä itse, mille sivulle tältä sivulta "palataan". Ei ole välttämättä linkittää sivua jokaiseen sivuun, varsinkin jos reittejä on useita.

3. Kehykset

Kehyksillä (frames) voidaan sivu jakaa omiin itsenäisiin sivuihin. Oikein käytettynä kehykset auttavat sivujen luettavuudessa, mutta pahimmassa tapauksessa ne vain sotkevat ne. Liian runsas kehysten käyttö tekee sivuista sekavan ja levottoman, samoin itse asialle varattu alue jää pieneksi. Näin varsinkin pienillä resoluutioilla.

Kehyksiä voi käyttää myös sivujen asemoinnissa: määritellään pikselikokoiset kehykset, jolloin voidaan kiinnittää dokumentin leveys. Näin voidaan parantaa sitä, että sivut näkyvät edes jotenkuten saman näköisinä eri resoluutioilla. Lisäksi kehyksillä voidaan toteuttaa sisennyksiä tekstiin ja parantaa sivujen luettavuutta.

Koska kaikki selaimet eivät tue kehyksiä, on mielekästä rakentaa sivuista myös kehyksetön versio tällaisille käyttäjille.

4. Selainten laajennuksista ja ominaisuuksista

Molemmat valtaselaimet, Internet Explorer sekä Netscape Navigator sisältävät omia laajennuksiaan HTML-koodiin, josta seuraa se, että nämä seikat toimivat vain näissä määrätyissä selaimissa. Hyvä sivujen suunnittelu lähtee kuitenkin siitä, että sivut näkyvät mahdollisimman monella selaimella. Näin ollen näiden laajennusten käyttäminen ei ole suositeltavaa. "Asiakas on aina oikeassa"-periaate sopii hyvin tähänkin: sivuilla vierailija päättää itse, mitä selainta hän käyttää, ei sivujen laatija. Näin ollen sivujen toimivuus tulisi aina testata usealla eri selaimella, mielellään vielä näiden eri versioillakin.

Korpela Jukka, Web-julkaisemisen opas, http://www.hut.fi/~jkorpela/www/base.html

Linjama Tero – Sirola Henri: Internet- tuottajan paketti, Teknolit Oy, Jyväskylä 1996. Teknolitin kotisivu on osoitteessa http://www.teknolit.fi