sunnuntai 24. maaliskuuta 2013

Blogin ulkoasu: 15 vinkkiä, joilla vältät pahimmat virheet


En ole oikeastaan ikinä tyytyväinen blogini ulkoasuun. En kuitenkaan koskaan istu alas ja tee kaikkia haluamiani muutoksia, vaan siirrän niitä hamaan tulevaisuuteen, jolloin minulla on "paremmin aikaa". Yleensä blogin ulkoasuun alkaa tottua ja muutosten tekeminen ei tunnu enää vaivan arvoiselta. Tällä kertaa olen ajatellut edetä ulkonäkökriisin suhteen ja tein jotain asialle. Kerron kohta mitä mutta siitä on sinullekin varmasti hyötyä.

Blogin ulkoasu on erittäin tärkeä juttu. Bloggarin ei pitäisi ajatella ulkosua vain sen kannalta mistä itse sattuu tykkäämään. Varsinkin ensimmäistä omaa blogia tehdessä voi innostua kaikenlaisista hienoista viritelmistä mitä sivulle voi laittaa, vaikka parasta olisi vain hillitä itseään. Blogin rakenne on loppujen lopuksi merkityksellisin lukijalle ja sillisalaattia muistuttava blogi on monelle liian työläs lukukokemus.




Päätin siis ottaa selvää siitä, millainen ulkoasu toimii ja mitä virheitä tulisi ehdottomasti välttää. Osa vinkeistä voi tuntua päivänselviltä, jos olet kokenut lukija/bloggari, mutta osa saattaa tulla aivan puun takaa.

1. Teksti ja tausta: Olet ehkä huomannut, että suurin osa blogeista, tai nettisivuista ylipäätänsä, käyttää valkoista taustaa. Tekstiä on helpointa lukea, kun tausta on vaalea ja teksti tumma. Monesti näkee myös mustalla taustalla valkoista tekstiä mutta sitä on vaikeampi lukea, sillä värit heijastavat jotenkin kummasti niin, että teksti ei erotu yhtä kirkkaasti kuin värien ollessa toisin päin. Muutkin väriyhdistelmät rasittavat silmiä pidemmän päälle.

2. Taustakuva: Taustakuvat ovat hyviä kunhan ne eivät vie liikaa huomiota. Yksinkertainen kuvio taustalla on toimiva, sillä kuvion rikkoutumisesta ei tarvitse olla huolissaan. Jos käytät kuvaa, se ei näy kokonaisena, joten katso tarkkaan mitkä osat jäävät näkyviin ja mitkä piiloon postausten ym. elementtien taakse. Pahin taustakuva, johon aina silloin tällöin törmää, on sellainen missä yksi ei-niin-hillitty kuva on monistettu useaan otteeseen taustalle ja yksikään kuva ei näy kokonaisuudessaan. Levotonta ja tökeröä. Olen itse kokeillut muita värejä taustalla mutta palaan aina lopulta tylsään valkoiseen. Se on vain paljon enemmän ammattimaisemman näköinen.

3. Fontti: Sen on oltava selkeä. Koristeelliset ja usein samalla kertaa hienot fontit voivat olla pirun vaikeita lukea. Eri fontteja ei myöskään saisi olla kovin montaa samalla sivulla. Monet vannovat kolmen eri fontin enimmäismäärään. Fontin koko ei saisi olla liian pieni.

4. Värit: Värejä voi käyttää kiinnittämään lukijan huomio tiettyihin osiin blogissa. Kaikkia sateenkaaren värejä ei kuitenkaan kannata hyödyntää, vaan malttia tähänkin asiaan.

5. Liikkuvat osat: Tähän sarjaan kuuluvat kaikki vilkkuvat tekstit ja liikkuvat kuvat. Ne herkästi ärsyttävät lukijaa ja tekevät keskittymisestä vaikeaa (jos sellaista asiaa kuin keskittyminen netissä ylipäätänsä harrastetaan). Ei siis liikaa Flashia.

6. Eri osien tasaisuus: elikkä jos käytät blogissa kuvia, moni suosittelee käyttämään tekstin kanssa samanlevyisiä kuvia, jotta kokonaisuus pysyy yhtenäisenä. Sama koskee sivupalkkeja, eli niissä olevien elementtien, esim. mainosten, tulisi olla kaikkien samanlevyisiä. Hmmm, itse koen kuitenkin tekstin levyisten kuvien käyttämisen hieman hankalana, koska en aina halua jättiläismäisiä kuvia postauksiini.

7. Blogin leveys: Blogin leveys kannattaa säätää sellaiseksi, että lukijan ei tarvitse skrollata sivua sivusuunnassa nähdäkseen kaiken oleellisen. Jos vain mahdollista, blogin ulkoasua kannattaa käydä testaamassa eri kokoisilla näytöillä. Jos itse tekee blogin suurella näytöllä, se voi näyttää ihan eriltä pienemmällä ruudulla.

8. Nopea ladattavuus: Kukaan ei odota, jos sivulla menee sata vuotta latautua. Suurin syy on yleensä valtava kuvamäärä. Jos kuvia on kuitenkin oltava paljon, niiden koko kannattaa muuttaa kuvat pienemmiksi. Yhdelle sivulle ei silloin kannata tunkea montaa postausta, vaan postaus per sivu -määrä kannattaa rajata vain muutamaan.

9. Musiikki: Tämä on totaalinen no-no; ei musiikkia. Kuinka moni on ollut julkisella paikalla koneella ja uudelle sivulle mennessä koneen kaiuttimista on yllättäen pärähtänyt jokin renkutus soimaan? Hirrrveän noloa ja ärrrrsyttävää. No, sen jälkeen ainakin tietää mille sivulle ei enää mene. Jos musiikkia haluaa integroida blogiinsa, niin sen tulee lähteä soimaan vasta kun lukija itse painaa play-nappia. Sama koskee videoita.

10. Blogin info: Älä tee tästä vaikeaa. Uuden lukijan täytyy saada heti tietää mistä sivustossa on oikein kyse. Jopa bannerissa voi olla pari sanaa aihepiiristä nimen lisäksi. Kätevimmin se hoituu esimerkiksi pienellä esittelytekstillä, joka on heti havaittavissa. Sivupalkin yläosa on yleinen ja erittäin toimiva paikka tälle infopläjäykselle. Jokin yhteydenottotapa, useimmiten siis sähköpostiosoite, on laitettava selkeästi joko tähän infoon tai seuraavaksi mainittavaan kohtaan:

11. Bloggarin info: Etenkin muotiblogimaailmassa, mutta myös muualla, bloggarilla itsellään on suuri merkitys ja se kiinnostaa lukijoita. Tietoa kirjoittajasta voi tunkea yllä mainittuun blogin info -osuuteen tai bloggari voi omistaa itselleen kokonaisen erillisen postauksen tai sivun, johon on oma linkkinsä. Profiilissa olisi oltava myös bloggarin kuva, sillä se tekee blogista heti persoonallisemman ja lukijaläheisemmän.

12. Silmäiltävä sisältö: Blogin sisältö ei saisi olla tasapaksua tekstiä ehkäpä muutamilla kuvilla höystettynä, vaan sisällöstä pitäisi saada tolkkua vain silmäilemällä sitä läpi. Jos panostaa kovasti tekstien sisältöön, tämä voi kuulostaa inhottavalta. Mutta jos lukijaa odottaa vain hirveä määrä tasapaksua tekstiä, voi lukeminen tyssätä nopeasti tai sitä ei edes lähdetä yrittämään. Tekstiin panostamiseen tulisi siis kuulua myös väliotsikkojen, luetteloiden, korostusten, ym. käyttö. Lukija lukee varmasti koko jutun, kun on ensin silmäyksellä todennut sen lukemisen arvoiseksi.

13. Siistit sivupalkit: Sivupalkeissahan on yleensä mainosten lisäksi linkkejä blogin arkistoon, suosittuihin teksteihin, tageihin, ulkoisiin sivuihin, ym. Vaikka joka linkistä haluaisi kauheasti sanoa jotain, vaikkapa "Tässä linkki Instagram -profiiliini. Tulkaa kaikki katsomaan kuvia. Otan joka päivä kauheasti jänniä kuvia ja en julkaise niitä täällä blogissa. Klikkaa tuosta." -tyyppisesti, kannattaa kaikki tämä ilmaista vain parilla sanalla, esim. "Instagram -profiilini". Linkkien tulisi olla itsensä selittäviä, jotta lukija pystyy navigoimaan hämmentymättä.Tälläisten blogin kannalta oleellisten navigaatiolinkkien tulisi aina olla tekstilinkkejä kuvalinkkien sijasta, sillä kuvat eivät välttämättä lataudu kaikilla lukijoilla.

14. Selkeät linkit: Linkit kannattaa aina korostaa jotenkin muusta tekstistä, jos toivoo jonkun niitä klikkailevan. Ne voi alleviivata tai muuttaa toisen värisiksi. Klikatun linkin olisi hyvä muuttaa väriään, jotta lukija tietää mitä on tullut jo paineltua ja lukukokemus on miellyttävämpi. Ei ole hauskaa painella vahingossa samaa linkkiä monta kertaa. 

15. Ei turhia alleviivauksia: Tavallista tekstiä ei kannata alleviivata, sillä silloin se muistuttaa erehdyttävästi linkkiä. Mikäs lukijasta sen ärsyttävämpää, kuin klikkailla jotakin linkin näköistä mikä ei kuitenkaan toimi. Jos tekstiä haluaa korostaa, sen voi tehdä vaikka lihavoinnilla tai kursiivilla.

Huomaan, että olen itse tietoisesti noudattanut monia yllä mainituista ohjeista. Muutama kohta, kuten kuvien leveys ja bloggarin tarkempi info, kaipaavat vielä hienosäätöä. Kommenteissa otetaan vastaan lisävinkkejä ja mietintöjä aiheesta!


Photo credit: Mike Licht, NotionsCapital.com / Foter.com / CC BY

10 kommenttia:

  1. Täyttä asiaa! Kaikki pitävät paikkansa, erityisen harmittavaa on tuo kohdan 14 puuttuminen eli kun linkit ei ole alleviivattu ja ne ovat samanvärisiä kuin tekstit. Sitten saa arvailla että onko jossain linkkejä vai ei :D

    VastaaPoista
    Vastaukset
    1. Totta,se on kyllä ihme taktiikka olla korostamatta linkkejä. Ihan kuin niitä ei haluaisi klikattavan mutta silti on pitänyt niitä laittaa. Aina joskus vahigossa törmää tähän.

      Poista
  2. onko sulla sitten noin hyvä blogi?

    VastaaPoista
  3. Jesh, moni kohta oli jo handussa ihan alitajuisesti! :)

    VastaaPoista
  4. Hyviä vinkkejä! Onko tuohon blogin leveyden tarkastamiseen mitään muita vaihtoehtoja kuin tutkailla erikokoisia näyttöjä? Itsellä on isonäyttöinen läppäri, ja blogissani on paljon kuvia joiden haluaisin näkyvän suurena. En kuitenkaan halua, että lukija joutuisi skrollailemaan, se on tosiaan ärsyttävää.

    VastaaPoista
    Vastaukset
    1. Netistä näyttäisi löytyvän kasapäin erilaisia testisivuja, kun hakee jotakin sellaista kuin screen size test tms. googlesta.

      Poista
  5. Miten olet saanut nuo blogi,info,blogilista jne. keskitettyä, eli tohon keskelle? ja onko sinulla mitään tietoa miten saisin samankaltaisen blogin kun esim tällä ---> http://thenextepisode-katarina.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Ohje välilehtien keskittämiseen löytyy täältä. Jos tuo esimerkki ei ole erillinen teema, niin sitten se vaatii aika paljon koodailua, mitä en tähän hätään (ja tilaan!) pysty selvittämään.

      Poista