Löydy verkosta
Myy enemmän
Kehity‍ tiedolla

Kategoria: Verkkosivut

WordPress-verkkosivut – Kaikki oleellinen wordpressistä

Posted on by Jaakko Innanen

Huippusuosittu WordPress on hyvä valinta yrityksen verkkosivuston tai -kaupan alustaksi – rakennammehan mekin Härällä asiakkaidemme verkkosaitit sen päälle.

Mutta mikä WordPress oikeastaan on? Entä mitä WordPress-verkkosivut maksavat, miten sen lisäosat toimivat ja mitä miinuspuolia WordPress saattaa pitää sisällään?

Tähän tietopakettiin kokosimme olennaisimmat asiat WordPress-verkkosivuista. Tervetuloa sukeltamaan WordPressin maailmaan!

🚀 Hyppää tästä suoraan haluamaasi osioon:

  1. Mikä WordPress? >>
  2. Mihin tarkoitukseen WordPress on hyvä? >>
  3. WordPressin plussat ja miinukset >>
  4. Lisäosat WordPressissä >>
    • Lisäosien käyttöönoton tarkistuslista
  5. WordPress vs. HubSpot – kumpi on parempi? >>
  6. Mitä WordPress-verkkosivut maksavat? >>
    • Kun WordPress-verkkosivusto maksaa 100–900 €
    • Kun WordPress-verkkosivusto maksaa 1 000–9 000 €
    • Kun WordPress-verkkosivusto maksaa yli 10 000 €
    • Kun WordPress-verkkosivusto maksaa 20 000–30 000 €
    • Kun WordPress-verkkosivusto maksaa yli 30 000 €
    • Verkkosivuprojektin hinta Sinisellä Härällä
    • Verkkosivuston räätälöinti maksaa, mutta on sen arvoista
  7. Esimerkit WordPress-verkkosivuista >>
  8. WordPress-verkkosivun tietoturva, responsiivisuus, hakukoneoptimointi, saavutettavuus ja nopeus >>
    • WordPress ja tietoturva
    • WordPress ja responsiivisuus
    • WordPress ja hakukoneoptimointi
    • WordPress ja saavutettavuus
    • WordPress-verkkosivuston nopeus
  9. Jäikö kysyttävää WordPress-verkkosivuista? >>

Mikä WordPress?

Lyhyt ja ytimekäs vastaus otsikon kysymykseen on: maailman suosituin sisällönhallintajärjestelmä. Hieman pidempi vastaus on, että WordPress on avoimeen lähdekoodiin perustuva alusta, joka on tarkoitettu verkkosivujen luomiseen ja ylläpitoon. Se on sisällönhallintajärjestelmä (englanniksi Content Management System eli CMS), jolla käsitellään sivuston sisältöä: tekstiä, kuvia, videoita, käyttäjiä ja heidän oikeuksiaan sekä niin edelleen.

WordPress on kaikille avoin palvelu, joka ei vaadi lisenssiä – sen käyttö on siis lähtökohtaisesti maksutonta. WordPressin avoin lähdekoodi tarkoittaa, että kuka tahansa voi kehittää ja kustomoida WordPressiä ja rakentaa siihen sopivia lisäosia. WordPressillä ei ole omistajaa, vaan sitä vie eteenpäin vapaaehtoinen kehittäjäyhteisö.

Monet suuretkin saitit maailmanlaajuisesti (myös Jenkkien Fortune 500 -listan yrityksille!) on tehty WordPressillä ja useat isot verkkokaupat sen liitännäisellä WooCommercella. Myös me Sinisellä Härällä rakennamme asiakkaidemme verkkosivut ja -kaupat WordPressin ja WooCommercen päälle.

Mihin tarkoitukseen WordPress on hyvä?

WordPress on erityisen hyvä valinta verkkosaitin alustaksi silloin, kun tiedät, että haluat päivittää sivustosi sisältöjä usein. WordPressin käyttäminen ja sisältöjen hallinta siellä on lähtökohtaisesti todella helppoa – onhan se suunniteltu alun perin bloggaamiseen, jossa uutta sisältöä tulee jatkuvasti. Et tarvitse koodiosaamista päivittääksesi sisältöjä WordPressillä.

WordPress on hyvä verkkosaittialusta myös silloin, kun haluat kehittää sivustoasi eteenpäin itse ja hallita sisältöjä mahdollisimman yksinkertaisella tavalla myös koodin ja sivuston rakenteen tasolla. Avoimen lähdekoodin ansiosta WordPress-sivustolle on helppo tuoda lisää toimintoja, ja kuka tahansa voi kehittää WordPressiä eteenpäin. WordPressillä onkin ympäri maailman hurja määrä kehittäjiä ja yli 55 000 lisäosaa, jotka auttavat saittia mukautumaan tarpeisiisi (lisäosista lisää myöhemmin!).

Asiaa voi ajatella myös toisinpäin: Jos valitset verkkosivusi alustaksi suljetun sisällönhallintajärjestelmän, olet sidoksissa sen omistajaan. Suljettu lähdekoodi voi tarkoittaa, että sisällönhallintajärjestelmää kehittää vain yksi tai muutama tekijä, jotka voivat tällöin hinnoitella palvelunsa ilman kilpailua. Sivuston kehittäminen saattaa siis tulla todella kalliiksi.

Lisäksi sivuston kehittäminen suljetun alustan päälle vaatii todennäköisesti paljon räätälöintiä, kun taas WordPressillä melkein mihin vain toiminnallisuuteen tai ominaisuuteen löytyy valmiiksi kehitetty lisäosa. Jos osaat koodata, voit rakentaa WordPressiin lähes mitä vain – ja jos et osaa, voit ostaa apua muualta. Tarjontaa nimittäin riittää.

WordPress ei ole maailman suosituin nettisaittialusta syyttä. Hyvänä ja monipuolisena sisällönhallintajärjestelmänä se sopii varmasti suurimmalle osalle suomalaisista yrityksistä.

WordPress-verkkosivujen plussat ja miinukset

✅ Paljon tekijöitä ja kehittäjiä

Maailman – kuten myös Suomen – WordPress-käyttäjäyhteisö on suuri. Sinulla on siis varaa valita, kun etsit tarpeisiisi sopivaa WordPress-tekijää. Et myöskään joudu sitoutumaan yhteen toimijaan, vaan voit vaihtaa tekijää halutessasi, sillä kenellä tahansa on mahdollisuus kehittää WordPress-sivuston avointa lähdekoodia.

✅ Läjäpäin lisäosia ja valmiita ratkaisuja

Jos sinulla on WordPressiin liittyvä ongelma, siihen on todennäköisesti myös ratkaisu. WordPressiin kehitetyistä lisäosista löytyy paljon valmiita ratkaisuja aina sivun hakukoneoptimoinnin hiomisesta yhteydenottolomakkeen toteuttamiseen. Lisäksi avoimeen lähdekoodiin on mahdollista rakentaa räätälöityjä ratkaisuja, jotka osaavan tekijän käsissä syntyvät varsin kustannustehokkaasti.

✅ Hyvät integraatiot eri ohjelmistoihin

Yleisesti ottaen WordPressin integroitavuus muiden ohjelmistojen kanssa on todella hyvä, ja verkossa odottaa suuri määrä valmiita WordPress-integraatioita eri ohjelmistoihin laskutuksesta markkinoinnin automaatioon. Tämä on iso plussa, sillä integraatiot verkkosivuilla ovat nykyään todella yleisiä, kun dataa halutaan liikuttaa tehokkaasti paikasta toiseen. Todennäköistä siis on, että sinunkin sivustosi hyötyy integraatiosta jos toisestakin.

✅ Sisällönhallinnan yksinkertaisuus

Viimeisenä, muttei vähäisimpänä: sisällönhallinta WordPressillä on yksinkertaisesti yksinkertaista (ainakin, kun se on rakennettu oikein). Siihen WordPress on alun perin kehitetty, ja siinä se toimii erityisen hyvin.

❌ Muokattavuus on kaksiteräinen miekka

WordPress-verkkosivut voi rakentaa monella tavalla. Vaikka tämä on usein positiivista, voi siitä seurata myös ongelmia: pahimmillaan WordPressinkin käyttämisestä saa todella monimutkaista. Onkin suuresti tekijästä riippuvaista, millaiset WordPress-verkkosivusi ovat.

❌ Lisäosissa piilee riskejä

Lisäosien huono puoli on, että ne voivat olla – tekijästä riippuen – hyviä tai huonoja. Lisäosissa piilee aina riski, sillä pahimmillaan huonot lisäosat voivat aiheuttaa paljon ongelmia, kuten bugeja ja tietoturvariskejä. Mitä enemmän lisäosia sivustolla on, sitä haavoittuvaisempi sivusto on. Lisäosaviidakon hedelmiä kannattaakin poimia maltilla.

❌ Vaikka koodiosaaminen ei ole välttämätöntä, on siitä huomattavasti hyötyä

Periaatteessa WordPress-sivuston voi rakentaa ilman koodiosaamista, mutta me Härällä emme kehota lähtemään sille tielle. WordPress-sivun sisältöjen päivittäminen ilman koodaamista on helppoa, mutta jotta sivusto kokonaisuudessaan pysyy luotettavana ja toimintavarmana, on koodiosaamisesta helkutisti hyötyä. Jos haluat rakentaa verkkosaitin kokonaan ilman koodaamista, suosittelemme valitsemaan WordPressin sijaan jonkin toisen alustan.

Lisäosat WordPress-verkkosivuilla

Avoimen lähdekoodin ansiosta WordPressiin on tarjolla valtava määrä eri tekijöiden rakentamia maksullisia ja maksuttomia lisäosia, joiden avulla saat WordPress-sivuillesi uusia toiminnallisuuksia, kuten vaikka palomuurin, varmuuskopioinnin, yhteydenottolomakkeen ja eri kieliversiot. Parhaimmillaan lisäosat tarjoavat käteviä, valmiita ja kustannustehokkaita ratkaisuja WordPress-verkkosivustolle. WordPress-verkkosivustojen voikin sanoa perustuvan pitkälti lisäosiin.

Myös me Härällä hyödynnämme lisäosia – joko ostettuja tai itse koodaamiemme – WordPress-verkkosivustoja rakentaessamme. Meillä on noin kymmenen vakiolisäosaa, joita tyypillisesti käytämme saiteillamme. Näitä ovat esimerkiksi kieliversioihin, sisällönhallintaan, lomakkeisiin ja hakukoneoptimointiin liittyvät lisäosat. Kaikki testattuja ja hyväksi havaittuja!

Lisäosia kannattaa kuitenkin käyttää maltilla, sillä ne voivat tuoda mukanaan myös ongelmia: heikentää tietoturvaa, aiheuttaa bugeja ja pahimmillaan kaataa koko sivuston. Me olemme nähneet 60 lisäosan verkkosivuston sekä asiakkaallemme tekemämme kahdeksan lisäosan verkkosivun, jonka muut toiminnallisuudet on tehty koodaamalla. Ero ensimmäisen ja jälkimmäisen toimivuudessa on valtava.

Jos lisäosia on paljon, myös niiden yhteensopimattomuus voi aiheuttaa haasteita. Siitä, miten sivustollesi valitsemasi lisäosat sopivat yhteen keskenään, ei ole mitään taetta ennen kuin olet kokeillut asiaa. Yhteensopivuudesta on vaikea olla kartalla, jos lisäosien kanssa ei tule työskenneltyä päivittäin – tai vuosittain, tai ikinä. Siksi asiantuntijan apu WordPress-verkkosivujen rakentamisessa on korvaamatonta.

Yhtään ylimääräistä ”varmuuden vuoksi” -lisäosaa sivustolle ei siis kannata ottaa.

Ennen kuin asennat WordPress-verkkosivustollesi uuden lisäosan, suosittelemmekin pohtimaan, onko lisäosa varmasti välttämätön, sekä tarkistamaan ainakin seuraavat asiat:

👀 Lisäosien tarkistuslista

  1. Kuka lisäosan on tehnyt?
    • Lisäosan kehittäjän nimi näkyy yleensä lisäosan sivulla. Onko lisäosan tekijä luotettavan oloinen oikea yritys?
  2. Kehitetäänkö lisäosaa?
    • Onko lisäosasta tullut uusia versioita? Milloin viimeisin versio on julkaistu? Versiotiedot, jotka yleensä myös löytyvät lisäosan sivulta, antavat osviittaa siitä, kehitetäänkö lisäosaa vastaamaan jatkuvasti muuttuvia vaatimuksia.
  3. Kuinka paljon latauksia lisäosalla on?
    • Jos lisäosalla on 500 000 latausta, on se todennäköisesti toimiva ja hyväksi havaittu. Jos taas latauksia on kaksi, osaat suhtautua lisäosaan varauksella.
  4. Millaisia arvosteluja lisäosa on saanut?
    • Jos lisäosalla on paljon latauksia, on sillä todennäköisesti myös arvosteluja. Arvosteluista voit lukea paitsi muiden käyttäjien mielipiteitä lisäosasta, myös esimerkiksi kommentteja siitä, miten mahdollisia bugeja on korjattu.

WordPress vai Hubspot – kumpi on parempi?

Siinä missä WordPress on ennen kaikkea sisällönhallintajärjestelmä, on HubSpot paljon muutakin: monipuolinen myynnin, markkinoinnin, asiakaspalvelun ja asiakasrekisterin alusta, jolla voi tehdä niin liidien pisteytystä kuin asiakkuuksien hallintaakin. Tunnetuin HubSpot taitaa olla sen markkinoinnin automaation ominaisuuksistaan. Kuulostaa hyvältä, eikö? Sitä se onkin, kun HubSpotin monipuolisia ominaisuuksia osaa hyödyntää oikein.

Jos pohdit verkkosivujen rakentamista HubSpotilla, kannattaa sinun miettiä, hyödynnätkö oikeasti HubSpotin muita ominaisuuksia. Mikäli ajatukset huikeista markkinoinnin automaatioputkista jäävät todellisuudessa vain haaveeksi, et saa HubSpotin sisällönhallintajärjestelmästä tarpeeksi irti.

HubSpotin hyödyt nousevat esiin silloin, kun keräät sen kautta jatkuvasti dataa markkinointiin. Kun tieto asiakkaista ja verkkosivukävijöistä on yhdessä paikassa, voi dataa hyödyntää verkkosivujen rakentamisessa ja esimerkiksi sisältöjen personoinnissa. Mutta jos tätä putkea ei ole, on HubSpot vain ylihintainen verkkosaittialusta.

HubSpotin käyttö on nimittäin merkittävästi kalliimpaa kuin WordPressin. Lisäksi HubSpot-kehittäminen vaatii erikoistumista, ja HubSpot-kehittäjiä on Suomessa huomattavasti vähemmän kuin WordPress-kehittäjiä, mikä osaltaan tekee HubSpotista WordPressiä hinnakkaamman verkkosaittialustan. Kustannuksissa WordPress voittaa HubSpotin selvästi.

Me Härällä käytämme WordPressin ohella Active Campaign -nimistä ohjelmistoa, jolla saamme samat toiminnallisuudet kuin mitä suurin osa HubSpotin käyttäjistä hyödyntää, mutta paljon edullisemmin. Myös HubSpot ja WordPress voivat toimia rinnakkain, WordPress verkkosaittialustana ja HubSpot markkinoinnin automaation työkaluna.

Mitä WordPress-verkkosivut maksavat?

Vastaus: melkein mitä tahansa.

WordPress-verkkosivut voi saada muutamalla satasella, sadalla tuhannella eurolla tai millä tahansa summalla siitä väliltä. Tässä kuitenkin lyhyt tiivistelmä siitä, mihin eri suuruiset budjetit riittävät ja miksi toiset ratkaisut maksavat enemmän kuin toiset.

Kun WordPress-verkkosivusto maksaa 100–900 €

Muutaman satasen hintainen WordPress-verkkosivu pohjautuu tyypillisesti valmiille, ilmaiselle tai maksulliselle WordPress-sivupohjalle, jota täydennetään omilla kuvilla ja teksteillä. Ja voilà, sivu on valmis!

Toimiiko sivu juuri niin kuin haluat? Todennäköisesti ei. Vaihtoehtoja valmiissa sivupohjissa kuitenkin riittää.

Kun WordPress-verkkosivusto maksaa 1 000–9 000 €

Muutaman tonnin WordPress-verkkosaittiin valitaan tavallisesti valmis sivupohja, jota kustomoidaan tekemällä pientä räätälöintiä. Ihmeellisyyksiin budjetti ei silti riitä. Muutaman tonnin hintalappu ei todennäköisesti pidä sisällään koodaustyötä, vaan mahdolliset toiminnallisuudet tehdään lisäosilla.

Kun WordPress-verkkosivusto maksaa yli 10 000 €

WordPress-verkkosivujen räätälöinti alkaa tästä hintaluokasta. Sivut tehdään tyypillisesti WordPress-teemakehityksellä, jolloin sivusto suunnitellaan valmiin sivupohjan sijaan puhtaalta pöydältä ja koodataan mittatilaustyönä asiakasta varten. Sivusto voi sisältää joitakin simppeleitä toiminnallisuuksia joko itse tehtynä tai lisäosilla rakennettuna.

Kun WordPress-verkkosivusto maksaa 20 000–30 000 €

Tässäkin hintaluokassa WordPress-saitti suunnitellaan alusta asti asiakkaan tarpeisiin vastaavaksi. Taustalla – ja hintalappuun vaikuttamassa – voi olla integraatioita muihin järjestelmiin, esimerkiksi laskutukseen tai markkinoinnin automaatioon liittyen. Sivusto saattaa sisältää teknisiä ominaisuuksia, kuten ostoa helpottavia laskureita tai kirjautumisen takana piileviä asiakaskohtaisia toiminnallisuuksia.

Kun WordPress-verkkosivusto maksaa yli 30 000 €

Yli kolme kymppitonnia kustantava WordPress-saitti voi olla esimerkiksi laaja verkkokauppa tai mittava, eri sisältötyyppejä sisältävä sivusto, jonka konepellin alta löytyy rutkasti tekniikkaa. Verkkosivusto tai -kauppa kattaa monia toiminnallisuuksia ja integraatioita, ja sen taustalla pyörii paljon dataa aina varastosaldoista tai hinnoista alkaen. Hintalappu voi näkyä päälle päin sivuston monipuolisuutena ja pinnan alla toimivuutena ja teknisyytenä.

WordPress-verkkosivuston hinta Sinisellä Härällä

Meillä Härällä verkkosivuprojektit pyörivät tavallisimmin 10 000–30 000 euron hintaluokassa. Emme käytä valmiita WordPress-teemoja, vaan teemme sivustot räätälöidysti oman teemakehityksemme kautta.

Teknisen toteutuksen lisäksi huolehdimme verkkosaitin ulkoasu- ja käyttöliittymäsuunnittelusta. Autamme myös sivuston teksteissä ja niiden hakukoneoptimoinnissa, sivuston ylläpidossa, digimarkkinoinnissa ja monessa muussa – lue lisää täältä!

Verkkosivuston räätälöinti maksaa, mutta on sen arvoista

Kun kilpailutat verkkosivuprojektiasi, voit saada monia erilaisia tarjouksia. Niihin voi suhtautua kuin talon rakennuttamiseen: Valmiissa talopaketissa on periaatteessa kaikki, mitä tarvitset. Se osuu arkeesi melko hyvin, mutta ei täydellisesti.

Kun taas rakennutat talon alusta asti juuri sinulle – ja maksat myös suunnittelusta – saat jokaista ovenkahvaa ja muita arkea helpottavia yksityiskohtia myöten täydellisen, tarpeisiisi räätälöidyn kodin.

Teknisen toteutuksen lisäksi verkkosivujen hintaan vaikuttaa siis suunnittelutyö. Käyttöliittymäsuunnittelu pyrkii määrittämään, miten asiakas kulkee sivustolla, miten asioita myydään ja miten verkkosivusto palvelee sinua ja asiakkaitasi parhaiten.

Se, miten paljon paukkuja suunnittelutyöhön loppuasiakkaiden ymmärtämiseen käytetään, tuo eroa projekteihin, hintalappuihin ja tavoitteiden saavuttamiseen.

Verkkomyynti on oma, spesiaali maailmansa, jossa pienet nyanssit voivat ratkaista kaiken. Verkkosivujen ostaja ei välttämättä ymmärrä kaikkia verkkomyynnin lainalaisuuksia, eikä hänen – tai sinun – tarvitsekaan ymmärtää. Hyvä olisi ymmärtää vain se, ettei ymmärrä. Sillä jos verkkomyyntiä tekee ”väärin”, ei myy. Ja puolivalmista pakettia ei ole suunniteltu myymään juuri sinun tuotteitasi.

Jos pohdit, kannattaako verkkokauppa suunnitella itse, klikkaa edellistä linkkiä.

Esimerkkejä WordPress-verkkosivuista ja WooCommerce-verkkokaupoista

Alla on esimerkkejä erilaisista WordPress-verkkosivuista, joita olemme tehneet. Tutustu niihin halutessasi alta.

  1. Boco IP – B2B-asiantuntijapalveluita myyvän lakitoimiston sivusto >>
  2. Veikkaus – Veikkauksen kasinoiden sivustot >>
  3. Gramex & Teosto – Musiikkialan järjestöjen yhteinen sivusto, mikä kokoaa kaiken oleellisen tiedon ja tutkimuksen musiikkalasta yhteen paikkaan >>
  4. Pikavuokraus – B2B- ja B2C -verkkokauppa rakennuskoneiden ja laitteiden vuokraukseen >>
  5. Arnolds – Suomen yhden tunnetuimman kahvilaketjun sivusto >>
  6. Otaverkko – IT-alan kasvavan asiantuntijaorganisaation sivusto >>

WordPress-verkkosivun tietoturva, responsiivisuus, hakukoneoptimointi, saavutettavuus ja nopeus

Alta löydät lyhyen katsauksen siitä, miten WordPress-verkkosivut ja yllä mainitut asiat mätsäävät yhteen.

WordPress ja tietoturva

WordPressin tietoturvan kannalta avainsanoja ovat lisäosat ja niiden päivittäminen sekä WordPress-versiot ja niiden päivittäminen. Lisäosien määrä ja ajantasaisuus vaikuttavat merkittävästi WordPressin tietoturvaan: jos sivustolla on paljon lisäosia, jotka eivät ole ajan tasalla, kasvavat riskit.

Myös hyvä palvelin on tärkeä. Me Härällä käytämme Seravon palvelinta, jossa päivitykset testataan kehitysympäristössä ennen liveksi viemistä. Jos ongelmia ilmenee, ei päivitystä viedä oikeaan ympäristöön. Hyvä palvelin jeesaa myös, jos sivusto hakkeroidaan. Seravo tallentaa sivuston varmuuskopiot, joista se voi palauttaa käyttöön sivuston versiot ajalta ennen tietoturvauhkia.

WordPress itsessään on tietoturvallinen, kunhan se on ajan tasalla. Siitä julkaistaan jatkuvasti uusia päivityksiä, joissa mahdollisista tietoturvan heikkouksista on pyritty pääsemään eroon. Jos solmit kanssamme WordPress-verkkosivujesi ylläpitosopimuksen, me huolehdimme niin WordPressin kuin lisäosien päivityksestä.

WordPress ja responsiivisuus

Responsiivisuus tarkoittaa sitä, että verkkosivusto toimii eri laitteilla ja ruuduilla aina puhelimesta tietokoneeseen, tablettiin ja televisioon. WordPress itsessään ei luo verkkosivuista responsiivisia, vaan responsiivisuus rakennetaan sivuille itse. Meillä Härällä responsiivisuus on oletusarvo. Jos tilaat WordPress-verkkosivut meiltä, teemme sivuista aina responsiiviset ja testaamme niiden toiminnan kaikilla eri näyttökoilla.

WordPress ja hakukoneoptimointi

WordPress on hyvä alusta hakukoneoptimoiduille verkkosivuille, mutta hakukoneoptimoinnin eteen on tehtävä työtä. WordPressin lisäosista löytyy paljon ratkaisuja, jotka jeesaavat sivuston SEO-kehittämisessä (me Härällä käytämme Rank Math -nimistä lisäosaa). Lisäosat, kuten Rank Math, kuitenkin lähinnä antavat palautetta hakukoneoptimoinnin onnistumisesta. Sivuston rakenne, sisäiset linkitykset, URL-polut ynnä muut hakukoneoptimointiin vaikuttavat asiat tulee osata optimoida itse.

Jotta WordPress-verkkosivusto on nopea ja hakukoneiden suosiossa, myös sivuston koodin pitää olla laadukasta ja siistiä. Sama koskee palvelinta: palvelimen sijainti ja nopeus vaikuttavat sivuston näkyvyyteen hakukoneissa.

Ja ”Content is King”, kuten sanotaan, eli jos verkkosivuston sisältö ei ole hyvää, ei ole hakukoneista tulevaa liikennettäkään. Me Härällä luonnollisesti hakukoneoptimoimme WordPress-sivustomme teknisesti ja rakenteellisesti ja jeesaamme mielellämme myös sisällön optimoinnissa. Lue lisää hakukoneoptimoinnista osana verkkosivustoprojektia!

WordPress ja saavutettavuus

Verkkosivuston saavutettavuus on periaatteessa yksilöllistä suunnittelutyötä, ja tämä pätee myös WordPressiin. Perustason saavutettavuus onnistuu hyvällä perussuunnittelulla (lue 10 käytännön esimerkkiä verkkosivustojen saavutettavuuden suunnittelusta). Kovan tason saavutettavuusstandardien täyttäminen taas vaatii yleensä koodin muokkausta ja yksityiskohtaista osaamista aiheesta.

Kun suunnittelet yrityksellesi saavutettavaa WordPress-verkkosivustoa, on tärkeää pitää mielessä heti alusta asti, että kaikki WordPressin lisäosat eivät täytä saavutettavuusvaatimuksia. Ei siis kannata suunnitella sivustoa sellaisten lisäosien varaan, jotka estävät täyden saavutettavuuden.

WordPress-verkkosivuston nopeus

WordPress-verkkosivuston nopeus on oikeastaan sen tekijän ja käyttäjän omissa käsissä. On keinoja optimoida nopeutta ja on keinoja sabotoida sitä!

Koodi vaikuttaa mielettömästi WordPress-verkkosivun nopeuteen. Mitä siistimpää ja minimalistisempaa koodi on, sitä nopeampi sivusto on. Esimerkiksi WordPressin page builder -lisäosat, jotka antavat sinun muokata saitin sisältöä ”drag and drop” -tyyliin, taas saattavat luoda ylimääräistä koodia, joka hidastaa sivustoa.

Lisäksi WordPress-sivuston nopeuteen vaikuttavat esimerkiksi palvelinvalinta, välimuistiin liittyvät asiat ja kuvat. Suuret kuvat hidastavat verkkosivun latautumista, mutta tähänkin ongelmaan on olemassa työkalu, joka web-optimoi verkkosivuston kuvat automaattisesti.

Jäikö sinulle kysyttävää?

Jäikö jotain puuttumaan? Etkö saanut vastausta kysymykseesi? Vai haluaisitko meiltä tarjouspyynnön WordPress-verkkosivuille? Olipa asiasi mikä vain, laita se matkaan henkilölle X keinolla Y, ja hoidetaan ongelma kuntoon.

Jos muuten vakuutuit WordPress-sivujen sopivuudesta tarkoituksiisi mutta pohdit vielä tekijän valintaa, hyppää lukemaan vinkkimme siitä, mitä virheitä ei kannata tehdä, kun valitset verkkosivujesi tekijää.

Vai etkö ole ihan varma, ovatko nykyiset sivunne kunnossa? Tai haluaisit tietää, mitä kehitettävää sivustollanne on?

Lue 3 syytä arvioittaa nykyiset verkkosivut ja tilaa meiltä maksuton arvio sivustonne nykytilasta!

Älä tee näitä virheitä, kun valitset verkkosivujen tekijän

Posted on by Sininen Härkä

Verkkosivuprojekti voi suistua väärille raiteille jo ennen kuin se on kunnolla alkanutkaan. Näitä virheitä kannattaa välttää, kun valitset WordPress-verkkosivuillesi tekijän!

Virhe 1: Vaatimusmäärittelyn skippaaminen

Verkkosivuprojekti on paras aloittaa huolellisella vaatimusmäärittelyllä. Vaatimusmäärittely antaa selkeät raamit sille, mitä sivustolle pitää tehdä. Se selventää, mitä verkkosivuilta odotetaan, millaisia teknisiä ja sisällöllisiä vaatimuksia sivustolle on ja miten vaatimukset toteutetaan.

Vaatimusmäärittelyn rooli on sitä tärkeämpi, mitä enemmän toiminnallisuuksia sivuille halutaan. Visuaalisesti näyttäviä valmiita verkkosivupohjia saa ostettua jopa puoli-ilmaiseksi, mutta näitä geneerisiä pohjia ei ole räätälöity juuri sinun liiketoimintasi kannalta optimaalisiksi. Räätälöinti, toiminnallisuudet ja teknisyys maksavat, ja siksi on tärkeää määritellä jo alkuun tarkasti, millaisia toiminnallisuuksia sivuille tarvitaan.

Toimivimman vaatimusmäärittelyn saat todennäköisesti aikaiseksi yhteistyössä ulkopuolisen konsultin kanssa, joka johtaa prosessia ja osaa kysyä tilaajalta, siis sinulta, juuri oikeat kysymykset. Vaatimusmäärittelyn avulla ymmärrät itsekin kirkkaammin, mitä tulevalta sivustoltasi haluat, ja voit paremmin vertailla saamiasi tarjouksia.

Virhe 2: Epämääräinen kilpailutus

Kuvitellaan, että olet ostamassa asuntoosi ulko-ovea. Lähetät ovifirmoille pyyntöjä tarjouksista ”omakotitalon ulko-ovelle”. Vastauksena saat tarjouksia väärän korkuisista, levyisistä, värisistä, ikkunallisista ja ikkunattomista ovista, joissa on erilaisia lukkoja ja kahvoja. Tarjoukset eivät ole sinulle sopivia eivätkä vertailukelpoisia, koska et ole kertonut, millaisen oven haluat. Sama pätee verkkosivuprojektiin.

Vaatimusmäärittely kannattaakin sisällyttää kilpailutusvaiheen tarjouspyyntöihin. Selkeän vaatimusmäärittelyn avulla palveluntarjoajat osaavat vastata juuri sinun vaatimuksiisi ja sinä taas pystyt kilpailuttamaan tarjoukset paremmin ja vertailukelpoisemmin ja valitsemaan juuri sinulle sopivan verkkosivujen tekijän.

Vaatimusmäärittelyn tulee olla mahdollisimman tarkka. Pelkkä ”yhteydenottolomake”-teksti toivomuslistassa voi saada yhden verkkosivujen tekijän tarjoamaan käsin koodattua, työlästä ja hintavaa lomaketta, toisen taas valmiilla pluginilla eli lisäosalla toteutettua lomaketta, jonka tekeminen on nopeampaa ja edullisempaa, mutta jonka korjaaminen rikkoutuessa on vaikeampaa. Kaikki tekniset ominaisuudet ja niille halutut toteutustavat onkin syytä sisällyttää vaatimusmäärittelyyn.

Pohdi näitä kysymyksiä vaatimusmäärittelyyn:

  1. Mitä tavoitteita meillä on sivustollemme? Mikä on sen rooli liiketoiminnassamme?
  2. Mitä sivustokäyttäjän pitää pystyä tekemään sivustolla?
    • Kuvaa eri toiveet ja toiminnallisuudet mahdollismman tarkasti
    • Esim. käyttäjän pitää voida laskea hinta laskurilla, mikä lähettää tarjouspyynnön integraation kautta suoraan CRM-järjestelmäämme Active Campaigniin (kerro myös, miten laskurin pitäisi toimia ja minkälaiset matemaattiset kaavat pyörivät taustalla)
  3. Miten paljon haluatte itse muokata sivustoa?
  4. Pitääkö sivuston toimia dynaamisesti eli päivittyvätkö sivuston sisällöt automaattisesti useampaan paikkaan? Mitkä osiot pitäisi toimia dynaamisesti?
  5. Tarvitsetteko integraatioita eri järjestelmiin? CRM, kassajärjestelmä, varastohallinta?
  6. Minkälaista visuaalisuutta kaipaatte? Haluatteko sivustolle liikettä ja animointia?
  7. ja niin edespäin…

Virhe 3: Sivuston hallinnoinnin ja jatkokehityksen unohtaminen

Jo kilpailutusvaiheessa on tärkeää pohtia, millaista hallinnointia ja jatkokehitystä kaipaat sivustollesi sitten, kun se on valmis. Haluatko pystyä muokkaamaan sivuja itse aina rakenteista lähtien, vai riittääkö, että voit päivittää kuvia ja tekstejä? Entä kuka pystyy jatkokehittämään sivustoasi tarpeen vaatiessa: sinä, kuka tahansa verkkosivujen tekijä vai ainoastaan sivut koodannut yritys? Hallinnoinnin ja jatkokehityksen tarpeet vaikuttavat sivuston toteutustapaan.

WordPressin Elementorilla, visuaalisella sivunrakentajalla, tehtyjä nettisivuja on helppo käyttää ja päivittää, ja jopa rakenteita saa muokattua iisisti drag and drop -ominaisuudella eli raahaamalla ja pudottamalla elementit haluttuun kohtaan sivulla. Toisaalta sisältöjä saa poistettua vahingossakin, eikä jatkokehitys Elementorilla ole aivan simppeliä.

Teemakehittämällä eli koodaamalla tehtyjen WordPress-verkkosivujen sisällön muokkaus on selkeää, mutta rakenteiden muovaus onnistuu vain koodaamalla. Tässä on sekä plussia että miinuksia: osaamaton hallinnoija ei voi vahingossa tehdä rakenteellisia muutoksia, mutta jos sivuja tarvitsee jostain syystä muokata useasti, ei sitä voi tehdä drag and drop -tyyliin.

Teemakehittämällä tehtyjä sivuja voivat kuitenkin jatkokehittää muutkin koodiosaajat kuin verkkosivujen alkuperäinen tekijä, ja jatkokehittäminen on helppoa. Lisäksi teemakehitys tuo muitakin hyötyjä, kuten paremman yhteensopivuuden lisäosien, esimerkiksi WooCommercen (verkkokaupat) ja Polylangin (monikielisyys), kanssa sekä vähemmän korjaustyötä ja bugeja, mikäli saitin on tehnyt osaava tekijä.

Se, millaista nettisivujen hallinnointi on asiakkaalle, erottaa monen WordPress-talon toisistaan. Kerro siis vaatimusmärittelyssä, pitääkö sinun tehdä rakenteellisia muutoksia sivustolle itse ja haluatko tehdä ne droppaamalla vai koodaamalla. Sinisellä Härällä on nyt siirrytty kokonaan teemakehitykseen, jonka olemme todenneet toimivimmaksi vaihtoehdoksi pitkällä tähtäimellä.

Virhe 4: Ylläpidon puuttuminen sopimuksesta

Kun valitset verkkosivujen tekijää, älä unohda sivuston ylläpitoa. Pohdi, mitä ylläpito tarkoittaa sinulle ja millaista ylläpitoa odotat sivun tekijältä. Varmista, että sinun ja tekijän näkemykset ylläpidosta kohtaavat.

Kirjaa sopimukseen selkeästi, mitä nettisivutekijän ylläpitovastuuseen kuuluu ja mikä työstä on erikseen laskutettavaa. Jos sivusto kaatuu, laskutetaanko sen korjaamisesta erikseen? Millainen reagointiaika tekijällä on? Entä kuka huolehtii versiopäivityksistä ja sivuston palvelintilasta – tietoturvan, suorituskyvyn ja kapasiteetin kunnossa pysymisestä?

On tärkeää rajata vastuut selkeästi. Sivuston ”rikkuminen” kun voi johtua yhtä lailla asiakkaan muokkauksista kuin virheestä sivuston toteutuksessa. Onko nettisivujen tekijän vastuulla, että sivu toimii oikein asiakkaan muokkauksista huolimatta? Entä kuka maksaa virheen selvittämiseen ja korjaamiseen kuluvan ajan missäkin tilanteessa?

Virhe 5: Projektin sisältöä ei ole rajattu tarpeeksi tarkasti

Oletatko, että esimerkiksi verkkosivun sisällöntuotanto, hakukoneoptimointi, analytiikka-asiat, graafinen ohjeistus ja uuden logon suunnittelu kuuluvat verkkosivupakettiin automaattisesti? Verkkosivutekijät taas olettavat niiden tulevan tilaajalta, jos niitä ei ole sisällytetty tarjouspyyntöön. Kaikki edellä mainitut ovat isoja osakokonaisuuksia, joiden toteuttamisesta kannattaa ehdottomasti neuvotella erikseen.

Huomioi projektin sisältöä sopiessasi myös aikataulu, läpivientikäytänteet, työkalut ja hinnoittelumalli – sekä jo edellä mainittu tarkka kuvaus ylläpitopalvelusta. Eri tekijöiden välillä voi olla suuria eroja esimerkiksi siinä, kuinka usein tekijä palaveeraa kanssasi avoimista asioista ja projektin etenemisestä.

Virhe 6: Tekijän tiimi ei sovi projektiin

Palveluntarjoajan tech stack eli sivuston rakentamiseen käyttämät teknologiat, tapa tehdä asioita sekä toteuttava tiimi ja sen osaaminen ovat yksi tärkeimmistä asioista nettisivujen tekijän valinnassa. Tarjoukseen kannattaa pyytää sivut toteuttavan työryhmän kuvaus, jonka pohjalta on hyvä pohtia, sopiiko tiimi juuri omaan projektiin.

Jos projektissa on vain yksi devaaja, seisooko työ, mikäli tämä sattuu sairastumaan? Härällä jokaisessa projektissa on mukana kaksi devaajaa ja tekninen projektipäällikkö, jotta näin ei pääsisi käymään.

Entä löytyykö toteuttavasta tiimistä UI/UX-osaamista? Sivuston rakentaminen on paljon muutakin kuin koodaamista, ja oikeastaan projektin näkyvin osuus syntyy juuri sivuston designista, asiakaspolkujen synnyttämisestä, käyttäjäpersoonien ja sivuston tavoitteiden määrittelystä sekä muusta käyttöliittymän ja käyttäjäkokemuksen suunnittelusta. Jos verkkosivujen tekijä ei vastaa käyttöliittymäsuunnittelusta, jää kaikki tämä työ sinulle.

Lisäksi kokonaisvaltaiseen verkkosivuprojektiin kuuluu toki paljon muutakin, kuten sisällöntuotantoa ja hakukoneoptimointia, eikä markkinoinnin hallitsemisestakaan ole haittaa. Jos kaipaat apua näihin osa-alueisiin, kannattaa varmistaa, että valitsemaltasi tekijältä löytyy tarvittavaa osaamista. Meiltä Härältä saat verkkosivuprojektiisi halutessasi kaiken edellä mainitun.

Virhe 7: Liikaa tai liian vähän painoarvoa referensseille

Referenssit ovat kinkkinen juttu. Niitä on hyvä olla, ja niiden katsominen on ehdottomasti järkevää, mutta niille ei kannata laittaa ylettömästi painoarvoa verkkosivutekijän valinnassa. Hyödyllisimpiä referenssit ovat silloin, kun verkkosivustosi pitää olla informatiivinen ja upean näköinen, mutta siltä ei vaadita erityisiä toiminnallisuuksia. Jos valitset tekijän, jonka aiempi jälki miellyttää, saat omastakin sivustostasi todennäköisesti mieluisan näköisen.

Jos taas sivu vaatii paljon toiminnallisuuksia, kasvaa koodarin rooli. Hyvä koodari osaa ottaa huomioon validoinnit, tietoturvan, laadun, nopeuden ja monia muita ominaisuuksia, jotka eivät välttämättä näy päällepäin.

Allekirjoittanut ei takertuisi referensseihin liikaa vaan suhtautuu niihin pienellä varauksella. Osaajat voivat vaihdella firmojen sisällä joskus tiuhaankin tahtiin, etkä siksi välttämättä tiedä, saatko verkkosivuprojektiisi juuri ihailemasi refenssicasen toteuttaneita tekijöitä.

Onko sinulla verkkosivuprojekti, johon kaipaat tekijää? Me Härällä teemme verkkosivustoja ja -kauppoja, sisällöntuotantoa, graafista suunnittelua ja digimarkkinointia, ja autamme mielellämme sinuakin. Ota yhteyttä, niin katsotaan, olemmeko me sopiva match!

Mitä tarkoittaa responsiivisuus, ja miksi se on tärkeää?

Posted on by Sininen Härkä

Responsiivisuus tarkoittaa sitä, että verkkosivu pelaa ja on käytettävä laitteesta huolimatta. Sivuston tulee toimia eri kokoisilla ruuduilla: tietokoneella, puhelimella, tabletilla ja televisiossa. Lisäksi sisällön pitää mahtua nätisti ruudulle ja näyttää hyvältä.

Bisneksen kannalta responsiiviset nettisivut ovat panostamisen arvoinen asia. Netistä toki löytyy edelleen vanhoja sivustoja, jotka laahustavat jälkijunassa. Responsiivisuuden hyödyt ohittavat kuitenkin selkeästi ne ”haasteet”, joita sivuston responsiiviseksi muuttaminen vaatii.

Mikäli nettisivusi ei vielä ole responsiivinen, on siellä oletettavasti muutama muukin ongelmakohta. Tällaisessa tapauksessa suositeltavaa onkin katsoa kaikki sivuston päivitykset kerralla kuntoon!

Mitä hyötyä sivuston responsiivisuudesta on?

Sivuston responsiivisuus vaikuttaa voimakkaasti hakukonenäkyvyyteen. Esimerkiksi Google huonontaa sivun näkyvyyttä hakutuloksissa, mikäli sivusto ei ole responsiivinen. Vastaavasti kilpailijat pääsevät responsiivisilla sivuillaan ohituskaistaa pitkin kohti parempaa näkyvyyttä.

Responsiivisuus parantaa luonnollisesti myös käyttäjäkokemusta. Kun sivut ovat käyttäjäystävälliset, niiden parissa vietetään pidempi aika, jolloin myös mahdollisuus konversioon kasvaa.

Jos yllä mainittu ei vielä motivoinut responsiivisten verkkosivujen pariin, ehkä tilastot auttavat: vuonna 2021 matkapuhelimet nimittäin tuottivat 54,25 % – siis yli puolet! –verkkoliikenteestä ja pöytäkoneet 42,9 %.

Onko enää olemassa erillisiä mobiilisivuja, vai ovatko kaikki sivut responsiivisia?

Mobiilisivut, eli verkkosivut, jotka ovat rakennettu erikseen puhelimia varten. Erillisiä mobiilisivuja löytyy vielä, mutta uskomme vahvasti siihen, että niiden tekeminen vähentyy tulevina vuosina. Google myös palvelee mobiiliversiota heikommin, mikäli sen sisältö eroaa kovin paljon desktopsivun sisällöstä.

Mobiiliaplikaatiot taas ovat eri asia: jotkut palvelut vain eivät toimi verkkosivustolla, ja silloin on järkevää tehdä mobiilisovellus.

Voinko itse muuttaa sivustoni responsiiviseksi?

Kyllä. Se on mahdollista, mutta käytännössä vaatii aina ammattilaisen avukseen. Jos kuitenkin pääset koodiin käsiksi ja osaat sujuvasti HTML:ää ja CSS:ää, ei muuta kuin antaa palaa!

Ovatko responsiiviset sivut kalliimmat kuin ei-responsiiviset?

Sivujen toteuttaminen responsiivisiksi vaatii lisätyötä. Nykyään responsiivisuus on kuitenkin oletusarvo, eli se tulee niin sanotusti toteutuksen mukana, jolloin voidaan keskittyä enemmän käyttökokemukseen mobiililaitteilla, esimerkiksi miten selaaminen sivuston sisällä toimii, ja miten saadaan käyttäjä ostamaan tuote tai ottamaan yhteyttä – enemmän konversioita.

Kannattaako verkkokauppa suunnitella itse?

Posted on by Sininen Härkä

Verkkokaupan perustaminen on helpompaa kuin koskaan. Erilaisia verkkokauppa-alustoja ilmaantuu markkinoille jatkuvasti lisää, ja näiden alustojen avulla kuka tahansa kykenee pystyttämään omalle tuotteelleen verkkokaupan muutamissa tunneissa.

Vuonna 2020 ilmestyneessä kirjassaan Luomiskertomus (Kosmos), luova johtaja ja tietokirjailija Henri Hyppönen kuvaa viimeisen parin vuosikymmenen aikana toteutunutta tiedon, osaamisen ja palveluiden saatavuuden räjähdysmäisestä kasvusta syntynyttä megatrendiä ”luovuuden demokratiaksi”.

Ilmiötä pohtiessaan Hyppönen kuvaa hypoteettista tilannetta, jossa hän, täysi ummikko, haluaa rakentaa kuvitteellisen tennaribrändin ja myydä tuotteitaan verkossa. Ajatusleikkinsä sivutuotteena Hyppönen tulee osoittaneeksi kuinka helppoa verkkokaupan perustaminen pohjimmiltaan tänä päivänä on:

  1. Varaa domain
  2. Luo tunnukset verkkokauppa-alustaan
  3. Valitse kaupallesi valmis ”teema” (= layout, ulkoasu) ja luo tuotteet kauppaan

Muutamassa tunnissa kauppa on valmis ja tuotteesi on tarjolla globaalille neljän miljardin potentiaalisen asiakkaan joukolle.

Tästä herää kysymys, että mihin ihmeeseen tarvitaan ammattiosaamista tai varsinkaan ammattimaista mainostoimistoa verkkokaupan suunnitteluun tai toteuttamiseen?

Tässä blogitekstissä pureudun siihen, mitä perustavanlaatuisia haasteita kuluttajaverkkokauppaprojektin suunnitteluvaiheessa saatetaan kohdata, miten meillä Sinisellä Härällä lähestytään verkkokauppatoteutuksia ja miten laadukas käyttöliittymäsuunnittelu voi auttaa selviytymään kovenevasta kilpailusta voittajana.

1. Oletukset ovat vaarallisia – syvällinen asiakasymmärrys on menestyksekkään verkkokaupan perusta

Edellä kuvattu Hyppösen hypoteesi verkkokaupan perustamisen helppoudesta on kiistatta realistinen ja kaikkien saavutettavissa. Se ei kuitenkaan tarkoita, että vartissa keksityn lenkkaribrändin verkkokaupan rakentaminen olisi järkevää. Yksikään lenkkaribrändi ei ole koskaan menestynyt määrittämällä kohderyhmäkseen ”kaikki maailman ihmiset”. Aivan kuten markkinointi vaatii aina kohdentamista ja resurssien fokusointia, menestyvän verkkokaupan rakentaminen ja operointi vaatii syvää asiakasymmärrystä.

Vaikka emme suoraan tarjoa palvelumuotoilun tai strategisen konsultoinnin palveluita, aloitamme verkkokauppaprojektit useimmiten asiakkaidemme kanssa liiketoiminnan perusasioita käsittelevistä kysymyksistä.

  • Mitä myydään?
  • Mitä arvoa tuotetaan?
  • Kenelle halutaan myydä?
  • Mitä loppuasiakas arvostaa?

Vastaukset tällaisiin kysymyksiin saattavat tuntua itsestäänselvyyksiltä, mutta usein ne jäävät päivittäisen arkitoiminnan jalkoihin. Pahimmassa tapauksessa asioita ei ole pohdittu hetkeen lainkaan, vaan on muodostettu kasa oletuksia omasta asiakaskunnasta, heidän tarpeistaan ja motiiveistaan.

Näiden oletusten haastaminen on liiketoiminnan kehittämisen osalta muutenkin kannattavaa, mutta onnistuneen verkkokauppatoteutuksen kannalta välttämätöntä. Vasta kun näihin kysymyksiin on saatu yksiselitteiset vastaukset, voidaan siirtyä käyttöliittymäsuunnittelun ensimmäiseen vaiheeseen.

Jos verkkokauppasi myy kaikkea kaikille, soita Mikolle.

2. Asiakasta ei ole varaa eksyttää – selkeä käyttäjäpolku on parasta asiakaspalvelua

Käyttäjäpolulla tarkoitetaan sitä matkaa, jonka tietty käyttäjä kulkee verkkokaupassa: mille sivulle hän laskeutuu, mitä hänelle näytetään, mihin häntä ohjataan, mitä tuotteita tai sisältöjä hänelle tarjotaan, miten hän pääsee ostamaan ja niin edelleen.

Pohjimmiltaan kyse on asiakaspalvelusta. Toisin kuin kivijalkakaupassa, verkkokaupassa asiakas harvoin ovesta sisään astuessaan haluaa esittää myyjälle kysymyksiä tai ilmoittaa ääneen mitä hän on tullut ostamaan.

Sen sijaan verkkokaupassa myyjän (tai pikemminkin verkkokaupan suunnittelijan) vastuulla on tuntea kauppaan saapuvan asiakkaan tarpeet niin hyvin, että loppuasiakkaalle on kauppaan saapuessaan täysin selvää mistä hän haluamansa tuotteen, palvelun tai muun etsimänsä sisällön löytää.

Laadukas käyttöliittymäsuunnittelu lähtee siitä, että tunnistetaan verkkokaupassa asioivat eri käyttäjäryhmät, tutustutaan heidän tarinoihinsa ja pohditaan kriittisesti, miten näitä käyttäjäryhmiä voidaan palvella mahdollisimman tehokkaasti. Sen mukaan, kuinka monta toisistaan riittävän erilaista käyttäjätyyppiä tai -tarinaa aloitusvaiheessa identifioidaan, rakennetaan käyttäjäpolkuja tarvittaessa useampia.

Lopputuotteena käyttäjäpolkujen laadukkaasta suunnittelusta on usein ”käyttäjäpolkukartat” (eng.: User Story Map),  joissa kuvataan visuaalisesti ja yksityiskohtaisesti, miten eri käyttäjäryhmien odotetaan kaupassa kulkevan ja miten kulkemista halutaan ohjata.

Loppuasiakkaan tarpeiden yksilöllinen huomioiminen on tapa palvella asiakasta mahdollisimman laadukkaasti, mutta myös kriittistä kaupan konversion (= kuinka moni potentiaalinen asiakas lopulta ostaa) kannalta. 

Jos et tiedä, mitä kävijät kaupassasi tekevät, soita Mikolle.

3. Tunteella on merkitystä – laadukkaan käyttäjäkokemuksen arvoa on vaikea mitata, mutta se on suurempi kuin kuvittelet

Kirkkaan asiakasymmärryksen muodostuttua ja käyttäjäpolkujen hahmotuttua siirrytään siihen työvaiheeseen, jota useimmiten tarkoitetaan, kun arkikielessä puhutaan UI-suunnittelusta.

Abstraktit mindmapit ja kaavamaiset käyttäjäpolkukartat alkavat tässä vaiheessa prosessia muotoutumaan konkreettisiksi elementeiksi suunnittelijan näytöllä. Tämä on se työvaihe, joka ohitetaan täysin, jos lähdetään toteuttamaan kauppaa valmisteemojen avulla.

Itse käyttöliittymän suunnittelutyön ensimmäinen osa on yleensä tilaajan näkökulmasta melko suoraviivaista ja selkeää, joskus jopa tylsää. Tässä vaiheessa keskitytään rakentamaan eritasoisia wireframe-malleja. Näiden lähtökohtaisesti harmaita laatikoita sisältävien mallien tarkoituksena on hahmottaa verkkokaupan sivujen, elementtien ja muiden sisältöjen sekä toiminnallisuuksien hierarkinen suhde toisiinsa ja varmistaa, että kaikki aiemmin tunnistetut käyttäjäpolut tulevat huomioiduiksi.

Verkkokaupan tilaajan näkökulmasta huomattavasti kiinnostavampaa onkin suunnittelutyön seuraava vaihe, jossa laatikkomaiset wireframet muutetaan visuaalisesti näyttäviksi layouteiksi. Tässä kohtaa kaupan brändi, visuaalinen ilme ja muu persoonallinen olemus alkavat vihdoin hahmottua.

Samalla kun suunnittelutyössä siirrytään wireframe-malleista layouteihin, käyttöliittymäsuunnittelun ja käyttökokemussuunnittelun raja-aita alkaa hämärtyä. Näiden termien ja konseptien eroavaisuuksia olemme avanneet blogissamme jo aiemmin.

Tärkeintä on ymmärtää, että kaikki tässäkin artikkelissa esitetyt kysymyksenasettelut ja työvaiheet tähtäävät tasan yhteen lopulliseen tavoitteeseen: mahdollisimman laadukkaaseen loppukäyttäjän kokemukseen. Sillä ei nimittäin ole juuri mitään merkitystä, vaikka aiemmassa työvaiheessa olisi onnistuttu upeasti määrittämään käyttäjäpolkuja tai sisältöjen hierarkisia suhteita – jos käyttäjäkokemus on heikko, ei kauppaa todennäköisesti synny.

Maailma on täynnä verkkokauppoja. Lähestulkoon mikä tahansa tuote on saatavilla muodossa tai toisessa esimerkiksi Amazonin, Alibaban tai Ebayn kaltaisista jättimäisistä kaupoista. Tästä johtuen voi karrikoidusti todeta, että ainut tapa kilpailla edellä mainittuja jättiläisiä vastaan on tarjota loppuasiakkaalle poikkeuksellisen loistavaa palvelua tai luoda asiakkaalle turvallinen ja luottavainen tunne-elämys myyjän brändimielikuvan kautta.

Toki loppuasiakas voi arvostaa esimerkiksi paikallisuutta, helppoa saatavuutta tai vaikkapa myyjän spesifiä asiantuntemusta, mutta lopulta kyse on aina luottamuksesta ja käyttäjän kokemuksesta – tunteeko asiakas olonsa riittävän luottavaiseksi tilataksensa tältä myyjältä ja tästä kaupasta?

Verkkokaupan tavoitteena on lähes poikkeuksetta tuottaa sitä kuuluisaa kauppaa, ja ammattimaisesti toteutetun käyttöliittymän ja käyttökokemuksen tehtävänä on poistaa loppuasiakkaan näkökulmasta niin monta ostamisen estettä kuin mahdollista.

Jos et ole varma, huokuuko kauppasi luotettavuutta, soita Mikolle.

Lopuksi 

Tässä blogikirjoituksessa on raapaistu korkeintaan verkkokaupan käyttöliittymien ja käyttäjäkokemusten suunnittelutyön pintaa. Todellisuudessa suunnittelu- ja toteutustyö vaatii kymmenien tai satojen toisistaan riippuvaisten pienten valintojen tekemistä. Meillä Sinisellä Härällä tätä työtä tehdään joka päivä suunnittelijoiden, koodaajien, projektipäälliköiden ja asiakkaiden kanssa tiiviissä yhteistyössä.

Jos mietit, että kannattakohan verkkokauppaprojektin suunnittelutyöhön sittenkään lähteä yksin, niin lataa Verkkosivujen ostajan opas. Olemme keränneet siihen valmiiksi vastauksia useimpiin aiheeseen liittyviin kysymyksiin. Tilanteen niin vaatiessa, soita Mikolle.

Verkkosivuston vaatimusmäärittely on avain onnistuneeseen sivustoprojektiin

Posted on by Sininen Härkä

Oletko joskus törmännyt verkkosivuprojektissa tilanteeseen, jossa projektin edetessä alkaa yllättäen rönsyilemään toiveita ominaisuuksista, asioista ja osioista, joista ei projektin alussa ollut mitään puhetta? Me olemme.  

Usein taustalla tähän on se, ettei projektin alussa olla pystytty kartoittamaan riittävän hyvin asiakkaan tai sivuston loppukäyttäjän tarpeita. Toisin sanoen, verkkosivuston vaatimusmäärittely on saattanut jäädä projektin alkutaipaleilla vaillinaiseksi. Mitä vaatimusmäärittely sitten verkkosivustoprojektissa sisältää ja miksi siihen kannattaa panostaa?  

Miksi verkkosivuston vaatimusmäärittely tehdään?  

Laadukkaan verkkosivuston rakentaminen vaatii tarkkaa ja huolellista suunnittelua, jotta valmiilla sivustolla saavutetaan liiketoiminnan tavoitteet sekä luodaan lisäarvoa asiakkaille, mikä lisää asiakastyytyväisyyttä.  

Verkkosivuston vaatimusmäärittelyn avulla sivustoprojektille linjataan tavoitteet, tarkoitus, kohderyhmät sekä toiminnallisuudet. Eli määritellään, miksi verkkosivusto on olemassa, mitä sen pitäisi tehdä ja kuinka.   

Mitä vaatimusmäärittelyyn tulee sisällyttää? 

Meillä sivuston vaatimusmäärittely toteutetaan yhdessä asiakkaiden kanssa projektin kick-offissa. Vaatimusmäärittely on aina projektikohtainen, mutta sen runko on kutakuinkin jaettu seuraaviin vaiheisiin. 

1. Tarkoituksen määrittely: Miksi verkkosivusto on olemassa?

Sivustoprojektin alussa on hyvä pohtia, miksi sivusto on ylipäätään olemassa, mitä haasteita se ratkaisee ja minkälaisia odotuksia ja tavoitteita sivustolle asetetaan. Olivatpa tavoitteet myynnin kasvattaminen, palveluiden ja referenssien esittely tai työnantajakuvan parempi esilletuonti, on sivuston tarkoitus tärkeää linjata heti alkuun.  

Tavoitteet ja tarkoitus toimivat tärkeinä ohjenuorina niin sivuston käyttöliittymäsuunnittelussa kuin teknisessä toteutuksessa.  

2. Sivuston käyttäjien määrittely: Kenelle verkkosivusto on tarkoitettu? 

Verkkosivustot rakennetaan lähtökohtaisesti aina loppukäyttäjiä eli yrityksen asiakkaita varten. Sivuston käyttäjien määrittelyllä pyritään löytämään ja täyttämään asiakkaiden tarpeet. Käyttäjien määrittelyä voi lähestyä muun muassa ostajapersoonien tai käyttäjätarinoiden kautta.  

Me käytämme tähän pääsääntöisesti käyttäjätarinoita (user mapping), joilla määritellään kriteerit sille, mitä käyttäjän pitäisi pystyä tekemään verkkosivustolla. Esimerkiksi ravintolan verkkosivuilla asiakkaan tulisi pystyä löytämään ravintolan menu sekä tekemään pöytävaraus.  

Käyttäjätarinat helpottavat hahmottamaan sivustokävijöiden tarpeita ja siten tukemaan asiakaslähtöisen käyttöliittymän suunnittelua. Lisäksi käyttäjätarinoiden kriteerejä voidaan hyödyntää sivuston testausvaiheessa antamalla nämä samat tehtävät testiryhmän suoritettavaksi. Testiryhmän käyttäytymisen perusteella voidaan analysoida, kuinka hyvin kriteerit sivustolla täyttyvät. 

3. Verkkosivuston alustavan rakenteen määrittely 

Visuaalinen suunnittelijamme hahmottelee verkkosivuston lopullisen rakenteen käyttöliittymäsuunnittelun yhteydessä.  

Vaatimusmäärittelyvaiheessa rakennamme yhdessä asiakkaan kanssa alustavan sivustokartan, johon listataan verkkosivustolle tulevat sisältötyypit, sivut sekä taksonomiat, kuten kategoriat ja tagit. Rakennetta määriteltäessä voidaan myös hahmotella alustavaa sivustohierarkiaa sekä kuvailla tarvittaessa sivuille tulevaa sisältöjä muutamalla lauseella. 

4. Toiminnallisten vaatimusten määrittely 

Toiminnallisten vaatimusten määrittelyssä otetaan kantaan sivuston ominaisuuksiin, käytettävyyteen ja toimintoihin, eli määritellään, miten sivusto käytännössä toimii.  Tällaisia toimintoja voivat olla vaikkapa sivuston monikielinen toteutus, analytiikka- ja seurantatyökalut, hakutoiminnot tai suorituskykyvaatimukset. 

Toiminnallisia vaatimuksia määriteltäessä voidaan ottaa myös kantaa esimerkiksi yhteydenottolomakkeen pakollisiin kenttiin tai siihen, mihin käyttäjä ohjataan, kun hän on lähettänyt lomakkeen onnistuneesti.  

Myös mahdolliset integraatiot esimerkiksi toiminnanohjausjärjestelmän ja verkkokaupan välillä tai somesyötteen upottaminen sivustolle ovat olennainen osa toiminnallisten vaatimusten määrittelyä. 

5. Sivuston visuaalisuuden määrittely 

Visuaalisuuden määrittely riippuu pitkälti siitä, onko yrityksen visuaalinen ohjeisto jo valmiina vai luodaanko se sivustoprojektin yhteydessä.  

Visuaalisia elementtejä suunnitellessa voidaan määritellä esimerkiksi värit, fontit, animaatiot ja linkkien hover-efektit. Mikäli visuaalista ohjeistoa ei vielä ole olemassa, voidaan sellainen toteuttaa esimerkiksi Sinisen Härän visuaalisen ilmeen workshopissa.  

Huolellisella vaatimus­määrittelyllä onnistuneeseen loppu­tulokseen 

Mitä yksityiskohtaisemmin sivuston vaatimusmäärittelyn tekee, sitä paremmin välttyy projektin aikana tulevilta yllätyksiltä, joihin ei olla osattu suunnitteluvaiheessa varautua. Tällä vältetään niin projektin budjetin kuin aikataulun venähtäminen.  

Tohdin väittää, että huolella tehty vaatimusmäärittely vaikuttaa merkittävästi sivustoprojektin onnistumiseen, joten siihen kannattaa ehdottomasti käyttää aikaa ja huolellista ajatustyötä. 

Jos verkkosivuston uudistus on ajankohtaista, lue kuinka verkkosivuprojekti meillä etenee! 

Näin hyödynnät Advanced Custom Fields -lisäosaa WordPress-verkkosivuillasi

Posted on by Sininen Härkä

Julkaisimme alkuvuodesta artikkelin, jossa developerimme Netta kirjoitti parhaista verkkosivutoteutuksissa käyttämistämme WordPress-lisäosista. Listan kärkipaikalla komeilee Advanced Custom Fields eli ACF, jonka peruskäyttöön pureudun nyt tarkemmin.

Mikä on ACF ja miksi sitä kannattaa käyttää?

ACF:n perusperiaate on tehdä sivuston sisältöjen muokkaamisesta mahdollisimman vaivatonta. Olit sitten kokenut WordPressin taitaja tai verkkosivumaailman vasta-alkaja, Advanced Custom Fields on kätevä lisäosa jokaiselle käyttäjälle ja sivustolle.

Normaalisti WordPressin sivujen muokkausnäkymässä pystyy otsikon ja sisältötekstin lisäksi muokkaamaan ja lisäämään mahdollisia kategorioita, yhden artikkelikuvan ja Artikkelit-sisältötyypillä vielä otteen. ACF mahdollistaa kustomoitujen lisäkenttien tekemisen eli sivujen ja artikkeleiden muokkausnäkymään saadaan kyseisen lisäosan avulla luotua lisäpaikkoja esimerkiksi tekstille, kuville, videoille, valintakentille ja monelle muulle – jopa Google-kartalle.

Näitä lisäkenttäpaikkoja on mahdollista asettaa näkymään mille sivulle tai sisältötyypille tahansa. Kentät saa asetettua livesaitille visuaalisesti haluttuihin kohtiin sivuston rakennuksessa käytetyn muokkaimen tai PHP-koodin avulla.

ACF:n myötä sivuston sisältöjen lisäyksiä tai muutoksia ei tarvitse toteuttaa devaajan toimesta, vaan muokkauksia on mahdollista tehdä helposti WordPressin sivueditorissa. Käytämmekin kyseistä lisäosaa jokaisessa verkkosivuprojektissamme toteuttaaksemme dynaamisia, asiakkaan itse helposti muokattavia sivustoja.

Miten Advanced Custom Fieldsiä käytetään?

Kun Advanced Custom Fields on ladattu lisäosien kirjastosta käyttöön, löytyy se WordPressin ohjauspaneelista (käyttökielestä riippuen) nimellä Lisäkentät. Kenttiä lisätään ryhmittäin, jolloin koko kenttäryhmää on helpompi hallinnoida ja esimerkiksi samalle sivulle haluttujen kenttien sijainti voidaan määritellä suoraan ryhmälle.

Käytän esimerkkinä asiantuntijalausunto-osion rakentamista yksittäisen palvelun sivulle, joka on Custom Post Type UI -lisäosalla toteutettu oma artikkelityyppinsä. ACF ja CPT UI ovat keskenään yhteensopivia lisäosia, joita molempia käytämme yhdessä sivustojen rakennuksessa.

Koska melkein jokaiselle kenttätyypille on omat asetuksensa, käyn tällä kertaa ACF:n käyttöä läpi perustasolla vain esimerkkini kautta. Tarkemmat speksit kaikkiin eri asetuksiin löytyy lisäosan omasta, hyvin kattavasta dokumentaatiosta erikseen jokaisen kenttätyypin kohdalta. ACF Pro -version mukana saatavia kenttätyyppejä ja muita lisäominaisuuksia tarkastelen hieman tämän artikkelin lopussa.

Kenttäryhmä ja lisäkenttä

Kenttäryhmän lisäämisen pääsee aloittamaan klikkaamalla ”Lisää uusi” Lisäkentät-otsikon alta. Ryhmään lisätään uusi kenttä ”+ Lisää kenttä” -napista.

1.    Lisää kenttäryhmälle kuvaava otsikko

Otsikko näkyy mm. kenttäryhmien koontisivulla sekä sivueditorissa kyseisen ryhmän kenttien yläpuolella.

2.   Lisää yksittäisen kentän nimiö ja nimi

Kirjoita nimiöön kenttää hyvin kuvaava nimi, sillä nimiö näkyy kentän nimenä muokkausnäkymässä. Nimi-kohta täyttyy nimiön mukaan automaattisesti.

3.   Valitse sopiva kenttätyyppi

Kenttätyyppi on se, joka määrittää, millaisia lisäpaikkoja muokkausnäkymään halutaan tuoda. Kenttätyyppejä on yli 30, joten valinnanvaraa löytyy – riippuen toki lisäkentän käyttötarkoituksesta.

Asiantuntijalausunto-kentälle valitsin tyypiksi tekstialueen, sillä pelkkä tekstikenttä on vain yhden rivin korkuinen, kun taas tekstialue on suurempi, jolloin kenttään on helpompi kirjoittaa pidempää tekstiä. Tekstialueen muokkausnäkymän koon voi määrittää Rivit-valinnasta, joka on automaattisesti 8.

Asiantuntijan kuva -kentän tyyppi on luonnollisesti kuva. Kuvatyypille voi asettaa esimerkiksi kuvan koon minimi- ja maksimiarvot pikseleissä, jos halutaan rajata kuvan valinta tietyn kokoisiin. Myös sallittua tiedostotyyppiä voi rajoittaa asetuksissa, mutta tässä tapauksessa jätän kaikki asetukset niin kuin ne ovatkin.

Asiantuntijan nimen ja tittelin kohtiin kenttätyypeiksi riittää perusvalinnan tekstikentät, sillä lisättävät sisällöt ovat lyhyitä ja mahtuvat yhdelle riville.

Viimeiseen luomaani kenttään, asiantuntijan yhteystietoihin, valitsin tyypiksi wysiwyg-editorin, jotta asiakkaan on helppo lisätä puhelinnumeroon sekä sähköpostiosoitteeseen linkit html-koodia osaamatta. Periaatteessa kaikki loput tiedot asiantuntijan nimestä alkaen olisi voinut toteuttaa yhden wysiwyg-editorin sisään, mutta koska visuaalisesti näillä kohdilla on erilaiset muotoilut keskenään, on asiakkaan kannalta parempi lisätä nämä erillisinä kenttinä. Tällä tavalla kenttien muokattavuus ja ohjeistus sivueditorissa on myös selkeämpää.

4.   Lisää kentän ohjeet ja valitse pakollisuus

Ohjeet näkyvät ennen lisäkenttää sivun muokkausnäkymässä ja helpottavat sisältöjen lisäämistä ja muokkausta etenkin silloin, kun muokkaaja ei ole itse lisäkenttiä luonut.

Mikäli halutaan, että kyseistä kenttää ei voi olla täyttämättä, voi sen lisätä myös pakollisena, jolloin sivua ei voi julkaista ennen kuin kenttä on täytetty.

5.   Lisää mahdollinen oletusarvo

Osalle kenttätyypeistä on mahdollista asettaa oletusarvo, jolloin kyseiselle kentälle ei tarvitse lisätä editorissa sisältöä, ellei se poikkea oletuksesta. Oletusarvoon voi tarvittaessa myös lisätä esimerkiksi html-koodinpätkän, jolloin muokkaaja pystyy helposti kopioimaan tuon koodin toisiin kenttiin ja muokkaamaan siihen halutun sisällön.

6.   Lisää mahdolliset määritteet lisäkentälle

Upeasti suomennettu kääreen määritteet (engl. wrapper attributes) mahdollistaa esimerkiksi oman classin tai id:n lisäämisen kentälle. Samassa voi myös määrittää kentän koon sivun muokkausnäkymässä. Tätä kohtaa säätämällä saa useita lisäkenttiä editointivaiheessa vierekkäin, jottei jokainen kenttä vie kokonaisen rivin leveydeltä tilaa.

Kenttäryhmän sijainti

Kenttäryhmän näkyvyyttä eri sivujen tai sisältötyyppien muokkausnäkymissä voi määrittää useita eri sääntöjä käyttäen. Luomani Palvelun asiantuntija -kenttäryhmän määrittelin näkymään kaikissa Palvelu-artikkelityypeissä.

Kenttäryhmä on myös mahdollista asettaa näkymään tietyille sivuille tai esimerkiksi artikkeleille, joille on määritelty tietyt kategoriat. Mikäli kenttäryhmä halutaan näkymään useammalla sivulla tai artikkelityypillä, voi niitä lisätä klikkaamalla ”ja”-nappia ja luomalla jokaiselle oman säännön. On myös mahdollista laittaa kenttäryhmä näkymään kaikissa sisältöä lisättävissä paikoissa, mutta sulkea pois tietyt sivut tai artikkelityypit.

Kenttäryhmän asetukset

Lopuksi kenttäryhmää luodessa voidaan määrittää koko ryhmälle tiettyjä asetuksia, joita ei kuitenkaan perustilanteissa kovin paljoa tarvitse muokata.

Kenttäryhmän sijainti on hyvä määrittää tarpeen mukaan joko normaalin sisällön jälkeiseksi eli sivumuokkaimessa sisältöeditorin alle, korkealle eli heti otsikon jälkeiseksi ennen sisältöeditoria tai reunalle eli sivumuokkaimessa oikeaan sivuun.

Asetuksissa on mahdollista muokata myös ryhmän lisäkenttien nimiön ja ohjetekstin sijaintia suhteessa täytettävään kenttään.

Kuvaukseen voi halutessaan kirjoittaa koko kenttäryhmän kuvauksen. Sivun tai artikkelin muokkausnäkymästä voi myös piilottaa tiettyjä kohteita, joita ei editorissa koe tarvitsevansa.

Kun tarvittavat asetukset ja halutut lisäkentät on luotu kenttäryhmään ja ryhmä asetettu näkymään tarvittavilla sivuilla tai artikkelityypeillä, odottavat ne enää vain sisällön lisäämistä! Ylläolevassa kuvassa näkyy, miltä lisäkentät näyttävät sivun, tässä tapauksessa yksittäisen palvelun, muokkaimessa jo lisättyine sisältöineen. Allaolevassa kuvassa näkyy visuaalinen lopputulos sivustolla.

Ilmainen versio vai Pro?

Kuten useat muutkin lisäosat, myös Advanced Custom Fields on saatavilla Pro-versiona. Vaikka ilmaisella versiolla pötkii jo melko pitkälle ja saa luotua useita sisällön lisäystä ja muokkausta helpottavia lisäkenttiä, on Pro-versiossa lisänä sellaisia ominaisuuksia, joita ehdottomasti tarvitsemme. Käytämmekin siis ACF PRO:ta kaikissa verkkosivutoteutuksissamme.

ACF PRO sisältää useampia lisäkenttätyyppejä ja ominaisuuksia verkkosivujen rakennukseen, kuten kuvagallerian, toistettavat rivit ja kloonattavat kentät. Maksullinen versio mahdollistaa esimerkiksi niin sanottujen ACF Blocksien, kuin myös joustavan sisällön luomisen.

ACF Repeater Field

Pro-versiossa mukana tuleva kenttätyyppi Repeater Field on erittäin näppärä työkalu, ja se löytyy lisäosan valinnasta nimellä ”Toista rivejä”. Kun kentän tyypiksi valitaan tämä, pystyy kyseiselle kentälle lisäämään niin sanottuja alakenttiä, jotka toimivat samalla tavalla kuin normaalisti lisättävät kenttätyypit.

Repeater Fieldiä on hyvä käyttää sellaisen sisällön luomiseen, jossa tarvitaan samoja kenttätyyppejä useaan eri kohteeseen. Kun yksi ryhmä tarvittavia kenttätyyppejä on luotu, voi sivuston muokkaaja itse lisätä kyseisen sivun muokkaimessa lisää kohteita tarvitsemansa määrän. Esimerkissäni olen käyttänyt ominaisuutta esittämään faktoja yrityksestä.

Kyseiseen esimerkkimalliin en tarvinnut kuin yhden kenttätyypin, jota voi monistaa sivun muokkaimessa. Kyseessä on teksti-kenttä, jolle lisäsin oletusarvoksi html-koodin, jotta saan faktoille haluamani muotoilut.

Sivun muokkaimessa Repeater Field tulee näkyviin kuten ylläolevassa kuvassa. Uusi fakta lisätään klikkaamalla ”Lisää fakta” -painiketta, jolloin kenttä monistuu ja ohjeen mukaisesti html-koodin sisään kirjoitetaan halutut tiedot, tässä tapauksessa aina numero ja teksti.

Esimerkissäni muotoilin yhden Repeater Field -kenttätyypin ja asetin sille käyttämässämme sivuston rakentajassa paikan, monistuu kenttä visuaalisesti ylläolevan kuvan mukaisesti. Näin asiakas tai sivun muokkaaja voi halutessaan lisätä tai poistaa faktoja ilman, että hänen tarvitsee osata sen enempää koodia tai sivuston rakentajan käyttöä.



Pro-versio tai ei, Advanced Custom Fields on erittäin tärkeä, kätevä ja uskaltaisin jopa sanoa, että korvaamaton lisäosa ja työkalu verkkosivustoja rakennettaessa. Sen avulla saadaan luotua dynaamisia sivuja ja jokaisen käyttäjän itse helposti lisättävää sekä muokattavaa sisältöä.

Näin Sinisellä Härällä tehdään verkkosivuja

Posted on by Sininen Härkä

Tervetuloa! Tässä artikkelissa käyn läpi, kuinka normaali verkkosivuprojektimme kulkee. Hahmottamisen helpottamiseksi tehdään esimerkkiprojekti Asiakas Oy:lle.

Ennen projektin aloitusta Asiakas Oy on määrittänyt verkkosivu-uudistukselleen selkeän tavoitteen. Jos tavoitteiden asettaminen aiheuttaa harmaita hiuksia, niin apua löydät esimerkiksi meidän ilmaisesta Verkkosivujen ostajan oppaasta.

  • Asiakas Oy
  • Yrityksen yhteyshenkilönä toimii Maria
  • Projektin keskeisimpänä tavoitteena on myynnin lisääminen yrityksen uusien verkkosivujen avulla ja referenssien entistä parempi esilletuonti

Tarjousvaihe

”Kiitos yhteydenotostasi!”, soitan Marialle hänen jätettyään yhteydenottopyynnön Leadoon loistavan chatbotin kautta. Tästä etenemme hänen kanssaan tarkempaan briiffiin verkkosivu-uudistuksen tarpeista ja tavoitteista. Ensimmäisessä palaverissa luonnollisesti myös esittäydytään puolin ja toisin.

Briiffistä viisastuneena lähetän Marialle kirjallisen tarjouksen sähköpostitse. Olemme briiffissä sopineet tarjouksen läpikäyntipalaverin noin viikon päähän ensimmäisestä palaverista. Tarjouksen läpikäynnin tarkoituksena on syventää asiakkaan ymmärrystä tarjouksesta, tarjottavista palveluista ja niiden hyödyistä. Läpikäynnin jälkeen tarjousta mahdollisesti tarkennetaan syvemmän yhteisen ymmärryksen saavutettuamme.

Kaikki projektiin liittyvät palaverit ja työpajat on mahdollista järjestää myös etänä.

Kuluu reilu viikko ja katson kalenteristani, että Maria on luvannut palata tarjoukseen tänään. Ilokseni iltapäivällä saankin puhelinsoiton, jossa Maria innoissaan kertoo, että he lähtevät ilolla tekemään verkkosivu-uudistusta yhteistyössä meidän kanssamme. ”Tervetuloa Sinisen Härän asiakkaaksi!”

Projektin kick-off

Kick-offin tavoitteena on, että kaikilla palaveripöydässä istuneilla on päivän päätteeksi selkeä käsitys siitä, miksi projekti aloitetaan ja kuinka se etenee.

Aikataulut on saatu asetettua yhteen ja sopiva aika projektin startille on löytynyt. Istumme alas Vallilan uuden toimistomme neuvotteluhuoneeseen pöydän notkuessa aamupalaherkkuja (kyllä, tämä on lupaus!).

Projektin kick-offiin osallistuu meidän puoleltamme koko toteuttava tiimi eli allekirjoittanut projektipäällikön ominaisuudessa, verkkosivujen tekninen toteuttaja sekä visuaalinen suunnittelija. Asiakkaan puolelta osallistujamäärää ei ole rajoitettu.

Kick-offin tavoitteena on tutustua koko projektitiimin voimin, kerrata projektin kulku, pohtia syvällisemmin projektin tavoitteita ja aloittaa rakenteen suunnittelu.

Palaverissa käydään luonnollisesti läpi myös verkkosivujen visuaalisuutta, haluttuja toiminnallisuuksia sekä asetetaan vastuualueet ja aikataulut tiimin kesken.

Vanhan sivuston läpikäynti, avainsanatutkimus, mahdollinen brändi-ilmeen uudistus ja niin edelleen

Ennen kuin projekti lähtee vauhdilla etenemään, on hyvä pysähtyä pohtimaan projektia tukevia osioita. Vanhan sivuston läpikäynti auttaa ymmärtämään, mitkä osiot ovat yrityksen näkyvyyden säilyttämiselle tai parantamiselle elintärkeitä, mitkä osiot ovat toimineet ja mitkä eivät.

Avainsanatutkimus kertoo, millä hakutermeillä yrityksen tuotteita ja/tai palveluita haetaan, millainen kilpailu kyseisillä hakutermeillä on ja kuinka paljon niitä keskimääräisesti haetaan.

Usein verkkosivuprojektin yhteydessä on tarvetta myös brändi-ilmeen uudistukselle ja sen paikka prosessissa on ehdottomasti tässä kohtaa!

Verkkosivujen käyttöliittymän suunnittelu

Verkkosivujen käyttöliittymän suunnittelu on tarkkaa työtä. Käyttöliittymän suunnittelulla ratkaistaan, minne ja miten verkkosivukävijää ohjataan sivustolla.

Periaatteessa käyttöliittymän suunnittelu on potentiaalisen asiakkaan ostoprosessin optimointia.

Vaikka käyttöliittymän suunnittelu on suurelta osin ajatustyötä, saa Maria ja Asiakas Oy lopputuotteena meiltä konkreettiset wireframing- eli rautalankamallit sivustosta. Näiden rautalankamallien tarkoituksena on mallintaa Asiakas Oy:n asiakkaan ostoprosessia ilman, että heitä häiritään vielä visuaalisilla elementeillä ja väreillä.

Verkkosivujen layoutien suunnittelu

Jes, taustatyö on tehty! Nyt päästään itse asiaan. Verkkosivujen layoutien suunnittelussa nuo aiemmin mainitut wireframing-mallit herätetään eloon.

Mitä kuvia käytetään? Hyödynnetäänkö videoita tai animaatiota? Minkä värinen call to action -painike tuottaa laadukkaita liidejä Asiakas Oy:lle? Millainen mobiiliversio sivustosta mallinnetaan? Näihin kaikkiin kysymyksiin saadaan vastaus prosessin tässä vaiheessa.

Verkkosivujen tekninen toteutus

Prosessin tässä kohtaa sininen viestikapula vaihtaa omistajaa eli vastuu projektin etenemisestä siirtyy visuaaliselta suunnittelijalta verkkosivukehittäjälle.

Me toteutamme räätälöityjä WordPress-verkkosivutoteutuksia. Meillä se tarkoittaa sitä, että loppuasiakkaan näkymän eli sen, miltä sivusto ulkopuolisille näyttää, lisäksi myös meidän asiakkaamme näkymää räätälöidään. Haluamme sivuston muokkauksen olevan asiakkaallemme helppoa ja vaivatonta, eikä se vaadi mitään koodiosaamista.

Jos ihminen osaa käyttää Facebookia, hän osaa käyttää myös meidän toteuttamaamme WordPress-verkkosivua.

Ensimmäisen kerran esittelemme asiakkaalle toiminnallista sivustoa teknisen toteutuksen puolivälissä. Tässä kohtaa siksi, että toiminnallisuuksia ollaan saatu vietyä pitkälle, mutta kommenttien ja korjausehdotusten perusteella muokkauksia voidaan vielä tehdä saman budjetin sisällä.

Tekninen toteutus sisältää myös paljon teknistä ja sisällöllistä hakukoneoptimointia, joista voit lukea lisää alla olevista linkeistä.

Lue lisää hakukoneoptimoinnista:

Verkkosivujen viimeistely ja avaus

Loppusuora häämöttää! Nyt viimeistelemme sivuston Asiakas Oy:n kommenttien mukaisesti. Tämän jälkeen varmistamme, että sivusto toimii moitteetta kaikilla verkkoselaimilla (kyllä, myös Internet Explorerilla), eri kokoisilla näytöillä ja eri laitteilla. Projektista riippuen tässä vaiheessa on hyvä myös testata sivustoa testikäyttäjillä.

Kun kaikki on valmista, sovimme Marian kanssa päivämäärän sivuston avaukselle, jonka hoidamme avaimet käteen -periaatteella. Viimeistelyn yhteydessä asennamme myös tarvittavat seurantatyökalut verkkosivuille.

Tässä vielä visuaalinen prosessikaavio avaamaan koko prosessia:

Jos uusi verkkosivusto kiinnostaa, laita sähköpostia tai moikkaa LinkedInissä.

Ps. Tämän jälkeen luonnollisesti hihat todella kääritään. Verkkosivu-uudistuksen jälkeen alkaa laadukas sisällöntuotanto, kohdennettujen kävijöiden ohjaus verkkosivuille ja sivuston jatkuva kehitys. Mutta se on eri tarina se… 😏

Lataa ilmainen verkkosivujen ostajan opas

​

​
Onko teidän yrityksessänne verkkosivu-uudistus käsillä? Siinä tapauksessa lataa ihmeessä ilmainen oppaamme. Opas on tehty auttamaan yrityksiä verkkosivujen ostamisessa ja siinä käydään läpi kilpailutuksessa huomioon otettavia asioita aina tarjouspyynnön laatimisesta toteuttajien vertailuun.
​
Lataa ilmainen opas!

10 käytännön esimerkkiä verkkosivustojen saavutettavuuden suunnittelusta

Posted on by Sininen Härkä

Verkkosivustojen saavutettavuus lienee sanapari, joka on kantautunut sinunkin korviisi lähiaikoina. Mitä verkkosivustojen saavutettavuus tarkoittaa käytännössä?

Tätä kysymystä olen pyöritellyt, pyrkinyt oppimaan aiheesta ja etsimään mahdollisimman paljon tietoa. Nostin artikkeliin käytännön vinkkejä ja esimerkkejä siitä, mitä WCAG 2.0 -standardi ja sen pohjalta luotu saavutettavuusdirektiivi tuovat mukanaan verkkosivustojen suunnitteluun.

Direktiivi koskee tällä hetkellä vain julkishallinnon verkkosivustoja, mutta koska saavutettavuus ja käytettävyys koskevat kuitenkin ihan jokaista verkkosivustoa, on asiaan hyvä perehtyä muidenkin sivustojen kohdalla.

Asia on nyt pinnalla monessa yhteydessä sen takia, että 23.9.2020 jälkeen verkkosivustojen tulee täyttää WCAG-saavutettavuusdirektiivin ehdot.   Saavutettavuusdirektiivi määrittelee, että sivustojen tulee olla myös saavutettavuutta tarvitsevien ulottuvissa.

Saavutettavuutta tarvitsevat esimerkiksi näkö-, kuulo- tai liikuntarajoitteiset. Yksinkertaistettuna saavutettavuus parantaa sivustojen käyttöä ihan kaikille, mutta erityisesti sellaisille käyttäjille, jotka käyttävät apunaan esimerkiksi lukulaitetta näkökyvyn vuoksi tai suunnistavat sivustolla pelkän näppäimistön avulla liikuntarajoitteen tai muun fyysisen rajoitteen takia.

Saavutettavuusdirektiivi on rakennettu neljän perusperiaatteen ympärille, jotka ovat seuraavat:

– Periaate 1: Havaittava – Informaatio ja käyttöliittymäkomponentit pitää esittää tavoilla, jotka käyttäjä voi havaita.

– Periaate 2: Hallittava – Käyttöliittymäkomponenttien ja navigoinnin pitää olla hallittavia.

– Periaate 3: Ymmärrettävä – Informaation ja käyttöliittymän toiminnan pitää olla ymmärrettävää.

– Periaate 4: Lujatekoinen – Sisällön pitää olla riittävän lujatekoinen, jotta se voidaan luotettavasti tulkita laajalla joukolla asiakasohjelmia, mukaan lukien avustavat teknologiat.

Saavutettavan verkkosivusuunnittelun lähtökohtana on tuoda sisältö ja tieto saataville riippumatta siitä, miten käyttäjä on sivuston kanssa vuorovaikutuksessa. Käytännössä kyse on melko simppeleistä asioista, eikä ihmeellisiä taikatemppuja vaadita.

1. Luettava selkokielinen teksti

Hyvä sisältö on avainasemassa verkkosivustolla, jonka avulla on tarkoitus tehdä myyntiä. Myyvä ja asiakasta palveleva teksti on jouhevaa, loogista ja vastaa asiakkaan ongelmiin.

Saavutettavuuden näkökulmasta hyvä myyntiteksti on selkokielistä ja helposti ymmärrettävää kaikille – myös niille, joilla on luetun ymmärtämisen tai esimerkiksi kyseisen asian termistön kanssa haasteita.

2. Sisältö myös tekstinä, ei vain kuvana

Tekstin on tärkeää olla koko sivustolla sekä mahdollisissa liitetiedostoissa luettavaa (lukulaitteella). Pelkät kuvat eivät tue saavutettavuutta ja videoissa on oltava tekstitys.

3. Esitä sisältö selkeässä hierarkiassa

Hierarkian tärkeydestä on kirjoitettu tässä blogissa jo aiemminkin (lue artikkeli ”8 periaatetta verkkosivu­suunnitteluun”), mutta myös saavutettavuuden näkökulmasta hierarkia on yksi tärkeimmistä asioista.

Sivustolla on tärkeää esittää asiat loogisessa järjestyksessä ja loogisesti skaalautuvassa järjestyksessä. Näin sisältö on helposti ymmärrettävää lukulaitteella luettaessa tai vain otsikoita selatessa.

saavutettavuus-blogiartikkeli-kuva-hierarkia

4. Värien ja kontrastien käyttö

Värin ei tulisi koskaan olla yksinään indikaattori interaktiiviselle elementille. Esimerkiksi tekstin seassa oleva hyperlinkki tulisi merkata myös alleviivauksella pelkän värin sijaan. Tällä tavoin mahdollistetaan elementtien huomaaminen myös rajoittuneemmin värejä näkeviltä.

Tekstin väriä määrittäessä on tärkeää huomioida tekstin ja pohjavärin kontrasti. Kontrastisuhteen suositellaan olevan leipätekstille vähintään 4,5:1 ja otsikkotekstille 3:1. Esimerkiksi tämä lukemasi tummanharmaa teksti valkoisella pohjalla on suhteeltaan 10,9:1. Kirkkaankeltainen teksti valkoisella pohjalla on taas kontrastisuhteeltaan vain 1,4:1, eli aivan liian vähän. Kontrastisuhteen tarkistamiseen on olemassa hyviä työkaluja, kuten tämä WebAIM:in.

saavutettavuus-blogiartikkeli-kuva-varit

5. Otsikointi ja muut tägit

Kun artikkeliin tai sisältösivulle lisätään väliotsikoita, on niiden tärkeää löytyä oikeiden otsikkotägien sisältä eikä olla esimerkiksi vain korostettu paksummalla kirjasimella. Näin lukulaitteillakin sisältö on helposti selattavaa.

Lukulaitteilla lukemista varten myös muun sisällön sijoittaminen täydellisiin tägeihin (esimerkiksi kappale sijoitetaan aina < p > </ p > tägien sisään) on merkityksellistä.

6. Lisää kuville aina alt-tekstit

Kuvalle voidaan sitä sivustolle lisätessä lisätä alt-teksti eli alternative text. Tätä on ahkerasti kuville lisätty jo pitkään hakukoneoptimoinnin nimissä, mutta tämä on saavutettavuudenkin silmissä tärkeää – mikäli sivustoa luetaan lukulaitteella, lukulaite ilmoittaa kuvan sisällön sellaisellekin, joka kuvaa ei voi nähdä.

7. Klikattavien elementtien riittävä koko

Klikattavien elementtien, kuten navigaation elementtien ja buttoneiden tulee olla tarpeeksi isoja, jotta kaikkien on mahdollista niihin tähdätä myös kosketusnäytöillä, kuten tableteilla.

8. Focus-efekti

Kun klikkaat linkkiä, niin ennen kuin käsky toteutuu (siirryt linkin mukana eteenpäin), linkin tulisi muuttua focus-tilaan. Tämä on pieneltä vaikuttava yksityiskohta hiirtä käyttävälle, mutta jos sivustoa käytetään pelkän näppäimistön avulla, on focus-tila ratkaiseva navigoinnissa.

9. Lomakkeiden otsikointi

Lomaketta rakentaessa lomakekentän ohje tulee sijoittaa otsikkoon, eikä vain lomakekentän ”sisään” paikkamerkiksi. Tässä kyse jälleen saavutettavuudesta värin ja lukulaitteella lukemisen puolesta.

saavutettavuus-blogiartikkeli-kuva-lomake

10. Anna käyttäjille tarpeeksi aikaa lukea ja käyttää tärkeää sisältöä

Erilaiset liike-efektit sivustoilla ovat koko ajan kasvussa, mutta tärkeän informaation tulisi aina olla sijoitettuna kiinteisiin elementteihin, jotka on tarpeen vaatiessa avattavissa ja suljettavissa.

Ei esimerkiksi ole riittävää, että verkkokaupan tilausvahvistus vilahtaa käyttäjälle automaattisessa pop-upissa sivustolla, vaan ikkunan tulee olla suljettavissa, jotta informaation ehtii lukea.

Lopuksi

Saavutettavien sivustojen suunnittelu on käytännössä hyvää ja inklusiivista designia, joka palvelee monenlaista asiakaskuntaa. Saavutettavuus parantaa kaikkien käyttökokemusta, eikä turhaan rajaa asiakkaista ketään ulkopuolelle. Sininen Härkä huomioi jatkossa jokaisessa projektissa pienet yksityiskohdat myös saavutettavuuden näkökulmasta.

Artikkelissa on käytetty lähteenä WGAC 2.0 -standardin lisäksi seuraavia sivustoja ja artikkeleita: https://saavutettavuusdirektiivi.fi, ”Designing for accessibility is not that hard”, Pablo Stanley.

Lataa ilmainen verkkosivujen ostajan opas

​

​
Onko teidän yrityksessänne verkkosivu-uudistus käsillä? Siinä tapauksessa, lataa ihmeessä ilmainen oppaamme. Opas on tehty auttamaan yrityksiä verkkosivujen ostamisessa, ja siinä käydään läpi kilpailutuksessa huomioon otettavia asioita aina tarjouspyynnön laatimisesta toteuttajien vertailuun.
​
Lataa ilmainen opas!

Näytä