Etusivu Säännöt Osallistujat Tulokset Vinkit Historia
Halti Retkilehti Fiskars Metro Metro Live

Vinkit

Seuraavassa on esitelty raadin näkökulma hyvistä lippukuntasivuista eri aihealueittain.

Etusivu ja ensisilmäys
Sisältö
Yhteystiedot
Rakenne ja navigointi
Luettavuus ja käytettävyys
Ulkoasu ja partiomaisuus
Tekninen toteutus

Etusivu ja ensisilmäys

Kun käyttäjä saapuu sivuille ensimmäistä kertaa, pitää hänelle tulla miellyttävä olo. Mielikuva sivuista syntyy heti ensisilmäyksellä. Jotkin etusivut karkottavat käyttäjän joko vastenmielisellä ulkoasulla, epäselkeydellä tai liialla informaation määrällä.

Etusivulla tulisi olla edes jonkinlainen selvitys, minne sivuille käyttäjä on tullut. Tiivis lippukunnan esittely ja 1-2 partiomaista kuvaa ovat oikea ratkaisu. Myös lippukunnan tunnus ja värit havaitsee hyvillä sivuilla nopeasti. Useilla sivuilla esiintyvä yläbanneri auttaa hyvin toteutettuna kovasti asiaa. Sivujen tottunut käyttäjä kaipaa etusivulta tietoa usein muuttuvista asioista. Esimerkiksi uutiset, lähestyvät tapahtumat tai edelliset päivitykset ovat tällaisia tietoja.

Joillakin sivustoilla oli käytetty ovimattosivua, jota pitää klikata päästäkseen varsinaisille sivuille. Raati ei löytänyt mitään perustelua kyseisen sivun käytölle, joten suosittelemme vahvasti sen poistamista.

Sisältö

Sivujen sisältöä suunnitellessa pitää miettiä, ketkä sivua tulevat käyttämään. Lippukuntasivuilla käyttäjät voidaan jakaa kolmeen ryhmään: 1) lippukuntalaiset vanhempineen, 2) lippukunnan ulkopuoliset partiolaiset ja 3) lippukuntaan liittymisestä kiinnostuneet lapset vanhempineen. Hyvillä sivuilla on lisäksi huomioitu johtajat omana ryhmänään.

Lippukuntalaiset kaipaavat erityisesti tietoa tapahtumista. Tulevia tapahtumia löytyy pitkälle tulevaisuuteen ja niistä on ajankohdan lisäksi myös lyhyt esittelyteksti. Myös retkikirjeet on hyvä laittaa sivuille, mutta ne eivät saa jäädä ainoaksi informaatioksi. Vain harvoilla sivuilla oli kunnollista tapahtuma-arkistoa, josta voisi katsoa, mitä tapahtumia on ollut ja lukea juttuja niistä.

Suurelle osalle lippukuntalaisista partio tarkoittaa pääasiassa omaa ryhmää ja sen tapahtumia. Näin ollen jokaiselle ryhmälle kannattaa luoda oma sivu, jossa on esimerkiksi ryhmän esittely johtajineen ja toimintakalenteri. Myös kokousajat ovat ehdoton juttu.

Lippukunnan uusimmat tuulet jäsen lukee tietysti uutispalstalta, joka elää ajassa ja päivittyy usein. Kuvagalleria on myös kova juttu, kunhan se on hyvin päivitetty. Parhaat galleriat on integroitu sivuston muuhun rakenteesen. Kuvissa tulisi olla kuvatekstit ja kuvien tiedostokoko riittävän pieni, jotta niiden avautuminen ei kestä liian pitkään.

Lippukunnan ulkopuolinen partiolainen lukee mielellään perustiedot lippukunnasta. Tilojen esittely ja historia ovat esimerkkejä hänelle suunnitellusta tarjonnasta. Jos lippukunta tarjoaa omaa kämppäänsä myös muiden käyttöön ja toivoo muiden oikeasti sitä käyttävän, on sivuilla laaja esittely kämpästä selkeiden varausohjeiden kera.

Jäsenhankinnassa lippukunnan nettisivut ovat nykypäivänä avainasemassa. Kunnollisilta sivuilta löytyy heti etusivulta selkeä linkki sivulle, jossa kerrotaan, miten liittyä mukaan. Uutta jäsentä kiinnostaa tietysti, mahtuuko ryhmiin vielä uusia jäseniä ja millaisia ryhmiä sekä kokousaikoja on tarjolla. Kunnolliset yhteystiedot ovat kaiken a ja o, mutta myös partiotoiminnan esittelyyn pitää panostaa. Hyvänä lisänä on muun muassa partiosanasto ja lista partiotoiminnassa tarvittavista varusteista, joista iloitsee myös moni lippukuntalaisen vanhempi. Mikäli liittymistietoa joutuu etsimään turhan kauan, saattaa kävijälle tulla vaikutelma, ettei lippukuntaan toivota uusia jäseniä.

Johtajiston huomioimisessa oma johtaja-alue on mainio juttu. Valitettavasti emme pystyneet arvioimaan eri sivujen johtaja-alueita, mutta seuraavassa hieman vinkkejä, mitä siellä voisi olla.

Hyvää sivustoa pystyy päivittämään moni henkilö ja päivitys onnistuu ilman kovin suurta teknistä tietämystä. Selainpohjaista sähköpostiohjelmaa tai keskustelufoorumia käyttäneen tulisi pystyä hallitsemaan päivitys, mikäli sisällönhallintajärjestelmä on hyvin toteutettu. Sisällönhallintajärjestelmän avulla sivujen päivitystaakkaa voidaan jakaa useamman johtajan kesken, jolloin sisältö pysyy tuoreempana. Parasta on, jos muokkausoikeuksia voidaan säätää käyttäjäkohtaisesti, jolloin esimerkiksi nuori vartionjohtaja saa muokata vain oman ryhmänsä ja LPKJ kaikkia sivuja.

Johtajisto tarvitsee työssään monenlaisia tiedostoja, joita ei kaiken kansan tarvitse pystyä näkemään. Esimerkiksi hallituksen pöytäkirjat ovat tällaisia. Näitä on hyvä laittaa johtaja-alueelle. Myös joitain info-paketteja, kuten vaikkapa ohjeita akelalle tai lippukunnan ansiomerkkitilaston, voi piilottaa vain johtajien käyttöön. Lippukuntamme Töölön Sinisten sivujen johtaja-alueen käytetyin ominaisuus on johtajien oma keskustelufoorumi, jonne on puolentoista vuoden aikana lähetetty liki 3000 viestiä. Tapahtumien suunnittelu on parantunut huomattavasti ja monia ideoita, joita muuten ei olisi keksitty, on tullut ilmi. Suosittelemmekin kaikille foorumin käyttöönottoa.

Sivusto ei ole koskaan valmis, vaan hyvä sivusto elää ajassa ja sitä päivitetään aktiivisesti. Jo sivuja suunniteltaessa kannattaa miettiä, miten sivuja pystyy päivittämään ja kuka sen tulee tekemään. Sisältöäkin on monentyylistä. Suuri osa sivuista on varsin staattisia eli niitä ei luomisen jälkeen tarvitse päivittää lähes lainkaan. Tällainen on esimerkiksi lippukunnan historiasta kertova sivu. Osa sivuista päivittyy muutaman kerran vuodessa, kuten vaikkapa hallitus- tai yhteystietosivu. Todella aktiivisesti päivitetään vain murto-osaa sivuista. Tähän osuuteen kuuluvat uutiset, tapahtumat ja mahdollisesti ryhmien sivut. Näiden sivujen päivityshelppouteen tulisikin panostaa, jotta sivusto pysyy tuoreena ja sivuille usein tuleva käyttäjä löytää aina jotain uutta. Staattisempien sivujenkaan päivitystä ja tiedon lisäämistä ei pidä kuitenkaan unohtaa, sillä tieto vanhenee helposti.

Yhteystiedot

Riippumatta kävijästä, yhteystiedot kiinnostavat kaikkia. Niinpä näiden toteutukseen tulee panostaa. Ensisijaisesti on löydyttävä vähintään yksi puhelinnumero ja yksi sähköpostiosoite, ja myös tieto siitä, että kenen osoite ja numero on kyseessä. Hyvin suotavaa olisi, jos pystyisi ottamaan yhteyttä kehen tahansa johtajaan erikseen. Kuvat johtajista antavat kasvot toiminnalle ja auttavat huonomuistisia tunnistamaan johtajan. Suurella osalla hyvistä sivuista on oma domain, jolloin myös domainin mukaiset sähköpostit lienevät mahdollisia. Näin ollen suosittelemme vahvasti, että kaikille johtajille luodaan muotoa etunimi.sukunimi@domain oleva sähköpostialias, josta postit ohjautuvat kunkin omaan osoitteeseen. Yhtenäinen rakenne antaa luotettavuutta ja parantaa osoitteiden muistettavuutta. Lisäksi osoitteet pysyvät aina samana, vaikka johtaja vaihtaisi varsinaista sähköpostiosoitettaan.

Sähköpostien spämmiesto voidaan toteuttaa monella tapaa, joista tyyliä matti.meikalainen(a)poistatama.mail.fi olevat, sekoitetut osoitteet edustavat huonointa ratkaisumallia, varsinkin jos näistä on luotu vielä mailto-linkit. Kaikki käyttäjät eivät nimittäin tajua, miksi osoite ei toimi. Huomattavasti parempia keinoja ovat javascript tai kuvat, tosin kumpikaan näistä ei ole täydellinen ratkaisu. Joku ei halua käyttää scriptejä eikä kuvista voi kopioida osoitetta. Toteutuksella ei kuitenkaan ole väliä, kunhan näkyvillä olevat osoitteet on kirjoitettu, kuten ne oikeasti kirjoitetaan. Jos sivuston kaikki osoitteet noudattavat samaa mallia (kuten esim. edellä esitetyt oman domainin mukaiset osoitteet), voi yhteystietosivuilla kertoa myös osoitemallin. Yksi todella hyvä malli sähköpostien esittämiseksi on seuraava:

  1. Kaikilla johtajilla samanmuotoiset osoitteet, etunimi.sukunimi@domain
  2. Spämmiesto toteutettu javascriptin avulla
  3. Kaikki osoitteet ovat näkyvissä oikeanlaisina ja niissä on toimivat mailto-linkit
  4. Jos käyttäjä on estänyt scriptien käytön, löytyy osoitteen kohdalta tieto, että osoitteen näkyminen vaatii scriptien hyväksymisen. Lisänä on tieto, että mitä muotoa osoitteet käyttävät.

Hyvistä yhteystiedoista löytyy myös pankkitilien numerot ja kolojen sekä kämppien osoitteet. Kartat ovat selkeää plussaa

Rakenne ja navigointi

Sivujen rakenne vaikuttaa vahvasti käyttäjäkokemukseen ja sivujen mahdollisuuksiin tietojen esittämisessä. Suurimmasta osasta sivuja löytyy ainakin kaksi osaa: navigointipalkki sekä sisältöalue. Monilla sivustoilla on lisäksi kaikilla sivuilla samanlaisena tai samantyylisenä pysyvä yläbanneri ja sivun alalaidan footer. Erittäin tärkeä asia sivujen rakenteessa on se, että se pysyy yhdenmukaisena koko sivustolla. Yllättäen häviävät tai ilmestyvät rakenneosiot sekoittavat nimittäin käyttäjän pahasti. Kuvagalleriat ja keskustelufoorumit olisikin pyrittävä täydellisyyttä tavoiteltaessa integroimaan samaan rakenteeseen, vaikka ne olisikin toteutettu ulkoisella ohjelmistopalikalla. Vähimmäisvaatimuksena täysin erilaisen näkymän tai kokonaan uuden ikkunan avaavan linkin kohdalla asiasta pitää varoittaa käyttäjää, eikä tällaista linkkiä tulisi suoraan laittaa navigaatio-osioon. Hyvässä rakenteessa kullakin sivulla on oma paikkansa puumaisessa rakenteessa ja käyttäjäkin pystyy selkeästi havaitsemaan asian. Kuriositeettina mainittakoon, että harvalla sivustolla oli otettu huomioon mainosbannereiden (kuten Sivukisa 07) sijoittelua rakenteessa.

Yleisten ohjeiden mukaisesti sivujen tulisi näkyä vaakasuunnassa kokonaisina 800x600 resoluutiolla. Nykytietokoneiden näytöt käyttävät lähes poikkeuksetta suurempia resoluutioita, joten hieman leveämpi sivusto ei ole katastrofi, mutta 800 pikselin leveys riittää mainiosti kunnollisiin sivuihin. Sivujen asettelu selaimessa on yksi tärkeä valinta. Sivuston keskittäminen selaimeen on hyvä ja suosittu vaihtoehto, samoin asemointi vasempaan laitaan. Muutama sivusto oli asemoitu selaimen oikeaan laitaan, mikä on kummallinen ratkaisu ja sotii ihmisen normaalia toimintaa vastaan. Yleensä katse keskittyy nimittäin näytön keskelle tai vasempaan laitaan sivuja selaillessa. Tämä juontaa juurensa siihen, että luemme tekstiä vasemmalta oikealle, ylhäältä alas.

Sivuston rakenne kannattaa nykypäivänä toteuttaa ehdottomasti tyylitiedostolla. Kehyksien tai taulukon käyttäminen on vanhanaikaista tyyliä, joten sellaisia käyttävät sivustot kannattaisi päivittää ajanmukaisiksi. Erityisesti kehyksien käyttö on huono ratkaisu, koska mitään sivua ei pysty linkittämään kunnolla, koska osoiterivillä säilyy koko ajan yksi ja sama osoite.

Navigointiin on monia ratkaisuja ja sivuston laajuus vaikuttaa kovasti siihen, kuinka helppoa on toteuttaa toimiva navigaatio. Seuraavaksi asiaa käsitellään laajan sivuston näkökulmasta. Suosituin navigointiratkaisu on sivun vasemmassa laidassa oleva pystynavigaatio, mutta myös vaakasuuntainen navigaatio on yleinen ratkaisu. Oikeassa laidassa olevaa navigaatiota ei voi varauksetta suositella johtuen länsimaalaisen ihmisen katseen keskittymisestä vasempaan yläkulmaan tekstiä luettaessa. Vaakanavigaatio aiheuttaa enemmän haasteita sivuston tekijälle, koska sivuston leveys on rajoitettu, mutta pituus ei. Tällöin ylimmän navigaatiotason otsikoiden määrä on rajattu ja niiden teksteistä tulee helposti epämääräisiä. Myös toisen navigaatiotason toteuttaminen on hankalampaa, vaihtoehtojen ollessa lähinnä pudotusvalikkotyyppinen ratkaisu tai pystynavigaation käyttö toisella tasolla. Ei siis olekaan yllätys, että pystynavigointi on suositumpi.

Toimiva valikkorakenne on hyvän navigaation perustana. Koska ihminen käsittää listattuna vain 5-7 asiaa kerralla, tulisi ensimmäisellä navigointitasolla olla vain 5-7 otsikkoa. Onkin haastava tehtävä löytää oikeat otsikot, joiden alle kaikki alisivut voidaan loogisesti sijoittaa. On mielipidekysymys, onko koko navigaatio auki kerralla, vai onko ensin esillä esimerkiksi vain ensimmäinen navigaation taso. Jos alisivustot on sijoitettu loogisesti ensimmäisen navigaatiotason alle, on supistettu näkymä huomattavasti selkeämpi.

Hyvä sivusto ei rajoitu navigoinnissa vain yhteen vaihtoehtoon. Sivukartan avulla tottunut käyttäjä löytää nopeasti tarvitsemansa ja jos jokin asia ei millään meinaa löytyä, sivukartta pelastaa usein. Niin sanotut leivänmurujäljet kertovat käyttäjälle, missä hän on sivujen loogisessa rakenteessa ja niiden lisäämistä sivustolle suosittelemme vahvasti. Leivänmurujälkiä tukevat valikkorakenteessa näkyvä korostus, missä sivulla ollaan. Lisäksi hyvin toteutettuna osoiterivi kertoo saman informaation. Olemme ylpeitä omasta toteutuksestamme, joten kannattaa tutustua siihen osoitteessa http://www.toolonsiniset.net. Toimiva hakutoiminto on suuri bonus, vaikka sen varjolla ei muun rakenteen suunnittelua saakaan laiminlyödä.

Kuten jo äsken mainittiin, sivujen URL-osoitteisiin kannattaa kiinnittää huomiota. Vähimmäisvaatimus on se, että jokainen sivu pystytään linkittämään, eli että osoitepalkissa vaihtuu osoite sivulta toiselle siirryttäessä. Koodimaiset, sekaisin kirjaimia ja numeroita sisältävät osoitteet ovat myös huono ratkaisu. Osoitteen tuleekin olla siisti. Toisekseen osoitteesta tulisi suoraan näkyä, millä sivulla on, eli vaikkapa historia-sivulla lukee osoitteessa historia-sana. Parhaimmassa tapauksessa osoite kertoo sivun loogisen sijainnin rakenteessa ja se vastaa suoraan sivuston otsikkoa. Ylimääräiset tiedostopäätteet on myös poistettu.

Luettavuus ja käytettävyys

Parastakaan sivustoa ei tule käytettyä, jos teksti on pielessä tai sivujen käyttäminen mahdotonta. Tekstikoon tulee olla riittävän suurta, jotta sitä ei tarvitse tihrustaa. Sivuston rakenteen tulee kestää myös fonttikoon suurennus. Tekstin tulee erottua hyvin taustastaan, samoin linkkien muusta tekstistä. Erityisesti muutama valikko hukkui taustaan. Hyvällä sivulla on käytetty hyvin erilaisia otsikoita ja teksti on ryhmitelty järkevästi kappaleisiin. Kuvat keventävät sivua ja tarjoavat lisäinformaatiota. Kieliasu on tietysti virheetöntä ja kieli elävää ja sujuvaa.

Sivuston tulee olla käytettävissä kaikille käyttäjille. Näin ollen sen tulee toimia eri selaimilla, myös vanhoilla koneilla, ilman kuvia, scriptejä tai muita lisäosia. Joku selaa sivuja kännykän näytöltä, toinen katselee niitä laajakuvatelkkarinsa kautta. Näkövammainen Sisu-partiolainenkin saattaa haluta tutkia sivuja. Kaikki erilaiset käyttäjät voivat käyttää sivuja, kunhan heidät on otettu huomioon. Kriittisimmissä tapauksissa sivuston käyttäminen oli kokonaan mahdotonta,jos esimerkiksi,halusi katsella sivuja ilman kuvia, vaikkapa kännykkäverkon yli laskussa säästääkseen. Monella sivustolla esiintyi virheitä IE 6:n kanssa, vaikka edelleen kolmasosa netin käyttäjistä surffaa kyseisellä selaimella. IE:n vanhempien versioiden huono tuki standardeille on ongelma, muttei selitys sille, miksi jokin sivusto ei sillä toimi. Kaiken kaikkiaan käytettävä sivusto vaatii vain erilaisten tilanteiden huomioimisen ja mahdollisten tilanteiden testaamista.

Yksi tärkeä tekijä käytettävyyden kannalta on sivuston domain-nimi. Kaikilla huippusivuilla on oma domain, joka perustuu joko lippukunnan nimeen tai nimen lyhenteeseen. Tällainen osoite on helppo muistaa ja oma domain ja sen mukana usein hankittu webhotelli mahdollistaa laajemman toiminnallisuuden kuin vaikkapa SP:n tarjoama sivutila.

Ulkoasu ja partiomaisuus

Hyvä ulkoasu pelastaa paljon, sen tietää jo blondikin poikaystävää hakiessaan. Loistavalla sivustolla ulkoasu tukee kuitenkin rakennetta ja sisältöä, eikä ole itse pääasia. Partiosivujen ulkoasussa tulisi näkyä partiomaisuus välittömästi. Luonnonläheinen värimaailma, toiminnalliset kuvat ja lippukunnan tunnukset ovat tärkeitä elementtejä. Ja tottakai teksteistäkin tulee heti partio mieleen.

Raadin arvostama ominaisuus ulkoasussa on selkeys. Rakenne-elementit erottuvat selkeästi, sivu on tasapainoinen eikä mikään elementti vie tarpeettomasti huomiota pois sivun varsinaisesta sisällöstä. Osasta sivuja puuttuivat kuvat lähes kokonaan. Ne kuitenkin piristävät sivuja suunnattomasti. Hyvillä sivuilla on yksi kuva joka sivulla, jos sivu on pitkä niin useampia. Kuvat ovat huolella valittuja, kooltaan optimoituja eivätkä varasta päähuomiota, jos kysymys on kuvituskuvasta. Fonttivalintoja ja erilaisten otsikoiden tyyliä kannattaa miettiä. Comic Sansin käytöstä raati sai näppylöitä.

Lippukunnan tunnuksien tulisi näkyä sivuilla. Logo onkin esimerkillisesti monella sivustolla sijoitettu suoraan yläbanneriin. Mikäli lippukunnan värit sopivat hyvin nettijulkaisuun, tulisi niitä käyttää sivujen pohjana. Värien määrä kannattaa rajoittaa kolmeen, joista yhtä käytetään ehkä hieman vähemmän tehosteena. Lippukunnan tunnuksista huivi ja lippu kannattaa esitellä niin kuvin kuin sanoin.

Tekninen toteutus

Sivustojen teknisestä toteutuksesta näkee parhaiten, onko sivustoa ollut tekemässä asiansa osaavat ihmiset. Lippukuntasivuissa teknisen toteutuksen laatu riippuu tietysti siitä, onko johtajistoon siunaantunut www-osaajia. Suurin osa sivuista on tekniseltä toteutukseltaan edelleen yhden henkilön tuotoksia. Perussivujen toteuttaminen, kuten vaikkapa sivukisan sivut, ei ole kovinkaan monimutkaista, jos tuntee edes hieman html-merkkausta ja osaa lukea oppaita.

Hyvä tekninen toteutus lähtee sisällön ja ulkoasun erottelusta. Ulkoasu eli tyylit kirjoitetaan CSS-tiedostoon ja itse sisältö toiseen tiedostoon. Parhaimmassa tapauksessa sisältö erotellaan vielä rakenteesta, esimerkiksi tietokantaan. Ulkoasun erottelu mahdollistaa ulkoasun muuttamisen niin, ettei itse sisältöön tarvitse koskea lainkaan.

HTML-merkkaus noudattaa tiettyjä sääntöjä, joiden mukaan sivuston merkintä tulee tehdä. Oikein tehty merkkaus takaa, että selain osaa näyttää sivun, niin kuin se on suunniteltu näkyväksi. Näin ollen sivusto kannattaa validoida. Tätä varten löytyy työkalu osoitteesta http://validator.w3.org/. Samalla tavalla myös tyylitiedostoille löytyy validaattori osoitteesta http://jigsaw.w3.org/css-validator/. Muutenkin sivujen testaamiseen kannattaa panostaa ja testaamisessa tulee huomioida kaikki yleisimmät selaimet, myös ilman kuvia ja scriptejä. Loistava työkalu testaamiseen ja kehittämiseen on Firefoxin Web Developer Toolbar. Palikka on saatavilla myös suomenkielisenä ja sen voi ladata joko omilta sivuilta tai Firefoxin lisäosasivuilta.

HTML-standardista on monta versiota ja käytetty valinta tulee ilmoittaa html-tiedoston alussa. Yllättävän monelta lippukuntasivulta tämä perusasia puuttui tai oli se oli väärin merkitty. Myös merkistökoodaus, eli millaista aakkostoa sivusto käyttää, tulee kertoa. Tämäkin puuttui todella monelta sivulta. Yleisin merkkausvirhe oli kuitenkin kuvien alt-tagien, eli vaihtoehtoisen tekstin, puuttuminen. Alt-tagiin laitettava teksti näytetään, jos kuvaa ei pystytä jostain syystä näyttämään. Ilman tätä tekstiä, kuvasta ei näy mitää tietoa, jos kuvaa ei voida näyttää. Joillakin sivustoilla koko valikko katosi näkyvistä tämän virheen vuoksi, kun kuvat oli estetty

Myös valmiin sivupohjan käyttäminen edellyttää riittävää teknistä tietämystä, jotta sivuista saadaan oikein hyvät. Erityisesti muutamissa Joomlalla toteutetuissa sivustoissa näkyi selvästi, että julkaisujärjestelmää ei tunneta riittävän hyvin eikä koodia ole validoitu. Samoin kaikista Joomla-sivuista pystyi ensisilmäyksellä arvaamaan, että sivut on toteutettu Joomlalla.