PROJEKTIDOKUMENTAATIO RITVAN TOIVEMATKAT

PROJEKTIDOKUMENTAATIO RITVAN TOIVEMATKAT Emilia Ketola Eurajoen kristillinen opisto Avat 2015-2016

1 Kartoitus... 3 1.1 Asiakas ja sivujen tarve... 3 1.2 Yhteydenotto asiakkaaseen... 3 1.3 Aikataulu ja hinta-arvio... 4 2 Suunnittelu... 5 2.1 Mindmap ja taitto... 5 2.2 Luonnokset... 7 2.3 Banneri... 10 2.4 Asiakastapaaminen ja sivujen ulkonäön valinta... 10 2.5 Sisältö... 11 3 Tuotanto... 11 3.1 HTML ja CSS... 11 3.2 Banneri... 12 3.3 Muutokset... 12 3.4 Käytettävyys... 15 3.5 Esite... 15 4 Testaus ja julkaisu... 17 4.1 Webhotelli ja domain... 17 4.2 Validointi ja väritestaukset... 17 4.3 Selaimet ja laitteet... 18 5 Ylläpito... 19 5.1 Päivitys... 19 6 Arviointi... 19 6.1 Itsearviointi... 19 6.2 Asiakkaan arviointi... 20

3 1 KARTOITUS 1.1 ASIAKAS JA SIVUJEN TARVE Asiakkaanani on Ritvan Toivematkat -toiminta, jota ylläpitää tamperelainen eläkeläinen. Hän järjestää matkoja muun muassa teattereihin, museoihin ja muihin kulttuurikohteisiin. Matkoille osallistuvat ovat suurimmaksi osaksi eläkeläisiä, joita kulttuuri kiinnostaa. Asiakkailla on myös mahdollisuus ehdottaa oman kiinnostuksensa mukaan minne päin Suomea matkoja järjestetään. Matkojen mainostaminen on tähän asti pääasiassa toiminut lehtiilmoitusten kautta ja asiakkaille on jäänyt epäselväksi, että hekin voisivat osallistua matkojen sisällön suunnitteluun. Nettisivut halutaan, jotta asiakkaat löytäisivät ja saisivat tietoa toiminnasta paremmin. Myös asiakkaani ystävät ovat kannustaneet toiminnan esiintuomiseen internetissä paremman näkyvyyden aikaansaamiseksi. 1.2 YHTEYDENOTTO ASIAKKAASEEN Olin puhelimitse yhteydessä asiakkaaseen, kyselin mitä sivuilta pitäisi löytyä ja olisiko hänellä ulkonäköön liittyviä toiveita. Asiakkaani ei oikein osannut sanoa, mitä kaikkea sivuilleen haluaisi, eikä erityisemmin ollut ulkonäöstäkään toiveita. Kysyin vielä, olisiko joitain tiettyjä värejä, mistä hän pitäisi. Vastaukseksi sain kulta, vaaleanpunainen, vaaleanruskea, ruskea ja vähän kaikenlaiset. Sovimme asiakkaan kanssa, että ennen tapaamista laitan hänelle sähköpostiin kaksi

4 taittoehdotelmaa sivuja varten. Taittopäätöksen jälkeen, tein hänelle värimalleja valmiiksi tapaamiseemme. Suosittelin asiakastani myös selaamaan muiden nettisivuja ja kertomaan, jos hänelle tulee mieleen jotain, mitä omille sivuilleen haluaisi. 1.3 AIKATAULU JA HINTA-ARVIO Tein asiakkaalle hinta-arvion siitä, paljonko työ tulisi kustantamaan. Asiakkaalla ei ollut julkaisuajankohdan suhteen toiveita, niinpä ehdotin alkuvuotta, jolloin voisimme ostaa webhotellitilan ja julkaista sivut. Sovimme sivujen julkaisuajankohdaksi 19.2.2016 (Kuva 1). Kartoitus Suunnittelu Asiakastapaaminen Toteutus Sisältö/muokkaukset Testaus Julkaisu Kuva 1 Tunnit Tuntihinta 70,00 0,5 35,00 2 140,00 1,5 105,00 2 140,00 1 70,00 0,5 35,00 1,5 105,00 9 630,00 24 % 151,20 ALV Yhteensä 781,20

5 2 SUUNNITTELU 2.1 MINDMAP JA TAITTO Lähdin liikkeelle ajatuskartasta, johon keräsin otsikoita, joita mielestäni sivuilta pitäisi löytyä, sekä tekemällä taittoehdotukset asiakkaalle (Kuva 2, Kuva 3, Kuva 4). Tein kaksi hieman erilaista taittoa, jotta asiakkaalla olisi valinnanvaraa. Suosittelin asiakkaalle käytettäväksi kuitenkin taittoa, jossa navigointi on sivun vasemmalla puolella, sillä ulkonäöllisesti se sopisi mielestäni paremmin näille sivuille. Asiakas myös päätyi tähän. Laitoin hänelle myös mindmapin, jotta hän pystyisi lisäämään siihen vielä mieleen tulevia asioita. Kuva 2

6 Kuva 3 Kuva 4

7 2.2 LUONNOKSET Asiakkaallani ei ollut mindmapiin lisättävää, joten tein tämän pohjalta sivuston rakennekartan (Kuva 5). Galleriaa asiakas ei kuitenkaan halunnut, koska hän ei kuvaa matkoillaan, eikä omista digikameraa, joten jätin gallerian pois. Mikäli joitain kuvia matkoilta on, ne voi lisätä vaikka Matkat-sivun yhteyteen. Kuva 5 Ulkonäön suunnittelussa otin huomioon, että asiakas ja hänen asiakkaansa eivät välttämättä ole netin suurkuluttajia, joten sivujen pitäisi olla yksinkertaiset, helpot käytettävyydeltään ja lämminhenkiset. Koska kyse on vanhemman ihmisen järjestämästä toiminnasta, on se hyvä viestiä myös sivujen ulkonäössä. Katselin myös samanhenkisiä sivustoja, mutta niitä ei paljoakaan löytynyt. Tein erilaisia ehdotuksia asiakkaalle tapaamistamme varten. Sivun rakenteen on tarkoitus olla, joka sivulla sama. Niinpä tein mallit pelkästään yhdestä sivusta (Kuva 6, Kuva 7, Kuva 8, Kuva 9).

8 Kuva 6 Kuva 7

9 Kuva 8 Kuva 9

10 2.3 BANNERI Luonnoksissa oli jo joitain ehdotuksia bannerista, mutta tein vielä erikseen pari ehdotelmaa asiakastapaamiseen (Kuva 10). Kuva 10 2.4 ASIAKASTAPAAMINEN JA SIVUJEN ULKONÄÖN VALINTA Asiakastapaamisella näytin asiakkaalle ehdotuksiani ulkonäön ja bannerin suhteen. Asiakas päätyi ulkonäköön, joka oli valkoinen pinkeillä yksityiskohdilla (Kuva 9). Bannereista hän tykästyi kukallisiin ja halusi pinkkejä tai pinkin kukan (Kuva 10). Lopullista päätöstä asiakas ei kuitenkaan osannut tehdä kahden vaihtoehdon välillä. Sovimme asiakkaan kanssa, että teen myös mustalla kukalla olevan bannerin pinkillä kukalla ja näistä hän sitten valitsee mieluisamman. Ehdotin asiakkaalleni vielä, että tekisin sivustosta responsiivisen, jotta sivustoa pystyy katsomaan hyvin erikokoisilla päätelaitteilla. Asiakkaani oli sitä mieltä, että teen, mikä on parasta, koska hänellä ei ollut oikein ymmärrystä eri laitteista tai niiden vaatimuksista.

11 2.5 SISÄLTÖ Sivuston sisällön toteutimme asiakkaan kanssa yhteistyönä. Haastattelin asiakasta tapaamisellamme ja tein suoraan alustavan pohjan mallisivulle. Asiakastapaamisemme jälkeen muokkasin vielä tekstiosioita sivustolle sopivammaksi. Matkat- ja info-sivuille on tarkoitus lisätä kuvia heti, kun asiakkaani toimittaa niitä minulle. Kuvat tulevat olemaan joko asiakkaan itse ottamia tai hänen asiakkaidensa, jotka antavat luvan kuvien julkaisuun. Ilmoittaudu mukaan -sivulle on myös tulossa toiminnan pitäjästä, eli asiakkaastani kuva, jonka hän toimittaa minulle. 3 TUOTANTO 3.1 HTML JA CSS Koodasin sivuston HTML5:llä käyttäen Kompozeria. Sivuston kaikkien CSS-tiedostojen tekoon käytin Notepad++:aa. Asiakkaani kertoi tulostavansa usein sivuja netistä, joten kysyin, haluaisiko hän sivuille tulostustyylin, josta olisi poistettu kaikki turha. Asiakkaani halusi tämän, joten tein sivulle vielä myös tulostustyylitiedoston. Tulostustyylistä poistin navigoinnin, oikean palstan ja footerin. Footerin olisi voinut myös pitää tulostustyylissä, koska silloin kaikilta sivuilta olisi saanut yhteystiedot. Asiakkaani kuitenkin halusi, että se otetaan kokonaan pois. Laitoin sivustolle vielä faviconi:ksi kuvan pinkeistä kukista.

12 3.2 BANNERI Lopulta asiakas päätyi valinnoissaan mustaan tekstiin ja pinkkiin kukkaan. Toteutin bannerin sivustolle käyttäen Inkscape- ja Gimpohjelmia. Piirsin ensin Gimp:illä kukat ottamastani kuvasta läpi, jonka jälkeen kirjoitin tekstin Inkscapella, Monotype Corsiva fonttia käyttäen ja tallensin png-tiedostoksi (Kuva 11). Kuva 11 3.3 MUUTOKSET Koodatessa tein vielä bannerin alle reunan yhdistämään sivua asiakkaan luvalla. Laitoin asiakkaalle valmiin ulkoasun näytille. Hän piti sivusta, mutta kysyi, jos voisin kokeilla vielä hieman vaaleampaa vaaleanpunaista joissain kohdissa. Kerroin asiakkaalle, että voimme kokeilla, mutta jotta kontrastieroa saa tarpeeksi pinkkiin tekstiin joutuu sen tekemään aika vaalealla ja silloin taas taustan ja vaaleanpunaisen tekstin ero saattaa olla hyvin pieni. Tein mallin asiakkaalle ja kontrastista huolimatta hän halusi käyttää vaaleanpunaista. Laitoin vaaleanpunaista kohtiin, joista mitään tärkeää informaatiota ei jää näkemättä, sekä navigoinnin open-luokkaan, jotta käyttäjät ainakin näkevät selvästi millä sivulla ovat (Kuva 12). Pyysin asiakastani myös katsomaan sivuston responsiivisuuden ja tulostusversion. Näistä asiakas piti, eikä muutoksia tarvinnut tehdä (Kuva 13).

Kuva 12 13

Kuva 13 14

15 3.4 KÄYTETTÄVYYS Sivuston suunnittelussa pidin mielessäni kohderyhmän ja pyrin tekemään käytettävyydeltä helpon sivuston kauniilla ulkonäöllä. Sivustolla on käytetty pelkkää HTML:ää ja CSS:ää, joten selaimien perusasetuksien ei pitäisi tulla toiminnan esteeksi. Sivulla on mielestäni helppo liikkua uudenkin käyttäjän, koska mitään turhia mainoksia tai linkkejä eri paikkoihin ei ole. Tekstien fontti on päätteetöntä ja näin sopii nettiin luettavaksi. Navigoinnissa käytin hieman koristeellisempaa fonttia, mutta mielestäni fontista saa hyvin selvää. Kontrastiongelmia hieman sivulla on, mutta asiakas piti väristä. Jos värin kanssa tulee ongelmia, niin asiakkaan kanssa sovimme, että on yhteydessä minuun. Uskon esimerkiksi näkövammaisten pärjäävän sivulla, koska siellä ei juuri mitään erikoista ole. Kuvat saadessani laitan kuviin alttekstit, jotta näkövammaiset tietävät, mitä kuvassa on. 3.5 ESITE Asiakkaani pyysi minua vielä suunnittelemaan esitteen ulkonäön, johon mahtuisi vähän jotain tietoa ja olisi yhteystiedot. Tein esitteen Indesign-ohjelmaa käyttäen. Suunnittelin taiton niin, että esite toimisi samalla käyntikorttina. Asiakas ei vielä ollut varma minkä tyylistä tekstiä esitteeseen haluaa, joten tein suunnitelman väärillä kuvilla ja teksteillä. Muutin kuvan cmyk:ksi ja vaihdoin pikselimäärän kolmeensataan, koska painotalot tätä vaativat (Kuva 14). Esite jäi minun osaltani ulkonäön suunnitteluun. Asiakkaani hoitaa esitteeseen oikeat tiedot yhdessä tuttavansa kanssa, joka myös hoitaa mahdollisten esitteiden tulostuksen.

Kuva 14 16

17 4 TESTAUS JA JULKAISU 4.1 WEBHOTELLI JA DOMAIN Asiakas ei halunnut suuria kustannuksia webhotellista, joten etsin halpoja vaihtoehtoja. Mahdollista olisi ollut käyttää myös ilmaisia palveluita, mutta suosittelin asiakkaan ottamaan kuitenkin maksullisen, koska ne oletettavasti toimivat paremmin ja eivät ole kuitenkaan kovin kalliita. Laitoin asiakkaan sivut Avaruus.net-palvelimelle, koska sieltä riitti edullisin paketti asiakkaan tarpeisiin hyvin. Domainia ei tarvinnut kauaa pohtia, sillä asiakas ja minä olimme sitä mieltä, että ritvantoivematkat.fi on hyvä. Tarkistimme nimen saatavuuden ja ostimme sen webhotellin kautta. Domain on hieman pitkä, mutta uskon sen olevan toimiva. Näin asiakkaiden ei tarvitse miettiä millä nimellä sivun löytäisi, vaan se on sama kuin palvelun nimi. 4.2 VALIDOINTI JA VÄRITESTAUKSET Validoin HTML- ja CSS-sivut W3C-validaattoreilla. Kaikki sivut menivät validaattoreista läpi. Värien testaukseen käytin Firefoxin lisäosaa WCAG Contrast Checker:iä, joka antoikin virheen juuri vaaleanpunaisten ja valkoisen pohjan kontrastista. Käytin samaa työkalua myös värisokeuksien testaukseen. Sivustolla oli hyvin vähän erisävyjä ja suurimmaksi osaksi sivu pysyi selkeänä kaikilla asteilla. Huonoimmin sivu toimii mahdollisesti vihersokeilla. Vaaleanpunainen open-luokka tuo kuitenkin heidänkin sävyillä lisäkontrastia valikkoon, joten he erottavat millä sivulla ovat.

18 4.3 SELAIMET JA LAITTEET Nettisivujen toimivuuden testasin eri selaimilla. Kaikissa selaimissa sivut toimivat hyvin. Vanhoilla selainversioilla en sivuja testannut, koska pääsääntöisesti selaimet päivittyvät uusimpiin itsestään. Selaimet: Mozilla Firefox 44.0.2, Chrome 48.0.2564.116 m, Internet Explorer 11, Microsoft Edge 25.10586.0.0 ja Opera 35.0. Sivujen responsiivisuuden testasin erikokoisilla ja merkkisillä päätelaitteilla, sekä netissä toimivalla www.quirktools.com:ssa. Responsiivisuus toimi testatuissa laitteissa hyvin. Ensin etusivun Ritva fontin näkyvyyden kanssa oli ongelmia, mutta latasin uuden fontin ja laitoin sen sivulle @font-facella. Tämän jälkeen fontti toimi hyvin eri päätelaitteilla. Nimikirjoituksen olisi voinut laittaa sivulle myös kuvana, asiakkaan omalla allekirjoituksella, mutta hän piti enemmän valmiista fontista. Tabletit: Ipad Air Puhelimet: Sony Z3, Sony Z2, Nokia Lumia 520, Microsoft Lumia 630, Huawei Honor 6 ja Huawei Honor 7.

19 5 YLLÄPITO 5.1 PÄIVITYS Asiakkaan kanssa kävimme läpi kohtia, mitä sivuille pääsääntöisesti pitäisi päivittää. Lopulta päädyimme asiakkaan kanssa siihen, että päivitys jää ainakin aluksi minulle. Jos asiakkaani kuitenkin innostuu itse päivittämään sivua, teen hänelle kirjalliset ohjeet. Laitoin asiakkaan kanssa minut myös webhotelliin tekniseksi tueksi. 6 ARVIOINTI 6.1 ITSEARVIOINTI Sivuston teossa kaikki sujui suhteellisen hyvin, asiakkaan kanssa saimme hyvin sovittua tapaamiset ja sivun julkaisu onnistui sovitusti. Sivusto oli hyvin pieni, joten sen olisi saanut julkaistua aikaisemminkin, mutta aikataulujen takia päädyimme helmikuuhun. Itse olisin ehkä pitänyt sivuston yksityiskohdat samalla pinkillä, koska se teki mielestäni sivusta raikkaamman näköisen. Mutta vaaleanpunaisena sivu ulkonäöllisesti on hieman hillitympi ja sopii ehkä paremmin vanhemmalle henkilölle. Kehitettävää tässä työssä minulla olisi aikataulutus. Sain tehtyä hommat ajallaan, mutta olisin saanut sivun tehtyä myös huomattavasti nopeamminkin valmiiksi. Jatkossa tuon myös esille heti ensimmäisellä asiakastapaamisella, sivun eri tyylimahdollisuuksia muun muassa responsiivisuus.

20 6.2 ASIAKKAAN ARVIOINTI Emilia toimi tämän hankkeen aikana aktiivisesti ja nosti kiitettävästi esiin huomioitavia seikkoja, joita sivujen tekoon vaaditaan. Erityisesti pidin hyvänä erilaisten mahdollisuuksien ja vaihtoehtojen esittelyä ja selkeitä perusteluja valintani tueksi. Nyt sivut näyttävät jopa paremmilta kuin alkumetreillä uskoin saatavan aikaan. Myös ystäväni ovat kehuneet sivujen sisältöä ja ulkoasua. He ovat myös maininneet sivujen olevan omistajansa näköiset hyvän värisuunnittelun ja sommittelun ansiosta. Haluan tässä yhteydessä esittää Emilialle parhaat kiitokset. T. Ritva