Webguru logo
Kuvituskuva jossa nosturi ja nettisivut

Tässä artikkelissa on kerrottu miten nettisivuprojekit yleensä tapahtuvat – miten sivut rakennetaan ja minkälaisia vaiheita projektiin yleensä kuuluu.

1. Palaverointi ja suunnitelman teko

Hyvin suunniteltu on puoliksi tehty ja tämä pätee etenkin nettisivuihin. Projekti kannattaa käynnistää alkupalaverilla ja suunnitella asiat riittävän. Alkupalaverissa kannattaa pyrkiä tekemään konkreettinen suunnitelma siitä miten edetään ja kirjoittaa asioita ylös.

Suunnitelmaan kannattaa kirjoittaa ylös mm. alustava sivurakenne, toteutettavat sivut sekä sivuilla tarvittavat toiminnot. Suunnitelman tarkentaminen voi vaatia useampia tapaamisia ja sähköpostien vaihtoa.

Suunnitelmaa voi pitää myös sopimuksena puolin ja toisin, että minkälaisten sivujen on tarkoitus olla ja mitä kaikkea toteutukseen kuuluu.

2. Sivujen ulkoasu / sivupohja

Kun tiedetään suurin piirtein minkälaiset sivut halutaan, voidaan lähteä miettimään sopivaa ulkoasua sivuille.

Sivuston ulkoasua mietittäessä on hyvä ihan aluksi tehdä lyhyt kartoitus kilpailijoiden sivuihin ja poimia sieltä parhaat ideat. Kilpailijoiden sivuilta saa hyviä vinkkejä usein myös sivujen sisältöön liittyen.

Jos sivut tehdään WordPressillä niin sivuston ulkoasu voidaan suunnitella käyttämällä valmiita  sivupohjia tai sitten vaihtoehtoisesti käyttämällä sivurakentajaa (kuten Elementoria) tai koodaamalla kokonaan itse.

Valmiit sivupohjat on hyviä siinä, että niistä näkee jo hyvin etukäteen miltä valmiit sivut tulisi näyttämään ja miten ne toimisi käytännössä.

Valmiita sivupohjia voi etsiä Theme Forestista (useimmiten maksullisia), josta niitä löytyy tuhansia erilaisia ja kaikenlaisille yrityksille. Kaikkiin valmiisiin sivupohjiin kuuluu aina tietty tyyli, joka koostuu tekstityyleistä, väreistä, kuvien tyyleistä (artikkelikuvien tyyli) ja navigointivalikkojen tyylistä. Moniin sivupohjiin kuuluu myös graafinen sivurakentaja (kuten Visual Composer tai Elementor), joilla on helppo kasata sivuja valmiista palikoista.

Edistyneet sivupohjat tuovat monesti myös paljon uusia säätömahdollisuuksia WordPressiin, joiden avulla sivujen ulkoasua voidaan rakentaa tarkasti halutunlaiseksi ilman, että välttämättä tarvitsee koskea koodeihin. Tällöin myös sivuja pystyy ylläpitämään helposti kokonaan itse.

Valmiita sivupohjia on myös paljon kokonaan ilmaisia ja niitä on paljon esim. WordPress.org:ssa. Ne ei useimmiten kuitenkaan ole ihan yhtä laadukkaita kuin Theme Forestista löytyvät.

Yleisesti ottaen valittaessa sivupohja sivuille, on hyvä tietää mitä tekee, sillä sivupohjissa on todella isoja eroja. Toiset sivupohjat ovat paljon parempia kuin toiset. Jos valitsee sivupohjan, josta puuttuu tarvittavia ominaisuuksia, siinä on bugeja, tai se latautuu hitaasti, voi tämä osoittautua isoksi virheeksi myöhemmin. Tästä syystä on aina järkevää kysyä ammattilaisen apua että mikä on hyvä sivupohja ja mikä ei. Meillä on tästä kokemusta ja osaamme suositella asiakkaillemme sellaisia sivupohjia, joiden kanssa ei joudu ongelmiin nyt tai myöhemmin.

Päivitys 2020: Nykyään sivupohjan käyttö WordPress-sivustoilla ei ole aina enää välttämättä tarpeellista, sillä sivut voidaan tehdä myös pelkän sivurakentajan (esim. Elementor) avulla.  Sivurakentajat ovat kehittyneet paljon ja ne tarjoaa nykyään monesti samoja toimintoja kuin valmiit sivupohjatkin eli valmiita ulkoasuja sekä erilaisia osioita ja palikoita, joilla on helppo rakentaa sivut. Sivurakentajien käyttö on usein helpompaa ja mukavempaa kuin sivupohjien käyttä sekä sivut saa toimimaan selvästi nopeammin (valmiit sivupohjat usein melko raskaita).

Jos ei halua käyttää sivupohjaa tai sivurakentajaa, on sivujen ulkoasu on mahdollista tehdä myös kokonaan itse koodaamalla. Tämä voi tulla kyseeseen, jos sivuista halutaan tarkasti tietynlaiset ja omannäköiset.

3. WordPressin asentaminen palvelimelle ja sivupohjan lisääminen

Kun sivupohja on valittu, voidaan aloittaa itse toteutus ja asentaa WordPress testipalvelimellemme. Sivuja varten palvelimella pitää luoda sivuja varten oma tietokanta ja säätää jonkin verran asetuksia. Kun WordPress on saatu asennettua palvelimelle, tähän pääsee käsiksi tämän jälkeen testipalvelimen url-tai ip-osoiteessa (esim. http://11.22.33.44/testisivusto).

Sivuja voi tämän alkaa kustomoimaan WordPressin hallintapaneelissa. Kustomointi käsittää monenlaisten asetusten asettamista ja siihen kuuluu mm. perustietojen syöttäminen (sivuston nimi, pääkäyttäjä, aikavyöhyke ym), tyhjien sivujen luonti, navigointivalikko rakentaminen, url-rakenteen säätäminen ym.

Valittu sivupohja asennetaan myös hallintapaneelin kautta ja se käy yleensä aika helposti. Sivupohjan asentamisen jälkeen alkaakin varsinainen työ, kun sivupohjan asetukset pitää säätää kuntoon. Sivupohjat ovat monesti aika monimutkaisia ja sisältää suuren määrän erilaisia asetuksia ja vipuja.

4. Sisällön ja kuvien tuottaminen sivuille

Sisällöntuotanto ja kuvien kanssa säätäminen on projektin työläin vaihe. Hyvän tekstin ja kuvien hankkiminen (tai kuvien ottaminen) vie paljon aikaa. Projektin hinnan muodostumisessa tämä kohta onkin varsin isossa roolissa. Mikäli pystyt tuottamaan sivuille kaikki tekstit ja kuvat itse sekä kertomaan miten haluat kuvia käytettävän, tarkoittaa tämä selvästi pienempää työmäärää meille.

Suosittelemme yleensä että asiakas kirjoittaa sivujen/artikkeleiden tekstit ainakin asiasisällön puolesta kuntoon. Tämän jälkeen voimme tarvittaessa oikolukea ja hioa tekstit lopulliseen kuntoon. Kuvien kanssa riitää samoin että asiakas toimittaa raakakuvat meille, jonka jälkeen voimme ne nettisivuille sopivaan muotoon. Tämä on yleensä hyvä asia huomioida, että nettisivuille lisättävät kuvat vaativat yleensä aina käsittelyä, joka taas vaatii aikaa.

5. Toimintojen kehittäminen sivuille lisäosien avulla (tai koodaamalla itse)

Kun sivujen perusrunko on suurin piirtein kasassa, voidaan seuraavaksi lisätä sivuille hyödyllisiä ja/tai tarvittavia toimintoja WordPressin lisäosien avulla. WordPressin lisäosahakemistosta löytyy valtava määrä ja hyvin erilaisiin käyttötarkoituksiin. Lisäosia on paljon niin ilmaisia – (WordPress.org:ssa) kuin maksullisiakin (Envato Market:ssa).

Useimmiten tarvittavia lisäosia verkkosivuilla on somejakonapit-, palautelomake- ja sivuanalytiikka ja SEO-lisäosat. Nämä ovat hyödyllistä lisätä oikeastaan kaikille sivuille. Parhaat lisäosat ovat yleensä maksullisia ja niistä voi joutua maksamaan myös vuosimaksua.

Seuraavassa on listattu joitain muita yleisimpiä lisätoimintoja, joita voidaan lisätä WordPress-sivuille lisäosien avulla.

  • Verkkokauppa
  • Erilaiset lomakkeet kuten palaute-, tilaus-, varauslomakkeet
  • Uutiskirjeet
  • Tuoteportfoliot ja referenssisivut
  • Varausjärjestelmä
  • Tapahtumakalenteri
  • Edistynyt hakutoiminto
  • Monitasoiset valikot
  • Keskustelupalsta
  • Kilpailut ja kyselyt
  • Kuvagalleria
  • Integroinnit muihin järjestelmiin/palveluihin
  • Käyttäjäportaalit
  • Facebook -kommentointi

On huomioitavaa, että joidenkin monimutkaisten lisäosien käyttöönotto (esim. verkkokauppa), voi lisätä huomattavasti verkkosivujen monimutkaisuutta ja mahdollisesti moninkertaistaa koko kotisivuprojektin hinnan.

Uusia toimintoja sivuille voi aina kehittää tietty myös koodaamalla itse (tai omilla lisäosilla), koska WordPress on täysin avoin alusta. Tämä ei ole mahdollista monien muiden alustojen kanssa (esim. Wix.com tms).

6. Viimeistely ja testaus

Kun sisällöt ja toiminnot ovat valmiina, voidaan sivut viimeistellä. Viimeistelyvaiheessa mm. parannetaan sivujen ulkoasua, testataan toimintoja, säädetään asetuksia ja kehitetään hakukoneoptimointia.

Viimeistelyssä yksi tärkeimmistä osa-alueista on responsiivisuuden säätäminen, joka tarkoittaa sitä että varmistetaan sivujen sujuva käyttö kaikilla erilaisilla päätelaitteilla ja ruuduilla.

Hakukoneoptimoinnissa käydään läpi yleinen SEO-tarkistuslista ja kirjoitetaan sivuille hyvät meta-kuvaukset (hakutuloksiin tulevat tekstit), jotta hakukoneen varmasti löytävät sivut hyvin.

Tärkeä asia viimeistelyssä on myös varmistaa sivujen nopeat latautumisajat. Sivujen latautumisaikoja voidaan yrittää parantaa optimoimalla kuvia, poistamalla turhia koodinpätkiä sekä ottamalla käyttöön tarvittaessa cache-lisäosa.

7. Verkkotunnuksen kytkeminen, SSL-sertifikaatin asennus ja sähköpostit

Kun uudet sivut ovat valmiit palvelimellamme (toistaiseksi ip-osoitteessa), voidaan sivut ottaa käyttöön kytkemällä verkkotunnus osoittamaan palvelimemme ip-osoitteeseen. Kytkeminen tapahtuu muuttamalla dns-tietueita domain-palveluntarjoajan hallintapaneelissa. Omalle palvelimellemme pitää myös jonkin verran säätää asetuksia.

Mikäli teillä ei vielä ole verkkotunnusta, voimme hankkia sellaisen puolestanne. Suosittelemme suomalaisille yrityksille aina fi-tunnusta, koska siihen luotetaan yleisesti parhaiten ja se on parempi myös hakukoneoptimoinnin kannalta.

Verkkotunnuksen kytkemisen yhteydessä on syytä myös hankkia ja asentaa SSL-sertfikaatti, joka mahdollistaa suojatun yhteyden nettisivuille (https). Nykyään oikeastaan kaikki sivustot kannattaa tehdä https-sivustoiksi, koska tämä on aina hyödyllistä hakukoneoptimoinnin kannalta.

Jos yrityksenne tarvitsee verkkotunnukseen liittyviä sähköpostilaatikoita esim. info@yritys.fi, tämä onnistuu myös helposti ja autamme tässä mielellämme.

8. Perehdytys

Kun sivut ovat valmiina, voimme tarvittaessa järjestää perehdytystä sivujen tuleville käyttäjille, jotta sivujen tulevat käyttäjät osaavat käyttää sivujen toimintoja oikein ja sivuista saadaan siis optimaalinen hyöty.

Perehdytyksessä on usein hyvä käydään läpi WordPressin hallintapaneeli ja sen toiminnot kuten miten lisätä/päivittää yksittäisiä sivuja tai artikkeleita. Lisäksi voidaan käydä läpi mm. miten kirjoittaa hakukoneoptimoituja (hyvillä avainsanoilla) artikkeleita Googlea varten ja miten voidaan tutkia sivujen kävijäanalytiikoita.

Perehdytys voidaan järjestää paikan päällä yrityksessä tai sitten virtuaalisesti esim. Google Meetissä / Teamsissa.

Jaa artikkeli: 

Tuomas P

Tuomas P

Terve, olen Tuomas eli Webguru ja kirjoitan aiheista, jotka liittyvät verkkosivujen kehittämiseen, sovelluskehitykseen, hakukoneoptimointiin ja digimarkkinointiin. Ota yhteyttä, jos yrityksesi tarvitsee apua kotisivujen kanssa!