[IMAGE]

 Sivun suunnittelu
On olemassa paljon hyviä ideoita www-sivun sisällöksi. Ohessa on lyhyt opas suunnittelun pohjalle. Kun alat tekemään uusia sivuja kannattaa työ toteuttaa seuraavassa järjestyksessä.
1. Sammuta tietokone
2. Suunnittele paperilla kaikki mahdolliset asiat valmiiksi, miten sivuilla liikutan, mitä tekstiä ja kuvia tarvitset, minkälaisen ulkoasun haluat sivuille. Laadi projektisuunnitelma, aikataulu projektille jne..
3. Aloita työskentely editorilla ja muilla sivun materiaalin tuottamiseen tarvittavilla ohjelmilla.

Kun aloitat sivujen teon mieti seuraavia kohtia:
1. Määritä tavoitteet:

  • Miksi olet tekemässä www-sivuja?
  • Mihin tarkoitukseen olet niitä tekemässä?
  • Onko sivuilla todella joku tarkoitus vai ovatko ne palvelimella huvin vuoksi?
2. Selvitä käyttäjien tarpeet
  • Kuka sivujasi käyttää tai kenet haluaisit käyttävän sivujasi?
  • Miksi he lukevat sivujasi?
  • Kuinka usein käyttäjät käyvät sivuillasi?
  • Onko sinulla valmis yleisö vai pitääkö sinun vangita se?
  • Ovatko satunnaiset kävijät tärkeitä?
  • Pitääkö sivuja päivittää usein?
3. Määrittele onnistuminen
  • Kuinka monta vierailijaa sivuilla käy/viikko tai kuukausi?
  • Mitä he tekevät sivuillasi?
  • Kuinka kauan he vierailevat sivuillasi?
  • Kuinka usein he tulevat takaisin?
  • Raakamateriaali: käyttötilastot ja käyntiluvut
  • Sisäiset vaikutukset paljonko vähenee soittelu tekniseen tukee tms. ja lisääntyykö esimerkiksi kansainväliset kontaktit
.4. Suunnittele rakenne
  • Mistä pitää päästä minnekin? Vaikka itse tiedät mikä sivu on missäkin, niin sivujen käyttäjät eivät tiedä missä jokin tärkeä sivu sijaitsee.
  • Onko tarkoitus pakottaa vierailijat kulkemaan tiettyä reittiä
  • Hyvä suunnitelma vähentää itse tekovaiheen ongelmia paljon.
5. Toteuta: valmista kuvat, tekstit jne.....

6. Seuraa tuloksia ja huomioi palaute. Seuraa käyntitilastoja, sähköpostia - vastaa saamiisi viesteihin

7. Testaa sivusi usealla koneella (mikäli mahdollista), eri näyttöresoluutioilla, eri värien määrällä. Se mikä näyttää yhdellä koneella hyvältä, voi olla aivan erinäköistä toisella.

8. Päivitä, päivitä päivitä............

Sivun suunnittelu osakohdittain

Lyhyys
Pyri tekemään ainakin etusivusta lyhyt. Anna käyttäjän päättää etusivulla se, että jatkaako hän katsomista vai menee toiseen paikkaan. Lyhyydellä tarkoitan sellaista etusivua, jota ei tarvitse vierityspalkeilla vierittää, vaan koko sivu on heti näkyvissä.

Tasapainota
Selaimilla on tapana sijoittaa kuvat ja teksti lähelle vasenta marginaalia. Tuloksena vasemmalle painottuneita sivuja. Ratkaise ongelma välttämällä peräkkäisiä lyhyitä rivejä. Käytä mieluimmin leveitä kuin korkeita kuvia. Käytä palkkeja, jotka osoittavat vasemmalle. Palkki, jonka väri häipyy oikealle päin mentäessä suuntaa lukijan mielenkiinnon vasemmalle.

Navigointi
Tiedät varmaan missä kaikki sivut on. Ajattele sivuston suunnittelussa käyttäjää, joka näkee sivuston ensimmäistä kertaa. Älä anna käyttäjän eksyä sivuilla.

Jaa sivu pystysuunnassa osiin.
Jaa sivu esim. vaakaviivoilla osiin. Omat osa-alueet navigointi painikkeille/sanoille, esittely osalle, varsinaiselle sisällölle, osoitelohkolle ja alareunan navigointipainikkeille/sanoille.

Vaakaviivat
Hyvä tapa rytmittää sivuja, mutta muista kohtuus - ei jokaisen rivin tai kappaleen jälkeen vaakaviivaa.

Palkit
Vaihtoehto vaakaviivoille. Tee kuvankäsittelyohjelmalla värillinen/kuvapalkki. Vältä korkeita palkkeja joiden latautuminen kestää kauan. Käytä samaa palkkia, jos mahdollista - osa selaimista tallentaa käytetyn kuvan muistiin, joten sen uudelleen lataaminen ei kestä kauan. Muista niitä, jotka eivät näe kuvia antamalla kuvalle ALT-komentoon esim.+- merkkejä (<img src=”kuva.gif” ALT=”+++++++++++++++++++++++++++”>)

Katkot
Tyhjät rivit tekstien välillä antavat tekstille ilmavuutta

Kuvat
Kuvien koko ei mieluimmin saisi ylittää 20 kilotavua. Jos mahdollista, käytä samoja kuvia yhdellä sivulla. Kuvan uudelleen lataus nopeaa. Käytä maksimissaan kolme kuvaa yhdellä sivulla.

Tekstin ja kuvien sijoittaminen taulukkoon
Sijoittamalla tekstiä ja kuvia taulukkoon voit tehdä sivuista vaikka sanomalehden näköisiä.

Sivujen otsikot
Otsikoiden tulee kertoa ytimekkäästi mistä sivulla on kyse. Tarpeen mukaan tee tarvittavat väliotsikot. Voit käyttää otsikoissa kuvaa tai tehdä koko otsikon kuvankäsittelyohjelmassa.

Taustakuvat
Jos laitat taustalle grafiikkaa, valokuvia, niin huolehdi siitä ,että teksti jää luettavaksi. Jos käytät palkkia taustakuvana niin palkin leveys tulee olla vähintään 800 pikseliä leveä. Korkeudeksi riittää 1 pikseli. Täten saat taustakuvan latautumaan nopeammin.

Ongelmat
Kehykset ja vaakaviivat: Jos määrittelet kehysten/taulukon leveyden prosentteina näytön koosta, voit olla varma, että hieno ulkoasu, jonka sivulle olet tehnyt, näyttää eri näyttöresoluutiolla naapurin koneella aivan erilaiselta. Ratkaisu: määrittele taulukot ja kehykset pikseleinä.

Kompromissit
Vaikka kuinka paneutuisit sivujen tekoon, joudut suurella todennäköisyydellä tekemään sivuston kanssa kompromisseja. Sen loistavan kuvan voit joutua tallentamaan vähän heikkolaatuisempana, jotta se latautuisi nopeammin. Mieti kaksi kertaa uusien tekniikoiden lisäämistä. Onko tarkoitus osoittaa teknistä näppäryyttä vai onko tarkoitus todella kertoa lukijoille jotakin?