Loikka
OhjelmistokehitysBlogi

Näin verkkosivuprojekti etenee onnistuneesti – 7 vaihetta suunnittelusta julkaisuun

Uusien verkkosivujen rakentaminen on yritykselle merkittävä investointi, joka vaikuttaa suoraan myyntiin, markkinointiin ja brändimielikuvaan. Onnistunut verkkosivuprojekti ei synny sattumalta, vaan se vaatii järjestelmällisen prosessin, jossa jokainen vaihe rakentuu edellisen päälle.

Tämä opas käy läpi verkkosivuprojektin vaihe vaiheelta. Sen avulla projektin osapuolet hahmottavat, mitä kussakin vaiheessa tapahtuu, mitä työssä tulee huomioida ja miten vältetään yleisimmät sudenkuopat.

Mies juo kahvia kannettavan tietokoneen ääressä.
Verkkosivujen visuaalisen ilmeen suunnittelu on monesti mielekästä tekemistä, mutta monta muutakin asiaa täytyy huomioida.

1. Aloi­tus­vai­he: Ta­voit­tei­den ja tar­pei­den mää­rit­te­ly

En­nen kuin ri­viä­kään koo­dia kir­joi­te­taan tai ul­koa­sua suun­ni­tel­laan, pro­jek­til­le on ase­tet­ta­va sel­keät raa­mit. Tä­män vai­heen huo­lel­li­nen lä­pi­vien­ti var­mis­taa sen, et­tä pro­jek­ti py­syy ai­ka­tau­lus­sa ja bud­je­tis­sa.

Mää­ri­tel­lään si­vus­ton ta­voit­teet:

On­ko ky­sees­sä brän­diä tu­ke­va käyn­ti­kort­ti, lii­de­jä ge­ne­roi­va myyn­ti­ka­na­va vai in­te­graa­tioi­ta vaa­ti­va asioin­ti­pal­ve­lu?

Tun­nis­te­taan koh­de­ryh­mät:

Kei­tä si­vus­ton käyt­tä­jät ovat ja mi­tä he tu­le­vat siel­tä et­si­mään?

Kar­toi­te­taan tek­ni­set vaa­ti­muk­set:

Mi­tä jär­jes­tel­miä (esim. CRM, ERP, uu­tis­kir­jeet) uu­teen si­vus­toon pi­tää liit­tää?

Luo­daan pro­jek­ti­suun­ni­tel­ma:

So­vi­taan vas­tuu­alu­eet, vies­tin­tä­ka­na­vat, ai­ka­tau­lu ja vä­li­ta­voit­teet eli mi­les­to­ne-vai­heet.

Suo­si­tus: Ta­voit­teet kan­nat­taa mää­ri­tel­lä ai­na mi­tat­ta­vas­sa muo­dos­sa (esim. "ta­voit­tee­na on 20 % enem­män yh­tey­den­ot­to­ja tar­jous­pyyn­tö­lo­mak­keen kaut­ta"). Tä­mä oh­jaa kaik­kea myö­hem­pää suun­nit­te­lua.

2. Suun­nit­te­lu ja mää­rit­te­ly: Käyt­tö­ko­ke­mus (UX) ja vi­su­aa­li­suus

Suun­nit­te­li­vai­hees­ta al­kaa pro­jek­tin luo­va osuus. Täs­sä vai­hees­sa pää­te­tään, mil­tä si­vus­to näyt­tää, mi­ten se toi­mii ja mi­ten kä­vi­jää oh­ja­taan si­vus­tol­la eteen­päin. Hy­vä suun­nit­te­lu sääs­tää mer­kit­tä­väs­ti ai­kaa ja ra­haa to­teu­tus­vai­hees­sa, sil­lä muu­tos­ten te­ke­mi­nen pii­rus­tuk­siin on hel­pom­paa kuin val­mii­seen koo­diin.

Suun­nit­te­lu­vai­heen osa-alu­eet:

  • Käyt­tä­jä­ko­ke­mus (UX): Ra­ken­ne­taan si­vus­ton ra­ken­ne­kart­ta (Si­te­map) ja rau­ta­lan­ka­mal­lit (Wi­re­fra­mes), jot­ka mää­rit­tä­vät tie­don si­joit­te­lun ja na­vi­goin­nin loo­gi­suu­den.

  • Vi­su­aa­li­nen il­me (UI): Luo­daan si­vus­ton lo­pul­li­nen ul­koa­su, vä­rit, fon­tit ja ku­va­maa­il­ma, jot­ka vas­taa­vat yri­tyk­se­si brän­diä.

  • Si­säl­tö­suun­ni­tel­ma: Suun­ni­tel­laan, mil­lais­ta teks­tiä, ku­via tai vi­deoi­ta si­vus­tol­le tar­vi­taan ja ku­ka ne tuot­taa.

  • Saa­vu­tet­ta­vuus (Acces­si­bi­li­ty): Var­mis­te­taan, et­tä si­vus­to on help­po­käyt­töi­nen kai­kil­le, myös apu­vä­li­nei­tä käyt­tä­vil­le (huo­mioi­daan mm. vä­ri­kont­ras­tit, font­ti­koot ja näp­päi­mis­tö­käyt­tö).

3. Tek­ni­nen to­teu­tus: Näin vi­sio muut­tuu koo­dik­si

Kun suun­ni­tel­mat on hy­väk­syt­ty, siir­ry­tään pro­jek­tin tek­ni­seen ra­ken­nus­vai­hee­seen. Täs­sä vai­hees­sa ke­hit­tä­jät ot­ta­vat vi­su­aa­li­set leis­kat ja al­ka­vat koo­da­ta nii­den poh­jal­ta toi­mi­vaa ko­ko­nai­suut­ta.

To­teu­tus­vai­hees­sa työ­ka­luik­si ote­taan mo­der­nit oh­jel­mis­to­ke­hi­tyk­sen tek­no­lo­giat ja tar­pei­siin so­pi­va si­säl­lön­hal­lin­ta­jär­jes­tel­mä (CMS). Ke­hit­tä­jät pys­tyt­tä­vät en­sin sul­je­tun ke­hi­ty­sym­pä­ris­tön. Tä­mä tar­koit­taa, et­tä uusi si­vus­to ra­ken­ne­taan pii­los­sa jul­ki­suu­del­ta, mut­ta pro­jek­ti­ryh­mä pää­see tar­kas­te­le­maan sen edis­ty­mis­tä suo­ja­tun lin­kin kaut­ta.

Tek­ni­ses­sä to­teu­tuk­ses­sa huo­leh­di­taan sii­tä, et­tä si­vus­to on:

1. Res­pon­sii­vi­nen

Si­vus­to mu­kau­tuu sau­mat­to­mas­ti niin mas­sii­vi­sel­le työ­pöy­tä­näy­töl­le kuin pie­nen pu­he­li­men ruu­dul­le.

2. In­tegroi­tu

Jos si­vus­ton pi­tää kes­kus­tel­la ul­kois­ten jär­jes­tel­mien (ku­ten asiak­kuu­den­hal­lin­nan CRM:n tai säh­kö­pos­ti­mark­ki­noin­nin) kans­sa, nä­mä API-ra­ja­pin­nat ra­ken­ne­taan täs­sä vai­hees­sa.

3. Ha­ku­ko­neys­tä­väl­li­nen

Tek­ni­nen ha­ku­ko­neop­ti­moin­ti (SEO) lei­vo­taan si­sään koo­din ra­ken­tee­seen, jot­ta ha­ku­ko­neet ym­mär­tä­vät si­vus­ton si­säl­lön ja tee­moit­tai­sen ra­ken­teen vai­vat­to­mas­ti.

Huo­mioi tä­mä:

Jo­pa 40 % kä­vi­jöis­tä pois­tuu si­vus­tol­ta, jos sen la­tau­tu­mi­nen kes­tää yli kol­me se­kun­tia. Tek­ni­sen to­teu­tuk­sen laa­tu mi­ta­taan sii­nä, kuin­ka ke­vyek­si ja no­peak­si koo­di on kir­joi­tet­tu. Jo­kai­nen mil­li­se­kun­ti on suo­raan yh­tey­des­sä sii­hen, kuin­ka mon­ta lii­diä si­vus­to­si tuot­taa.

4. Tes­taus ja laa­dun­var­mis­tus: Ei jul­kai­sua il­man koe­pon­nis­tus­ta

Ku­vit­te­le ti­lan­ne: uusi si­vus­to jul­kais­taan, suu­ri mark­ki­noin­ti­kam­pan­ja al­kaa, mut­ta ku­kaan ei pys­ty lä­het­tä­mään yh­tey­den­ot­to­lo­ma­ket­ta, kos­ka koo­dis­sa on vir­he. Tä­män ta­kia nel­jäs vai­he on pro­jek­tin py­hin osa.

En­nen kuin uusi si­vus­to jul­kais­taan, se on tes­tat­ta­va pe­rus­teel­li­ses­ti. Tes­taus­vai­hees­sa si­vus­ton toi­min­taa koe­pon­nis­te­taan eri ske­naa­rioil­la, jot­ta mah­dol­li­set vir­heet löy­de­tään en­nen asiak­kai­den saa­pu­mis­ta si­vus­tol­le.

Kaik­ki tes­tauk­ses­sa ha­vai­tut bu­git ja kau­neus­vir­heet kir­ja­taan ylös, kor­ja­taan ja tes­ta­taan uu­del­leen, kun­nes ko­ko­nai­suus on täy­sin val­mis jul­kai­suun.

Laa­dun­var­mis­tuk­sen tar­kis­tus­lis­ta:

☐ Toi­min­nal­li­suus

Toi­mi­vat­ko lo­mak­keet, lin­kit ja haut vir­heet­tö­mäs­ti?

☐ Se­lai­nyh­teen­so­pi­vuus

Tes­taus Chro­mel­la, Sa­fa­ril­la, Fi­re­foxil­la ja Ed­gel­lä.

☐ Mo­bii­li­toi­mi­vuus

Mi­ten va­lik­ko ja ele­men­tit käyt­täy­ty­vät eri pu­he­li­mil­la?

☐ Suo­ri­tus­ky­ky

No­peus­tes­tit (esim. Google Pa­geS­peed In­sights)

☐ Tie­to­tur­va

SSL-ser­ti­fi­kaa­tin tar­kis­tus ja pal­ve­li­men suo­jauk­set.

5. Si­säl­lön­tuo­tan­to ja kou­lu­tus – Si­vus­to he­rää hen­kiin

Tek­ni­ses­ti toi­mi­va si­vus­to il­man si­säl­töä on kuin upea ta­lo il­man ka­lus­tei­ta. Si­säl­lön­syöt­tö­vai­hees­sa si­vus­tol­le tuo­daan lo­pul­li­set teks­tit, ku­vat, vi­deot, blo­gi­kir­joi­tuk­set ja tuo­te­tie­dot.

Sa­maan ai­kaan kun si­säl­tö­jä syö­te­tään, si­vus­ton tu­le­vil­le päi­vit­tä­jil­le jär­jes­te­tään si­säl­lön­hal­lin­nan kou­lu­tus. Tä­män an­sios­ta pro­jek­tin pää­tyt­tyä or­ga­ni­saa­tio osaa muo­ka­ta si­vus­ton teks­te­jä, vaih­taa ku­via ja jul­kais­ta uusia ar­tik­ke­lei­ta it­se­näi­ses­ti il­man jat­ku­vaa tar­vet­ta tek­ni­sel­le tuel­le.

6. Jul­kai­su: Het­ki, jol­loin si­vus­to ava­taan maa­il­mal­le

Jul­kai­su­vai­he on verk­ko­si­vu­pro­jek­tin huip­pu­koh­ta, mut­ta se vaa­tii tark­kaa tek­nis­tä pro­to­kol­laa. Jul­kai­su ei ta­pah­du vain yh­tä nap­pia pai­na­mal­la, vaan ky­sees­sä on hal­lit­tu siir­ty­mä, jo­ka teh­dään yleen­sä sil­loin, kun si­vus­ton kä­vi­jä­mää­rät ovat al­hai­sim­mil­laan (esi­mer­kik­si il­lal­la tai var­hain aa­mul­la).

Jul­kai­su­päi­vän tär­keim­mät as­ke­leet:

Do­mai­nin oh­jaus: Ni­mi­pal­ve­li­na­se­tuk­set (DNS) päi­vi­te­tään osoit­ta­maan van­hal­ta pal­ve­li­mel­ta uu­del­le pal­ve­li­mel­le.

301-uu­del­lee­noh­jauk­set: Jos van­han si­vus­ton si­vu­jen osoit­teet muut­tu­vat, van­hat osoit­teet oh­ja­taan au­to­maat­ti­ses­ti uusiin vas­taa­viin osoit­tei­siin. Tä­mä es­tää "404 - Si­vua ei löy­dy" -vir­heet ja säi­lyt­tää ai­em­min saa­vu­te­tun Google-nä­ky­vyy­den.

Ha­ku­ko­nei­den in­for­moin­ti: Uusi si­vus­to­kart­ta (XML-si­te­map) toi­mi­te­taan Google Search Con­so­leen, jot­ta ha­ku­ko­ne al­kaa in­dek­soi­da uusia si­vu­ja vä­lit­tö­mäs­ti.

7. Yl­lä­pi­to ja jat­ku­va ke­hi­tys: Verk­ko­si­vu ei ole kos­kaan "val­mis"

Mo­net ajat­te­le­vat, et­tä pro­jek­ti päät­tyy jul­kai­suun. To­del­li­suu­des­sa vas­ta sil­loin al­kaa si­vus­ton to­del­li­nen elin­kaa­ri. In­ter­net muut­tuu jat­ku­vas­ti: se­lai­met päi­vit­ty­vät, uusia tie­to­tur­vauh­kia il­maan­tuu ja kil­pai­lu­ti­lan­ne mark­ki­nas­sa muut­tuu.

Sään­nöl­li­nen yl­lä­pi­to pi­tää si­vus­ton tur­val­li­se­na, no­pea­na ja toi­min­ta­var­maa­na. Li­säk­si ke­rään­ty­vää kä­vi­jä­da­taa (ana­ly­tiik­kaa) tul­kit­se­mal­la si­vus­toa voi­daan ke­hit­tää jat­ku­vas­ti pa­rem­mak­si: esi­mer­kik­si tes­taa­mal­la, mit­kä ot­si­kot toi­mi­vat par­hai­ten tai mi­kä lo­ma­ke­ra­ken­ne tuot­taa eni­ten yh­tey­den­ot­to­ja.

Usein ky­sy­tyt ky­sy­myk­set verk­ko­si­vu­pro­jek­teis­ta

Kuin­ka kau­an verk­ko­si­vu­pro­jek­ti yleen­sä kes­tää?

Tyy­pil­li­nen yri­tyk­sen verk­ko­si­vu­pro­jek­ti kes­tää 6–12 viik­koa riip­puen si­vus­ton laa­juu­des­ta, in­te­graa­tioi­den mää­räs­tä se­kä sii­tä, kuin­ka no­peas­ti tar­vit­ta­vat ma­te­ri­aa­lit (ku­ten teks­tit ja ku­vat) saa­daan tuo­tet­tua.

Mi­tä ti­laa­jan pi­tää teh­dä verk­ko­si­vu­pro­jek­tin ai­ka­na?

Ti­laa­jan tär­kein roo­li on toi­mia oman alan­sa ja lii­ke­toi­min­tan­sa asian­tun­ti­ja­na. Ti­laa­jal­ta vaa­di­taan ta­voit­tei­den mää­rit­te­lyä, si­säl­tö­ma­te­ri­aa­lien tuo­tan­toa (tai toi­mi­te­tun si­säl­lön kom­men­toin­tia) se­kä no­pe­aa rea­goin­tia pa­laut­teen­an­to­vai­heis­sa, jot­ta pro­jek­ti ete­nee ai­ka­tau­lus­sa.

Mi­ten van­han si­vus­ton Google-nä­ky­vyy­del­le käy uu­dis­tuk­ses­sa?

Oi­kein teh­ty­nä nä­ky­vyys voi jo­pa pa­ran­tua. Tär­kein­tä on teh­dä huo­lel­li­set 301-uu­del­lee­noh­jauk­set van­hois­ta osoit­teis­ta uusiin ja var­mis­taa, et­tä tek­ni­nen ha­ku­ko­neop­ti­moin­ti on huo­mioi­tu koo­dis­sa alus­ta al­kaen.

Tar­vit­set­ko apua?

On­nis­tu­nut verk­ko­si­vu­pro­jek­ti vaa­tii kump­pa­nin, jo­ka ym­mär­tää se­kä tek­no­lo­gian, de­sig­nin et­tä lii­ke­toi­min­nan ta­voit­teet. Suun­nit­te­le­mal­la ja ra­ken­ta­mal­la si­vus­ton am­mat­ti­tai­toi­ses­ti var­mis­te­taan, et­tä se tu­kee löy­det­tä­vyyt­tä, he­rät­tää luot­ta­mus­ta ja toi­mii jat­ku­van ke­hi­tyk­sen poh­ja­na.

Lue lisää verkkosivupalveluistamme

Lue li­sää

Mies juo kahvia kannettavan tietokoneen ääressä.
BlogiNäin verkkosivuprojekti etenee onnistuneesti – 7 vaihetta suunnittelusta julkaisuun
BlogiOta ainakin nämä 4 asiaa huomioon ohjelmistopalvelun hankinnassa
BlogiTämän takia säännöllinen ohjelmiston kuntotarkastus kannattaa
Loikka Pro TipKäyttötapausten kommunikointi ja dokumentointi