Legacy: Kulissien takana – Näin meillä tehdään verkkosivuja

Sisältö

Huomio: tämä kirjoitus koskee edellistä yritystäni Sivututkaa, jota luotsasin vuosina 2013-2022.

WordPress verkkosivujen toteutustapoja on suunnilleen yhtä paljon, kuin on tekijöitäkin. Yhdessä ääripäässä syötetään valmiiseen verkkosivupohjaan nopeasti tekstit ja kuvat ilman kummempaa ajatustyötä. Toisessa päässä taas käytetään satoja työtunteja pelkästään käyttökokemuksen suunnitteluun.

Nyt aionkin raottaa kulissien verhoa: näin meillä Sivututkalla tehdään WordPress verkkosivuja.

Vaihe 1: Tutustuminen ja tarpeiden selvitys (1 päivä)

Olet saanut meiltä tarjouksen verkkosivuprojektista. Kaikki vaikuttaa hyvältä ja uskot, että Sivututkan tyyppeihin voi luottaa. Varsinkin, kun lupasivat täyden tyytyväisyystakuun koko hommalle. Jos projekti menee metsään, niin ainakaan rahoja ei menetä. Hyväksyt tarjouksen ja työt voidaan aloittaa.

Aivan aluksi tutustumme sinuun ja yritykseesi. Tarkoituksena olisi ymmärtää yritystoimintaasi, tavoitteitasi ja asiakkaitasi. Ilman ymmärrystä verkkosivujen toteutus menisi arvailuksi, joten tämä perustustyö on syytä hoitaa huolella.

Homma polkaistaan käyntiin muutaman tunnin kickoff-palaverilla, jossa tapaamme joko etänä tai ihan kasvotusten. Tapaamisessa juttelemme mm. seuraavista asioista:

  • Mikä on sivuston tarkoitus, eli mihin sivustolla pyritään?
  • Mikä on käytännön tavoite, mitä sivustolla kävijän halutaan tekevän?
  • Keitä ovat tärkeimmät asiakkaasi ja kohderyhmäsi?
  • Ketkä ovat kovimmat kilpailijasi?
  • Miten eroat kilpailijoistasi? Miksi asiakkaasi ostavat juuri sinulta?
  • Millaista sisältöä sivustolle tullaan julkaisemaan?
  • Millaisia tuntemuksia sivustolla kävijässä halutaan herättää?

Kun olemme samalla aaltopituudella ja meillä on ymmärrys toiminnastasi, kohderyhmästäsi ja tavoitteistasi, niin pääsemme aloittamaan ajatustyön ja suunnittelun.

Vaihe 2: Tyylin ja sisällön suunnittelu (1-2 viikkoa)

Seuraavaksi ryhdymme työstämään sivuston tyyliä ja sisältöä. Tämä vaihe luo pohjan itse sivuston suunnittelulle.

Tyylin suunnittelussa tärkeintä on huomioida brändisi ja kohderyhmäsi. Minkälaisia tuntemuksia halutaan herättää? Sopisiko sivustolle äijämäisen rouhea vai kenties elegantimpi tyyli? Millä tavalla nämä saataisiin parhaiten esitettyä?

Tyylin suunnitteluun kuuluu mm:

  • Fonttien valinnat ja typografian, eli fonttien yksityiskohtien suunnittelu
  • Värimaailma ja värien käyttö
  • Esimerkkejä graafisista ja visuaalisista elementeistä
  • Kuvamaailman luonnostelu
  • Esimerkkejä ja inspiraatiota muilta sivustoilta

Nämä kaikki koostetaan tyylikokoelmaksi pilvipalvelussa sijaitsevaan kansioon.

Esimerkki tyylikokoelmakansiosta

Tyylin kanssa samassa rytäkässä suunnitellaan myös sivuston sisältö. Useimmilla verkkosivuilla (teksti)sisältö on kaikkein tärkeimmässä asemassa. Siksi sisällön ja esitystavan suunnittelu on kriittinen osa onnistunutta verkkosivuprojektia.

Sisältöä varten mietitään vastauksia mm. tällaisiin kysymyksiin:

  • Millä tavalla yrityksen viesti saadaan parhaiten perille kohderyhmälle?
  • Mitä eri sisältöjä sivustolle tulee?
  • Mitä eri sivuja tai osioita sivustolle tarvitaan?
  • Millä tavalla sisällöt esitetään?

Sisältö koostetaan sisältösuunnitelmaan, joka on ns. rautalankaversio verkkosivuista. Sisältösuunnitelmassa on jo tekstit ja muiden sisältöjen sijainnit paikallaan, ilman tarkempaa visuaalista ilmettä. Eli selkeä esitys mitä sivustolla tullaan sanomaan ja viestimään kävijälle.

Sisältösuunnitelmasta luodaan prototyyppi, jota pääsen selaamaan nettiselaimellasi normaalin verkkosivun tavoin.

Esimerkki osasta Etusivun sisältösuunnitelmaa
Esimerkki osasta tuotesivun sisältösuunnitelmaa

Tyylikokoelma ja sisältösuunnitelma esitellään sinulle lyhyessä etätapaamisessa. Pääset halutessasi kommentoimaan ja tekemään suunnitelmiin muutosehdotuksia.

Vaihe 3: Sivuston ulkoasun ja rakenteen suunnittelu (1-3 viikkoa)

Tyylin ja sisällön suunnittelemisen jälkeen on aika käydä sivuston ulkoasun kimppuun. Tyyli ja sisältö yhdistetään saumattomaksi suunnitelmaksi, joka näyttää hyvältä, palvelee tavoitteitasi ja puhuttelee kohderyhmääsi.

Sivuston suunnittelu sisältää paljon muutakin, kuin vain eeppisen hienon ulkoasun luomisen sivustolle. Rakenteen tulee palvella sivuston tavoitetta ja tarkoitusta. Kohderyhmä pitää huomioida. Ydinviesti täytyy tehdä selväksi kävijälle. Tämä kaikki esteettömyys ja mukava käyttökokemus huomioiden.

Sivuston suunnittelussa tehdyt valinnat pohjautuvat pitkälti tutustumisvaiheessa tehtyihin havaintoihin. Jos tavoitteena on esimerkiksi kerätä potentiaalisilta asiakkailta yhteydenottoja lomakkeella, niin sivusto suunnitellaan ohjaamaan kävijää tätä tavoitetta kohti ja sen toteuttaminen kävijälle mahdollisimman helpoksi.

Suunnitelmissa huomioidaan niin desktop- kuin mobiiliversiotkin sivustosta ja saat näistä molemmat suunnitelman nähtäväksi.

Verkkosivut suunnitellaan prototyypiksi, joka toimii jo melko pitkälti valmiin tuotoksen tavoin. Pääset selaamaan sivuston prototyyppiä verkkoselaimellasi ja navigoimaan linkeistä normaalisti. Näin saat mahdollisimman selkeän kuvan, miltä sivusto tulisi näyttämään ja tuntumaan sen valmistuttua.

Esimerkki osasta asiakascase -sivun prototyyppiä
Esimerkki osasta yritys -sivun prototyypistä

Vaihe 4: Verkkosivujen toteutus (3-10 viikkoa)

Räätälöityjen suunnitelmien toteutus sujuvaksi ja helppokäyttöiseksi verkkosivustoksi ei onnistu ihan aloittelevalta junior-tason kehittäjältä. Loistavatkin suunnitelmat on helppo ryssiä toteutusvaiheessa, jos koodarilla ei ole homma hanskassa.

WordPress on osalla ihmisistä hieman huonossa maineessa. Yleensä tämä johtuu joidenkin WP-pajojen käyttämistä helpoista ja halvoista ratkaisuista, kuten kaikille-jotain-valmisteemoista, hankalista sisällönrakennustyökaluista tai kymmeniin kolmannen osapuolen lisäosiin nojaavasta tekniikasta. Meillä tällaisia kyseenalaisia ratkaisuja ei käytetä. Oikein rakennettuna WordPress verkkosivusto on helppokäyttöinen, nopea, pitkäikäinen ja vaivattomasti jatkokehitettävä paketti.

Rakennamme sivustosi itse kehittämämme WordPress-aloitusteeman päälle. Riisuttu aloitusteema toimii lähtöpisteenä toteutukselle. Teemassa ei ole mitään ylimääräistä, joten latausajat pysyvät kurissa ja siitä on helppo lähteä sorvaamaan sivustoa suunnitelmien mukaiseksi.

Sivusto toteutetaan testiosoitteeseen, josta pääset sitä itsekin kokeilemaan ennen lopulliseen osoitteeseen julkaisua. Pääset jälleen tekemään muutosehdotuksia sivustolle ja vaikuttamaan lopputulokseen.

Emme kuitenkaan kyselemättä toteuta kaikkia villeimpiä pyyntöjäsi. Asiantuntijana ja kumppaninasi meidän tehtävä on toteuttaa tavoitteitasi auttavat verkkosivut. Jos jokin pyyntösi vaikkapa heikentäisi mielestämme sivuston käyttökokemusta, niin saat tästä palautteen ja perustelut.

Kehittäjämme toteuttaa ja testaa verkkosivusi kaikilla tämän päivän standardeilla ja mausteilla:

  • Responsiivinen toteutus: verkkosivut mukautuvat kaikkiin eri laitteisiin.
  • Muokkaus tehdään helpoksi: sivuston sisällön muokkaus tehdään sinulle helpoksi erilaisten sisältökenttien, -lohkojen ja -tyyppien avulla.
  • Hakukoneoptimointi: sivujen tekninen puoli säädetään siten, että sijoitus hakukoneissa on mahdollisimman hyvä.
  • Animointi: sivusto maustetaan ja herätetään eloon pienillä animoinneilla, jotka parantavat käyttökokemusta.
  • Latausnopeuden optimointi: kuvat ja muut tiedostot optimoidaan pienikokoiseksi sekä huolehditaan välimuistitus ym. asiat, jotta kävijät eivät tuskastu hitaisiin sivuihin.
  • Saavutettavuus: huolehdimme että verkkosivut ovat mukavat käyttää kaikille käyttäjille.
  • Analytiikka: sivustolle asennetaan Google Analytics -työkalu, josta saat rahanarvoista tietoa kävijöistä ja sivustosi toiminnasta. Analyticsiin asetetaan tavoitteet, joista pääset seuraamaan kuinka hyvin sivusto pärjää sille asetetussa tehtävässään.

Teknisemmille veijareille kehitystyössämme käytettyjä työkaluja ja työtapoja on avattu tässä kirjoituksessa.

Vaihe 5: Viimeistely ja julkaisu (1 päivä)

Sivusto on nyt rakennettu testiosoitteeseen ja kaikki ovat siihen tyytyväisiä. Pidämme sinulle käyttökoulutuksen sivuston muokkaukseen ja sisällönhallintaan, jonka lisäksi saat myös kuvalliset käyttöohjeet.

Kun saamme sinulta vihreää valoa julkaisemiselle, niin siirrämme uutuuttaan kiiltävän sivustosi ihmisten ihasteltavaksi lopulliseen osoitteeseensa. Samalla teemme vielä viimeiset näkymättömämmät viilaukset mm. hakukoneoptimointiin ja latausnopeuksiin.

Aika avata shampanjapullo, projekti on valmis! Vai onko?

Vaihe 6: Ylläpito ja sisällöntuotanto

Vaikka verkkosivusi on nyt netissä, monesti työ on vasta alussa. Usein varsinkin sisältöpainotteinen WordPress sivusto toimii parhaiten silloin, kun sinne julkaistaan säännöllisesti uutta sisältöä esimerkiksi blogikirjoitusten, vinkkien, asiakastarinoiden, tms. kävijöitä kiinnostavan kamppeen muodossa.

Myös sivuston WordPress-päivitykset tulisi hoitaa tasaisin väliajoin, jotta pahat hakkerit eivät pääse yllättämään.

Olemme tukenasi ja turvanasi niin paljon tai vähän kuin tarvitset. Käyttöohjeiden ja koulutuksen lisäksi ohjeistamme tarvittaessa kädestä pitäen. Halutessasi voit pyytää meitä tekemään päivitykset ja mahdolliset muutostyöt puolestasi.

Kuten ehkä laitoit merkille, niin yrityksen verkkosivujen tekeminen ei ole ihan simppeli savotta. Ainakaan silloin, kun halutaan tehdä priimaa ja ajatuksella mietittyä jälkeä.