Tyypillinen nettisivuprojekti

Kuvituskuva jossa nosturi ja nettisivut
30elo, 2017

Tässä artikkelissa on kerrottu miten nettisivuprojektit yleensä sujuvat miten sivut rakentuvat 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 hyvin. 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 ominaisuudet ja toiminnot. Suunnitelman tarkentaminen voi vaatia useita tapaamisia tai sähköpostien kirjoittelua.

Suunnitelman voidaan nähdä myös sopimuksena puolin ja toisin mitä on luvattu tehdä ja mitä ei.

2. Graafinen ilme ja sivupohjan valinta

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

Graafisen ilmeen toteuttamiseen löytyy WordPressissä paljon valmiita sivupohjia, sekä ilmaisia (WordPress.org:sta) että maksullisia (Theme Forest). Kuhunkin valmispohjaan kuuluu tietty tyyli, joka koostuu tekstityyleistä, väreistä, kuvien tyyleistä (artikkelikuvien tyyli) ja navigointivalikkojen tyylistä. Maksullisiin sivupohjiin kuuluu monesti graafinen sivurakentaja (useimmiten Visual Composer tai Elementor), joilla voi rakentaa helpommin näyttäviä sivuja. Edistyneet sivupohjat tuovat monesti myös paljon uusia säätömahdollisuuksia WordPressiin, joiden avulla sivujen ulkoasua voidaan säätää tarkasti halutunlaiseksi ilman, että välttämättä tarvitsee koskea koodeihin juuri ollenkaan.

Välttämättä aina ei tarvitse ostaa maksullista sivupohjaa, vaan ilmaisilla sivupohjillakin (joita tarjolla WordPress.org:ssa) voi pärjätä varsin hyvin. Tiedämme muutamia varsin hyviä ilmaisia sivupohjia, joista on muodostunut suosikkejamme.

Vaikka ilmaisiin sivupohjiin ei normaalisti kuulu sivurakentajaa, sen voi ostaa helposti erikseen. Suosimme yleensä Elementor-sivurakentajaa, joka on mielestämme paras ja monipuolisin. Nykyään sivurakentajat ovat kehittyneet niin paljon, että lähes pelkällä sivurakentajalla pärjää jo varsin pitkälle sivujen tekemisessä ilman että tarvitaan monipuolisia ominaisuuksia valitulta sivupohjalta.

Yleisesti ottaen valittaessa sivupohjaa, on hyvä tietää mitä tekee, sillä sivupohjissa on paljon eroja ja jotkut ovat paljon parempia kuin toiset. Jos valitsee sivupohjan, josta puuttuu ominaisuuksia, siinä on bugeja, tai se latautuu hitaasti, aiheuttaa tämä yleensä paljon ongelmia jatkossa. Me osaamme aina suositella asiakkaillemme laadukkaita sivupohjia, joiden kanssa ei joudu ongelmiin nyt tai myöhemmin.

Jos sivuista halutaan tarkasti tietynlaiset ja omannäköiset, tällöin voi tulla kyseeseen myös kokonaan oman sivupohjan tekeminen koodaamalla sellaisen itse.

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 Hangoutsin avulla.

Tietoa kirjoittajasta
Terve, olen Tuomas eli Webguru ja kirjoitan tänne Aiheista, jotka liittyvät nettisivujen tekemiseen, web-ohjelmointiin, digimarkkinointiin tai hakukoneoptimointiin.