Vinkkejä nettisivuston graafiseen suunnitteluun

Valikot (menu)

Valikot kannattaa tehdä tekstimuodossa, ei kuvina. Sivujen päivitys ja uusien sivujen lisäys onnistuu silloin helpommin hallintapaneelista.

Valikkotekstillä voi kuitenkin olla graafinen taustakuva.

Aktiivinen linkki on hyvä erottua jotenkin, jotta vierailija heti tietää millä sivulla ollaan.

Fontit

Käytä leipätekstissä ja valikoissa vain yleisimpiä fontteja. Nettiselain käyttää koneella olevia fonttityyppejä. Tässä lista melkoisen turvallisista fonttityypeistä, jotka löytyvät lähes jokaiselta koneelta:

Arial
Comic Sans MS
Courier New
Georgia
Helvetica
Monospace
Serif
Sans-Serif
Tahoma
Times New Roman
Trebuchet MS
Verdana

Jos jonkin vierailijan koneelta ei löydy käytettyä fonttityyppiä, näytetään sivu ko. tietokoneen oletusfontilla.

Sivuston koko ja skaalaus

Yleensä sivujen leveys määritellään kiinteäksi, jotta ulkoasu olisi jokaisella näytöllä samanlainen.

Sivuston maksimileveytenä voitanee käyttää 1000 pikseliä. Yleensä sivut ovat hieman sen alle, noin 900 pikseliä. Silloin ne mahtuvat vielä miniläppärinkin näytölle.

Pystysuunnassa sivun pituus kuitenkin muuttuu sen mukaan, minkä verran sivulla on sisältöä. Suunnitteluvaiheessa jo kannattaa miettiä, miten se skaalautuu pystysuunnassa. Onko se helposti "rullattavissa" alaspäin.

Sivusto voidaan tehdä myös pystysuunnassa kiinteään kokoon. Silloin sisältöalueelle tulee oma rullauspalkki, jos sisältö ei mahdu kerralla näkyviin. (Tässäkään tapauksessa ei käytetä kehyksiä (frame), vaan toteutus tehdään rullattavalla div -elementillä.)

Läpinäkyvyys

Nykyiset nettiselaimet tukevat jo hyvin PNG -kuvien läpinäkyvyyttä. Ongelmana on vain vanhempien windowsien mukana tullut Internet Explorer 6 selain (IE6), joka ei sitä tue. IE6 selaimen käyttäjiä on vielä jonkin verran, mutta onneksi vähenemään päin.

On olemassa työkaluja, joilla läpinäkyvyys saadaan jotenkin toimimaan myös IE6:lla, mutta niiden toiminta on puutteellista.

Lähtökohtaisesti sivut ohjelmoidaan ensin nykyaikaisille selaimille, ja sitten viilataan tai muutetaan niitä hieman IE6 selaimen käyttäjille.

Taustakuva

Itse sivun ulkopuolelle jäävä alue voidaan täyttää taustakuvalla tai -värillä. Taustakuva voi olla toistuva vaaka- tai pystysuunnassa tai molemmissa.

Taustakuva voi olla myös yksi iso kuva. Taustakuvan koko pitäisi silloin olla kutakuinkin suurimpien näyttöresoluutioiden kokoinen, noin 1920 x 1080 pikseliä.

Kannattaa kuitenkin huomioida, mitä kuvan ulkopuolelle jää, jos taustakuva ei täytä koko näyttöä. Taustakuvan lisäksi voi määritellä sopivan taustavärin ja/tai häivyttää kuvan reunat taustaväriin. Silloin se näyttää jokaisessa tilanteessa hyvältä.