PROJEKTIDOKUMENTAATIO BEYOURSELF Emilia Ketola Eurajoen kristillinen opisto Avat 2015-2016
1 Kartoitus... 3 1.1 Asiakas ja sivujen tarve... 3 1.2 Toiveet, ajatukset ja alkusuunnitelmat... 3 1.3 Aikataulu ja hinta-arvio... 4 2 Suunnittelu... 5 2.1 Mindmap ja rakennekartta... 5 2.2 Luonnokset... 6 2.3 Valinta... 9 3 Toteutus... 9 3.1 Webhotelli ja domain... 9 3.2 Peitesivu... 10 3.3 WordPress... 10 3.4 Asiakastapaaminen ja muokkaukset... 12 3.5 Käyntikortti... 13 3.6 Muokkaukset... 14 3.7 Suojaus... 14 3.8 Valmis sivusto... 14 4 Testaus... 16 4.1 Käytettävyys ja hakukoneystävällisyys... 16 4.2 Validointi, Selaimet ja laitteet... 16 5 Ylläpito... 18 5.1 Päivitys... 18 6 Arviointi... 18 6.1 Itsearviointi... 18 6.2 Asiakkaan arviointi... 19
3 1 KARTOITUS 1.1 ASIAKAS JA SIVUJEN TARVE Asiakkaanani on porilainen Piia Ristilä. Hän opiskelee tällä hetkellä kolmea eri alaa ja valmistuttuaan hänen on tarkoitus perustaa oma yritys. Tulevan yrityksen palveluihin kuuluvat ainakin elämäntapavalmennus, hieronta, ravintovalmennus, erilaiset koulutukset ja luennot. Sivut asiakkaani haluaa avata heti yrityksen alussa, jotta yritys saisi heti mahdollisimman paljon näkyvyyttä. Asiakkaani on tarkoitus tehdä myös Facebook-sivu, joka tukee sivuston ulkoasua ja tunnelmaa. 1.2 TOIVEET, AJATUKSET JA ALKUSUUNNITELMAT Asiakkaani opiskeluiden takia emme ehtineet järjestämään kunnon asiakastapaamista aluksi. Joten kyselin asiakkaalta sähköpostitse sivujen suhteen toiveita ja ajatuksia. Asiakkaallani oli hyvin pitkälle mielikuva, minkä tyylisen ja näköisen sivuston haluaa. Värimaailmaksi asiakas halusi lempeän, hempeän ja uskottavan. Sivustolta asiakkaalle välittyvän tunnelman pitäisi olla lämmin, luotettava, rento, helposti lähestyttävä ja asiantunteva. Kohderyhmänä ovat kaiken ikäiset ja eri elämäntilanteissa olevat henkilöt. Sivuston teemana toimisi toivo ja uuden elämänalku. Ylös etusivulle tulisi kuvia, jotka vaihtuvat ja ovat sivuston teeman mukaisia. Kuvina toimisi esimerkiksi polku, jonka päässä näkyy valoa, majakka ja meri, sekä muita teemaan sopivia tunnelmallisia kuvia. Asiakkaani harrastaa valokuvausta ja kuvat tulisivat olemaan hänen ottamiaan kuvia. Varsinaista
4 logoa hän ei halua, vaan lähinnä yrityksen nimi jollain kauniilla fontilla. Sivuston ulkoasusta asiakas antoi minulle linkkejä muiden samanhenkisten yritysten sivuille ja blogeihin, joissa oli sen näköistä asettelua mitä hän itse halusi sivustolleen. Asiakkaani tekee sivuston tekstit itse, jotka Hän lisää sivustolle myöhemmin kesällä. Koska sivusto avataan vasta kesällä, kysyin asiakkaaltani, että haluaako hän avata oman domainin ja webhotellin heti vai kokoanko sivustoa ensin muualle. Jos asiakkaani avaa oman webhotellin heti, voisin laittaa peitesivun sivustolle aluksi. Asiakkaani myös toivoi, että jäisin sivuston valmistuttuakin sivuston päivittäjäksi. 1.3 AIKATAULU JA HINTA-ARVIO Tein projektista alustavan aikataulusuunnitelman. Asiakkaan kanssa sovimme, että heinäkuussa sivusto olisi sisältöineen valmis ja julkaisu tapahtuisi tämän jälkeen asiakkaan tilanteesta riippuen (Kuva 1). Tunnit Tuntihinta Projektin aikataulu Alkaa 70,00 Kartoitus 7.3.2016 0,5 35,00 Suunnittelu 14.3.2016 2 140,00 Toteutus 4.4.2016 1 70,00 Asiakastapaaminen 11.4.2016 3 210,00 Muokkaukset/logot 11.4.2016 2,5 175,00 Testaus 18.4.2016 1 70,00 Sisältö sivuilla 18.7.2016 1 70,00 Julkaisu 1.8.2016 0,25 17,50 11,25 787,50 24 % 189,00 ALV Yhteensä 976,50 Kuva 1
5 2 SUUNNITTELU 2.1 MINDMAP JA RAKENNEKARTTA Tein sähköpostissa saatujeni tietojen perusteella sivustolle mindmapin (Kuva 2) ja sen mukaan suunnittelin sivuston rakenteen (Kuva 3). Kuva 2 Kuva 3
6 2.2 LUONNOKSET Asiakkaan linkeistä eri sivustoille ja blogeihin sai aika hyvin selvää, minkä tyylisestä asettelusta asiakas pitää. Tein hänelle viisi erilaista vaihtoehtoa. Olin ehdottanut asiakkaalleni aikaisemmin, että hän kirjoittaisi yrityksen nimen itse, jolloin fontista tulisi omannäköinen. Asiakkaani tykkäsi ideasta. Minulla ei kuitenkaan ollut suunnitteluhetkellä vielä asiakkaani kirjoittamaa tekstiä, joten käytin luonnoksissa valmista fonttia. Laitoin luonnoksiin yrityksen nimen kanssa myös tunnuslauseen, jonka asiakkaani oli minulle antanut. Kuvina käytin asiakkaani lähettämiä kuvia ja yhtä luvallista Pixabay.com:sta ottamaani kuvaa, joka oli sivuston tyyliin sopiva (Kuva 4, Kuva 5, Kuva 6, Kuva 7, Kuva 8). Luonnoksiin en merkannut sen enempää elementtien kokoja, koska ajattelin katsovamme sivuston leveyden asiakkaan kanssa yhdessä asiakastapaamisella, jotta hän saa oikean käsityksen sivuston leveydestä. Kuva 4
7 Kuva 5 Kuva 6
8 Kuva 7 Kuva 8
9 2.3 VALINTA Asiakkaani tykkäsi ensimmäisestä vaihtoehdosta (Kuva 4). Hän myös tykkäsi luonnoksessa olevasta kuvasta ja kysyi jos sitä voisi käyttää sivustolla. Kerroin asiakkaalleni, että kuvaa on mahdollista käyttää, mutta mielestäni parempi olisi käyttää omaa kuvaa. Näin ei ainakaan muiden sivustoilla voi törmätä samaan kuvaan, eikä tarvitse myöskään miettiä tekijänoikeuksia. Koska asiakkaani myös harrastaa valokuvasta uskon hänen saavan sivustolle sopivan kuvan, ja myöhemmin, jos kuvaa haluaa vaihtaa, ne ovat ainakin samantyylisiä kuvauksellisesti ja samasta maasta. Sovimme asiakkaan kanssa, että katsomme asiakastapaamisellamme logoa ja kuvia tarkemmin. Asiakkaani myös avasi webhotellin, jotta pystyin rakentamaan sivustoa suoraan sinne. Sovimme asiakkaan kanssa, että laitan peitesivun sivuston päälle julkaisuun asti. 3 TOTEUTUS 3.1 WEBHOTELLI JA DOMAIN Suosittelin asiakastani ottamaan webhotellin webbinen.net:stä, koska olen kuullut käyttäjiltä hyviä kokemuksia siitä. Webbisellä on myös edullinen hinta, joten asiakkaaltani ei mene runsaasti kuluja sivuston ylläpitoon. Laitoin asiakkaalleni ohjeet sähköpostilla, miten hän webhotellin tilaa itselleen ja minkä webhotelli vaihtoehdoista. Asiakkaani tilasi webhotellin ja domainin itselleen kolmeksi vuodeksi eteenpäin. Osoitteeksi tuli yrityksen nimi beyourself.fi.
10 3.2 PEITESIVU Asiakkaani peitesivu on sivustolla aika pitkään ja mahdollisesti ennen sivuston julkaisua hän jo markkinoi yritystään. Ajattelin, että sivulla voisi olla kuva, kun siellä olisi jotain muutakin kuin vain tekstiä. Joten tein Google Web Designerilla animaation vaihtoehdoksi asiakkaalleni. Tein pienen luonnoksen ennen kuin aloin tekemään mitään, koska julkaisun jälkeen ei työtä voi enää Google Web Designerissa muokata (Kuva 9). Tein pohjasta 300 pikseliä leveän, jotta se näkyisi mahdollisimman monella puhelimellakin oikein. Kuva 9 3.3 WORDPRESS Toteutin sivuston Wordpressillä. Sovimme, että ennen kunnon asiakastapaamistamme laitan sivuston jo johonkin kuntoon palvelimelle. Aluksi katselin eri teemoja, mutta mitään täysin sopivaa en löytänyt, vaikka mielestäni sivun malli on aika yleinen. Päädyin lopulta Wordpressin omaan teemaan Twenty Thirteen, koska se oli yksinkertainen ja helppo muokata. Asiakkaalleni en näyttänyt eri teemavaihtoehtoja, koska ulkoasusta oli tarkka suunnitelma. Tein teemalle lap-
11 siteeman, jotta jatkossa sivuston muokkaukset löytyisivät helpommin, eikä tarvitse etsiä alkuperäisestä tyylitiedostosta. Ensin laitoin sivustolle kuvan, jonka olin luvallisesti netistä ottanut. Asiakkaani ehti laittamaan minulle vielä ennen tapaamistamme sähköpostilla kuvan, jota aikoi käyttää käyntikortissaan, joten vaihdoin vielä ennen tapaamistamme hänen ottamansa kuvan netistä otetun tilalle (Kuva 10). Kuva 10 Koska asiakkaani oli laittanut minulle käyntikorttiin tarkoitetun kuvan, tein hänelle vielä nopeasti kaksi luonnosta käyntikortin ulkoasusta Scribuksella (Kuva 11, Kuva 12 ). Kuva 11 Kuva 12
12 3.4 ASIAKASTAPAAMINEN JA MUOKKAUKSET Asiakastapaamisella näytin asiakkaalle peitesivua ja hän halusi käyttää sitä. Näytin asiakkaalle myös sivuston ja miten sivusto menee eri resoluutioilla käyttäen Mozzila Firefoxin Responsive Design View:tä. Asiakkaani tykkäsi sivustosta ja leveys oli hänen mielestään sopiva. Kokonaan vielä responsiivisuus ei bannerissa toiminut, mutta sen verran, että asiakkaani sai käsityksen minkä kokoisena sivusto eri näytöillä näyttää. Bannerin kuva oli muuttunut ihan eri sävyiseksi, mitä alkuperäisessä luonnoksessa oli, eikä kummankaan asiakkaan ja minun mielestä yrityksen nimi enää sopinut mustalle pohjalle. Joten kokeilin valkoista mustalla tekstillä ja se sopi paremmin. Asiakkaani piti fontista jota olin luonnoksissa käyttänyt eikä halunnut enää vaihtaa sitä itse kirjoittamaansa tekstiin. Näytin asiakkaalleni käyntikorttimalleja ja hän piti toisesta vaihtoehdosta (Kuva 12) ja ensimmäisen tekstipuolesta (Kuva 11). Hän aikoi painattaa ne Vistaprint.fi:ssä. Sovimme, että teen hänelle valmiiksi sopivan kokoiseksi kuvan tekstillä ja laitan hänelle sähköpostiin. Hän tekee käyntikortin tekstipuolen itse Vistaprintistä valitsemallaan tekstillä, koska käyntikorttiin tulevat tiedot eivät ole vielä täysin varmat. Asiakkaani teki myös asiakastapaamisella itselleen gmailiin sähköpostin ja bloggeriin blogin, joka on tarkoitus linkittää kotisivulle. Asiakkaani ei halunnut käyttää webbisen tarjoamaa sähköpostia, koska piti gmailia helpompana ratkaisuna. Blogin teossa autoin hieman ja laitoin sinne linkin kotisivulle, mutta muuten asiakas muokkasi itse blogin ulkoasusta mieluisan. Koska asiakas tykästyi käyntikorttiin, jossa teksti on vasemmalla puolella ja myös blogi tarvitsi bannerin. Ehdotin, että teen bannerin, jossa teksti on samassa kohtaa ja vaihtaisimme myös tämän sivustolle, jotta kaikissa on sama tyyli. Tämä kävi asiakkaalle ja samalla hän sanoi, ettei halua enää vaihtuvaa kuvaa etusivulle vaan kuvia olisi vain yksi ja sama kuva olisi joka sivulla.
13 Mietimme asiakkaan kanssa vielä tunnuslausetta ja päädyimme vaihtamaan sen Matalan kynnyksen apua elämän haasteisiin, koska se tiivistää hyvin yrityksen tarkoituksen yhteen lauseeseen. Suosittelin asiakastani myös tekemään yritykselleen Instagram-tilin, koska hän tykkää kuvata ja palveluun on helppo ja nopea ladata vaikka fiiliskuvia. Olen myös itse sitä mieltä, että sitä parempi mitä enemmän yritys on asiakkaiden läheisyydessä ja tavoitettavissa. Sekä koko ajan yhä enemmän yritykset alkavat markkinoida itseään myös Instagrammissa. Asiakkaani oli maininnut jo alussa, ettei halua päivittää sivustoon mitään suurempaa itse. Tein hänelle toiset tunnukset, joilla pääsee katsomaan sivustoa ilman, että voi saada ulkoasua sekaisin. Tunnuksilla hän voi myös päivittää sivujen tekstejä tarvittaessa. Kävin asiakkaan kanssa läpi, miten sivustolle kirjaudutaan ja miten hän saa päivitettyä tekstejä. Ohjeetkin lupasin asiakkaalleni tehdä tarpeen vaatiessa. Näin aluksi asiakkaasta ainakin tuntui siltä, ettei tarvitsisi ohjeita sen enempää mitä yhdessä kävimme läpi. 3.5 KÄYNTIKORTTI Kävin katsomassa käyntikortin tiedostomuoto vaatimuksia Vistaprintin sivuilta. Suositelluissa tiedostomuodoissa oli Adoben ohjelmien työtiedostomuotoja. Sivuilta sai ladattua mallipohjan, jossa oli merkittynä marginaalit. Latasin psd-tiedostona mallipohjan koneelleni ja tein Photoshopissa sisällön korttiin sopivaksi. Vaihdoin kuvan profiilin cmyk:ksi ja muokkasin hieman kuvan kokoa. Logo minulla oli AItiedostomuotona, joten käytin tätä käyntikortissa.
14 3.6 MUOKKAUKSET Asiakastapaamisen jälkeen vielä hieman viimeistelin sivustoa. Koska teksti oli nyt bannerikuvassa kiinni, minun piti tehdä kuvasta eri versioita, jotta se skaalautuu pienemmilläkin päätelaitteilla hyvin. Tein kuvasta neljä eri versiota ja lisäsin ne koodiin. Tein asiakkaalleni vielä facebookin profiilikuvaan sopivan kokoisen logon. Laitoin sivustolle vielä Google Analysticsin, metatagit ja avainsanat. 3.7 SUOJAUS Päivitin sivuston kaikki lisäosat uusimpiin, jotta sivustolla ei olisi rikkinäisiä koodeja. Sivustolla on myös käytössä Loginizer-lisäosa, joka estää kirjautumisen samalta koneelta moneen kertaan jos salasanaa laitetaan väärin. Suojasin vielä wp-config-tiedoston.htaccesilla. 3.8 VALMIS SIVUSTO Oletus ulkoasu
Ulkoasu 930 px, 645 PX, 359 px ja värikartta 15
16 4 TESTAUS 4.1 KÄYTETTÄVYYS JA HAKUKONEYSTÄVÄLLISYYS Sivusto on käytettävyydeltään yksinkertainen, eikä sivustolla ole mitään ylimääräistä. Yhteistyökumppanit sijoitin footeriin, koska siitä ei tiedä minkä näköisiä ja värisiä logoja yhteistyökumppaneilla on. Näin ne eivät hyppää heti näkyville ja tee sivustosta sekavan näköistä. Testasin sivuston värit Mozzila Firefoxin WCAG Contrast Checkerillä. Sivustolla tuli virheitä yhteystyökumppaneiden kuvista ja footerissa olevasta tekstistä. Yhteistyökumppanien kuvat sivustolla ovat tällä hetkellä vain esimerkkeinä ja footerin tekstikin on tarkoituksella vähän vaaleampi, jotta se sulautuu taustaan. Yhteystiedot kuitenkin löytyvät myös ota yhteyttä sivulta. Testasin sivuston vielä eri värisokeuksilla ja sivusto toimi hyvin. Bannerin kuvasta huomasi parhaiten sävy eroja, muuten sivustolla ei oikein mitään sävyjä olekaan. Tietenkään lisäosaan ei voi täysin luottaa, mutta se antaa edes vähän esimerkkiä millaiselta sivut näyttävät. Sivuston kuvista löytyy myös alt-tekstit, näin sokeat saavat tiedon, mitä kuvassa on. Testasin sivuston vielä seotesti.dagmar.fi:ssä, josta näkee sivuston hakukoneystävällisyyden. Sivustolla oli aika hyvät pisteet, mitkä kasvavat kun sivustolle tulee oikeaa tekstiä. 4.2 VALIDOINTI, SELAIMET JA LAITTEET Validoin sivut validator.w3.org:ssa. Sivustolla oli virheitä ja parhaani mukaan niitä korjailin. Vaihdoin sosiaalisen media painikkeiden lisäosankin, koska edellinen antoi liian paljon virheitä. Myös blogin linkit-
17 täminen uudelle välilehdelle aiheutti virheen. Sivusto toimii muuten hyvin. Testasin sivuston eri selaimilla, laitteilla, sekä internetissä toimivalla quirktools.com:ssa. Quirktoolsissa huomasin, että logo ei näy pienillä resoluutioilla kokonaan. Kerroin tämän asiakkaalle ja hänen mielestään se oli ihan hyvä, koska yrityksen nimi jää kuitenkin kokonaan näkyville. Enkä usko, että käyttäjillä enää on hirveästi käytössään laitteita joissa on kovin pienet resoluutiot näytöillä. Kaikilla testatuilla laitteilla sivusto toimi muuten oikein. Selaimet: Mozilla Firefox 44.0.2 Chrome 48.0.2564.116 m Internet Explorer 11 Microsoft Edge 25.10586.0.0 Puhelimet: Sony Z3 Xperia Nokia Lumia 520 Nokia Lumia 630 Huawei Honor 7 Motorola Moto g Tabletit: Ipad air
18 5 YLLÄPITO 5.1 PÄIVITYS Vaikka asiakas ei mielestään tarvinnut ohjeita tekstien päivitykseen, tein ne hänelle varmuuden vuoksi. Tällä hetkellä asiakas on sitä mieltä, että suuremmat päivitykset sivustolle tulisin tekemään minä, joten yhteistyömme jatkuu myöhemminkin. Olen myös sopinut asiakkaan kanssa, että ainakin sivuston julkaisuun asti olen aktiivisesti yhteydessä asiakkaaseen ja pidämme aikataulusta kiinni. 6 ARVIOINTI 6.1 ITSEARVIOINTI Sivusto on tällä hetkellä vielä jonkin verran kesken, lähinnä linkitykset ja sisällöt puuttuvat. Ulkoasu kuitenkin on sivustolla täysin valmis. Mielestäni sivuston teossa onnistuin ihan hyvin ja kuuntelin asiakkaan toiveita. Paremmalta sivusto tietenkin näyttäisi, jos siellä olisi oikeat tekstit ja yhteistyökumppaneissakin olisi oikeat kuvat, mutta nämä tulevat vasta myöhemmin. Myös sosiaalisen median linkitykset sivustolla eivät vielä toimi, koska asiakkaani ei ole kerinnyt luomaan tilejä. Minä en tilejä yksin pystynyt luomaan, koska niissä tarvitaan liikaa asiakkaan tietoja ja facebook-sivun hän tekee omaan profiiliinsa. Voi olla, että kesällä menen auttamaan asiakastani näiden teossa. Työssä oli kiva päästä auttamaan kokonaan uutta yritystä, suunnittelemalla mitä kaikkea ja missä olisi hyvä markkinoida yritystään. Asiakkaani oli aktiivinen vastaamaan sähköposteihin ja näin saimme pysyttyä hyvin aikataulussa, vaikka näimme vain kerran kunnolla ja
19 asiakkaallani oli paljon muita kiireitä. Yhteistyömme tulee jatkumaan näillä näkymin myös tulevaisuudessa ja odotan myös sitä, että saamme sivuston täysin valmiiksi ja julkaisemme sen. 6.2 ASIAKKAAN ARVIOINTI Hei, Toivoin alkukeväästä apua nettisivujen rakentamiseen Eurajoen Kristillisen Opiston Webdesigner-linjalta ja aikalailla heti luokalta erottui Emilia, joka otti aktiivisen ja innostuneen tekijän roolin. Aloitimme yhteistyön, jonka tuloksena Emilia on - ei pelkästään rakentanut tulevalle yritykselleni nettisivut, vaan myös toiminut markkinointikanavieni ulkoasun, värimaailman, ilmeen ja kokonaisuuden hahmottamisen suunnittelijana. Nöyrästi, asiakaspalveluasenteella ja ammattimaisesti hän esitiedusteluillaan hahmotti hakemaani tyyliä ja henkeä- tämän jälkeen etsien tietoa ja esimerkkejä, josta lähti rakentamaan nettisivuja (Emilia on ohjannut minua myös nettitilan hankinnassa). Nettisivujen rakenteen, yhtenäisen ilmeen sivuille, blogille, käyntikortille, fb-sivuilleni suunniteltuaan ja pohjat luotuaan hän on aktiivisesti tiedustellut näkemyksiäni ja ottanut ne huomioon. Se, mitä arvostan paljon- hän ei ole odottanut minun tietävän kyseisistä asioista mitään, vaan on jaksanut vääntää rautalangasta kaikkeen vastaukset ja ratkaisut. Hän on rakentanut tyhjästä juuri sellaisen kokonaisuuden, mitä toivoin- auttanut itseänikin palvelukokonaisuuden hahmotuksessa sekä
20 hoitanut toimivaan kuntoon tunnuksineen ja salasanoineen kaikki toimiviksi kokonaisuuksiksi. Näen Emilialla pitkän tulevaisuuden yrittäjien tukena, koska hänellä on selkeä kyky keskittyä omaan osaamisalueeseensa, poimia tarvittavat tiedot kärsivällisestiasiakkaalta ja tämän jälkeen toteuttaa suunnitelma käytäntöön. Ystävällisin terveisin, Piia Ristilä