Listan kirjat on valittu sillä perusteella, että niiden pitäisi olla kullanarvoisia kaikille verkkosivustojen kanssa tekemisissä oleville, tehtävänimikkeestä riippumatta.

Toinen valintaperuste on tietojen pysyvyys. Teknologiat muuttuvat ja mahdollisuudet kasvavat jatkuvasti, mutta listan kirjat käsittelevät asioita, joiden pitäisi olla edelleen ajankohtaisia kymmenen vuoden päästä. Tästä kertoo sekin, että listan vanhin (ja mahdollisesti paras) kirja on julkaistu alun perin vuonna 1988.

Jos ehdit kommentoida kirjoitusta, niin kerro minkä kirjan lisäisit listalle. Tai jos olet eri mieltä, niin kerro minkä kirjan jättäisit pois.

Kirjat ovat:

1. The Design of Everyday Things
2. Don’t Make Me Think
3. The Elements of User Experience
4. Helppokäyttöisen verkkopalvelun suunnittelu
5. Paper Prototyping
6. The Innovative Leader
7. The Designful Company
8. Getting Real
9. The Design of Sites
10. Sketching User Experiences

The Design of Everyday Things

Donald Norman, 2002, 1988

The Design of Everyday Things on käyttöliittymäsuunnittelua käsittelevän kirjallisuuden ehdoton klassikko. Kirjan luettuasi…

• ymmärrät miten ihmiset käyttäytyvät ja käyttävät erilaisia esineitä, laitteita, sovelluksia, tiloja jne.
• havaitset jatkuvasti käytettävyysongelmia ympärilläsi
• ihmettelet kuinka ne ovat voineet jäädä suunnittelijoilta huomaamatta
• tiedät miten kyseiset ongelmat voisi korjata helposti

Tarvitseeko sanoa enempää? Tämän kirjan lukeminen avaa silmäsi.

Kannattaa tosin varautua siihen, että tieto lisää tuskaa. Käytettävyysongelmien havaitseminen voi aiheuttaa sen, että huonosti suunniteltujen esineiden ja asioiden käyttäminen muuttuu hyvin turhauttavaksi.

Kirjan sivusto, Amazon, Amazon UK

Don’t Make Me Think: A Common Sense Approach to Web Usability

Steve Krug, uudistettu 2. painos, 2005

Don’t Make Me Think on paras johdatus verkkosivustojen käytettävyysasioihin. Kirjassa esitellään tärkeimmät sivustojen käytettävyyteen vaikuttavat tekijät käytännön esimerkein ja kerrotaan, kuinka ne huomioidaan suunnittelussa. Kirjan asiat omaksuttuasi olet selvästi parempi suunnittelija.

Kirja on laadittu erinomaisen teeman ympärille: älä pakota käyttäjää ajattelemaan, vaan pidä kaikki asiat mahdollisimman yksinkertaisina. Kyseessä on suunnittelijan tärkein ohjesääntö, vaikka se monilta hukkuu muiden näkökulmien taakse. Kirjan lukeminen auttaa pitämään oleellisimmat asiat mielessä.

Sen lisäksi, että kirja on täynnä tiivistettyä asiaa, se on myös hauskasti kirjoitettu ja kuvitettu. Saatavilla myös suomennettuna.

Mikäli sivustojen suunnittelu ei ole varsinainen ammattisi, kannattaa lukea juuri tämä kirja. Ja jos on, niin kannattaa lukea tämä kirja ja lainata se sen jälkeen pomollesi tai asiakkaallesi.

Kirjan sivusto, Amazon, Amazon UK

The Elements of User Experience: User-Centered Design for the Web

Jesse James Garret, 2002

The Elements of User Experience auttaa ymmärtämään kaksi asiaa:

1. Mitä sivustot ovat?
2. Miten sivustoja kannattaa rakentaa?

Toisin kuin monet teknisesti orientoituneet ihmiset ajattelevat, vastaus ensimmäiseen kysymykseen ei ole Internet-palvelimelta haettua ja selaimessa näytettävää HTML-koodia. Kyseinen näkökulma on sivustojen suunnittelun kannalta yhtä hyödyllinen kuin printtimedian tekijälle se, että lehdet ovat paperia ja painomustetta.

Oikeasti sivustot ovat paljon, paljon enemmän, minkä tulee näkyä myös niiden suunnittelu- ja toteutusprosessissa. Kirjan erinomaiset kaaviot havainnollistavat minkälaisista “suunnittelukerroksista” sivustot koostuvat ja minkälainen prosessi sivuston suunnittelu oikeasti on. Näiden tietojen pohjalta on helppoa kehittää ja parantaa omaa prosessiaan.

Kirja on erittäin suositeltavaa luettavaa kaikille verkkosivustojen tekijöille, erityisesti prosessista kiinnostuneille.

Kirjan sivusto, Amazon, Amazon UK

Helppokäyttöisen verkkopalvelun suunnittelu

Irmeli Sinkkonen ja kumppanit, 2009

Helppokäyttöisen verkkopalvelun suunnittelu on erittäin perusteellinen esitys sivustojen suunnittelusta ja käyttäjäkeskeisistä suunnittelumenetelmistä. Jos suunnittelet sivustoja ammattimaisesti, niin tämän kirjan käsittelemät asiat on syytä ainakin tuntea. Usein käytännön projekteissa riittää, jos osaa käyttää muutamia kirjassa mainittuja menetelmiä sovellettuina.

Kirjalla on myös eräs toinen ansio: se sisältää ohjeistuksen käyttäjäkeskeisten menetelmien sijoittamisesta vesiputousmallia noudattavaan kehitysprosessiin. Tämä on erittäin tärkeää, sillä tällä hetkellä useimmat it-alalla työskentelevät ihmiset eivät tiedä missä vaiheessa prosessia käyttöliittymäsuunnittelu pitäisi aloittaa.

Henkilökohtaisesti olen havainnut, että yllättävän monet (muuten järkevät) ammattilaiset uskovat, että oikea aika käyttöliittymäsuunnittelulle on vasta käyttöliittymän toteutuksen jälkeen. Ongelman syynä on ilmeisesti se, että asiaa ei käsitellä juuri missään lähteissä. Esimerkiksi ketterien menetelmien kuvaukset jättävät pääsääntöisesti käyttöliittymäsuunnittelun kokonaan mainitsematta, eivätkä ne siten oikein sovellu ihmisten käyttämien järjestelmien suunnitteluun.

Oikea vastaus on heti alussa. Vesiputousmallissa käyttöliittymäsuunnittelu kannattaa aloittaa viimeistään vaatimusmäärittelyvaiheessa, mutta mieluiten jo aikaisemmin, jotta ehditään rauhassa tutustua käyttäjien tarpeisiin, kilpailijoihin ja muuhun aiheeseen liittyvään tietoon. Ketterissä malleissa käyttöliittymäsuunnittelu kannattaa aloittaa ennen ensimmäistä toteutusiteraatiota ja sen jälkeen jatkaa vähintään yksi iteraatioaskel toteutuksen edellä.

Irmeli Sinkkosen toinen kirja Käytettävyyden psykologia (luettavissa ilmaiseksi) on erinomainen lähde käytettävyysasioista. Katso myös Sari A. Laakson artikkeli käyttöliittymäsuunnittelun sijoittamisesta ohjelmiston kehitysprosessiin sekä asiakkaille suosittelemani prosessi.

Kirjan sivusto, Adlibris

Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces

Carolyn Snyder, 2003

Paper Prototyping kuvailee pitkälti saman systemaattisen ja prototyyppeihin perustuvan käyttöliittymäsuunnittelun menetelmän, jota mm. Helsingin yliopiston tietojenkäsittelytieteen laitoksen erinomaisilla käyttöliittymäsuunnittelun kursseilla opetettiin ja jota esimerkiksi Reaktor kertoo käyttävänsä.

Kirjan tärkeintä antia on osoittaa, että käyttöliittymät voidaan suunnitella valmiiksi ja testata oikeilla käyttäjillä ennen kuin riviäkään koodia on kirjoitettu. Isommissa projekteissa tämä lähestymistapa voi säästää valtavasti kustannuksia.

Kirjan sivusto, Amazon, Amazon UK

The Innovative Leader: How to Inspire Your Team and Drive Creativity

Paul Sloane, 2007

Oletko koskaan miettinyt miten epätavallisen hyvät ideat syntyvät? Usein ne syntyvät sattumalta, mutta haluttaessa niiden todennäköisyyttä ja esiintymistiheyttä voidaan kasvattaa huomattavasti.

Olen oman kokemukseni pohjalta täysin vakuuttunut siitä, että innovaatioita tukevan yrityskulttuurin toteuttaja saa valtavasti kilpailuetua muihin verrattuna. Silti en ole toistaiseksi nähnyt yhtäkään yritystä, jossa yritettäisiin viedä ideoita alimmasta portaasta ylöspäin eikä vain toiseen suuntaan, jossa käytettäisiin minkäänlaisia ideointimenetelmiä tai jossa olisi muutenkaan innovaatioihin kannustava yrityskulttuuri.

Kirja nimeltä The Innovative Leader on täynnä käytännönläheisiä ohjeita siitä, kuinka organisaatio saadaan tuottamaan uusia ideoita ja kuinka parhaat ideat saadaan esiin. Tämä on välttämätöntä osaamista konseptisuunnittelijalle.

Nämä asiat pitäisi opettaa peruskoulussa.

Kirjan sivusto, Amazon, Amazon UK

The Designful Company: How to Build a Culture of Nonstop Innovation

Marty Neumeier, 2008

The Designful Company on täynnä visionäärisiä ajatuksia suunnittelun merkityksestä liiketoiminnalle. Näkökulma on hyvin laaja, sillä kirjassa käsitellään mm. sellaisia asioita kuin luovaa suunnittelua, tuotekehitysprosesseja, organisaatioiden rakennetta, päätöksentekoa ja hyvien suunnittelijoiden ominaisuuksia.

Kirja on ehdotonta luettavaa suunnittelupalveluja tuottaville yrittäjille. Lisäksi suosittelen kirjaa luettavaksi niille, joiden liiketoiminnan menestymisen kannalta suunnittelulla, muotoilulla ja innovaatioilla on tai voisi olla jonkinlaista merkitystä (eli toisin sanottuna kaikille).

Amazon, Amazon UK

Getting Real: The Smarter, Faster, Easier Way to Build a Successful Web Application

Jason Fried ja kumppanit, 2006

Getting Real koostuu lyhyistä ja jossain määrin provokatiivisista artikkeleista, jotka käsittelevät verkkosivustojen ja -sovellusten kehittämiseen sekä yrittämiseen liittyviä asioita. Useimmat esitetyistä ohjeista ovat erittäin hyödyllisiä, käytännöllisiä ja oikeaan osuvia.

Käytännön neuvojen lisäksi kirjan keskeisenä teemana on osoittaa, että usein kilpailijoita selvästi parempaan lopputulokseen on mahdollista päästä paljon pienemmillä resursseilla ja vähemmällä työllä, jos vaan tiedetään mitä tehdään ja keskitytään olennaiseen.

Kannattaa kuitenkin suhtautua pienellä varauksella konsepti- ja käyttöliittymäsuunnitteluun liittyviin näkemyksiin, sillä kirjoittajat eivät selvästikään tunne niihin liittyviä menetelmiä.

Samat kirjoittajat ovat julkaisseet myös uudemman kirjan nimeltä Rework. En ole lukenut uudempaa kirjaa, mutta se käsittelee pitkälti samoja asioita kuin Getting Real.

Kirjan voi lukea ilmaiseksi kirjan sivustolta.

Kirjan sivusto (kirja on luettavissa ilmaiseksi), Amazon, Amazon UK

The Design of Sites: Patterns for Creating Winning Web Sites

Douglas K. van Duyne, toinen uudistettu painos, 2006

Suunnittelumallit ovat vähintään yhtä tärkeitä käyttöliittymien kuin ohjelmoinnin kohdalla. Suunnittelumallit kannattaa tuntea, koska ne helpottavat suunnittelutyötä ja koska ne ovat valmiiksi tuttuja käyttäjille ja siksi käytettävämpiä. Pyörää ei kannata keksiä uudestaan.

The Design of Sites on (nimestään huolimatta) n. 1000-sivuinen kokoelma verkkosivustojen käyttöliittymien suunnittelumalleja. Kyseessä on todennäköisesti paras lähde aiheesta, sekä kattavuuden, että esitystavan puolesta. Kustakin mallista esitellään nimi, asiayhteys, ongelman kuvaus, esimerkkejä, ratkaisun kuvaus sekä muita harkitsemisen arvoisia suunnittelumalleja.

Nykyisin on olemassa useita käyttöliittymien suunnittelumalleja esitteleviä verkkosivustoja. Ikävä kyllä useimmissa on ongelmana se, että perusidean kuvailevat tekstit ja kaaviot puuttuvat kokonaan ja tilalla on kuvia enemmän tai vähemmän järkevistä käytännön esimerkeistä. Tämän kirjan tyyliset yksikertaisimpaan muotoonsa pelkistetyt kaaviot ja rautalankamallit kuvailisivat periaatteen huomattavasti selkeämmin ja synnyttäisivät käytettävyydeltään parempia ratkaisuja.

Kirjan sivusto, Amazon, Amazon UK

Sketching User Experiences: Getting the Design Right and the Right Design

Bill Buxton, 2007

Olisi erittäin kiinnostavaa lukea kirja, joka käsittelee konseptisuunnittelun periaatteita ja menetelmiä yleisemmällä tasolla. Ikävä kyllä aiheesta ei toistaiseksi taida olla olemassa hyvää kirjallista esitystä (tai ainakaan en ole sellaisesta kuullut).

Eräs mainitsemisen arvoinen kirja on Sketching User Experiences. Kyseinen kirja pyrkii lukuisten esimerkkien avulla osoittamaan luonnosten voiman ja merkityksen konseptisuunnittelussa. Lisäksi mukana on lukuisia inspiroivia tarinoita onnistuneiden tuotteiden takaa.

Kirja käsittelee kuitenkin lähinnä fyysisiä esineitä ja niiden luonnostelua piirrosten avulla. Ainakin omalla kohdallani suuri osa konseptointityöstä on uusien ideoiden ja pohdittavien kysymysten sekä erilaisten kaavioiden, listojen, hierarkioiden ja muun vastaavan kirjaamista muistiin ja muokkaamista helpommin hahmotettavaan muotoon. Nekin ovat luonnoksia, mutta pikemminkin kirjallisia kuin visuaalisia.

Kannattaa lukea myös Victor Lombardin artikkeli konseptisuunnittelusta.

Kirjan sivusto, Amazon, Amazon UK

Otetaan esimerkiksi arvonlisäveron ilmoituslomake. Aikaisemmin arvonlisäverovelvolliset täyttivät ilmoituslomakkeen joka kuukausi, mutta nykyisin alle 50 000 euron liikevaihdolla pääsee pidennettyyn menettelyyn, jolloin lomake täytetään harvemmin.

Kyseinen lomake täytetään joko paperilla tai sähköisesti siihen tarkoitetussa verkkopalvelussa, minkä jälkeen lomake lähetetään Verovirastolle. Sekä kentät että kenttien täyttöohjeet ovat samoja sähköisessä ja paperisessa versiossa.

Verkkopalvelussa lomake näyttää tältä:

Arvonlisäveron ilmoituslomake

Kenttien numerot ovat keltaisia linkkejä, joita klikkaamalla kyseisen kentän täyttöohjeet avautuvat popup-ikkunaan. Tämä ei ole kovin hyvä ratkaisu, mutta luultavasti useimmat käyttäjät keksivät klikata linkkejä, koska ne erottuvat selvästi muusta sisällöstä.

Paperisessa versiossa ohjeet sijaitsevat erillisessä vihkosessa ja ne on numeroitu kenttien numeroilla.

Käytännön esimerkki ongelmista

Useimmista kenttäkohtaisista ohjeista löytyy käytettävyysongelmia ja osa ohjeista on lähes hyödyttömiä.

Otetaan tarkastelun kohteeksi kenttä nimeltä “314 – Palveluostot muista EU-maista”:

Palveluostot muista EU-maista

Heti alkuun kentän täyttämisessä tulee vastaan kaksi ongelmaa:

1. Ovatko verkkopalvelut ja netin kautta ladattavat tiedostot palveluita?
2. Miten muunnan muilla valuutoilla tehdyt hankinnat euromääräisiksi?

Olettaisin, että tämä kenttä tulisi täyttää siinä tapauksessa, mikäli yritys ostaa verkkopalveluita toiselta EU-alueella sijaitsevilta yrityksiltä. Saattaa myös olla, että EU-alueella sijaitsevan yrityksen verkkokaupasta ostetut ladattavat kuvat, fontit ja ohjelmistot mielletään tässä tapauksessa palveluiksi, koska ainakaan ne eivät ole fyysisiä tavaroita. (Yritin kerran tiedustella tätä asiaa Yritysverotoimistosta, mutta en onnistunut saamaan vastausta.)

Uskoisin, että verkkopalveluiden ostaminen ulkomailta on nykyisin melko yleistä. Esimerkiksi oma yritykseni maksaa suunnilleen joka kuukausi jostakin ulkomaisesta verkkopalvelusta tai ladattavasta tiedostosta. Silti en tiedä mitä ostoksia kyseiseen kenttään tulisi täyttää ja mitä ei.

Jos yritys sijaitsee esimerkiksi Briteissä, hinnat ilmoitetaan yleensä puntina tai mahdollisesti dollareina. Luottokortilla tai PayPalilla maksettaessa ostos maksetaan myyjän valuutalla ja luotonantaja tekee muunnoksen euroiksi valuuttakurssien ja oman muuntokertoimensa mukaan. Tällöin ostoksen euromääräinen hinta ei selviä kuiteista, vaan se pitäisi osata laskea itse.

Ikävä kyllä lomakkeen täyttöohje ei anna vastauksia näihin ongelmiin:

314 Palveluostot muista EU-maista
Merkitkää tähän kohtaan muista EU-maista kuin Suomesta ostamienne sellaisten palveluiden yhteissumma, joista elinkeinonharjoittajia koskevan palvelun myyntimaan yleissäännöksen mukaan vero suoritetaan käännetyn verovelvollisuuden nojalla Suomeen. Jos tällaisen palvelun osto on veroton (esim. verottomaan vesialukseen kohdistuva työ), sitä ei ilmoiteta kausiveroilmoituksella.

Vaikka palvelun osto oikeuttaisi vähennykseen, osto ja siitä suoritettava vero on ilmoitettava kausiveroilmoituksen kohdissa seuraavasti:

• palveluosto kohdassa 314 (palvelun ostohinta)
• palveluostosta suoritettava vero kohdassa 306
• jos veron saa vähentää, vero myös kohdassa 307.

Tavaroiden ostot muista EU-maista ilmoitetaan kohdassa 313.

Lisätietoja palveluostoista muista EU-maista: www.vero.fi/vero-ohjeet > Arvonlisäverotus

Kuten useimmat Veroviraston ohjeet, myös tämä on kirjoitettu kapulakielellä, jonka joutuu lukemaan muutamaan kertaan ääneen ymmärtääkseen mistä on kyse. Selkokielen käyttäminen auttaisi tähän ongelmaan.

Vastausten antamisen sijaan täyttöohje herättää kolme uutta kysymystä:

1. Mistä tiedän suoritetaanko vero myyntimaan yleissäännöksen mukaan Suomeen vai ei?
2. Mistä tiedän onko jonkin tietyn palvelun osto verotonta vai ei?
3. Mistä tiedän mikä oston mahdollinen vero on, mikäli myyjä ei kerro asiaa kuitissa?

Seuraavaksi minun pitäisi ryhtyä soittamaan verotoimistoon tai lukemaan Veroviraston sivustoa läpi siinä toivossa, että ennen pitkää kysymyksiini löytyisi vastaus.

Näiden vastoinkäymisten jälkeen alkaa kuitenkin tuntua helpoimmalta ratkaisulta jättää kyseinen kenttä tyhjäksi ja ottaa se riski, että joutuu maksamaan lisää veroja myöhemmin. Ei kai voida olettaa, että jokaisen arvonlisäverovelvollisen pitäisi käydä sama selvitysprosessi läpi?

Mikä ratkaisuksi?

Lomakkeen ongelmat olisi hyvin helpo korjata yksinkertaisen käytettävyystestauksen avulla. Kuka tahansa käytettävyysasiantuntija osaisi sen tehdä. Eikä käytettävyystestaukseen välttämättä tarvita asiantuntijaa, sillä kuka tahansa osaa suorittaa käytettävyystestin luettuaan aiheesta.

Käytettävyystestauksen perusidea on seuraava: Ensin laaditaan muutama kappale järjestelmän käyttöön liittyviä konkreettisia tehtäviä ja sen jälkeen pyydetään koekäyttäjiä suorittamaan tehtävät järjestelmän avulla. Koekäyttäjiä pyydetään ajattelemaan ääneen tehtävän suorituksen aikana ja testin tarkkailija kirjaa ylös ongelmat, joihin testikäyttäjät törmäävät tehtäviä suorittaessaan.

Tässä tapauksessa sopiva tehtävä olisi antaa koekäyttäjälle eteen kirjanpito, joka vaatii tietojen syöttämistä useisiin eri kenttiin, ja pyytää häntä täyttämään oikeat tiedot lomakkeelle. Sopivia koekäyttäjiä olisivat kaikki, joilla ei ole aikaisempaa kokemusta lomakkeen täyttämisestä. Yleensä kerralla kannattaa testata noin kolmella koekäyttäjällä ja korjata havaitut ongelmat ennen mahdollista uutta testikierrosta.

Heti ensimmäiset koekäyttäjät törmäisivät kaikkiin isoihin ongelmiin, minkä jälkeen pahimmat ongelmat olisi helppo korjata ohjeistusta parantamalla. Käytettävyystestaus olisi hyvä suorittaa aina ennen lomakkeen käyttöönottoa sekä uudestaan isompien muutosten jälkeen.

Kattavan käytettävyystestauksen suorittaminen tarkastelun kohteena olleelle lomakkeelle maksaisi n. 2000 euroa. Ohjetekstien ongelmien korjaaminen ja korjattujen ohjeiden lisääminen verkkopalveluun maksaisi suunnilleen saman verran. Paperiohjeen muuttamiskustannuksia en osaa arvioida.

Arvonlisäverovelvollisia on satoja tuhansia, joten heidän neuvomisensa esimerkiksi puhelimitse on varmasti kalliimpaa kuin ohjeiden testaaminen ja ongelmien korjaaminen. Puhumattakaan siitä, paljonko arvonlisäverovelvollisten aikaa menee hukkaan lomakkeen ja ohjeiden kanssa pähkäillessä.

Toivottavasti Verovirasto ryhtyy jossakin vaiheessa testaamaan lomakkeitaan ja ohjeitaan oikeilla käyttäjillä. Sitä odotellessa voi vain yrittää kestää, koska verotietojen ilmoittaminen on joka tapauksessa pakollista.

Yksinkertaistettuna PageRank-algoritmi toimii seuraavasti:

Sivun tärkeys arvioidaan sivulle osoittavien linkkien perusteella. Kukin linkittävä sivu äänestää sivuja, joihin linkittää. Kyse ei ole pelkästään äänten määrään liittyvästä laskennasta, vaan jokaisen äänen painoarvon määrittää linkittävän sivun oma PageRank-arvo.

Esimerkiksi linkki Iltalehden etusivulta kasvattaa PageRank-arvoa huomattavasti enemmän kuin linkki satunnaisesta keskustelupalstan viestistä.

Sivustolle muilta sivustoilta johtavat linkit ovat siis erittäin tärkeä tekijä hakukonenäkyvyyden kannalta. Linkkien hankkimiseen on monia eri keinoja. Keinot riippuvat pitkälti siitä, minkälainen sivusto on kyseessä.

Yrityksen kotisivuille voi hankkia näkyvyyttä esimerkiksi erilaisista hakemistoista. Hakemistoja löytyy erilaisten yhdistysten, kuten Suomen Yrittäjien ja toimialakohtaisten yhdistysten sivustoilla. Mainostamista, bannerivaihtoa, ristiinlinkitystä ja muuta vastaavaa voi myös harkita, mutta sopimuksen todellinen arvo kannattaa aina arvioida tapauskohtaisesti.

Googlen yrityspalvelukeskuksen kautta voi lisätä oman yrityksen tiedot Google Mapsiin. Erilaisia yritysrekistereitä on vaikka kuinka paljon, mutta suurin osa on ainakin osittain huijausta, eikä niiden hinta yleensä vastaa hyötyä.

Saapuvien linkkien lisäksi sivujen sijoituksiin hakutuloksissa vaikuttaa sivujen laatutekijät. Esimerkkejä laatutekijöistä ovat hakusanojen esiintymistiheys, hakusanojen löytyminen sivun osoitteesta, sivun otsikoista ja muista tärkeistä HTML-elementeistä sekä palvelimen vastausajat. Eri laatutekijöistä ja niiden merkityksestä ei ole tarkkaa tietoa, mutta sitäkin enemmän teorioita.

Hakukoneoptimoinnin hyviin puoliin kuuluu se, että useimmat hakukoneoptimointiin liittyvät parannukset parantavat samalla sivuston käytettävyyttä.

Hakukoneoptimointi Konsepton sivustolla

Konsepton sivustolle ei vielä ole juurikaan linkkejä ulkopuolelta. Niiden määrän kasvattaminen onkin seuraava tärkeä tavoite.

Sivuston HTML-koodi, sivujen osoitteet ja muut vastaavat asiat on muotoiltu siten, että hakukoneet ymmärtävät sivuston optimaalisella tavalla. Kotisivujen perussisältö on myös suunniteltu siten, että sivuilla olisi paljon hakusanoja, joihin hakukoneet voivat tarttua. Tämä työ on vielä suurelta osin kesken. Tulevaisuudessa perussivujen määrää on tarkoitus kasvattaa ja sisältöä kehittää hakukoneoptimoinnin kannalta.

Eräs syy tämän blogin olemassaololle on sivuston kävijämäärän kasvattaminen. Mitä enemmän sivustolla on merkityksellistä sisältöä, sitä paremmin sivusto näkyy hakukoneissa eri hakusanoilla. Lisäksi blogikirjoituksiin saatetaan linkittää muualta, jolloin kirjoitusten hakukonesijoitus paranee ja sivustolle voi tulla vierailijoita linkkien kautta.

Suurestakaan kävijävirrasta ei ole hyötyä, mikäli se ei edusta sivuston kohderyhmää. Näkyminen ammattiaiheisilla sivustoilla (esimerkiksi ArcticStartup ja Vierityspalkki) on Konsepton kohdalla erittäin tärkeää ja kuuluu jatkuviin kehityskohteisiin.

Analytiikkatyökalut

Tulosten mittaaminen on oleellinen osa kaikkea kehitystyötä, myös sivustojen optimointia. Esimerkiksi Google tarjoaa useita ilmaisia sivustojen analytiikkaan ja hakukoneoptimointiin liittyviä työkaluja.

Konsepton sivustolla on käytössä seuraavat työkalut:

Google Analytics

Google Analyticsin avulla saadaan selville esimerkiksi sivuston päivittäiset kävijämäärät ja sivunlataukset, sekä sivusto-, osio- ja sivukohtaisesti. Sivustojen optimoinnissa auttavat mm. tiedot sivustolla vietetystä ajasta, keskimääräisistä sivunäytöistä vierailua kohden sekä välittömästä poistumisprosentista. Lisäksi nähdään mistä lähteistä sivustolle saavutaan, millä hakusanoilla sivustolle päädytään, miten mahdolliset AdWords-kampanjat toimivat sekä erilaisia tilastoja kävijöiden laitteistosta ja ohjelmista.

Käytännössä kaikille sivustoille kannattaa ottaa käyttöön Google Analytics. Palvelun käyttöönottamiseksi riittää kirjautuminen palveluun, muutaman asetuksen määrittäminen sekä pienen koodinpätkän lisääminen kaikille sivuille, joita halutaan mitata.

Konsepton sivuston kävijämäärien kehittymistä on helppo seurata Google Analyticsin avulla. Analytics ei kuitenkaan ole ainoa vaihtoehto. Tarkoituksenani on kokeilla lähiaikoina palvelua nimeltä Clicky.

Clickyn pitäisi näyttää Googlen palveluun verrattuna selvästi tarkempaa ja reaaliaikaisempaa dataa. Lisäksi sen käyttöliittymän pitäisi olla parempi. Kävijämääriltään pienillä sivustoilla palvelu on ilmainen, mutta suurempien kohdalla palvelu toimii kuukausimaksulla.

Google Verkkovastaavan työkalut

Google Verkkovastaavan työkalut (tai Webmaster Tools) näyttää tietoja siitä, kuinka sivustosi näkyy Googlen hakurobotille. Palvelusta näet esimerkiksi millä hakusanoilla sivustosi on näkynyt hakutuloksissa, mitä avainsanoja sivustoltasi on löytynyt, milloin sivusto on viimeksi indeksoitu, kuinka suuri osa sivuston sivuista on indeksoitu ja mitä virheitä indeksoinnissa mahdollisesti tapahtui.

Lisäksi voit käyttää palvelua XML-muotoisten sivukarttojen osoitteen ilmoittamiseen sekä toivotun domain-nimen (www vai ei) määrittämiseen.

Edellä mainittujen lisäksi isäksi Googlelta löytyy monia muita hyödyllisiä työkaluja esimerkiksi hakusanojen valitsemista ja analysointia varten.

Esimerkiksi Google Verkkosivuston optimoija (Website Optimizer) kuulostaa kiinnostavalta. Sen avulla voi testata useita eri versioita sisällöstä ja selvittää mikä vaihtoehto toimii parhaiten. En ole kuitenkaan vielä työskennellyt projektissa, jossa eri versioiden kokeiluun olisi riittänyt resursseja.

Muita työkaluja

Googlen palvelut antavat tietoa lähinnä tuloksista, mutta eivät niinkään tulosten syistä. Sivujen optimoinnin kannalta on erittäin tärkeää saada tietoa myös vierailijoiden käyttäytymisestä sivustolla.

Vierailijoiden käyttäytymisestä ja ajatuksista saadaan tietoa esimerkiksi käytettävyystestien avulla, mutta tällöin ongelmina ovat otannan pienuus ja testauksen kustannukset.

Ongelman ratkaisemiseksi on kuitenkin kehitetty työkaluja, jotka tallentavat vierailijoiden klikkaukset sivustolla. Tallennetut klikkaukset voidaan myöhemmin näyttää esimerkiksi lämpökarttana sivun päällä, tai seurata mitä polkuja yksittäiset käyttäjät ovat edenneet.

Näiden tietojen pohjalta voidaan helposti nähdä mitkä sivun osat keräävät eniten klikkauksia. Osassa on myös mahdollisuus vertailla useampaa eri vaihtoehtoa (A/B testing).

Tällaisia työkaluja ovat muun muassa:

• ClickHeat
• Crazy Egg
• ClickTale
• Clickdensity

Tällä hetkellä Konsepton sivustolla ei ole käytössä mitään klikkauksia nauhoittavaa työkalua, mutta sellainen on tarkoitus lisätä piakkoin. Ensin täytyy kuitenkin selvittää, mikä työkalu sopisi tarkoitukseen parhaiten.

Aiemmin olen käyttänyt Clickdensityä. Palvelun tarjoama data on ollut erittäin hyödyllistä ja toimivaa, mutta ikävä kyllä monet muut ongelmat ovat haitanneet palvelun käyttöä.

Palvelussa ilmeni käyttäjätileihin ja käyttäjien oikeuksiin liittyviä bugeja, jotka ovat pahimmillaan estäneet sovelluksen käytön. Palautteeseen lähettämisen jälkeen ongelmien korjaamista on joutunut pahimmillaan odottamaan viikkoja. Lisäksi Clickdensityn palvelimet ovat välillä nurin, jolloin vierailijoiden selaimet jäävät odottamaan vastausta palvelimilta ja sivusto voi vaikuttaa hitaalta.

Näihin ongelmiin nähden palvelu on melko kallis. Kuvaavasti palvelu on myös kirjoitushetkellä nurin, joten en voi käydä tarkistamassa hintoja sivustolta.

Tämä kirjoitus kuuluu sarjaan Konsepton sivustoa käsitteleviä kirjoituksia. Kirjoitukset ovat:

• Konsepton sivusto: Sivuston design
• Konsepton sivusto: Valmiit komponentit
• Konsepton sivusto: Julkaisujärjestelmä
• Konsepton sivusto: Analytiikka ja hakukoneoptimointi

Julkaisujärjestelmän valinta onkin käytännössä aina kompromissien tekoa:

Drupal, Joomla!, eZ Publish

• Ilmaisia
• Suosittuja
• Avointa lähdekoodia
• Periaatteessa laajennettavissa

• Huonosti suunniteltuja
• Huonosti dokumentoituja
• Käytettävyydeltään surkeita

WordPress

• Ilmainen
• Erittäin suosittu
• Avointa lähdekoodia
• Käytettävyydeltään kohtuullinen

• Huonosti suunniteltu
• Huonosti dokumentoitu
• Rajoittunut, soveltuu lähinnä blogin tai hyvin yksinkertaisen sivuston pohjaksi

Webvanta

• Erittäin hyvin suunniteltu
• Käytettävyydeltään erinomainen

• Kuukausimaksullinen
• Suljettua lähdekoodia
• Hostaus rajoitettu
• Käytännössä tuntematon

(Aion kirjoittaa  julkaisujärjestelmistä lisää tulevaisuudessa, joten pysy kuulolla mikäli aihe kiinnostaa.)

Konsepton sivuston kohdalla päädyin toteuttamaan varsinaiset kotisivut staattisina HTML-sivuina ja käyttämään julkaisujärjestelmää ainoastaan blogin toteuttamiseen.

Julkaisujärjestelmän valinta

Blogin kohdalla julkaisujärjestelmän valinta oli helppoa: WordPress. Valintaperusteita olivat mm. järjestelmän suosio, ilmaisuus, kelvollinen ylläpitokäyttöliittymä, muokattavuus muun sivuston näköiseksi ja valmiit lisäosat useimpiin tarpeisiin.

Valinta oli onnistunut, sillä kelvollisen blogin pystyttäminen WordPressin avulla oli melko helppoa. Varsinkin jos kielenä on englanti ja kelpuuttaa jonkin valmiista teemoista, niin blogi on pystyssä hyvinkin nopeasti.

Teeman rakentaminen

Sen sijaan oman teeman rakentaminen oli työläämpää. Erityisesti sivupohjiin liittyvien funktioiden ja niiden dokumentoinnin taso oli pettymys. Ilmeisesti WordPressin sivuston mainoslause “Code is Poetry” ei koske itse WordPressiä.

Parannettavaa löytyisi myös oletustoiminnoista. Esimerkiksi oikean palstan hakukenttä täytyi hardkoodata suoraan sivupohjaan, koska kyseisen komponentin otsikkoa ei voinut vaihtaa suomenkieliseksi. Muiden komponenttien kohdalla otsikko oli muokattavissa.

Ryhdyin rakentamaan omaa teemaa valmiin teeman päälle kuten lukemissani tutoriaaleissa suositeltiin. Se osoittautui kuitenkin huonoksi ratkaisuksi. Alkuperäisestä teemasta ei jäänyt käytännössä mitään jäljelle, koska kaikki asiat tehty hiukan eri tavalla kuin mitä itse pidin optimaalisena tai omalle sivustolleni sopivana. Vähemmällä työllä olisin päässyt, jos olisin rakentanut teemani tyhjästä, katsoen vain mallia valmiista teemoista.

Lisäosien valinta

Lähes kaikki blogit vaativat WordPressin oletustoimintojen lisäksi erilaisten lisäosien asentamista. Teeman rakentamisen ohella ainakin ensikertalaisella suurin työmäärä kuluukin sopivien lisäosien etsimiseen, valitsemiseen ja testaamiseen.

Lukuisat lisäosat ovat tavallaan hyvä asia, koska melkein kaikkiin yleisiin tarpeisiin löytyy useita valmiita lisäosia. Määrä on kuitenkin myös haitta, koska lisäosien laatu vaihtelee paljon. Yleensä joutuu kokeilemaan useampaa vaihtoehtoa ennen kuin sopiva ratkaisu löytyy.

Lisäksi monet lisäosat korjaavat WordPressin puutteita ja huonoja suunnitteluratkaisuja, joten niiden voisi toivoa olevan jo valmiiksi mukana.

Konsepton sivustolla päädyttiin käyttämään seuraavia lisäosia:

AddToAny

AddToAny lisää artikkeleihin monipuoliset jakamistoiminnot. Valmiita tyylejä täytyi hiukan muokata ennen kuin elementit asettuivat kauniisti paikoilleen, mutta positiivisena yllätyksenä lisäosa osasi näyttää sisältönsä automaattisesti suomeksi.

All in One SEO Pack

All in One SEO Pack tekee blogista kerralla hakukoneystävällisen. Se lisää WordPressiin lukuisia hakukoneoptimointiin liittyviä toimintoja ja mahdollistaa useiden hakukoneoptimointiin liittyvien asetusten määrittelyn.

Kyseinen lisäosa on WordPressin suosituin lisäosa. Vastaavien toimintojen voisi toivoa löytyvän tulevaisuudessa valmiina, jotta kaikkien ei tarvitsisi ladata lisäosaa.

FD Feedburner Plugin

Tämä yksinkertainen lisäosa ohjaa normaalin RSS-syötteen osoitteen Google Feedburnerin kautta kierrätettyyn syötteeseen. Feedburnerin käytön etuna on esimerkiksi analytiikka syötteiden tilaajista.

Google XML Sitemaps

Google XML Sitemaps luo automaattisesti XML-muotoisen sivukartan blogin sivuista. Google ja muut hakukoneet osaavat käydä lukemassa sivujen osoitteet tästä tiedostosta ja päätyvät todennäköisemmin indeksoimaan sivuja, joille ei ole suoraa linkkiä etusivulta. Sivukartan avulla voidaan vaikuttaa myös siihen, kuinka usein hakukoneet käyvät tarkistamassa eri sivuja.

Proper Pagination

WordPress lisää oletuksena huonon sivutusnavigaation sivuille, joilla listataan useita artikkeleja. Sivutuksen tyyliksi on valittu linkit “edellinen” ja “seuraava” sekä jokin vapaavalintainen merkkijono linkkien välissä. Tässä on kolme ongelmaa:

• Käyttäjä ei saa käsitystä sivujen määrästä
• Käyttäjä ei tiedä monennellako sivulla parhaillaan on
• Hakukoneet eivät löydä syvemmällä sijaitsevia sivuja

Lisäosa korjaa sivutusnavigaation paremmaksi lisäämällä sivujen numerot, jotka ovat linkkejä kyseisille sivuille.

Search Meter

Vierailijat hakevat hakutoiminnon avulla sellaisia asioita, joita tarvitsevat ja joita eivät muuten löydä. Search Meter tallentaa hakusanat, joita blogin vierailijat hakevat blogin hakukentän avulla. Tallennettuja tietoja voidaan käyttää tärkeiden ja hankalasti löydettävien asioiden korostamiseen.

Hakusanojen tallennuksen pitäisi sisältyä kaikkiin julkaisujärjestelmiin, koska se on erittäin hyödyllinen ominaisuus sivuston käytettävyyden kehittämisen kannalta.

WP-Paginate

WordPress sisältää mahdollisuuden sivuttaa pitkän artikkelin usealle eri sivulle. Kuten pitkien listojen sivutusnavigaatio, tämäkin sivutusnavigaatio on toteutettu huonosi. Sama koskee kommenttien sivutusta.

Lisäosa tekee artikkelin sisäiselle sivutukselle ja kommenttien sivutukselle saman kuin Proper Pagination artikkelilistojen sivutukselle.

WP-SpamFree Anti-Spam

Suosittu keino kommenttispämmin estämiseksi ovat erilaiset captcha-toiminnot. Niissä on kuitenkin se ongelma, että käyttäjä joutuu tekemään ylimääräistä työtä tulkitessaan ja kirjoittaessaan tekstejä.

Tämä lisäosa torjuu spämmiä toisella tavalla, nimittäin JavaScriptin ja evästeiden avulla. Useimmat spämmirobotit eivät ymmärrä sekä JavaScriptia että evästeitä, joten lisäosan pitäisi ainakin vähentää spämmiä. Huonona puolena oikean käyttäjän selaimessa tulee olla molemmat päällä. Melkein kaikilla on, joten tämä ei ole iso ongelma.

Todennäköisesti tämä lisäosa ei riitä yksinään poistamaan spämmiongelmaa, joten tulevaisuudessa Konsepton sivustolle saatetaan ottaa käyttöön esimerkiksi Akismet. Akismetin käyttö on kuitenkin maksullista yrityksille, joten testaan ensin muita vaihtoehtoja.

WP-Syntax

WordPressille ei ole aivan täydellistä lisäosaa kirjoituksissa esitettävän lähdekoodin merkitsemiseen ja värittämiseen. WP-Syntax lienee paras vaihtoehto, koska se tekee tekstistä kohtuullisen pientä, eikä lisää turhia toimintoja, kuten kopioimista haittaavia rivinumeroita.

Lisäosassa on kuitenkin yksi ongelma. HTML-muotoisen esimerkkikoodin syöttäminen WordPressin editoriin vaatii sen, että <- ja >-merkit korvataan <- ja > -koodauksella. Tämä voidaan erikseen ilmoittaa lisäosalle lisäämällä pre-tagiin attribuutti escaped="true". WordPress kuitenkin poistaa tämän attribuutin aina välillä tallennettaessa, ilmeisesti siksi, ettei se ole validi HTML-attribuutti.

Tämä kirjoitus kuuluu sarjaan Konsepton sivustoa käsitteleviä kirjoituksia. Kirjoitukset ovat:

• Konsepton sivusto: Sivuston design
• Konsepton sivusto: Valmiit komponentit
• Konsepton sivusto: Julkaisujärjestelmä
• Konsepton sivusto: Analytiikka ja hakukoneoptimointi

Esittelen tässä kirjoituksessa Konsepton sivustolle valitut valmiit komponentit.

Sisällys

• JavaScript-ohjelmistokehys
• Tyylikkäämmät fontit
• Kuvien suurennustoiminto
• Apuviivasto
• Yhteydenottolomake
• Muut ominaisuudet

JavaScript-ohjelmistokehys

jQuery

Mikäli sivustolle on tulossa JavaScriptin avulla toteutettavia toimintoja, niin koodausta helpottava ohjelmistokehys (framework) on aivan ehdoton lisäys. Ohjelmistokehys on käytännössä ohjelmakirjasto, joka täydentää JavaScriptin valmiita funktioita lukuisilla verkkosivujen kohdalla tarvittavilla toiminnoilla.

JQuery on todennäköisesti suosituin JavaScript-ohjelmistokehys ja se on ollut jo vuosia oma valintani kaikissa uusissa projekteissa. Muita harkitsemisen arvoisia vaihtoehtoja ovat mm. Dojo Toolkit ja Prototype.

JQueryn mainoslause voisi olla, että se lisää JavaScriptiin ominaisuudet, jotka siinä olisi pitänyt olla alusta lähtien. Tärkein ominaisuus on se, että HTML-elementtejä voi valita erittäin tehokkaasti CSS-kielestä tuttujen valitsimien (selectors) avulla. Näin valittuihin elementteihin voidaan lisätä erimerkiksi tapahtumien käsittelykoodia tai niitä voidaan käsitellä muilla tavoin. Valmiita toimintoja ovat mm. elementtien piilottaminen ja näyttäminen, luokkanimien lisääminen ja poistaminen ja animointi.

JQueryn käyttäminen nopeuttaa koodaustyötä valtavasti. Oman karkean arvioni mukaan jQueryn käyttäminen vähentää erilaisiin toimintoihin vaadittavan uuden koodin määrän n. kahdeskymmenesosaan verrattuna pelkkään JavaScript-kieleen.

Lisähyötynä kaikki toiminnot voivat sijaita erillisessä JavaScript-tiedostossa, eikä HTML-koodin joukkoon tarvitse välttämättä lisätä lainkaan JavaScript-koodia. Tämä helpottaa koodin ylläpitoa huomattavasti.

Esimerkki jQueryn käytöstä Konsepton sivustolla:

// Tiedosto konsepto.js
// Lisätään välilehtitoiminnot
$('.tabs > .labels a').click(function() {
	$(this).parent().parent().parent().children('.tab').hide().filter(this.hash).show();
	$(this).parent().parent().find('a').removeClass('active');
	$(this).addClass('active');
	return false;
});

Yllä oleva koodinpätkä valitsee sivulta luokkanimien perusteella kaikki välilehtien otsakkeiksi tarkoitetut linkkielementit ja lisää niihin toiminnot aktiivisen välilehden sisällön näyttämiseen ja muiden välilehtien sisällön piilottamiseen. Lisäksi se muuttaa valitun otsakkeen visuaalisen tyylin aktiiviseksi ja muiden ei-aktiiviseksi luokkanimiä vaihtamalla. Kaikki tämä on toteutettu kuudella rivillä koodia.

HTML-koodin puolella välilehdet näyttävät tältä:

<!-- Sivu http://konsepto.fi/ota-yhteytta -->
<div>
	<ul>
		<li><a href="#contact-details">Yhteystiedot</a></li>
		<li><a href="#contact-form">Yhteydenottolomake</a></li>
	</ul>
	<div id="contact-details">
		[Yhteystiedot]
	</div>
	<div id="contact-form" style="display: none;">
		[Yhteydenottolomake]
	</div>
</div>

Välilehdet ovat käytössä täällä.

Kuten aina, uuden tekniikan käyttöönottoa hankaloittaa opetteluun liittyvä aloituskynnys. JQueryn kohdalla aloituskynnys ei onneksi ole korkea ja opettelu maksaa itsensä takaisin ensimmäisessä projektissa. Hyvä dokumentaatio auttaa opettelussa.

Bonuksena jQueryn sivuilta (ja muualta verkosta) löytyy valtavat määrät jQueryn päälle rakennettuja lisäosia (plugins), jotka toteuttavat erilaisia toimintoja ja vähentävät koodaustyötä entisestään.

jQueryn harvoja puutteita on se, että sen valmiit käyttöliittymäkomponentit eivät ole kovin laadukkaita. Muut ominaisuudet ovat kuitenkin niin hyviä, että ne korvaavat tämän puutteen helposti.

Tyylikkäämmät fontit

Cufón

Jostain syystä tekstityyppejä myyviltä yrityksiltä ei ole löytynyt vielä kiinnostusta mahdollistaa erilaisten kirjaisinten käyttämistä verkossa. Kyseinen päätös on ollut liiketoiminnan kannalta äärimmäisen huono. Vaikka vain yksikin prosentti sivustojen suunnittelijoista olisi ostanut lisenssin fonttitiedostojen jakamiseen sivustonsa mukana, kyseiset yritykset olisivat tienanneet miljardeja euroja.

Toistaiseksi ainoa keino käyttää epätavallisia fontteja piirtämättä kuvia etukäteen käyttää monimutkaisia tekniikoita, jotka korvaavat tekstit kuvilla jälkikäteen. Tähän tarkoitukseen on kehitetty useita eri tekniikoita. Mikään niistä ei ole täydellinen, joten valinta joudutaan tekemään etujen ja haittojen kompromissina.

Konsepton sivuston navigaatioissa ja otsikoissa käytetään fonttia nimeltä Franklin Gothic Demi Condensed. Sen toteuttamiseksi päädyttiin Cufón-nimiseen tekniikkaan.

Cufón toimii siten, että alkuperäinen fonttitiedosto muutetaan etukäteen koordinaatteja sisältäväksi JavaScript-tiedostoksi. Sivun latausvaiheessa Cufón lisää korvattavien tekstien joukkoon canvas-elementtejä ja piirtää tekstit kuvina niihin. Korvattavat elementit valitaan JavaScript-funktioilla, joten HTML-koodiin ei tarvitse tehdä lainkaan korvaamiseen liittyviä lisäyksiä.

Cufónin etuna on se, että tekniikka ei vaadi Flashia toimiakseen. Lisäksi Cufón osaa toteuttaa esimerkiksi tekstin joukosta löytyvät linkit sekä tyylitiedostossa määritellyt tyylit oikein.

Cufónin ongelmana on se, että useimmat fonttien myyjät eivät salli fonttiensa jakamista verkossa edes JavaScript-muunnoksen jälkeen. Adobe kuulemma sallii myymiensä fonttien jakamisen tällä tavoin, mutta sekin kannattaa tarkistaa tapauskohtaisesti.

Toinen ongelma on se, että korvaus lisää alkuperäisen tekstin joukkoon ylimääräisiä elementtejä ja hankaloittaa siten ruudunlukuohjelmien toimintaa.

Kuvien suurennustoiminto

Fancybox

Kuvien suurentaminen hiirellä klikkaamalla on varsin hyödyllinen toiminto sivustoilla, joten sitä varten on kehitetty lukuisia erilaisia komponentteja.

Konsepton sivustolle valittiin Fancybox-niminen komponentti, koska se on erittäin viimeistelty ja visuaalisesti tyylikäs ratkaisu.

Tyylikkyyden lisäksi Fancybox on myös käytettävä. Esimerkiksi sulkemispainike sijoittuu kuvan vasempaan yläreunaan, mikä on yleinen käytäntö Windowsissa. Monessa muussa komponentissa sulkemispainike on sijoitettu selvästi huonompaan paikkaan tai korvattu tekstilinkillä, jota on hankalampi käyttää.

Kolmas tärkeä valintaperuste oli se, että Fancybox on helposti muokattavissa eri käyttötarkoituksia varten. Esimerkiksi suuret kuvat voi avata normaalissa koossa ja sallia ikkunan vierittäminen. Tarvittaessa kuvat voidaan myös skaalata sen mukaan, paljonko tilaa on käytettävissä.

Fancybox on käytössä mm. tällä sivulla.

Apuviivasto

#grid

HTML-elementtien asettelu leiskakuvien mukaisesti on usein työlästä. Kuvankäsittelyohjelman apuviivoja (grid, guides) vastaavan apuviivaston näyttäminen sivustolla helpottaa huomattavasti tehtävää.

#grid (tai Hashgrid) on ovela pieni komponentti, joka lisää sivustolle apuviivaston, jonka avulla elementtien ja tekstirivien sijoittelun tarkistaminen on helppoa. Apuviivat piirretään ensin käsin erilliseen läpinäkyvään kuvaan, minkä jälkeen ne saadaan näkyviin sivun sisällön päälle näppäinyhdistelmän avulla.

Näet esimerkin painamalla samanaikaisesti näppäimiä Alt+g Konsepton sivustolla. Sivun sisällön päälle pitäisi ilmestyä apuviivat, joita tekstit ja visuaaliset elementit noudattavat.

Tekstien kohdalla perusviivaston (baseline grid) noudattaminen on työlästä, mutta mahdollista. Perusvaatimuksena on se, että tekstirivin korkeus määritellään samaksi kuin perusviivaston korkeus. Tämän jälkeen pitää vielä korjata ja ratkaista muutamia pieniä eroavaisuuksia ja bugeja eri selainten välillä.

Kannattaa varautua siihen, että komponenttia joutuu hiukan muokkaamaan ja korjailemaan ennen kuin se toimii kunnolla omalla sivustolla. Apuviivasto toimii muissa yleisissä selaimissa paitsi Operassa.

Yhteydenottolomake

PHPMailer

PHP-kielen valmiit funktiot sähköpostien lähettämiseen eivät ole kovin kattavia, vaan vaativat paljon koodia ympärilleen toimiakseen monimutkaisemmissa tapauksissa.

Ongelman voi ratkaista helposti ottamalla käyttöön PHPMailer-niminen ohjelmakirjasto.

Konsepton sivustolla sähköpostin lähetystä tarvitaan yhteydenottolomakkeen tietojen lähettämiseen eteenpäin. PHPMailerin avulla onnistui helposti mm. yhteydenottolomakkeen avulla lähetettyjen liitetiedostojen (ks. valinta työnhaku) lähettäminen edelleen haluttuun sähköpostiosoitteeseen.

Muut ominaisuudet

Edellä mainittujen lisäksi sivustolla käytetään vielä paria muuta komponenttia.

dumpCrossFade

Konsepton logon kuva on animoitu siten, että kuva vaihtuu kahdeksan sekunnin välein uuteen. Animaation toteuttamiseen tarvittiin komponentti, joka vaihtaa kuvan tietyin väliajoin seuraavaan häivytysefektin (crossfade) kautta.

Tarkoitusta varten löytyi yksinkertainen jQuery-lisäosa nimeltä dumpCrossFade. Sen avulla efekti voitiin toteuttaa yhdellä koodirivillä sekä muutamalla asetuksella.

ScrollTo + LocalScroll

Viimeisenä on vielä komponenttipari, joka korjaa pienen käytettävyysongelman selaimissa.

Normaalisti sivunsisäistä linkkiä klikattaessa selain siirtyy välittömästi kyseiseen kohtaan avoimella sivulla. Tällöin käyttäjä ei voi tietää siirryttiinkö ylös tai alas nykyisellä sivulla vai vaihtuiko sivu kokonaan uuteen, mikä on omiaan sekoittamaan käyttäjän suuntavaiston.

Konsepton sivustolla ongelma on korjattu kahden jQuery-lisäosan avulla:

• ScrollTo
• LocalScroll

Kyseisten lisäosien avulla kaikkiin sivunsisäisiin linkkeihin lisättiin kolmasosasekunnin mittainen siirtymäanimaatio. Animaatio on lyhyt, mutta riittää ilmaisemaan mitä tapahtui. Tämänkin ominaisuuden lisääminen onnistui yhdellä koodirivillä.

Tämä kirjoitus kuuluu sarjaan Konsepton sivustoa käsitteleviä kirjoituksia. Kirjoitukset ovat:

• Konsepton sivusto: Sivuston design
• Konsepton sivusto: Valmiit komponentit
• Konsepton sivusto: Julkaisujärjestelmä
• Konsepton sivusto: Analytiikka ja hakukoneoptimointi

Sivuston suunnittelun tavoitteita olivat mm.

• Omaperäisyys ja massasta erottuminen
• Mahdollisimman selkeä, jopa minimalistinen ulkoasu
• Tärkeiden viestien korostaminen visuaalisesti
• Yksinkertainen ja helposti ymmärrettävä rakenne
• Asialliset, ammattitaitoiset ja helposti lähestyttävät tekstit
• Mahdollisimman viimeistellyt toiminnot
• Käytettävyyteen ja hakukoneoptimointiin liittyvät asiat kunnossa

Ulkoasu

Ulkoasun suunnitteluun kului selvästi eniten aikaa, koska juuri mitään materiaalia ei ollut valmiina ja yrityksen visuaalinen tyyli suunniteltiin samalla kertaa.

Logon animointi on viime hetken ideoita, mutta pääsi mukaan, koska vaikutti hauskalta ja erikoiselta idealta. Ellei muuta, niin ainakin se on mieleen jäävä elementti.

Palaute animoidusta logosta on ollut sekä myönteistä että kielteistä, mutta myönteistä palautetta on tullut selvästi enemmän. Vaihtuvat kuvat liittyvät Konsepton palvelulupaukseen.

Jokaisella sivulla esiintyy samanlainen puhekuplaelementti. Niiden tarkoituksena on tiivistää ja korostaa kaikkein keskeisin viesti sivun sisällöstä ja tehostaa viestin vaikutusta. Osalla sivuista kakkospalstan tekstit toimivat samassa tarkoituksessa, joten sivustolla esiintyy kahdesta kolmeen tekstin tasoa yleisestä yksityiskohtaiseen.

Sivuston väreiksi valittiin mustan ja valkoisen lisäksi samat värit, joita Konsepton logossa on käytetty (kirkkaahko vihreä ja tumma harmaa). Lisäksi tarvittiin vielä vaalea harmaa tiettyjen elementtien hienovaraisempaan erottamiseen.

Valkoinen tausta antaa iloisemman ja optimistisemman vaikutelman kuin tumma tausta. Musta teksti valkoisella pohjalla muodostaa parhaan kontrastin.

Sivun leveydeksi valittiin 860 pikseliä, jolloin sen pitäisi mahtua ongelmitta myös pienemmälle näytölle.

Sivun elementtien sijoittelu perustuu 20 pikselin perusviivastoon (baseline grid) sekä palstoitukseen, jossa sivu on jaettu kahteentoista 50 pikselin levyiseen palstaan, joista kunkin välissä on 20 pikselin marginaali. (Paina Alt+g nähdäksesi apuviivat).

Leipätekstistä tehtiin tarkoituksella melko suurta, jotta lukeminen olisi helpompaa ja jotta vaikutelma olisi rohkeampi ja vakuuttavampi. Tämä myös vähentää todennäköisyyttä, että huononäköisten tarvitsisi suurentaa tekstin kokoa selaimestaan.

Tekstin koon ja palstojen leveyden suhde valittiin sillä perusteella, että tekstirivit olisivat mahdollisimman helppolukuisia. Ykköspalstan rivin pituus on n. 75 merkkiä.

Perinteisesti luettavuuden kannalta hyvänä tekstirivin on pidetty 45–75 merkkiä ja optimaaliseksi pituudeksi on ehdotettu 66 merkkiä. Verkkosivustolla rivien kannattaa olla hiukan pidempiä, koska yleensä ei ole käytettävissä useampaa palstaa (kuten lehdissä) tai aukeamaa (kuten kirjoissa). Rivin pituudet n. 100 merkkiin asti toimivat kohtuullisesti.

On yleinen harhaluulo on, että pääpalstan tekstirivien levittäminen koko näytön levyisiksi parantaisi käytettävyyttä. Sitä ei kannata oikeasti tehdä. Esimerkiksi 24 tuuman näytöllä rivin pituus saattaa kasvaa tekstin koosta riippuen 200–300 merkkiin ja fyysinen leveys 35 senttimetriin, mikä tekee seuraavan rivin alun löytämisestä haastavaa.

Sivustolla on käytetty kolmea eri fonttia:

• Päätteetön Franklin Gothic Demi Condensed logossa, navigaatioissa, otsikoissa ja korostetuissa teksteissä
• Päätteellinen Georgia leipätekstissä
• Päätteetön Arial lomakkeilla

Laadukas typografia on itselleni melko uusi aihe, mutta tulevaisuudessa sivuston typografiaan on tarkoitus panostaa enemmän.

Rakenne

Tällä hetkellä sivuston rakenne on seuraava:

• Esittely
• Palvelut
• Prosessi
• Työt
• Hinnasto
• Blogi
  • [Blogikirjoitukset]
• Ota yhteyttä

Blogia lukuunottamatta yksitasoinen rakenne palvelee hyvin tarkoitustaan tässä vaiheessa, mutta sivuston sisällön laajentuessa tullaan tarvitsemaan alisivuja osalle päätasoista.

Ainoa asia, joka sivustolta tällä hetkellä puuttuu, on näyteikkunatyylinen etusivu. Sellaisen suunnittelu jäi odottamaan blogin julkaisua, joten sen suunnittelu on vuorossa seuraavaksi.

Ihannetapauksessa sivuston etusivu vastaa mahdollisimman nopeasti ja tehokkaasti kaikkiin oleellisiin kysymyksiin: kuka, mitä ja miten ja miksi? Muun sivuston tehtäväksi jää laajentaa ja syventää näitä tietoja tarvittaessa.

Konsepton tapauksessa etusivulta tulisi selvitä ainakin yrityksen esittely, palvelut, menetelmät ja prosessi ja yrityksen visio. Lisäksi etusivulla kannattaa esitellä vaihtuvaa sisältöä (esimerkiksi blogikirjoitukset, ilmoitukset, uutiset, työnäytteet) ja tehdä yhteistyön aloittaminen mahdollisimman helpoksi.

Sivujen osoitteet haluttiin pitää mahdollisimman yksinkertaisina, joten osoitteista poistettiin kaikki turhat osat.

Turhiksi osiksi katsottiin alidomainin nimi “www.” sekä sivujen tiedostopäätteet “.html” ja “.php”. Ne poistettiin näkyviltä parilla uudelleenohjauksella Apachen .htaccess-tiedostossa:

RewriteEngine On
 
# Poistetaan "www."
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301]
 
# Poistetaan tiedostopäätteet ".html" ja ".php"
RewriteRule ^(palvelut|prosessi|tyot|hinnasto)(/?)$ $1.html
RewriteRule ^(ota-yhteytta)(/?)$ $1.php

Sivujen osoitteissa päädyttiin käyttämään väliviivaa sanavälien merkkinä. Syitä oli useita:

• Totuttua kieltä (toisin kuin alaviiva tai plusmerkki)
• Erottuu alleviivatusta tekstistä (toisin kuin alaviiva)
• Helppo kirjoittaa näppäimistöltä
• Helppo lukea ääneen
• WordPress käyttää oletuksena väliviivaa

Sisältö

Sivuston sisällöstä on pyritty tekemään paitsi haluttavaa, myös helposti lähestyttävää. Esitetyt asiat on pyritty pitämään mahdollisimman yksinkertaisina.

Sisältö on valittu muun muassa sillä perusteella, ettei lukijalle jäisi avoimia kysymyksiä mistään päätöksentekoon vaikuttavasta asiasta. Tätä varten sivustolle on lisätty asioita, jotka useimmilta tämän alan yrityksiltä puuttuvat:

• Tietoa saatavilla olevasta osaamisesta
• Tietoa tekijöistä: nimet, kuvat, kuvaukset, CV:t
• Tietoa siitä, miten käytännön työskentely tapahtuu
• Tietoa työnäytteiden taustoista
• Hinnasto ja hintalaskuri

Yllättävän harvalta sivustolta löytyy tietoa näistä asioista, vaikka ne ovat oleellisia asiakkaan päätöksenteon kannalta. Itselleni tulee tällaisten sivustojen kohdalla väkisinkin mieleen, että onko yritys luotettava vai onko sillä jotakin salattavaa.

Yhteydenottolomakkeesta pyrittiin tekemään käytettävä siten, että eri yhteydenottotapauksia varten on omat kenttänsä. Näin käyttäjän ei tarvitse itse miettiä, mitä kaikkea missäkin tapauksessa tarvitsee mainita.

Lomakkeen kentät jäävät täytetyiksi sekä onnistuneen lähettämisen jälkeen, että mahdollisen virheen tapahtuessa. Tällöin käyttäjä voi esimerkiksi kopioida tekstit sähköpostiviestiin tai tarkistaa kirjoituksensa, lisätä unohtuneet asiat ja lähettää lomakkeen uudestaan.

Etusivulla ja yhteydenottosivulla pyrittiin henkilökohtaiseen palveluun laittamalla tekijän ja yhteyshenkilön nimi ja kuva näkyville (eli oma kuvani tässä tapauksessa).

Sivuston sisältö on vielä kaukana täydellisestä, mutta sitä on tarkoitus kasvattaa ja kehittää vähitellen yrityksen tarpeita vastaavaksi. Tämä on siltä kannalta tarkoituksenmukaista, että yrityksen alkutaipaleella voi tapahtua nopeitakin muutoksia, eikä yrityksen lopullinen suunta ole vielä selvillä.

Tulevaisuudessa sivustolle on tarkoitus lisätä mm. seuraavaa:

• Tarkempaa tietoa osaamisesta ja menetelmistä
• Tietoa yrityksen filosofiasta: visio, arvot, periaatteet jne.
• Hyödyllisiä artikkeleita toimintaan liittyvistä aiheista
• Hyödyllisiä case-kuvauksia
• Mahdollisesti kirjasuosituksia ja muuta vastaavaa

Tämä kirjoitus kuuluu sarjaan Konsepton sivustoa käsitteleviä kirjoituksia. Kirjoitukset ovat:

• Konsepton sivusto: Sivuston design
• Konsepton sivusto: Valmiit komponentit
• Konsepton sivusto: Julkaisujärjestelmä
• Konsepton sivusto: Analytiikka ja hakukoneoptimointi

Sekä Konsepton sivusto että blogi on nyt onnellisesti julkaistu. Itse sivusto on ollut jo kuukauden julki, mutta blogi ehti vasta nyt mukaan.

Oloni on tyytyväinen ja helpottunut. Tyytyväinen siksi, että tulokset alkavat jo näkyä uusissa projekteissa ja kiinnostuksessa yritystä ja sen palveluita kohtaan. Helpottunut siksi, että voin taas keskittyä sellaisiin asioihin, jotka ovat jääneet vähemmälle huomiolle sivuston kehittelyn aikana.

Omat kotisivut ovat useimmille se kaikkein hankalin projekti, sillä mahdollisuuksia sisällön, rakenteen ja visuaalisen tyylin suhteen on lähes rajattomasti. Haluat viestiä siitä miksi yrityksesi on tarkoitus tulla, mutta toisaalta myös siitä mitä se on ja mitä se voi tarjota juuri tällä hetkellä. Lopullisten päätösten tekeminen ei ole aina helppoa.

Lisäksi kaikki mitä viestität yrityksestäsi vaikuttaa yrityksesi tulevaisuuteen. Sivuston sisällön suunnittelu muistuttaakin paljon liiketoimintasuunnitelman laatimista. Molemmissa määritellään suunta, johon yritys pyrkii, sekä keinot, joilla kyseiseen suuntaan päästään.

Aloittavan yrityksen kohdalla tulevaisuus on kuitenkin sekä hyvin epävarma että täynnä houkuttelevia mahdollisuuksia. Kuinka valita juuri se kaikkein kiinnostavin polku, kun kaikki mahdollisuudet eivät ole tiedossa?

Ehkä paras keino suunnitella yrityksen tulevaisuutta on tehdä se yhdessä esimerkiksi omien työntekijöiden, kollegoiden tai muiden yrittäjien kanssa. Asioista keskusteleminen kirkastaa valtavasti omaa näkemystä siitä, mihin suuntaan kannattaisi pyrkiä. Välillä omalle kannalleen saa tukea, joskus taas vastustusta. Molemmista on hyötyä – joskus saattaa jopa päätyä täysin vastakkaiseen ratkaisuun kuin mitä muut suosittelevat.

Sivuston rakentamiseen liittyen haluan kiittää Mikko Hyppöstä ja Perttu Talasniemeä kaikesta avusta, neuvoista ja kärsivällisyydestä. Lisäksi haluan kiittää kaikkia, jotka kommentoivat sivustoa sen eri kehitysvaiheissa.

Kiitos, ystävät!

Sivuston rakentaminen alusta loppuun oli iso ponnistus, koska samalla piti hoitaa myös asiakkaiden projektit kunnialla. Mutta niinhän se menee – oman yrityksen kehittämiseen on pakko löytää aikaa, mutta sen ajan löytäminen on vaikeaa.

Mikäli olet kiinnostunut kuulemaan enemmän sivuston taustoista ja kehitysprosessista, löydät lisää tietoa täältä:

• Konsepton sivusto: Sivuston design
• Konsepton sivusto: Valmiit komponentit
• Konsepton sivusto: Julkaisujärjestelmä
• Konsepton sivusto: Analytiikka ja hakukoneoptimointi