Blogiin kirjoittamisen muoto-opas

Blogissa hyväkin kirjoitus voi jäädä huomiotta, jos se ei ole helposti silmäiltävä ja luettava. Tämä opas esittelee muotoilut ja tyylit, joita käyttämällä blogin menestys ei tyssää muotoseikkoihin.

Oppaan neuvot on tarkoitettu erityisesti pidempien artikkelien kirjoittamiseen. Lyhyissä kappaleen tai parin teksteissä korostuskeinot ja muotoilut eivät ole yhtä hyödyllisiä.

Tekstin muotoilu ja jäsentely

Teksti ei saa näyttää yksitoikkoiselta ja sen tärkeimmät pointit on paljastuttava silmäyksellä. Blogeihin päätyvät ihmiset eivät näet usein lue tekstejä vaan he silmäilevät niitä etsien itseään kiinnostavaa materiaalia. Silmäily edeltää monesti alusta loppuun lukemista, jos blogin lukija ei ole siihen etukäteen motivoitunut.

Seuraavaksi esiteltävät muotoilut saa useimmissa blogeissa käyttöön yhdellä hiiren klikkauksella. Tarvittavat työkalurivit voivat näyttää esimerkiksi tältä:

(Ylläoleva ruudunkaappaus on otettu WordPress-julkaisujärjestelmästä.)

Otsikko

Kirjoituksen otsikko voi ratkaista luetaanko juttua ollenkaan. Otsikon on syytä olla

• kuvaava: ei nokkela tai arvoituksellinen
• ytimekäs: tärkeä avainsana kannattaa sijoittaa alkuun
• rehellinen: otsikon antama lupaus lunastetaan tekstissä
• kiinnostava: esimerkiksi rohkeus, uusi aihe tai lupaus hyödyllisestä tiedosta herättävät mielenkiinnon
• yksilöllinen: otsikossa kannattaa yleensä välttää blogin rajattua teemaa kuvaavia itsestäänselviä sanoja

Alaotsikot

Alaotsikko helpottaa tekstin silmäilyä ja kertoo lukijalle kirjoituksen sisällöstä ja rakenteesta.

• Käytä alaotsikoita pidemmissä postauksissa.
• Alaotsikko tiivistää sitä seuraavien kappaleiden aiheen.
• Sisällytä alaotsikkoon aihetta kuvaavia tärkeitä avainsanoja.

Kappaleet

Blogissa normaali teksti jakautuu kappaleisiin, joiden ylä- ja alapuolella oleva tyhjä tila helpottaa sisällön hahmottamista.

• Pidä kappaleet lyhyinä.
• 1-3 virkettä, 2-5 riviä per kappale.
• Vaihtele kappaleiden pituutta.

Numeroimattomat listat

Listaukset ovat netin vastine ranskalaisille viivoille. Ne johdattavat lukijan silmiä ja jäsentävät asiat omiksi kohdikseen.

• [Tämä on numeroimattoman listan yksi kohta.]
• Käytä jos asiat voidaan esittää luetteloina.
• Tekevät silmäilyn huomattavasti helpommaksi (vai mitä?).
• Helpottavat asioiden mieleenpainamista.

Numeroidut listat

Numeroidut listat helpottavat tekstin seuraamista, erityisesti kun kohtien määrä ilmoitetaan etukäteen.

• [Kuten tämä mutta täplän tilalla juokseva järjestysnumero.]
• Käytä aina jos lueteltavia asioita on tietty merkityksellinen määrä …
• … tai jos esitetään sarja vaiheita, esimerkiksi ruokaohjeen työvaiheita.
• Voidaan käyttää kokonaisen kirjoituksen jäsentämiseen.
• Luovat tekstiin juoksevuutta ja turvallisen loogisuuden vaikutelman.

Lihavoinnit

Lihavointi on paras tapa korostaa listauskohtien ensimmäisiä lauseita ja tärkeitä asioita tekstin seassa.

Lihavoi

• tärkeimmät pointit, älä kuitenkaan lihavoi itsestäänselvyyksiä
• valikoiden: jos lihavoit liikaa, korostus menettää merkityksensä,
• vähintään 2-3 sanan kokonaisuuksia, jotka ilmaisevat jotakin tärkeää jo ilman ympäröivän tekstin lukemista. Yksittäisten sanojen lihavointi leipätekstin seasta tekisi siitä levottoman oloista, minkä vuoksi sitä kannattaa käyttää vain poikkeustapauksissa.

Kursivoinnit

Kursivointi ei ole yhtä hyvä korostuskeino kuin lihavointi, koska kursivoitua tekstiä on vaikeampi lukea näytöltä. Kursiivia voidaan kuitenkin käyttää esimerkiksi seuraaviin erikoistarkoituksiin:

• teosten nimet
• painotukset
• kysymykset
• lainaukset
• vieraskieliset sanat

Sisennetyt lainaukset

Lainausten sisentäminen on yleinen keino erottaa muiden sanomiset omalla muotoilullaan.

• Sisennä kaikki lainaukset paitsi hyvin lyhyet.
• Sisennykset tekevät tekstistä vähemmän yksitoikkoista.
• Muotoillut lainaukset helpottavat pikaista lukijaa erottamaan muiden ajatukset ja kommentoinnin kohteet blogin kirjoittajan mielipiteistä.

Kuvat

Kuvien käyttö voi olla tärkeä osa kirjoituksen jäsentämistä ja blogin viestintää. Monet eivät jaksa lukea kuvattomia tai vähäkuvaisia blogeja (kuten tätä).

• Kuvat katkaisevat ja piristävät tekstiä, joka voisi muuten näyttää tylsältä.
• Ne kiinnittävät lukijan huomiota johonkin tekstin aspektiin.
• Toimiva kuva voi olla esimerkiksi symbolinen havainnollistus, sarjakuva, ruudunkaappaus tai tilastokuvaaja.
• Erityisen tehokkaita voivat olla kirjoituksen alussa olevat kuvat, kenties jo ensimmäisen kappaleen tai parin jälkeen.

Linkit

Linkit muille sivustoille ja oman blogin muihin kirjoituksiin ovat myös osa blogin muotokieltä.

Hyvä linkki

• suosittelee olennaista sisältöä kirjoitukseen liittyen,
• kuvaa kohdesivua linkissä olevalla tekstillä eli ankkuritekstillä,
• kiinnittää silmäiltäessä huomiota kuten lihavointi, minkä vuoksi…
• … voi herättää kiinnostusta ankkuritekstillään koko kirjoitusta kohtaan (eikä vain kohdesivua kohtaan).

Blogin CSS-tyylit

Epähoukutteleva ulkoasu ei aina kumpua kirjoittajasta vaan sen voi aiheuttaa blogin template eli ulkoasun määrittävä teema.

Blogin yleinen ulkoasu määrittyy pitkälti CSS-tyylitiedostossa (tässä esimerkkinä tämän blogin CSS-tiedosto). Tyylitiedoston arvoja muokaamalla blogista voi saada huomattavasti helpommin luettavan.

Riviväli

Riittävä riviväli tekee tekstin ilmavaksi ja silmäilyn helpoksi. Sitä säädetään CSS:n line-height-ominaisuudella, jonka arvoksi sopii kerroinluku (tässä blogissa se on 1.5).

Tasaus

Tasauksen suhteen on vain yksi hyvä vaihtoehto: tasaus vasemmalle. Molemmilta sivuilta tasattu teksti tekee vaikeaksi erottaa rivejä toisistaan. Netissä estetiikka on paljon toissijaisempaa kuin painetussa tekstissä.

Tekstin leveys

Kumotakseni edellisen pointin:

• tekstipalstan on syytä olla kapea – ei siksi että sitä olisi niin nopeampi lukea vaan jotta teksti näyttäisi houkuttelevammalta.
• Käyttäjät pitävät eniten riveistä joiden leveys on noin 10-13 cm. (Lähde: “Optimal Line Length”, WebUsability.com)
• Leveys kannattaa pitää blogissa kiinteänä (fixed width layout) myös siksi, että ruudun leveyden mukaan levittäytyvää tekstimassaa (fluid width layout) olisi hankalampi lukea isolta näytöltä jos selainikkuna täyttää koko ruudun.

Kontrasti

Liian pieni tekstin ja sen taustan välinen kontrasti on usein ongelma erityisesti mustaa taustaväriä käytettäessä. Siihen voidaan päätyä jos web-suunnittelijan näyttö esittää kontrastin paremmin kuin joidenkin käyttäjien monitorit.

Mustaa taustaväriä käytettäessä tekstin fontti kannattaa lihavoida tai säätää isokokoiseksi jotta kirjaimet eivät hukkuisi taustaan. Täysin valkoinen teksti mustalla pohjalla voi olla kuluttavaa silmille, joten paras kompromissi mustalla taustalla on isohko ja vaaleahko fontti.

Vaalealla taustavärillä tekstin on syytä olla riittävän tummaa, silloinkin kun se on vaikkapa punaisella murrettua harmaata kuten tässä blogissa. Täysin musta tekstin väri ei ole huono vaihtoehto.

Kirjaisinlaji

Hyvä fontti verkkotekstille on usein Arial tai Verdana (n. 99% todennäköisyydellä sinäkin näet tämän tekstin Verdanana).

Arial löytyy lähes kaikilta tietokoneilta, tai ainakin sen jokin lähisukulainen kuten Helvetica. Sillä voi siten saada blogin käyttäjille yhtenäisen ulkoasun määrittämällä fonttiperheeseen (font-family) myös noita lähisukulaisia. Omasta mielestäni Arial sopii hieman paremmin otsikoihin kuin leipätekstiin.

Verdana on helposti luettavaa pienenäkin. Tämä mahdollistaa pienehkön fonttikoon käyttämisen, jolloin tekstin silmäily on helpompaa.

Saavutettavuudesta paasaavat änkyrät ovat eri mieltä Verdana-fontista: teksti näkyy sitä käytettäessä liian pienenä sillä pienellä joukolla jolta Verdana puuttuu käyttöjärjestelmästä. Verdana on näet isompaa kuin samalla numeerisella koolla määritetyt muut sans-serif-fontit, joihin selain joutuu Verdanan puuttuessa turvautumaan.

Itsekin aikoinaan välttelin Verdanaa tuosta syystä ja käytin leipätekstissä Arial- tai Georgia-fonttia. Lopulta päädyin siihen, että enemmistön parempi lukukokemus on tärkeämpää kuin erittäin pienen vähemmistön pikku hankaluus.

Fontin koko

Sopiva fontin koko riippuu monesta tekijästä: tekstien pituudesta, fonttilajista, taustaväristä, tekstin leveydestä, sanoman luonteesta yms. Asiatekstiin sopii pienikokoinen Verdana, pamfletissa tai lyhyissä jutuissa voi toimia isokin fontti. Vältä synnyttämästä vaikutelmaa että teksti hyppii silmille tai että sitä joutuu tihrustamaan läheltä näyttöä.

Tyhjä tila elementtien välissä

Whitespace eli tyhjä tila on keskeinen tapa helpottaa silmäilyä ja tehdä web-sivu ilmavaksi. Ilmava teksti helpottaa yksittäisten tekstinkohtien silmäilyä ja antaa vapautta lukijan omille ajatuksen harhailuille.

Tämän vuoksi käytä alaotsikoissa lihavointien sijasta niille varattuja omia HTML-elementtejään, eli h2,… , h6 -tageja. Näille voidaan antaa erikseen tyylitiedostossa tilaa ympärille, toisin kuin luokittelemattomille lihavoinneille.

Marginaali tekstin sivuilla

Tyhjä tila tekstin molemmilla sivustoilla

• luo visuaalista kontrastia, joka tekee koko tekstin ilmavamman ja miellyttävämmän näköiseksi,
• luodaan monesti keskittämällä sisältö, kuten tässäkin blogissa on menetelty,
• on oltava riittävä myös tekstin omalla taustavärillä.

Tiivistelmä

Tämän oppaan tärkeimmät suositukset voidaan tiivistää näin:

• Älä kikkaile otsikoilla vaan lupaa ja pidä lupauksesi.
• Riko yksitoikkoisuus kuvilla ja korostuksilla.
• Pidä kappaleet lyhyinä.
• Lihavoi tärkeät kohdat.
• Esitä asiat listoina ja vaiheina kun mahdollista.
• Käytä avainsanoja linkeissä ja alaotsikoissa.
• Lisää tyhjää tilaa tekstin väliin ja ympärille.

Pidä mielessä että blogiin kirjoittamiseen pätevät erilaiset laatukriteerit kuin painettuun sanaan. Ranskalaisia viivoja vastaavat “pallolistat” ovat netissä hyvää tyyliä, samoin lyhyet kappaleet ja vapautuneen epämuodollinen kirjoitustyyli. Jokainen blogi ja bloggaaja on kuitenkin yksilö sopivien tyylien suhteen, joten tämäkin opas sopii enemmän bloggaamisen tueksi kuin orjallisesti noudatettavaksi säännöstöksi.

Lisää aiheesta:

Verkkokirjoittaminen – Vaasan yliopiston ohjeita verkkotekstin laatimisesta.

Writing for the Web – Linkkejä Jakob Nielsenin nettitekstin käytettävyyttä koskeviin artikkeleihin.