L-SP Nettisivukurssi: Sisältö selkeäksi

SISÄLTÖ SELKEÄKSIKäytettävyys, visuaalinen ilme ja kuvat nettisivuilla

Juho “Visu” Vainio!juho.vainio@partio.fi

Käsiteltävät aihealueet• Toimiva rakenne ja käytettävyys nettisivuilla

› sisällön asettelu › värit› typografia

• Teeman valitseminen tarpeen mukaan

• Kuvat verkkoon

• Tarvittava sisältö helposti löydettävissä, päätelaitteesta riippumatta

• Sisältö ja asettelu mietitty loppukäyttäjä edellä › mitä jäsen hakee ensimmäisenä sivulta? › entä retkelle/leirille/purjehdukselle haluava? › entä vanhemmat ja muu taustayhteisö?

• Visuaalisesti miellyttävä, elementit tasapainossa › luo varmemman vaikutelman sisällöstä › selkeyttää sisällön lukemista

Toimiva rakenne

Mieti millä luetaan• Verkkoliikenteestä mobiililaitteiden käyttäjiä

nykyään noin 27%, kannattaa siis ottaa se huomioon sivuja rakentaessa

• Näytön koon mukaan järjestäytyvä sisältö auttaa nopeassa tiedonhaussa

Otsake!› sivun nimi ja tunnus

Valikko

Sisältö!› tekstit › kuvat

Sivupalkki!› widgetit › kalenteri

› viimeisimmät postaukset yms.

Otsake

Valikko

Sisältö

Sivupalkki

Työpöydällä Mobiilissa

Päävalikko | Sivujen navigaatio

Tulevat tapahtumat

Tiedotteita, uutisia

Kuvakaruselli!Mainoksia ja nostoja

Logo/tunnus HakuUlkoiset palvelut, esim. SP

Taustakuva!Kannattaa valita rauhallinen tai jopa yksivärinen

Värit verkossa• Verkossa väriyhdistelmien kanssa toimivat lähes

samat säännöt kuin printissä

• Värit merkitään pääsääntöisesti heksakoodeina, esim. valkoinen #ffffff ja musta #000000

• Partiolle on määritetty tietyt väripaletit printteihin, niitä kannattaa kuitenkin mukauttaa omaan tarpeeseen ja hieman kirkastaa näyttöjä varten

• Väripaletteja voi luoda esim. Adobe Kulerilla

Typografia ja fontit• Kannattaa suosia selkeitä, päätteettömiä fontteja

jotka löytyvät kaikista järjestelmistä, esim. › Arial, Verdana, Helvetica

• Myös muita fontteja on mahdollista käyttää, näitä ns. webfontteja löytyy esim. Google Fontseista: › Open Sans› Ubuntu

Wordpressin teemoitus• Wordpressille löytyy lukuisia käyttäjien

suunnittelemia teemoja osoitteessa wordpress.org/themes

• Valinta kannattaa tehdä käyttötarpeen mukaan, lähtökohtaisesti ns. kikkailusivuja kannattaa välttää

• Kätevästi muokattavissa oleva teema on esim. valmiiksi asennettu Twenty Twelve tai Skeleton

Kuvat sivuilla• Netissä kuvat vetävät parhaiten mukaan sisältöön

ja viestivät sen laadusta

• Jos sivuilla on pitkiä tekstejä kuva auttaa keventämään ja selkeyttämään sisältöä

• Partiosivuilla kuvilla halutaan viestiä että partio on hauska harrastus kaiken ikäisille, ei sotilaallinen järjestö

Kuvat verkkoon• Kun halutaan kuvia verkkoon niin niiden kokoa

kannattaa pienentää ja laatua hieman heikentää › tavoitekuvakoko maksimissaan noin 1 MB

• Ilmaisia kuvankäsittelyohjelmia esim. GIMP sekä selaimella toimiva Pixlr

• Lisää vinkkejä kuvaamiseen ja kuvien valintaan Kiva kuva -koulutuksessa