CMS-suunnitteluopas – Osa 2: Sivupohjien rakenne

Tämä artikkeli on osa sarjaa, jossa esittelen vinkkejä kuinka voit suunnitella nettisivuston graafisen ilmeen julkaisujärjestelmän päälle.

Projektin alussa suunnittelijan on hyvä keskittyä luovuuteen eikä miettiä liikaa teknisiä yksityiskohtia. On hyvä tehdä itsessään ensin tyytyväiseksi luova puoli ja vasta sitten muuntautua insinööriksi. Muuten suunnittelusta saattaa tulla liian tekniikkakeskeistä. Tästä on esimerkkinä liian monet nettisivustot, jotka on ”suunniteltu” julkaisujärjestelmän pohjailmeen ympärille aivan liian pienellä työllä ja jotka siis muistuttavat kaikki toisiaan. Julkaisujärjestelmää varten tehdyn graafisen suunnittelun ei tarvitse vaikuttaa luovuuteen – vaikkakin sen pitäisi vaikuttaa lopputulokseen.

Suurin osa julkaisujärjestelmistä perustuu erityisiin sivupohjiin, joiden avulla sivuston ilmettä ja sisältöä hallitaan. Näihin pohjiin, joita voi pitää myös sommittelupohjina, määritellään omat paikat pysyville elementeille sekä dynaamiselle, tietokannasta tulevalle tiedolle. Pysyviä elemettejä voivat olla esimerkiksi logo, päägrafiikka ja alaosan yhteystiedot. Dynaamista tietoa voivat olla otsikoiden ja leipätekstin, navigaation ja kuvagallerioiden sisältö. Yleensä kaikki, mitä asiakas voi muokata, on dynaamista sisältöä.

Sivupohjat muodostuvat alueista. Peruspohjassa, josta suunnittelu olisi hyvä aloittaa, pääalueita ovat yläosa, sivupalkit, sisältöosuus ja alaosa. Asiakas pääsee suoraan käsiksi ”sisältö”-alueeseen, johon hän voi kohtalaisen vapaasti sivueditorin avulla lisätä omaa sisältöään – kuvia, taulukoita, tekstiä ja linkkejä. Lisäksi sivustolle voidaan määritellä esimerkiksi uutislohko oikeaan sivupalkkiin, johon asiakkaan lisäämät uutiset tulevat linkkeinä pääartikkeliin. Eli tässä tapauksessa asiakas ei suoraan muokkaa oikeaa sivupalkkia, vaan siihen tehdään dynaaminen lohko, joka hakee automaattisesti tietokannasta otsikot aikajärjestyksessä.

Yllä olevassa mallissa on julkaisujärjestelmän peruspohja, jota voi käyttää suunnittelun tukena luotaessa uutta verkkopalvelua. Sivustolla olevat elementit voi liittää johonkin saatavilla olevaan alueeseen – voimme esimerkiksi määritellä logon yläosan alueeseen, navigaation vasempaan sivupalkkiin, sisällön keskelle, uutiset oikealle ja yhteystiedot alaosaan.

Lisäksi alueet voi jakaa lohkoiksi. Esimerkiksi yläosan voi jakaa logon, navigaation, grafiikan ja hakulaatikon kesken.

Alueiden ei tarvitse tietenkään olla perusmallin mukaisia. Joissakin tapauksissa oikeaa sivupalkkia ei tarvita, jolloin sisältöalueen voi laajentaa sen tilalle. Samoin voimme poistaa vasemman sivupalkin tai vaikkapa koko yläosan.

Erilaisia variaatioita on loputtomasti. Nykyään käytetään laajasti jotain valmista ”pohjaverkkoa” (grid), joka tarjoaa suunnittelijalle helpon sommittelupohjan. Nämä verkot koostuvat samanlevyisistä palstoista, jotka muodostavat alueita joko yksittäin tai useampina palstoina. Alla olevassa esimerkissä palstoja on 12 kappaletta ja sisältö voidaan miettiä niiden sisälle eri leveyksissä.


Kuva: Zurb Foundation

Sivuston ilmeen ei myöskään tarvitse rajoittua yhteen pohjaan. Yksinkertaisessa verkkopalvelussa voi olla esimerkiksi etusivu ja yksi alasivu, jolloin etusivulla voi olla yläosan navigaatio ja logo, sisältöalue jaettuna useisiin eri lohkoihin ja alaosaan sekä alasivun pohja, josta löytyy logo, navigaatio, sisältö, vasen sivupalkki ja alaosa.
Isommissa verkkopalveluissa pohjia voi olla tuotteille, verkkokaupalle sekä käyttäjille omansa ja vielä lisäksi peruspohja, jota voi käyttää yleisille sivuille.

Esimerkki: Designlasi.com

Designlasi.comin etusivun ilme rakentuu ensinnäkin seuraavista yläosan lohkoista:

  • Tietopalkki ja kielivalinnat ylimmäisenä
  • Sinisellä pohjalla sivuston logo, nimi ja päägrafiikka
  • Navigaatio
  • Vaakamallinen ”Uusimmat kuvat”, joka on määritelty näkymään ainoastaan etusivulla

Kolmepalstaisesta sisältöosuudesta, jossa on useita lohkoja:

  • Vasemmalla ”Uudet keskustelut”
  • Keskellä mainokset ja esinehaku
  • Oikealla kirjautuminen ja satunnaisesti valittu esine

Sekä alaosasta, jossa ovat yhteystietolinkit, tekijänoikeusmaininnat ym.

Yläosa ja alaosa toistuvat kaikilla alasivuilla ja sisältöosuus vaihtuu tarpeen mukaan kolmepalstaisesta kaksipalstaiseen. Yllä oleva esinesivun sisältöosuus (navigaation alla) rakentuu sisältöosuudesta ja oikeasta sivupalkista, jossa ovat mainokset ja esinehaku.

Designlasi.comissa on käytetty etusivun lisäksi yhteensä neljää erilaista sivupohjaa.

Siirry lukemaan seuraavaa artikkelia: Osa 3: Navigaatiorakenne

Kirjoita kommentti