Verkkosivujen hinnat puhuttavat aina. Aiheeseen on otettu kantaa meidänkin blogissa pariin otteeseen. Olemme pohtineet paljonko kotisivut maksavat sekä ottanut kantaa muun muassa perussivujen näkövinkkelistä, mutta vielä ei ole puhuttu siitä mikä niissä oikein maksaa. Se jää yleensä meidän ja tarjouspyynnön lähettäjän välille.
Vaikka puhuttaisiin ns. “perussivuista”, verkkosivut ovat aina suhteellisen laaja kokonaisuus. Harjaantuneeltakaan koodarilta mikään sivusto ei nouse pystyyn “nappia painamalla”. Feissarimokien Helin mielipiteiden kaltaisia tulee tietyn väliajoin vastaan ja niitä ei voi koskaan oikoa liian tarpeeksi.
Tuutte käymään niin katotaan. Sehän on niin näppärä et äkkiäkös se siinä samalla windowsin päivittää ja yhet sivut pyöräyttää. Ajattelin et menee varmaan ihan kahvipalkalla näin sukulaisten kesken?
Alle parilla tonnilla tekevät yleensä ainoastaan valmisratkaisuja käyttävät tai freelancerit tai harrastelijat. Väittäisin, että jos tilaat verkkosivut toimistolta tai tekijältä, halvalla et saa hyvää, koskaan. Halvat sivut näyttävät kököiltä, koodi on huonoa ja helposti hakkeroitavaa ja sivut rapistuvat, bugittavat ja vanhenevat nopeammin ja joudut hetken päästä ostamaan uudet sivut. Jos ei oikeasti pysty maksamaan nettisivuista, kannattaa turvautua puoli-ilmaisiin kotisivukonetyyppisiin verkkosivunrakennuspalveluihin, kuten esimerkiksi Squarespaceen.
— Tartteisin sivut, paljonko maksaa?
— Speksejä tietämättä, puhutaan kolmesta ja puolesta ton…
— Tonnia?! Satasen voin maksaa!
Työhönhän kaikki ainakin meillä pohjautuu. Kun lähdetään avaamaan mikä verkkosivuissa maksaa, alkaa myös hinnatkin tuntua järkeviltä. Meillä hintaan lasketaan kaikki. Siis ihan kaikki, asiakastapaamisista, palvelusta, visuaalisesta suunnittelusta tekniseen työhön, aina palvelinkonfiguraatioihin, optimointiin, esteettömyysauditointiin sekä testaukseen asti.
Lähdetäänpäs purkamaan mikä siinä nyt oikein maksaa.
Projektin alustus
Projektin suunnittelu alkaa jo tarjouksen tekemisvaiheesta. Asiakkaalta selvitetään toiveet ja tavoitteet, jotka tulevat yleensä selville sekä tarjouspyynnöstä, että aloituspalaverin aikana. Joskus tehdään vielä jatkokysymyksiä ja tarkennuksia ennen varsinaisen suunnittelutyön aloitusta.
Alustukseen kuuluu myös teknisen työn kartoitus sekä yhteinen aloituspalaveri. Jonkinlainen speksaus tehdään yhdessä asiakkaan kanssa ennen kuin laitetaan kädet saveen.
Kilpailijakartoitus
Käydään läpi asiakkaan toimialan sivustoja, että tiedetään missä mennään ja mitä pitää tehdä, jotta asiakkaan sivusto ampuu raketin lailla kilpailijoista yli sekä visuaalisesti että teknisesti.
Asiakkaan toimittaman materiaalin läpikäynti ja käsittely
Tsekataan asiakkaan logot, valokuvat sekä mahdollinen graafinen ohjeisto, joskus myös jo vähän tekstejäkin. Jos on tarvetta lisävalokuvauksille, järjestetään se. Jos taas kuvapankkikuville, niin etsitään niitä. Kuvamateriaalia tarvitsee yleensä käsitellä jonkin verran ennen varsinaista suunnitteluvaihetta, mutta myös sen aikana ja etenkin ennen kuin tekninen toteutus alkaa.
Yritysilme
Suunnittelemme yritykselle myös tarvittaessa logon, värimaailman ja typografian sekä graafisen ohjeiston. Tähän kuuluu myös käyntikortit ja muut ilmeeseen liittyvät liput ja laput, jos niille löytyy tarvetta. Suurimmalla osalla yrityksistä on kuitenkin jo valmiiksi olemassa jonkinlainen logo ja käsitys brändistä, etenkin sivustouudistuksissa, joten aina varsinaista yritysilmesuunnittelua ei tarvita.
Ulkoasu ja visuaalinen suunnittelu
Alkuvaiheiden jälkeen alkaa varsinainen suunnitteluvaihe, joka on raakaa graafista suunnittelua sekä käyttöliittymä- ja käyttökokemussuunnittelua. Pääsääntöisesti aina aloitetaan etusivusta, johon mietitään mm. seuraavat asiat.
Navigointi ja valikko
Valikkoja on erilaisia. On ns. “hampurilaismenuja”, eli kolme viivaa, joita nähdään nykyään joskus jopa työpöytäympäristöissä. Meidän projekteista esim. Jylkkärissä tätä käytettiin tuomaan minimalistisuutta saitille, jolla on massiivinen kasa sisältöä. On olemassa laajempia ja useampitasoisia valikoita, jotka tietysti lisäävät haastetta sisällön jäsentelynkin kannalta.
Kuvat, värit, typografia, brändi-ilme
Varsinaisen yritysilmeen puristaminen pakettiin verkkosivuille ei tapahdu ihan sormia napsauttamalla. Jos esimerkiksi yritys on vanha ja ilmettä halutaan vähän freesata modernimpaan suuntaan, silloin ei voi välttämättä käyttää enää sitä vanhaa punaista joka oli kova juttu 80-luvulla. Jos kyseessä on blogi tai sivusto, joka tekee paljon tekstiä, silloin kiinnitetään erityisesti huomiota typografian suunnitteluun.
Leiska ja elementit
Suunnitellaan nostopaikat, toimintakutsut, lomakkeet, kuvien paikat, ja niin edelleen. Kun etusivun malli on niin järkyttävän hyvä että hampaat kalisee, laitetaan asiakkaalle vedos ja otetaan kommentit, jonka mukaan jatkokehitetään jos tarvetta on. Etusivun kuittauksen jälkeen asiakkaalle useimmiten demotaan vähintään kaikki erilaiset sivupohjamallit ja tärkeimmät sivut. Jos on kyse verkkokaupasta, niin monesti demotaan myös ostoprosessin vaiheita.
Ominaisuudet ja käyttöliittymä
Jos sivustolle tulee verkkokauppa, myytäviä tuotteita tai palveluita, tapahtumakalenteri, blogi, galleria, videoita, tuotekatalogia, sosiaalisen median virtaa, podcasteja, lomakkeita, kyselyitä, kilpailuja, interaktiivisuutta, hakutoimintoa tai muuta toiminnallisuutta, graafikko miettii miltä nämä näyttävät ja miten ne voisivat toimia, yhdessä devaajan kanssa. Mikä aukeaa mistäkin, mitä tapahtuu kun hiiren vie päälle. Toiminnot yleensä nostavat jonkin verran hintaa, sillä ne vaativat enemmän työtä myös suunnitteluun.
Leiskojen toimitus web-kehittäjälle, huolellinen visujen viimeistely
Kun tarpeellinen määrä sivustoon tulevia näkymiä on demottu ja hyväksytty, materiaali työstetään web-kehittäjien käyttöön. Tällöin kuvia vielä viilataan ja logot/ikonit muutetaan viimeistään SVG-muotoon. SVG, eli Scalable Vector Graphics on netissä toimivaa vektoria, joka on äärimmäisen kevyttä ja rajattomasti skaalautuvaa, eikä sumuunnu retinanäytöillä kuten PNG tai JPG. Halvat toimijat tuskin edes vaivautuvat käyttämään laadukasta vektorigrafiikkaa.
Lopuksi materiaali käydään teknisen tuotannon kanssa läpi, jotta kaikki ovat samalla kartalla.
Projektipäällikköys myös teknisen toteutuksen aikana
Dudella graafikko on yleensä myös projektipäällikkö, joka pitää huolta siitä että asiat etenevät aikataulun mukaisesti kaikissa projektin vaiheissa ja on yhteydessä asiakkaaseen tarvittaessa.
Graafikon työvaiheet vievät hieman sivuston koosta riippuen kahdestakymmenestä aina viiteenkymmeneen tuntiin saakka. 80 euron tuntihinnoittelulla saa aika hyvän kokonaiskuvan, paljonko pelkkä graafinen työ maksaa.
Tekninen työ
Teknisen työn alkaessa luodaan projekti ja palvelinympäristö (niin sanottu stack eli “stäkki”) puoliksi automatisoitujen scriptien avulla. Tämä tarkoittaa sitä, että projektin alkaessa on vuosien varrella ja edeleen jatkokehitetty pohja, josta on kaikki turha karsittu pois ja pääsee heti määrittelemään projektille merkityksellisiä asioita leiskaan.
Edistyneet, modernit kehitysympäristöt
1. Paikallinen, turvattu ja testattu kehittäminen
Se missä halvat toimijat ja freelancerit saattavat tunkata spagettikoodiaan FTP-palvelimelle suoraan Notepad-tyyppisillä ohjelmilla, Dude käyttää tekniikkaa, joka on viimeisintä huutoa. Kehitämme paikallinen → testiympäristö → tuotanto -tyyppisellä toimintamallilla. Suomeksi sanottuna sivustoa siis kehitetään koodarin omalla koneella pyörivällä paikalliseen kehitykseen tarkoitetulla virtuaalipalvelimella, ei-julkisessa osoitteessa (oma kehityspalvelimemme löytyy myös GitHubistamme).
2. Testiympäristö (eng. staging), jossa asiakas pääsee esikatselemaan tuotosta
Kun projekti on saatu siihen vaiheeseen, että sitä kehtaa näyttää asiakkaalle, se työnnetään yhden komennon avulla testiympäristöön osoitteeseen asiakas.dude.fi/asiakas, jonne pääsee ainoastaan salasanalla. Täällä asiakas voi selata valmistuvaa sivustoa sekä esimerkiksi alkaa päivittämään sisältöjä, samalla kun kehittäjä jatkaa sivuston työstöä omalla koneellaan.
3. Tuotantoympäristö, valmistunut sivusto
Kun sivustoa on hiottu ja työstetty sen verran paljon, että ei löydy enää korjattavaa, se on valmiina julkaisuun. Ennen julkaisua käydään läpi 39 kohdan tarkistuslista ja julkaisun jälkeen vielä uudemman kerran. Otetaan myös talteen kävijä- ja liidimäärä ennen julkaisua tulosten mittausta varten.
Front end -kehitys ja visuaalinen suunnittelu tekniikan puolella
Sivuston ulkoasun “taitto” on nimeltään front end -kehitystä tai koodausta, joka tarkoittaa lähinnä sivuston tyylien ja elementtien asettelua koodin ja kevyen toiminnallisuuden kautta. Front end -kehittäjä työstää sivustoa graafikon kanssa, joka spottaa bugeja ja varmistaa että ulkoasu näyttää siltä miltä pitääkin.
Dudella graafikon antama visuaalinen leiska ei välttämättä ole sivuston puolella täysin samanlainen, sillä koodareilla saattaa tulla vielä hyviä ideoita ulkoasun parantamiseksi. Sivustoversiossa kuitenkin painotetaan aina siihen, että välit ovat symmetrisiä, fontit oikeanlaisia ja kaikki näyttää hyvältä ja mietityltä, eikä insinöörimäisen köppäseltä.
WordPress-teema
WordPress-toteutuksissa sivuston ulkoasusta puhutaan usein teemoina (eng. Themes). Teema on kaikki näkyvä varsinaisen sivuston puolella. Teeman koodaamisessa käytämme WordPressin koodaus-standardeja, joiden avulla voimme olla varmoja siitä, että koodi on laadukasta.
Valmiita WordPress-teemoja emme käytä, koska vaikka ne kuulostavat “valmiilta”, ne sisältävät yleensä hirveän määrän kuonaa tai sitten ne on vain tehty joko kaikkeen tarkoitukseen (ns. “multi-purpose”) tai eri tarkoitukseen kuin mihin asiakas sivuja tarvitsee. Jonkun toisen tekemät teemaratkaisut vievät yleensä tupla- tai tripla-ajan, eikä niiden päälle pysty saamaan kunnollista, tarkoituksenmukaista sivustoa tai verkkokauppaa aikaan. Poikkeuksena sanottakoon Foxlandin, eli Sami Keijosen kevyet ja hyvin toimivat teemat.
Pohjateemanamme on käytössä oma vuosien jatkuvan kehityksen tulos, niin sanottu “starter-teema” nimeltään Air, jossa ei ole mitään turhaa.
Back end -kehitys ja taustatekniikan ohjelmointi
Taustaohjelmoija, eli back end -kehittäjä suunnittelee sen miten sivusto toimii etenkin hallintapaneelin puolella. Kaikki sisältö, myös sivuston ylä- ja alaosan tekstinpätkät ja valikot ovat asiakkaan itse helposti muokattavissa. Käyttöliittymä ja käyttökokemus tehdään niin superhelpoksi että oma mummokin osaisi käyttää sivustoa.
Taustakehittäjä varmistaa, että asiakkaan ei koskaan tarvitse tietää mitään tekniikasta tai osata riviäkään koodia, jos haluaa jonkun hienon kikkareen näkyviin sivustolle.
Integraatiot
Tarvetta verkkokaupalle, joka keskustelee kassajärjestelmän rajapinnan kanssa? Hinnat pitäisi syncata jostain toiselta sivustolta joka päivä kello kaksi? Tweetit sivuston näköiseksi, Facebook-kuvat galleriaan tai Facebook-kommenttien käyttäminen uutissivuna? Ravintolassa juodut oluet automaattisesti näkyviin sivuston puolelle tai Tripadvisor-arvostelut hienoksi elementeiksi osaksi sivustoa, automaattisesti? Näitä taustakehittäjä koodaa mielellään.
Tosi paljon on mahdollista toteuttaa ja kaikki ideat mielellään kuunnellaan. Halpoihin toteutuksiin tuskin saa integraatioita mukaan ollenkaan. Meillä “perussivuihin” yleensä kuuluu esimerkiksi jonkinlainen sosiaalisen median virta sivuston puolelle, jos somepresenssiä yritykseltä löytyy.
Optimointi ja laadukas koodi jo sivuston toteutuksen aikana
Pohjateemamme nimi Air tulee siitä, että teema on “kevyttä kuin ilma”, sillä se painaa pakattuna ainoastaan 17,9 kilobittiä. Mitä kevyempi verkkosivusto on, sitä nopeammin se latautuu selaimessa. Modernit kehitystekniikat mahdollistavat sen, että kaikki koodi pakataan samaan tiedostoon, pieneen kokoon. Niin front- kuin back end -koodikin optimoidaan käyttämällä WordPressin omia standardeja sekä laadukkaita funktioita ja tapoja tehdä asioita.
Optimointia tehdään vielä sivuston julkaisun jälkeenkin. Sivusto välimuistitetaan ja palvelimen tehokkuutta ja nopeutta parannetaan koko ajan, vaikka varsinainen sivusto ei olisi enää aktiivisessa työstössä.
Jatkokehitys ja jatkokehitettävyys
Kehitämme projektia mieluusti eteenpäin ja ainakin rakennamme sivustomme sellaiseksi, että niitä pystyy kehittämään eteenpäin. Halvoissa ratkaisuissa tekniikka saattaa olla jo valmiiksi vanhaa ja yritys saattaa joutua tilanteeseen, jossa kukaan toimija ei halua koskea tekeleeseen pitkällä tikullakaan.
Responsiivisuus
Kaikille laitteille mukautuvuus on nykyään niin perushuttua, että sitä ei missään erikseen mainita, mutta alusta asti olemme toteuttaneet jokaisen projektimme responsiiviseksi. Toimistollamme on kaksi device labia, eli ns. “laiteseinää”, jotka mahdollistavat sen että sivustot näkyvät kehityksen aikana erilaisissa näytöissä. Responsiivisesta suunnittelusta ja laiteseinästä voi lukea lisää viime vuoden bloggauksestamme.
Toiminnallisuus
Toiminnallisuus vaatii eniten työtä niin front- kuin back end -kehittäjältäkin. Fronttikoodari miettii miltä graafikon ja asiakkaan visioimat jutut näyttävät sivuston puolella, back end -koodari pyörittelee algoritmeja ja tekniikkaa miten homma voisi toimia ja miten asiakkaan olisi kaikista helpoin päivittää rakennettavaa kikkaretta.
Tietoturva
Tietoturvaa parantaa jo edellä mainitut asiat, eli hyvät toimintatavat, laadukas koodi ja palvelinympäristö. Meillä tietoturvaan panostetaan päivätasolla. Kaikki sivustomme ovat HTTPS-salauksen takana ja kaikki asiakkaamme saavat kaupan päälle HTTPS:llä/SSL:llä toimivan sivuston ja sertifikaatin. Väärät kirjautumiset blokataan automaattisesti. Ja niin edelleen. Yhtäkään asiakkaamme sivustoa ei ole koskaan hakkeroitu.
…ja tuhat muuta juttua
Kaikkea tekniikkaan liittyvää nörttäilyä emme edes tuo aina esille asiakkaalle päin, sillä koodia ei pidäkään ymmärtää. Tekninen työ vie yleensä vähintään tupla-ajan verrattuna graafiseen työhön, eli 40-100 tuntia riippuen projektin koosta.
Loppusanat
Projektit ovat niin erilaisia, että tässä ei todellakaan ollut kaikki. Jos kuvitellaan useiden tuhansien eurojen sivusto tai verkkokauppa/-palvelu ja saat kaiken ylläolevan, kuulostaako enää isolta summalta?
