Silverstripe CMS:n tekstieditori – sisällön muotoilun perusteet

Hyvin muotoiltu verkkoteksti auttaa lukijaa löytämään tarvitsemansa tiedon. Selkeät otsikot, sopivan mittaiset kappaleet ja ymmärrettävät linkit tekevät sisällöstä helpommin käytettävää myös pienellä näytöllä. Silverstripe CMS:n tekstieditori tarjoaa tähän tavalliset kirjoittamisen ja muotoilun työkalut.

Editorin käyttäminen muistuttaa tekstinkäsittelyohjelmaa, mutta verkkosivulla sisältö mukautuu erilaisiin laitteisiin ja sivupohjiin. Siksi tekstin rakennetta kannattaa käsitellä huolellisesti sen sijaan, että yrittäisi asetella jokaisen rivin tarkasti paikalleen.

Tässä oppaassa tutustutaan muotoilun perusteisiin käytännön esimerkeillä. Painikkeiden nimet ja käytettävissä olevat ominaisuudet riippuvat Silverstripe-versiosta sekä sivuston editoriasetuksista.

Mistä tekstieditori löytyy?

Avaa hallintapaneelista Pages eli sivujen hallinta ja valitse muokattava sivu. Tavallisella sisältösivulla tekstieditori löytyy yleensä Content-välilehdeltä.

Sivun nimi, valikkoteksti ja osoitteen loppuosa ovat erillisiä kenttiä. Varsinainen leipäteksti kirjoitetaan sisältöalueelle. Sivustokohtaiset toteutukset voivat sisältää myös muita kenttiä. Silverstripen sisällönmuokkausohje.

Jos sivu rakentuu sisältölohkoista, tekstieditori voi sijaita yksittäisen lohkon sisällä. Tällöin koko sivua ei muokata yhtenä pitkänä tekstinä.

Tarkista ennen kirjoittamista, että käsittelet oikeaa sivua ja oikeaa sisältöaluetta. Samannimisiä kenttiä voi esiintyä esimerkiksi pääsisällössä, sivupalkissa ja nostolohkoissa.

Kirjoita ensin sisältö, muotoile sen jälkeen

Työskentely helpottuu, kun mietit tekstin tarkoituksen ennen ulkoasua. Kirjoita ensin, mitä lukijan pitää tietää ja mitä hänen toivotaan tekevän seuraavaksi.

Esimerkiksi tapahtumasivun luonnokseen voi kerätä:

• Tapahtuman tarkoituksen.
• Ajankohdan ja paikan.
• Osallistumisen ehdot.
• Tarvittavat varusteet.
• Ilmoittautumisohjeen.

Järjestä tiedot tämän jälkeen lukijan kannalta luontevaan järjestykseen. Tärkeimmät käytännön asiat eivät saisi jäädä pitkän taustakertomuksen alle.

Muotoile valmis runko otsikoiksi, kappaleiksi ja luetteloiksi. Näin jokaisella muotoilulla on tehtävä, eikä sivusta muodostu sekalainen kokoelma lihavointeja ja korostuksia.

Ensimmäinen luonnos voi olla lyhyt. Puuttuvia yksityiskohtia on helpompi täydentää selkeään rakenteeseen.

Käytä otsikkotyylejä oikeassa järjestyksessä

Otsikko kertoo, mitä seuraava tekstiosuus käsittelee. Valitse otsikolle editorin muotoiluvalikosta oikea otsikkotaso sen sijaan, että tekisit tavallisesta kappaleesta suuren ja lihavoidun.

Sivupohja näyttää usein sivun nimen pääotsikkona eli H1-otsikkona. Sisältöalueen pääväliotsikot ovat silloin yleensä H2-tasoa. Niiden alle kuuluvat tarkemmat alaotsikot voivat olla H3-tasoa.

Tapahtumasivulla H2-otsikoita voisivat olla ”Ohjelma”, ”Saapuminen” ja ”Ilmoittautuminen”. Ohjelman sisällä ”Aamupäivän työpajat” voisi tarvittaessa olla H3-otsikko.

Älä valitse otsikkotasoa pelkän kirjasinkoon perusteella. Otsikot muodostavat myös sisällön rakenteen, jota esimerkiksi ruudunlukijan käyttäjä voi hyödyntää. Silverstripen otsikointi- ja sisältöohje.

Erota kappaleet ja rivinvaihdot

Kappale kokoaa yhteen ajatuksen. Uusi aihe tai näkökulma kannattaa aloittaa uutena kappaleena.

Tavallisessa editorikäytössä Enter aloittaa uuden kappaleen, kun taas Shift ja Enter muodostavat rivinvaihdon saman kappaleen sisälle. Käyttäytyminen kannattaa varmistaa oman sivuston editorissa.

Rivinvaihto voi sopia esimerkiksi postiosoitteeseen. Pitkän artikkelin jakaminen pelkillä rivinvaihdoilla tekee rakenteesta kuitenkin vaikeammin hallittavan.

Älä rakenna välistyksiä useilla tyhjillä kappaleilla. Sivuston tyylit määrittävät otsikoiden ja tekstien välisen tilan. Jos välistys näyttää jatkuvasti väärältä, asia kannattaa korjata sivupohjan tyyleissä.

Vältä myös välilyöntien käyttämistä palstojen muodostamiseen. Kohdistus hajoaa helposti puhelimella tai käyttäjän suurentaessa tekstiä.

Lihavoi ja kursivoi harkiten

Lihavointi auttaa nostamaan esiin yksittäisen tärkeän tiedon. Se voi toimia esimerkiksi määräajan tai olennaisen toimintaohjeen yhteydessä.

Jos lähes koko kappale on lihavoitu, korostus menettää merkityksensä. Valitse siksi vain muutama sana tai lyhyt ilmaus.

Kursivointia voi käyttää kevyempään painotukseen tai esimerkiksi teoksen nimen merkitsemiseen. Pitkät kursivoidut osuudet voivat kuitenkin olla raskaita lukea.

Silverstripen muotoilutyökalujen valikoima riippuu editorin asetuksista. Sivustolle voi olla määritelty myös omia tekstityylejä. Tekstin muotoilun työkalut.

Pidä käytännöt yhtenäisinä. Jos yksi toimintaohje on korostettu, käytä vastaavissa tilanteissa samaa tapaa muuallakin sivustolla. Vältä tavallisen tekstin alleviivaamista, koska se voi näyttää linkiltä.

Tee listat editorin omilla työkaluilla

Käytä luettelopainiketta, kun esittelet rinnakkaisia asioita. Numeroitu lista sopii vaiheisiin, jotka suoritetaan tietyssä järjestyksessä.

Esimerkiksi varusteluettelo voi olla tavallinen lista:

• Säänmukaiset ulkovaatteet.
• Juomapullo.
• Pieni eväs.
• Tarvittavat henkilökohtaiset varusteet.

Ilmoittautumisohje puolestaan voi olla numeroitu:

1. Avaa ilmoittautumislomake.
2. Täytä osallistujan tiedot.
3. Valitse sopiva ryhmä.
4. Lähetä ilmoittautuminen.

Älä kirjoita luettelomerkkejä käsin jokaisen kappaleen alkuun. Editorin listatyökalu muodostaa varsinaisen luettelorakenteen ja helpottaa myöhempää muokkaamista. Silverstripen luettelo-ohje.

Pidä listan kohdat keskenään samanmuotoisina. Toimintaohjeessa jokainen kohta voi esimerkiksi alkaa tekemistä kuvaavalla verbillä.

Lisää linkki, jonka tarkoitus selviää tekstistä

Maalaa linkiksi haluamasi teksti ja avaa editorin linkkityökalu. Valitse kohteeksi sivuston sisäinen sivu, ulkoinen osoite tai muu tarjolla oleva vaihtoehto.

Sisäiseen sisältöön linkitettäessä käytä sivunvalintaa, jos sellainen on käytettävissä. Ulkoiseen osoitteeseen linkitettäessä tarkista koko osoite ja oikea kohdesivu. Silverstripen linkkien lisäämisohje.

Kirjoita linkkitekstiksi esimerkiksi ”Tutustu retken osallistumisohjeisiin”. Pelkkä ”Tästä” ei kerro, minne lukija siirtyy.

Älä liitä pitkää verkko-osoitetta näkyväksi tekstiksi, ellei juuri osoitteen näyttäminen ole tarpeellista. Kuvaava nimi on yleensä helpompi lukea.

Avaa linkki lopuksi esikatselussa tai julkaistulla sivulla. Oikein muotoiltu linkki voi silti johtaa väärään paikkaan.

Liitä muualta tuleva teksti siististi

Wordista, sähköpostista tai toiselta verkkosivulta kopioitu teksti voi tuoda mukanaan fontteja, värejä ja ylimääräistä muotoilua.

Jos lopputulos näyttää epäyhtenäiseltä, käytä editorin pelkkänä tekstinä liittämistä tai muuta sivustolla tarjottua muotoilun puhdistustoimintoa. Tee tarvittavat otsikot, listat ja korostukset tämän jälkeen editorissa. Silverstripen ohje tekstin liittämiseen.

Pelkkänä tekstinä liittäminen poistaa yleensä myös linkkien ja korostusten muotoilut. Tarkista ne siis uudelleen.

Kiinnitä erityistä huomiota luetteloihin ja kappalejakoihin. Näennäisesti siisti teksti voi sisältää käsin kirjoitettuja luettelomerkkejä tai ylimääräisiä rivinvaihtoja.

Tee puhdistus mieluummin heti liittämisen jälkeen kuin pitkän muokkaustyön lopuksi.

Sijoita kuvat osaksi sisältöä

Kuva kannattaa lisätä kohtaan, jossa se tukee ympäröivää tekstiä. Aseta kohdistin sopivaan paikkaan ja avaa Insert from files tai vastaava tiedostojen lisäämistoiminto.

Valitse kuva kirjastosta tai lataa uusi. Tarkista sen koko, kohdistus ja sijainti ennen tallentamista. Silverstripen kuvien lisäysohje.

Anna sisältökuvalle sen merkitystä kuvaava vaihtoehtoinen teksti. Jos kyseessä on pelkkä koriste, noudata sivuston saavutettavuusohjetta koristekuvien käsittelyssä.

Vältä tekstin kiertämistä kuvan ympärille vain ulkonäön vuoksi. Kapea tekstipalsta voi muuttua hankalaksi pienellä näytöllä.

Kuvan koon muuttaminen editorissa ei välttämättä tarkoita, että alkuperäinen tiedosto pienenee. Valmistele myös ladattava kuvatiedosto verkkokäyttöön sopivaksi.

Linkitä asiakirjat ymmärrettävästi

PDF-esitteen tai muun ladattavan tiedoston voi liittää sisältöön editorin tiedostolinkillä. Valitse teksti, avaa linkkityökalu ja etsi Link to a file -vaihtoehto.

Valitse kirjastosta oikea tiedosto ja vahvista linkki. Silverstripen käyttöohje kuvaa tämän erillisenä asiakirjojen linkittämisen työnkulkuna. Asiakirjalinkkien lisääminen.

Hyvä linkkiteksti voisi olla ”Lataa tapahtuman ohjelma (PDF)”. Suuren tiedoston yhteydessä voit ilmoittaa myös sen koon.

Älä sijoita kaikkea keskeistä tietoa pelkkään liitteeseen. Tapahtuman ajankohta ja ilmoittautumistapa kannattaa yleensä kertoa myös itse verkkosivulla.

Varmista julkaisun jälkeen, että asiakirja avautuu tavalliselle kävijälle ja sisältää oikean version.

Käytä taulukoita vain taulukkomuotoiseen tietoon

Jos editoriin on otettu käyttöön taulukkotyökalu, se sopii esimerkiksi hinnaston tai aikataulun esittämiseen. Taulukkoa ei kannata käyttää sivun yleisen asettelun rakentamiseen.

Pidä sarakkeiden määrä kohtuullisena ja merkitse otsikkosolut oikein työkalun sallimalla tavalla. Esimerkiksi aikataulussa sarakkeet voivat olla ”Aika”, ”Ohjelma” ja ”Paikka”.

Kokeile aina taulukkoa puhelimella. Leveä vertailu voi vaatia sivupohjalta erityisen toteutuksen.

Jos sama tieto on selkeämpi lyhyenä luettelona, käytä sitä. Muotoilun tarkoitus on auttaa tiedon ymmärtämisessä, joten monimutkaisempi rakenne ei automaattisesti paranna esitystä.

Pyydä kehittäjän apua, jos taulukon saavutettavaa rakennetta ei pysty tekemään tarjolla olevilla työkaluilla.

Tarkista esikatselu ennen julkaisemista

Editorin näkymä ei aina vastaa tarkasti lopullista sivua. Sivuston tyylit vaikuttavat muun muassa otsikoiden kokoon, kappaleväleihin ja kuvien esitystapaan.

Tallenna sisältö ja avaa esikatselu. Silverstripessä voidaan käyttää myös jaettua näkymää, jossa editori ja esikatselu näkyvät rinnakkain. Tarkista, että katsot luonnoksen oikeaa versiota. Silverstripen esikatseluohje.

Käy ennen julkaisua läpi:

• Otsikoiden järjestys.
• Kappaleiden pituus.
• Listojen rakenne.
• Linkkien kohteet.
• Kuvien toimivuus.
• Puhelinnäkymän luettavuus.

Julkaise vasta tarkistettu sisältö ja avaa sen jälkeen julkinen sivu. Näin varmistat, että muotoilu palvelee lukijaa myös hallintapaneelin ulkopuolella.