MVnet logo

Kotisivun teko » Ulkoasu kotisivuille

  • Julkaistu: 20.10.2006
  • Päivitetty: 25.02.2009
  • Kommentit

Ulkoasu kotisivuille

Ulkoasuun kiinnitetään ensiksi huomiota

Kun kävijä ensi kertaa tulee jollekin hänelle ennestään tuntemattomalle nettisivulle, ensimmäisiä asioita, johon hän todennäköisesti kiinnittää huomiota, on sivun ulkoasu. Jos ulkoasu on sekava, saattaa kävijä nopeasti siirtyä jollekin muulle sivulle. Ulkoasusta kävijä myös tekee päätelmiään sivun tekstisisällön luotettavuudesta. Jos ulkoasu on vanhahtava, hän saattaa olettaa, että myös sivun asiasisältö on vanhentunutta. Jos ulkoasu taas on miellyttävä ja selkeä, viihtyy kävijä sivulla todennäköisesti paljon kauemmin.

Hieno ulkoasu ei todellakaan tarkoita sitä, että sivulla olisi pakko olla paljon hienoja kuvia ja animaatioita. Hyvällä värien käytöllä ja sopivilla fonttivalinnoilla saa jo tehtyä hyvän ulkoasun. Malliesimerkkinä huonosta kotisivusta kannattaa katsoa Pelelamu.net, joka on tahallaan tehty esimerkki karmeasta kotisivusta. Tällaisia sivuja ei siis pidä tehdä. Jos sivusi alkavat muistuttaa edellä mainittua sivua, olet väärillä jäljillä. Esimerkki yksinkertaisesta, mutta toimivasta ulkoasusta on esimerkiksi sivu WWW-sivujen laatiminen. Ulkoasu ei ole mitenkään erikoinen, mutta toimiva. Tekstistä saa hyvin selvää, mikä on pääasia. Jukka Tujalan sivulla Johdanto kotisivujen tekemiseen on kerrottu hyvin, mitä kotisivuille ei kannata änkeä.

Nettisivun ulkoasun toteutus ei kuitenkaan ole aivan niin yksinkertaista kuin esim. Microsoft Wordin dokumenttien teko. HTML-kieltä kun ei ole kehitetty sivun ulkoasun esittämiseen. HTML-kieli kehitettiin kuvaamaan sivun rakennetta (eli täällä on otsikko, täällä on normaalia tekstiä, tässä kuva, tässä linkki jne...). Et voi vain läntätä kuvaa HTML-dokumenttiin ja siirtää kuvaa hiirellä täsmälleen haluamaasi paikkaan yhtä helposti kuin esim. MS Wordin dokumenttia tehdessä. Kuvan paikan tarkkaan määrittämiseen tarvitaan jotain muuta, kuten CSS-tyylejä tai taulukkotaittoa.

Jos luot Microsoft Wordillä dokumentin, on sivu yleensä A4-kokoinen ja näkyy printattuna aina samanlaisena, koska kaikissa printtereissä on samankokoiset A4-arkit. WWW-sivua taas voi katsoa useissa eri näyttöympäristöissä. Se, miltä www-sivu näyttää, riippuu käytetyn näytön koosta, resoluutiosta, väriasetuksista, nettiselaimen ikkunan koosta ja tietokoneella saatavilla olevista fonteista sekä useista muista tekijöistä. Jos tekemäsi www-sivu näkyy omalla näytölläsi hyvin, et voi olettaa, että se näkyisi samalla lailla kaikilla muilla. Toimivan ulkoasun toteuttaminen onkin melko haastavaa.

Ulkoasun teossa pitääkin lähes aina päätyä kompromissiin. Ei ole yleensä järkevää tehdä ulkoasua sellaiseksi, että se toimisi jokaisessa ympäristössä. Jos sivun kohdeyleisöstä suurin osa käyttää normaalia 1024 x 768 kokoista tietokonenäyttöä, ei ole välttämättä järkevää tehdä ulkoasusta sellaista, että se toimii pienellä kännykän näytöllä. Jos aikaa on, voi näin tehdä, mutta yleensä tämänkin ajan voi käyttää johonkin parempaan kuten paremman sisällön tuotantoon.

Toimivaan ulkoasuun kuuluvat yleensä jonkinlainen navigointivalikko, jossa on linkit sivuston tärkeimpiin sivuihin ja jonka avulla pystyy helposti liikkumaan sivuston sivulta toiselle. Tämän lisäksi on muita mahdollisia elementtejä kuten sivuston logo, sivun nimi, mainoksia, hakukenttä jne. Ulkoasun elementtien määrä riippuu paljolti itse sivuston sisällöstä. Lisäksi nämä elementit pitäisi saada sijoiteltua sivulle siten, että ne näyttäisivät kävijän silmille mahdollisimman hienoilta ja selkeiltä. On kaksi yleistä tapaa sijoittaa nämä ulkoasun elementit www-sivulle: taulukkotaitto ja CSS-tyyliohjeet, joista jälkimmäistä tapaa on suositeltava käyttää.

Toimiva ulkoasu ei välttämättä paljoa vaadi, mutta on eri asia tehdä ulkoasusta kävijän mielestä hienon näköinen. Kannattaa muistaa, että kaikkia on mahdoton miellyttää.

Ulkoasu taulukoilla

Valitettavan yleinen käytäntö tehdä nettisivujen ulkoasua on käyttää sivun elementtien sijoitteluun taulukkoa (ns. taulukkotaitto). Netissä näkee paljon sivuja, jotka ovat "ammattilaisten" tekemiä ja silti ulkoasu on tehty käyttäen taulukkotaittoa. Taulukkotaittoa ei pitäisi käyttää sivun ulkoasun esittämiseen. Se on kuitenkin havainnollinen esimerkki siitä, mitä sivun ulkoasulla tarkoitetaan ja miten ulkoasun voi siis luoda. Aloittelijalle tämä tapa on myös ehkä helpompi oppia.

HTML-koodin avulla voi siis luoda sivulle taulukon, jonka soluihin on helppo sijoitella ulkoasuun liittyviä elementtejä kuten kuvia ja navigointipaneeli tms. Elementtien sijaintia voi sitten muutella muuttamalla taulukon solujen kokoa ja paikkaa. Tämä tapahtuu muuttamalla taulukon rivien sekä sarakkeiden korkeuksia ja leveyksiä, joiden määrittäminen HTML-kielellä on helppoa. Taulukoiden soluja voi myös yhdistää toisiinsa. Eli taulukon rakentaminen on vähän kuin käyttäisi Microsoft Excel -taulukkolaskentaohjelmaa. Muuttamalla taulukon solut haluamansa kokoisiksi saa sijoitettua ulkoasun elementit haluamilleen paikoilleen.

Taulukkoa ei yleensä haluta näyttää, koska se on siis tarkoitettu vain ulkoasun elementtien sijoittamiseen. Siksi taulukon halutaan pysyvän "piilossa" eli sen reunaviivojen paksuus laitetaan nollaan, jolloin taulukkotaiton näkee vain sivun lähdekoodista. Useimmista sivuista ei heti päälle päin näekään, onko ulkoasu tehty taulukoilla vai ei.

Esimerkki sivun ulkoasun toteutuksesta taulukolla

Esimerkki sivun ulkoasun toteutuksesta taulukon avulla.

Eli otetaan esimerkiksi oikealla näkyvä taulukko, jossa on 3 riviä ja 3 saraketta ja sijoitetaan taulukkoon ulkoasuun ja sisältöön liittyviä elementtejä. Sivun tekstisisällön voisi laittaa taulukon soluun 5. Sivuston sivujen selaamista helpottavan navigointivalikon taasen voisi laittaa soluun numero 4. Soluun 1 tulisi esimerkiksi sivuston logo ja soluun 2 sivuston nimi tai sivun otsikko näkyvästi. Taulukon soluun 3 voisi laittaa hakukentän ja soluun 6 voisi laittaa vaikka mainosbannereita tai ajankohtaisia ilmoituksia. Soluun 7 taas voisi laittaa vaikka tekstin "Sivua päivitetty viimeksi x.x.xxx klo xx:xx". Näin yksinkertaisesti voisi siis tehdä sivulle ulkoasun. Esimerkki on luonnollisesti hieman kärjistetty, mutta lähes kaikki sivut pohjautuvat tähän. Taulukon soluja vaan on eri määrä ja niihin sijoitetaan näyttävämpiä kuvia ja tekstejä.

Taulukkoja ei kuitenkaan olisi suositeltavaa käyttää ulkoasun tekoon. Taulukot on tarkoitettu taulukoitavien tietojen esittämiseen, kuten erilaiset mittaustulokset ja vertailut. Ulkoasun elementtien sijoittelu taulukoiden avulla ei siis ole suositeltavaa, vaikka näinkin saa hyvin tehtyä hienon ulkoasun. Myös WWW:n standardeja kehittävä W3C suosittelee, että taulukkojen sijasta ulkoasun esittämiseen käytettäisiin CSS-tyylejä. Alla lainaus W3C:n suosituksesta:

"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables."

Taulukkojen käyttö ulkoasun esittämiseen siis aiheuttaa ongelmia, jos sivua yritetään lukea jossain muussa ympäristössä kuin normaalissa tietokonenäytössä. Esimerkiksi heikkonäköiset voivat käyttää jotain puhesyntetisaattori-sovellusta, jolloin taulukkotaitto voi tuottaa sovellukselle paljon ongelmia. Jos taas lukijan käytössä on pieni näyttö (kuten kännykän tai PDA-laitteen näyttö), aiheuttaa taulukkotaitto sen, että sivua joutuu yleensä vierittämään paljon vaaka- ja pystysuunnassa, jotta sivun tekstin saa luettua. Sivuista tulee myös yleensä hieman raskaat taulukkoja käyttäen. Kännyköissä ja PDA-laitteissa on tärkeää, että nettisivu olisi kevyt.

CSS-tyyliohjeet

Nykyään suositeltava tapa esittää nettisivun ulkoasu on käyttää CSS-tyyliohjeita (Cascading Style Sheets). CSS-tyyliohjeet on kehitetty juuri ulkoasun määrittämiseen. CSS-tyyliohjeilla pystyy määrittämään miten www-sivun elementit näytetään selainikkunassa. CSS-tyyliohjeilla voi määrätä mm. fontin värin, fonttikoon, fontin tyylilajin, linkin värin sitä hiirellä osoitettaessa, listoihin omat pallukat, kuviin ja taulukoihin reunaviivoja tai kuvan kellumaan tekstin vieressä jne. CSS-tyyliohjeita käyttämällä pitäisi saada tehtyä sivusta juuri sen näköisen kuin haluaa. Esimerkiksi MVnetin ulkoasu on toteutettu käyttäen CSS-tyyliohjeita.

Jos olet tehnyt nettisivut käyttäen pelkkää HTML-kieltä, tiedät varmaankin, kuinka vaikeaa on esimerkiksi vaihtaa kaikki sivun 3. tason otsikot (<h3>) esimerkiksi punaisen värisiksi. HTML-kielellä otsikon värihän määritellään seuraavasti:

<h3><font color="#009900">Otsikkosi</font></h3>

Yhdellä sivulla voi olla useita otsikkoja puhumattakaan siitä, jos sivustolla on useita satoja sivuja. Ainoa vaihtoehto otsikon värin muuttamiseen on muuttaa font-tägin color-attribuutin arvoa. Yhden sivun tapauksessa otsikoiden värien muuttaminen ei tunnu kovin vaikealta. Sen kuin etsii vanhat värikoodit ja korvaa ne uudella. Mutta jos kaikille sivuston sivuille pitäisi tehdä sama, on kyseessä jo melko työläs operaatio, koska sivuja voi olla satoja (esim. MVnetissä on yli 200 sivua). Urakkaan voi hyvinkin mennä tällöin päivä tai pari.

Eikö olisi siis huomattavasti helpompaa, jos voisit määritellä johonkin yhteen paikkaan, että kaikki 3. tason otsikot olisivat punaisia. Jos värin haluaa muuttaa, muuttaisi sitten vain tätä yhdessä paikassa olevaa väriä. Tadaa! Juuri tämä on CSS-tyyliohjeiden idea. HTML-koodissa ei tarvitse enää font-tägiä. Punainen otsikko saadaan siis näkyville kirjoittamalla HTML-koodiin yksinkertaisesti seuraavaa:

<h3>Otsikkosi</h3>

Sitten luodaan css-tyylitiedosto nimeltä ulkoasu.css, johon kirjoitetaan seuraavaa:

h3 {color: #CCCCCC;}

Ja lisätään HTML-dokumentin head-tägien sisään seuraavaa:

<link rel="stylesheet" type="text/css" href="ulkoasu.css" />

CSS-tyylitiedosto siis linkitettiin HTML-dokumenttiin ja kaikki 3. tason otsikot ovat nyt punaisia. Linkityksen voi tehdä kaikkiin sivuston sivuihin samalla tavalla, lisäämällä head-tägien väliin edellä mainittu link-tägi. Jos otsikon väriä haluaa vielä muuttaa uudestaan, riittää kun muokkaa CSS-tyyliohjeesta h3-otsikon color-attribuutin värikoodia haluamakseen, jolloin kaikki sivuston otsikot vaihtavat väriä. Kätevää, eikö?

Otsikolle voi määritellä kaikenlaisia muitakin määritteitä kuin vain fontin väri. CSS:llä voi määrittää mm. fontin koon, fonttiperheen (Arial, Times New Roman tms.), fontin taustavärin, kirjasinvälin ja rivivälin otsikon alla olevaan elementtiin. Edellä mainittua 3. tason otsikkoa voisi somistaa muokkaamalla otsikon tyyliohje seuraavanlaiseksi:

h3 {
	font-family: helvetica, arial, verdana, tahoma, sans-serif;
	font-size: 15px;
	font-weight: bold; 
	letter-spacing: -1px;
	color: #666;
	background: #ffffff;
	padding-top: 10px;
	padding-bottom: 3px;
}

Näin fontin värin, koon yms. ominaisuuksien muuttaminen on huomattavasti yksinkertaisempaa. Lisäksi HTML-dokumentin lähdekoodista tulee paljon selkeämmän näköistä, kun siellä ei ole ylimääräisiä ulkoasuun liittyviä määreitä, kuten font-tägejä. HTML-kielen tarkoitushan on kuvata dokumentin rakenne, ei sen ulkoasua.

Otetaan taas esimerkiksi aikaisemmin Johdanto-osassa esitetty vertailu dokumentin esittämistä pelkkänä tekstinä ja HTML-muodossa. Alla ovat linkit kyseiseen dokumenttiin kolmessa eri muodossa. Kaikissa on siis sama asiasisältö, mutta dokumentit ovat vain ulkoasultaan hieman erilaisia.

Ensimmäinen dokumentti on kirjoitettu pelkkänä tekstinä, toinen pelkällä HTML-kielellä ja viimeinen on koristeltu CSS-tyyliohjeilla. Tekstimuotoinen dokumentti on melko karu eikä siinä luonnollisesti ole käyttöä helpottavia linkkejä eikä kuvia. HTML-dokumentissa taas toimivat linkit sekä kuvat ja dokumentti on muutenkin hieman helpommin luettavissa. Kuvatekstit eivät kuitenkaan erotu kovin selvästi eikä ulkoasu yleisestikään hivele silmiä. Lisäämällä HTML-dokumenttiin CSS-tyyliohjeita, tulee dokumentista huomattavasti miellyttävämpi luettava.

Tämä on kuitenkin vasta alkua. CSS:n avulla voi vaikuttaa moneen muunkin HTML-elementin näkyvyyteen kuin vain fontteihin. Esimerkiksi lomakkeiden kenttien ja painikkeiden ulkoasun voi määrittää CSS:llä. CSS:n avulla onnistuu myös esimerkiksi navigointimenun toteuttaminen. Esimerkiksi MVnetin sivuilla näkyvä navigointimenu on toteutettu pääosin CSS:llä. CSS:n avulla pystyy määrittelemään kaiken sen, mitä HTML-koodin avullakin ja paljon muuta, mutta huomattavasti helpommin. Tähänhän CSS on kehitettykin - ulkoasun esittämiseen.

CSS-tyyliohjeiden kirjoittamisesta ei tässä artikkelissa enempää kerrota, koska netistä löytyy loistavia oppaita CSS-tyyliohjeiden opetteluun. Paljon lisätietoa CSS-kielestä löytyy mm. Petteri Perälän mainiosta CSS-oppaasta, jotka on selkeästi suomeksi kirjoitettu. Lisäksi kannattaa lukea myös suomenkielinen Tapio Markulan CSS-opas. Hyvä englanninkielinen tutoriaali on W3Schools CSS Tutorial. Lista kaikista CSS:n valitsimista löytyy englanniksi sivulta W3Schools CSS2 Reference.

Ulkoasu CSS:llä

Pelkällä CSS-koodilla ei kuitenkaan saa tehtyä haluamansa näköistä sivua, koska CSS-tyyliohjeet kertovat siis, miten selaimen pitäisi näyttää tietyt HTML-koodin elementit. Sivuun on siis pakko lisätä hieman HTML-koodia, jos haluat esimerkiksi lisätä sivulle navigointivalikon.

Esimerkki sivun ulkoasun toteutuksesta diveillä ja CSS:llä

Esimerkki jakamisesta alueisiin. Alueiden ulkoasua on somistettu CSS:n avulla.

Yleensä sivu jaetaan pienempiin alueisiin käyttämällä HTML:n div-tägejä. Div-tägi on itsessään tyhjä elementti, mutta sitä käytetään yleensä sivun tietyn osan sijoitteluun tai tekstin muotoiluun. Jokin kohta sivusta voidaan siis ympäröidä div-tägeillä, jolloin CSS:n avulla tämän osan sivua voi sijoittaa haluamaansa paikkaan tai määritellä esim. osan taustavärin haluamakseen. Sivun voi jakaa osiin usealla tavalla. Erilaisia tapoja jakaa sivu alueisiin on esitetty mm. Layout Galassa. CSS:n avulla sitten määritellään, miten nämä sivun osat selaimessa näytetään. Osille voi määrittää esimerkiksi taustavärin tai reunaviivan.

Alueisiin jaettu www-sivu on vähän kuin sivun rautalankamalli. CSS:n avulla saa määriteltyä näin muodostuneille alueille taustavärit, reunaviivat, kuinka paljon tyhjää tilaa jää alueiden väliin jne. Lisäksi voi määritellä, että joku alueista jää kellumaan sivun oikeaan reunaan (CSS:n float-valitsin) kun muut alueet ovat sen vasemmalla puolella. CSS-tyylien avulla saa ulkoasusta tehtyä sellaisen kuin haluaa.

CSS-tyyliohjeiden avulla voi tehdä sivulle monia ulkoasuja, jolloin kävijä voi itse valita haluamansa ulkoasun selaimestaan. Lisäksi CSS:llä voi tehdä myös ulkoasuja eri medioille. Sivuahan voi katsella useilta eri medioilta: normaalilta tietokonenäytöltä, TV:n ruudulta, kämmentietokoneen pieneltä näytöltä tai tulostaa sivun paperille. Kaikilla näillä medioilla on hieman erilaiset käyttöympäristöt, jotka asettavat erilaisia vaatimuksia sivun ulkoasulle.

Tulostusta varten ei esimerkiksi ole järkevää näyttää sivulla navigointivalikkoa tai mainoselementtejä. Kun sivu on tulostettu paperille, ei lukija hyödy mitään navigointivalikosta eikä mainoslinkkejä voi luonnollisesti klikata paperitulosteesta. Siksi tulostusta varten onkin hyvä tehdä oman ulkoasu, jossa kaikki turha on karsittu sivulta pois. Tulosteessa kannattaa näyttää lähinnä vain teksti ja siihen liittyvät kuvat. Kaikki bannerit, mainokset, hakukentät yms. on järkevää karsia pois. Tämä onnistuu CSS:n avulla. Kokeile esimerkiksi tulostaa tämä sivu niin näet, että ulkoasu on tulosteessa erilainen kuin tietokoneen näytöltä katseltaessa.

MVnetissä on kaksi eri CSS-tyylitiedostoa, jotka on upotettu XHTML-dokumenttiin seuraavasti:

<link rel="stylesheet" type="text/css" media="screen" href="ulkoasu.css" />
<link rel="stylesheet" type="text/css" media="print" href="ulkoasu_print.css" />

Ensimmäinen tyylitiedosto on tarkoitettu normaalia tietokonenäyttöä varten ja jälkimmäinen tyylitiedosto on tarkoitettu tulostusta varten. Se, mitä mediaa varten CSS-tyylitiedosto on, kerrotaan link-tägin media-attribuutissa (usein puhutaan mediatyypistä). Screen tarkoittaa normaalia tietokonenäyttöä ja print taas tulostetta. Muita mahdollisia mediatyyppejä olisi esimerkiksi tv televisiota varten ja handheld kämmentietokoneita sekä kännyköitä varten. WWW-selain osaa yleensä valita oikean ulkoasun automaattisesti käyttöympäristön ja mediatyypin perusteella. Lista käytettävissä olevista mediatyypeistä löytyy esimerkiksi W3C:n CSS2 -spesifikaatiosta.

CSS-tyyliohjeiden käyttö saattaa kuulostaa helpolta ja toimivalta. Aivan näin ruusuinen tilanne ei kuitenkaan ole. Nettiselainten tuki CSS-tyyliohjeille on vaihtelevaa. Esimerkiksi Internet Explorer 6 -selaimen tuki CSS:lle on melko heikko, kuten voit todeta HTML-kieli -sivun Acid2-testin tuloksista. Internet Explorer 7 -selaimen pitäisi kuitenkin sen ilmestyessään korjata IE6:n bugeja. Huomaa kuitenkin, että kaikki vanhemmat internet-selaimet (esim. Netscape 4.7 tai vanhempi) eivät tue kunnolla CSS-tyylien käyttöä, tosin näitä selaimia varten ei sivuja kannata optimoida, koska useimmat ihmiset ovat päivittäneet selaimensa uusimpiin versioihin. Vanhemman selainversion käyttäminen ei ole järkevää jo tietoturvankin takia.

Käytä valmiita ulkoasuja pohjana

Ei ole järkevää lähteä keksimään pyörää uudestaan. Tämä pätee myös nettisivujen ulkoasun suunnittelussa. Aina ei ole järkevää aloittaa sivun ulkoasun tekoa aivan nollasta vaan kannattaa käyttää hyväksi netissä olevia valmiita sivupohjia (engl. web design templates). Ilmaisia ja näyttäviä sivupohjia löytyy esimerkiksi seuraavilta sivuilta: Open Web Design, Open Source Web Design (OSWD) ja Zymic - Free Templates. Jos haluat rakentaa ulkoasun itse, hyvänä apuna on Layout Gala, jossa on esitetty erilaisia tapoja jakaa sivu osiin. Näiden ulkoasujen pohjalta on hyvä lähteä muokkaamaan ulkoasua haluamakseen.

Oman ulkoasun teko valmiiden sivupohjien avulla on helppoa. Valitset vain mielestäsi hienon näköisen ja toimivan ulkoasun ja muokkaat sitä omiin tarpeisiisi editoimalla HTML-koodia ja CSS-tyylitiedostoa. Tällä tavalla saa tehtyä jo näyttävän ulkoasun. Esimerkiksi MVnetin ulkoasu pohjautuu Open Source Web Design -sivuston tarjoamaan ilmaiseen sivupohjaan nimeltä Grass stains. Sivupohjaa on tosin muokattu melkoisesti omaan käyttöön.

Jos siis itselläsi ei ole aikaa tai taitoa tehdä graafisesti hienoa ja toimivaa ulkoasua, on turha alkaa pakertamaan sellaista itse. On paljon järkevämpää käyttää ilmaista sivupohjaa ja muokata siitä mieleisensä.

Hyvä tapa saada oman sivun ulkoasu näyttävämmäksi ja toimivammaksi on katsella muiden tekemiä sivuja ja etsiä niistä hyviä ideoita omille sivuille. Älä kuitenkaan suoraan kopioi jonkun muun sivun ulkoasua, sillä se ei ole sallittua. Kannattaa myös katsella muiden sivujen lähdekoodia, sillä sieltä voi löytää joitain hyviä niksejä, mitä ei itse ole aikaisemmin ymmärtänyt. Itsekin olen kehittänyt sivujani näin.

Käyttäisinkö kehyksiä? - Älä käytä!

Netissä näkee yhä valitettavan monia sivuja, joiden ulkoasu on toteutettu käyttäen kehyksiä (engl. frames). Kehyksillä tarkoitetaan sitä, että selainikkuna jaetaan pienempiin ns. ali-ikkunoihin. Näitä ali-ikkunoita kutsutaan kehyksiksi. Kehyksen sisään sijoitetaan yleensä HTML-sivu, mutta periaatteessa siinä voi olla mitä tahansa muutakin kuten esimerkiksi PDF-dokumentti. Jokainen kehys toimii periaatteessa omana ikkunanaan, joten jos sivun sisältö ei mahdu kerralla näkyviin kehykseen, voi sivua rullata pysty- ja vaakasuunnassa kuten normaalia ikkunaa.

Kehyksien käytössä on joitakin etuja. Hyvin yleistä on jakaa sivu pystysuunnassa kahteen kehykseen. Vasempaan kehykseen sijoitetaan navigaatiovalikko ja oikeassa kehyksessä näytetään haetun sivun sisältö. Navigointivalikko näkyy nyt kävijälle koko ajan. Jos hän klikkaa navigointivalikosta linkkiä, aukeaa haluttu sivu oikeanpuoleiseen kehykseen. Selaimen ei siis tarvitse ladata navigointivalikkoa uudestaan, koska se pysyy koko ajan näkyvillä. Hyvä esimerkki kehyksiä käyttävästä sivusta on Eesti keele käsiraamat, jota selaamalla ymmärtää hyvin kehyksien idean.

Navigointivalikon näkymisen koko ajan esim. sivun vasemmassa reunassa voi kyllä tehdä CSS:n avullakin. Kannattaa myös hieman miettiä, onko järkevää pakottaa kävijä siihen tilanteeseen, että navigointivalikko on koko ajan näkyvillä. Kävijä on kuitenkin luultavasti kiinnostuneempi sivun sisällöstä kuin itse navigointivalikosta. Koko ajan näkyvä navigointivalikko voi jopa olla ärsyttävä. Vai miksi tavallisen kirjan jokaisen sivun vasemmassa reunassa ei ole kirjan sisällysluetteloa?

Esimerkiksi käytettävyysguru Jakob Nielsen, on sanonut seuraavaa artikkelissaan Top 10 virheet www-sivun suunnittelussa (Top Ten Mistakes in Web Design, Alertbox 1996):

Splitting a page into frames is very confusing for users since frames break the fundamental user model of the web page. All of a sudden, you cannot bookmark the current page and return to it (the bookmark points to another version of the frameset), URLs stop working, and printouts become difficult. Even worse, the predictability of user actions goes out the door: who knows what information will appear where when you click on a link?

Eli lyhyesti suomennettuna sivun jakaminen kehyksiin on käyttäjän kannalta erittäin hämmentävää, koska kehykset rikkovat tutun www-sivun rakenteen. Kehyksiä käyttävillä sivuilla käyttäjä ei voi lisätä sisältö-sivua selaimensa kirjanmerkkeihin eikä palata takaisin edelliselle sivulle selaimen takaisin-painikkeella (uusimmissa selaimissa tämä saattaa jo toimia, mutta vanhoilla selaimilla ei). Nettiosoitteet eivät myöskään toimi totutusti edes uusilla nettiselaimilla (osoiterivillä näkyy koko ajan sama osoite) ja sivun tulostaminen oikein on vaikeaa ellei jopa mahdotonta.

Paljon lisää tietoa kehyksistä löytyy Jukka Korpelan mainiosta suomenkielisestä Web-julkaisemisen oppaasta. Kyseisellä sivulla on myös pohdittu kehyksien käytöstä aiheutuvia ongelmia. Lisäksi kannattaa lukea englanninkielinen artikkeli Why are frames so evil?, jossa kerrotaan useita syitä siihen, miksi kehyksiä ei kannata käyttää. Jos et jostain syystä halua käyttää CSS-tyyliohjeita ulkoasun esittämiseen, käytä sitten mieluummin taulukkotaittoa kuin kehyksiä. Kehysten käyttämisestä on enemmän haittaa kuin hyötyä, joten unohda ne.

Sivuston saavutettavuus

Hyvä ulkoasu ei tarkoita vain sitä, että se olisi mahdollisimman näyttävä. Pitää myös huolehtia siitä, että kävijän on helppo etsiä sivulta tietoa. Tekstin pitää olla myös helppolukuista ja sivuston pitäisi näkyä oikein useimmilla selaimilla.

WWW-sivut pitäisi siis tehdä aina käyttäjän näkökulmasta, kuten kaikki muutkin tavallisille tallaajille suunnatut laitteet ja palvelut. Jos esimerkiksi vanhukselle pitäisi suunnitella kännykkä, pitäisi siinä olla isot näppäimet ja iso näyttö isoilla kirjaimilla. Aina eivät asiat kuitenkaan ole näin yksinkertaisia. Ei ole aina helppoa ottaa huomioon kaikkia käyttäjäryhmiä.

Tällaisesta käyttäjälähtöisestä suunnittelusta käytetään termejä esteettömyys tai saavutettavuus. WWW-ympäristössä saavutettavuudella/esteettömyydellä tarkoitetaan sitä, että www-sivu on mahdollisimman helposti kaikenlaisten ihmisten luettavissa. On ihmisiä, jotka ovat heikkonäköisempiä tai eivät näe ollenkaan. Nämäkin ihmiset kuitenkin lukevat www-sivuja, mutta erilaisten apulaitteiden avulla. Jos www-sivua ei ole suunniteltu oikein, eivät apulaitteet välttämättä osaa tulkita sivua oikein, jolloin näiden ihmisten on vaikea tai mahdotonta lukea sivua.

Saavutettavuudella ei kuitenkaan tarkoiteta vain sitä, että sivut suunniteltaisiin esim. näkörajoitteisille. Esimerkiksi sivujen testaus yleisimmillä selaimilla (IE, Firefox, Opera) on jo saavutettavuuden huomioon ottamista. Saavutettavuuden tarkoituksena on siis taata, että mahdollisimman moni ihminen pystyisi sivua lukemaan mahdollisimman helposti.

Jos www-sivun teossa saavutettavuus jätetään kokonaan huomioimatta, saattaa osa sivun kohderyhmästä jäädä kokonaan tavoittamatta. Jos sivut tehdään toimimaan vain Internet Explorer -selaimelle, eivät esimerkiksi Firefox- tai Opera -selaimen käyttäjät välttämättä pysty lukemaan sivua sellaisena kuin olisi tarkoitus.

Sivujen toimivuus pitäisikin siis testata mahdollisimman monella selaimella. Suositeltavaa olisi testata sivut ainakin seuraavien selainten uusimmilla versioilla: Internet Explorer, Mozilla Firefox ja Opera. Lisäksi sivut olisi hyvä testata useammassa näyttöympäristössä. Jos sivusi näkyvät hienosti oman tietokoneesi näytöllä, ei se tarkoita sitä, että kaikki muutkin näkisivät sivusi samalla lailla. Tietokoneissa kun on hyvinkin erikokoisia näyttöjä.

Siksi sivuista olisikin järkevää tehdä skaalautuvat, jolloin sivut sopivat hyvin erikokoisille näytöille. Esimerkiksi MVnetin sivut ovat skaalautuvia tiettyyn rajaan asti. Kun selaimen ikkunakokoa muuttaa, myös ulkoasu mukautuu selainikkunan muutokseen. Jos ikkunaa esim. pienentää vaakasuunnassa, tekstirivit tulevat lyhemmiksi ja vastaavasti, jos selainikkunaa suurentaa vaakasuunnassa, muuttuvat tekstirivit pitemmiksi. Näin ulkoasu sopii hyvin erikokoisille näytöille ja jokainen voi valita mieleisensä tekstirivin pituuden muuttamalla selainikkunan kokoa. Sivuista tulee automaattisesti skaalautuvat, jos ei erikseen pakota CSS:llä tai taulukkotaitolla sivua tiettyyn leveyteen (kts. Pelit.fi, jossa sivu on pakotettu tiettyyn leveyteen - laajakuvanäytöllä sivu näyttää hieman hassulta, koska varsinainen sivun sisältö on hyvin kapealla palstalla keskellä sivua).

Ei kuitenkaan kannata tehdä sivuista sellaisia, että tekstirivin pituutta voisi venyttää loputtomiin. Tekstirivin pituus olisi hyvä olla noin 80-100 merkkiä. Tämän mittaisia rivejä on miellyttävintä lukea. Yli 150 merkin mittaisia rivejä sisältävän tekstin lukeminen on jo hieman hankalaa, koska tällöin ihmissilmän on vaikea pysyä oikealla rivillä tekstiä lukiessa. Sivun ulkoasulle voikin määrittää CSS:llä minimi- ja maksimileveyden (ei toimi IE6-selaimessa, mutta toimii tulevassa IE7-selaimessa ja muissa valtaselaimissa), joilla voi myös vaikuttaa tekstirivin pituuteen.

Sivuston saavutettavuuden suunnitteluun kuuluu kuitenkin myös paljon muuta kuin vain skaalautuvuus ja toiminta eri selaimilla. Erittäin hyvän perustietopaketin tarjoaa Tietoyhteyskunnan kehittämiskeskus (TIEKE) oppaalla Esteettömyysopas - Näin teet Web-sivujesi sisällön kaikkien saavutettavaksi. Oppaassa on paljon asiaa, josta useiden nettisivujen sopisi ottaa mallia. Hyviä tarkistuslistoja ja ohjeita saavutettavuudesta ja esteettömyydestä tarjoaa myös W3C:n suomenkielinen Web-saavutettavuuden 1-2-3 sekä Jyväskylän yliopiston artikkeli WWW-sivujen esteettömyyden tarkistusohjeita. Jos edellä mainituilla sivuilla esitetyt asiat ovat kotisivuillasi kunnossa, ovat kotisivusi huomattavasti paremmalla mallilla kuin 99 % Internetin sivuista.

Seuraava sivu (Kotisivut nettiin) >> << Edellinen sivu (Lomakkeita peliin)

Sivun kommentit