Web-suunnittelu ja verkkosivujen toteuttaminen

Kotisivujen suunnittelu ja toteutus.

Web-suunnittelu on niin innostava kokonaisuus, että pyöritin lähes kolme vuotta sen ympärillä omaa sivustoa. Tänä aikana huomasin, että kotisivujen suunnittelu kiinnostaa myös monia muita. Vaikka omat web designer -opiskeluni ja sen ympärille luotu sivusto on mennyttä, moni asia jäi tarkentamatta tai päivittämättä. Nyt puran osiin kotisivujen suunnittelua web designerin näkökulmasta omien kokemusteni ja mindmapien » muodossa. Tämä blogiteksti keskittyy suunnittelun ensimmäiseen vaiheeseen ja päättyy kotisivusuunnittelijan työsuunnitelman TOP 5 -listaukseen.

Miksi web-suunnittelu jaksaa kiinnostaa?

Suljin vanhan verkkosivustoni viime kuussa, koska info-päätteinen sivusto oli tullut elinkaarensa päähän. Mielestäni vuonna 2017 julkaistu sivusto olisi vaatinut reippaasti päivittämistä, jotta se olisi yhä toiminut verkkosivujen tekemistä ohjaavana sivustona. Se oli edelleen pätevä dokumentaatio vuoden kestäneistä web designer -opinnoista », mutta aavistelin sen pian palvelevan vain omaa nostalgian nälkääni. Näin siitäkin huolimatta, että vielä hiljan sain sisällöstä kannustavia kiitoksia sivuston yhteydenoton kautta. Irtiotto entisestä ei aina ole helppoa, joten päätin päivittää blogissani niitä haasteita, joihin web-suunnittelu törmää. Enää en ole web designer -opiskelijan roolissa, mutta digitaalisen markkinoinnin parissa työskentelevänä verkkosivujen pulmat kuuluvat arkeeni. Lisäksi sellaiset verkkomedian palvelut kuten blogit.fi », jonka sivulta löytyvät tämänkin blogin artikkelit », kokoavat yhteen lukuisia eri verkkoalustoilla tuotettuja sisältöjä. Tässä ympäristössä on luontevaa nostaa esiin verkkosivujen suunnittelun ja sisällöntuotannon käytäntöjä. Näkökulmasta riippuen ne edustavat joko markkinointiviestintää » tai jakavat inspiraatiota ja vinkkejä » web-suunnittelusta kiinnostuneille tai syntyjään uteliaille verkkosivujen käyttäjille.

Marjutus.info-sivusto » kattoi pääosan web-designer koulutuskokonaisuuden 17 eri kurssin ns. ammattiaineista. Näistä aihepiireistä löytyy sellaisia, jotka koen edelleen tärkeinä, kiinnostavina ja haastavina aihealueina. Osa kurssisisällöistä kuten visuaalinen suunnittelu ja hakukoneoptimointi » ovat tulleet blogiteksteissä esille tavalla tai toisella jo aiemmin.

Web-suunnittelu ja 5 kohdan muistilista

Virheistä oppii – eikä kaikkia tarvitse tehdä itse

Lähtökohtaisesti web-suunnittelu vaikkapa valmiin WordPress-teeman pohjalta saattaa vaikuttaa melko helpolta tehtävältä. Oman tiedon karttuessa helppouden tunne alkaa hellittää. Jotta sivusto miellyttäisi sekä käyttäjiä että hakukoneita, paletin on pysyttävä kasassa useilla eri osa-alueilla. Oma verkkosivusto, joka toimii eräänlaisena oppimisalustana myynnillisten tehtävien sijaan, on hyvä ratkaisu. Joustava verkkosivusto antaa mahdollisuuden kasvattaa omaa osaamistaan rauhassa ja kehittää sivustoa erehdyksistä oppien. Ensimmäisessä verkkosuunnittelua käsittelevässä blogitekstissä ruodin aihetta seuraavasti:

  • Verkkosivujen historiaa ja alustoja omalla työpöydällä
  • Ensimmäinen oma verkkosivuprojekti on erityinen
  • Web designer -koulutus auttaa liikkeelle
  • Miksi verkkosivuprojekti vaatii suunnittelua

Käyn kotisivujen käytäntöjä läpi yhdestä näkökulmasta. Mikään ei estä tekemästä asioita toisin, mutta kuten kakkua leipoessa, resepti kannattaa tarkistaa ennen sen tuunaamista omaan tarpeeseen sopivaksi. Sitten onkin aika hioa oma resepti timantiksi. 💎

web-suunnittelu media-mouru
  • Save
Nettisivujen suunnittelussa punainen lanka tiukasti hyppysissä

Ensiaskeleita verkkosivualustoilla

En pysty ohittamaan pientä pohjustusta historiaan. Verkkosivujen tekeminen alkoi 1990-luvulla Yhdysvalloissa, mutta jo 1993 julkaistiin ensimmäiset verkkosivut » myös Suomessa. Omat haparoivat ensiaskeleeni tapahtuivat 2000-luvun alkuvuosina, kun onnistuin julkaisemaan ensimmäisen omatekoisen sivustoni verkosta löytyneellä ilmaisella WYSIWYG (What You See Is What You Get ») -ohjelmalla. Alusta oli pikemmin editori kuin sisällönhallintajärjestelmä, mutta sillä sai luotua sivuston kaveriporukan tarpeisiin. Hakukonenäkyvyydestä ei ollut huolta – hyvä ettei sivusto pientä piiriä laajemmalle näkynytkään. Vuonna 2007 olin jo vakavammin liikkeellä ja osallistuin avoimessa AMK:ssa kurssille ”Internet-kotisivujen tekeminen”. Lopputulos oli koruttoman konstailematon, sillä työ tapahtui tekstieditoriin koodaamalla. Kurssiarvosanasta oli kiittäminen enemmän Photoshop » -osaamistani kuin sujuvaa koodiani.

Verkkosivuprojekti bändille

Paljon ehti virrata vettä Aurajoessa ennen seuraavan verkkosivukoulutukseni alkua. Matkan varrella ennätin kokeilemaan ilmaisia sisällönhallintajärjestelmiä kuten gpEasy », kunnes vuonna 2014 innostuin verkkoviestinnän opiskeluista oppisopimuksella työni ohessa. Tällä kertaa edessä oli hieno kokemus. Opiskelujen lopputyönä tehtiin verkkosivut Dreamweaver » alustalla. Silloinen työnantajani pystyi järjestämään monipuolista tukea opiskeluille, mutta parasta kaikessa oli asiakkaani. Viime hetken väläykseni tehdä verkkosivuprojekti promoamaan tällöin 14-vuotiaan kummityttöni bändikerhoharrastusta osoittautui mainioksi ratkaisuksi. Sisältöjen tekeminen oli hauskaa, haasteet oli tehty taklattavaksi ja sain kummityttöni kanssa yhteisen projektin. Bändin promoaminen lipsahti paisumaan paljon tutkintovaatimuksia laveammaksi projektiksi.

web-suunnittelun esimerkki
  • Save
Verkkosivujen tekeminen bändikerhon tytöille

Kuitenkin valmistuessani 2015 uskoin, ettei Dreamweaver ollut tarkoitettu nopeasti luotaville sivustoille. Tätä tunnetta vahvisti Adoben silloinen nopea uutuusalusta Muse, jolla ehdin luomaan useampiakin sivustoja. Adobella oli kuitenkin syynsä luopua Musen palveluista » ja itselläni ennakkoluuloista WordPressin suhteen: Kaikki hyvä ei aina välttämättä tule Adobelta ja ehkä WordPress on muutakin kuin pelkkä blogialusta.

Web designer -koulutus ja web-suunnittelu

Kun 2017 aloitin web designer » -koulutuksen Turun kristillisessä opistossa ensimmäistä WordPress-sivustoa tehtiin huolella. Opintosisällöt tukivat aiempia varsin teknispainotteisia koulutuksiani, koska laaja kokonaisuus sisälsi myös mm. verkkosivun käsikirjoittamista ja projektinhallintaa. Monimuotokoulutus pysyi intensiivisenä koko vuoden ja verkkosivuston toteutus kurssityön pohjaksi laajeni koko koulutuksen kuvaukseksi. 

Kurssikokonaisuuden monipuolisuus oli perusteltua, sillä web designerin on syytä kasvaa moniosaajaksi. Tämä pätee erityisesti silloin, kun web designer on sekä projektin suunnittelija että toteuttaja. Sivuston ilmeen ja teknisten vaatimusten lisäksi hallussa on oltava myös sisällöntuotanto, käyttökokemus ja hakukonelöydettävyys ». Alla olevissa mindmapeissa olen esittänyt kotisivujen suunnittelun kaksivaiheisesti. Se alkaa projektin suunnittelusta päätyen toteutusvaiheeseen.

Web-suunnittelun mindmapit

Miksi verkkosivuprojekti vaatii suunnittelua

Innostavan projektin tuntee siitä, että se vie tekijän mennessään. Monella sivuston toteuttajalla on hoppu saada nopeasti aikaan jotain näkyvää pohdintojen ja selvittelyjen sijaan. Lähtökohta suunnittelulle ei kuitenkaan ole ulkoasu, vaan se muotoutuu sivustosuunnitelman edetessä yllä esitettyyn kakkosvaiheeseen. Varsinaista toteuttamista olisi hyvä jarruttaa niin kauan, että toiveet ja tavoitteet projektin lopputuotteelle on kunnolla kartoitettu. Ei ole niin pientä sivustoa, etteikö se hyötyisi projektisuunnitelmasta. Heikkoon suunnitteluun liittyy näennäinen nopeus ja oletetut kustannussäästöt. Sen sijaan hyvä projektisuunnittelu selkiyttää kokonaisuutta ja pitää sen kasassa. Välitön hyödynsaaja on sivuston toteuttaja itse.

Web-suunnittelu tilaajalle

Mikäli kotisivun suunnittelu on tilaustyö, verkkosivun suunnitelma palvelee myös tilaajaa. Suunnitelman myötä tärkeät yhteiset pelisäännöt selkiytyvät kummallekin osapuolelle. Tämä on tärkeä vaihe, sillä verkkosivun suunnittelu on aina tekijän ja tilaajan yhteinen projekti sekä yhteistyön hedelmä. Kommunikaatio nousee olennaiseen osaan ja hyvin tehty suunnitelma helpottaa sitä. Se edellyttää myös ammattikäsitteiden avaamista puolin ja toisin. Verkkosivuprojektista tehtyyn suunnitelmaan on helppo palata, jos jokin seikka vaatii tarkennusta tai perusteluja. Kun puhutaan isoista eri tiimien välisistä verkkosivuprojekteista, kokonaisuutta vetää usein nimetty projektipäällikkö. Silloinkin projektin hallinta nojaa hyvään viestintään. On tunnettua, että ihmisille ei tuota hankaluuksia hallita projektin vaatimaa tekniikkaa, vaan Akilleen kantapääksi tahtoo muodostua takkuava yhteistyö.

nettisivujen suunnittelu
  • Save
Pallo hallussa verkkosivuprojektin alusta asti

Kuinka web-suunnittelu käynnistyy?

Pienempää tai suurempaa kotisivuprojektia yhdistää se, että suunnitelma lähtee liikkeelle kohderyhmän määrittelystä sekä itse projektin ja sen tuotoksen tavoitteista. Koska verkkosivut ovat yrityksen verkkomarkkinoinnin kivijalka, kohderyhmä määrittely » on yhtä oleellista sivustoprojektissa kuin missä tahansa markkinointiviestinnässä ». Sen jälkeen web-suunnittelu voi edetä varsinaisen verkkosivuprojektin tavoitteisiin ja työn suunnitteluun:

Web-suunnittelun tavoitteet

Verkkosivun toteutus sisältää useita työvaiheita ja kokonaisuuksia. Projektin sujuva toteuttaminen vaatii tasapainoa tavoitteiden ja resurssien välille. Yksi esimerkki löytyy niinkin läheltä kuin blogin kirjoittamisesta. Heti alkuun on syytä kysyä itseltään, kuinka usein uskoo ehtivänsä tekemään päivityksiä. Jos julkaisuväli venähtää viikoiksi, ei ehkä kannata tarttua kaikkein ajankohtaisimpiin aiheisiin. Tavoitteet ja niiden vaatimat päätökset on helpoin määritellä valmiin suunnitelman avulla. Lue tarkemmin tavoitteellisesta sisältöstrategiasta » myös verkkosivujen osalta.

Kotisivujen luonti ja sivuston taloudelliset tavoitteet

Tilaustyönä tehty web-suunnittelu on oltava tuottavaa sekä tilaajalle että toteuttajalle. Onneksi verkkosivujen toteutuksessa laatu takaa usein myös kannattavuustavoitteiden toteutumisen. Ongelmaksi voi nousta se, ettei kaikilta osiltaan toimivan sivuston vaatimukset ole aina selviä. Verkkosivut saatetaan vieläkin nähdä vain yrityksen digitaalisessa muodossa olevana esitteenä. Kun eri mediat sekoitetaan keskenään, myös niiden erilainen tehtävä ja tarkoitus voi jäädä epäselväksi.

Miksi hyvät kotisivut ovat kannattava sijoitus?

  • Hyvät verkkosivut sisältävät taloudellista arvoa. Ellei palvelu löydy verkosta tai sivustosi on teknisistä syistä toimimaton, potentiaaliset asiakkaat osaavat hakeutua vain kilpailijoiden sivustoille.
  • Jos sivustosi sisältö tai toiminta ei palvele käyttäjää tämän toivomalla tavalla, hän vaihtaa sen hyvin nopeasti toiseen. Käyttäjäkokemukseen ja käyttäjän tarpeisiin kannattaa panostaa. 
  • Mikäli sivustollasi on käytettävyyteen tai sisältöön liittyviä puutteita, se putoaa myös Googlen hakutuloksissa kauas kirkkaimmasta kärjestä. Kilpailu Googlessa on kovaa, kärkipaikoille ei päästä sattumalta.

Kotisivusuunnittelijan TOP 5

Web suunnittelu on täynnä erikokoisia sudenkuoppia. Pienenkin verkkosivuprojektin työsuunnitelmaan kannattaa sisällyttää jonkinlainen riskianalyysi. Riskitekijät eivät saa lamauttaa uusien toteuttajien intoa, koska ne eivät ole este sivuston suunnittelulle. Silti rennoimmankin tekijän kannattaa pitää mielessään 5 seikkaa, joihin erityisesti kannattaa kiinnittää huomiota:

1️⃣ Miksi SSL-sertifikaatti on tärkeä?

SSL-sertifikaatti suojaa https-sivuilla selaimen ja palvelimen välistä liikennettä ja on merkki tietoturvasta sivuston käyttäjälle. Sivuston omistajalle se on sijoitus hakukonenäkyvyyden parantamiseksi ja osa teknistä hakukoneoptimointia.

2️⃣ Miksi webhotelleja on syytä vertailla?

Hyvä webhotelli tuo mielenrauhaa. Kokemuksesta tiedän, ettei kannata tavoitella aivan halvinta vaihtoehtoa. Vaihtoehtoja punnitessa ratkaisevinta ovat kuitenkin oman sivuston tarpeet. Webhotellia voi verrata vakuutusmaksuihin. Ylivakuuttaminen on turhaa, mutta oma verkko-omaisuus kannattaa turvata. Parhaista paketeista löytyy hyvä asiakaspalvelu, latausnopeus, toimintavarmuus ja tietoturva.

3️⃣ Miksi web-suunnittelu panostaa sisällöntuotantoon?

Sisällöistä ei voi tinkiä. “Content is King” pitää pintansa ja vahvistuu entisestään. Lue lisää siitä, kuinka vanhaa viisautta toteutetaan vuonna 2020; enemmän sivuja kullekin sisällölle »

4️⃣ Miksi testaus on tärkeää?

Testaamatonta sivustoa ei ole syytä vielä julkaista. Kannattaa luoda oma checklist ja palata siihen tasaisin väliajoin.

5️⃣ Miksi markkinoinnilla on väliä?

Markkinointi huolehtii työn viimeistelystä. Valmista työtä on turha valuttaa hukkaan. Sen sijaan voi varmistaa työn näkyvyyden mm. markkinointiviestinnän avulla.

Web-suunnittelu ei ole vain projekti

On hyvä muistaa, että verkkosuunnittelu ei ole päättyvä projekti, vaan sen jälkeen alkaa jatkuva prosessi. Verkkosivusto on kuin kotikissa, joka näennäisestä täydellisyydestään huolimatta vaatii sitoutumista ja hoitoa. Verkkosivun ruokkiminen jatkuu ylläpidolla, optimoinnilla ja sisällön päivittämisellä, mutta hoito kannattaa 😺.

Jos mieleesi nousi kysymyksiä tai kommentoitavaa, ota toki yhteyttä »
Mikäli blogin teemat kiinnostavat, voit seurata uusimpien päivitysten ilmestymistä myös blogin Instagram-tililtä »

Lisää vinkkejä web-suunnitteluun:

Traficom: Millainen on hyvä verkkotunnus »
Webhotellivertailu2: Webhotellien vertailu »
Colibri: Verkkosivusuunnittelman ohje » seuraavaan projektiisi
UK SEO Services: Verkkosivuprojektin » muistilista aloittelijoille
WebsiteBuilderExpert: Mitä verkkosivujen suunnitteluun tarvitaan »
Blogin mindmapit löytyvät myös sivuston Pinterest-tililtä »