Asiakas ja tavoite Heikieli on vuonna 2015 perustettu yhden hengen asiantuntijayritys, joka tarjoaa käännös- ja oikolukupalveluita englannista ja saksasta suomeksi. Freelance-kääntäjiä on Suomessa paljon, mutta harvalla heistä on omat verkkosivut. Yrityksensä ja palveluidensa näkyvyyden parantamiseksi asiakkaani toivoi yksinkertaista, käyntikorttimaista sivustoa, josta löytyisivät selkeästi palvelut ja yhteystiedot. Koska kyseessä on käännösalan yritys, sivusto piti luonnollisestikin toteuttaa monikielisenä; tässä tapauksessa suomeksi, englanniksi ja saksaksi. Muita toiveita esimerkiksi sivuston rakenteen suhteen asiakkaallani ei ollut, joten sain vapaat kädet suunnitteluvaiheessa. Yhteydenpito oli sujuvaa, sillä asiakkaani oli entuudestaan tuttu; työskentelimme aikoinaan samassa käännöstoimistossa. Koska hän asuu tällä hetkellä toisella paikkakunnalla, yhteydenpito sujui pääasiassa sähköpostin ja Facebookin välityksellä. Tekninen toteutus Julkaisujärjestelmä vs. HTML- ja CSS-koodaus Koska sivustosta oli tarkoitus tehdä mahdollisimman yksinkertainen ja käyntikorttimainen ja koska sivustoa ei tarvitsisi päivittää aktiivisesti, päädyin käyttämään julkaisujärjestelmän sijasta HTML5-templaattia. Selailtuani useita eri vaihtoehtoja valitsin maksuttoman Strata-nimisen yhden sivun responsiivisen templaatin: http://html5up.net/strata. Alun perin se on suunniteltu portfoliota varten, mutta rakenteeltaan se sopi myös asiakkaani tarpeisiin. Ehdotin templaattia asiakkaalleni ja kerroin, millaisia ideoita minulla oli, ja hän hyväksyi ehdotukseni. Työskentely lähti liikkeelle templaatin sisältöön tutustumisella ja helppojen pääelementtien muokkaamisella. Hiljalleen karsin sisältöä poistamalla valokuville varatut paikat ja muut ylimääräiset kohdat, joille asiakkaallani ei olisi käyttöä. Lopulta jäljelle jäivät peruselementit: vasemmanpuoleinen sivupalkki ja päävalikot. Responsiivisuus Templaatin valinnassa tärkeä kriteeri oli responsiivisuus. Myös perusrakenteen oli oltava niin yksinkertainen, että se olisi tyylikäs ja helppokäyttöinen myös mobiililaitteissa. Kun Strata-templaatti avataan mobiililaitteessa, sivupalkki siirtyy
sivun yläosaan ja sivun alareunaan ilmestyy alatunnistepalkki. Myös päävalikot sijoittuvat allekkain. Kuva 1: Screenshot älypuhelimella avautuvasta sivusta (iphone 5). Tabletissa sivu avautuu siten, että päävalikot ovat osittain rinnakkain. Sivupalkki näkyy samalla tavalla kuin perinteisessä selainnäkymässä. Templaatti osoittautui toimivaksi myös mobiililaitteissa; siirtyminen on helppoa riittävän suurten valikkojen ansiosta, ja luettavuus säilyy, koska itse tekstisisältöä on melko vähän. Logo ja värimaailma Logon suunnittelu lähti liikkeelle asiakkaani pitämästä fontista. Suunnittelin Photoshopilla muutaman erilaisen logon, joista asiakkaani valitsi kaikista yksinkertaisemman version, jossa on ainoastaan yrityksen nimi: 2
Kuva 2: Lopullinen logo. Myös vasemmanpuoleinen sivupalkki on suunniteltu Photoshopilla. Värimaailmaksi asiakkaani toivoi turkoosia, sinistä tai merensinistä. Sen pohjalta tein liukuväripalkin, johon sivun muut värit sovitettiin. Alun perin suunnittelin sivupalkin siten, että myös logo oli osa sitä. Tämä kuitenkin osoittautui responsiivisuuden kannalta hieman hankalaksi, joten päädyin käyttämään kahta erillistä kuvaa. Kuva 3: Sivupalkki. Logon ja värimaailman pohjalta loin myös favicon-kuvakkeen (16x16 pikseliä) favicon.cc-generaattorilla. 3
Kuva 4: Favicon-kuvake suurennettuna (300x300 pikseliä). Tekstisisältö ja kuvat Sivun tekstisisältö suunniteltiin yhdessä asiakkaan kanssa. Annoin joitakin ehdotuksia yleisistä osioista, joiden pohjalta asiakkaani kirjoitti varsinaiset tekstit. Ne haluttiin pitää lyhyinä ja selkeinä, koska tarkoituksena oli luoda käyntikorttimainen sivu. CV ja referenssit -kohdassa on linkki asiakkaani LinkedIn-profiiliin, josta löytyy tarkempia tietoja. Sivu näytti hieman tyhjältä ilman kuvia, joten päätimme lisätä Suomen kääntäjien ja tulkkien liiton sekä Käännösalan asiantuntijat KAJ ry:n logot, jotka toimivat myös linkkeinä kunkin tahon verkkosivuille. Ehdotin myös, että lisäisimme sivulle asiakkaani kuvan, joka tekisi sivusta jollain tavalla henkilökohtaisemman. Henkilökuva näkyy kuitenkin ainoastaan silloin, kun sivu avataan tietokoneella. Päädyin tähän ratkaisuun siksi, että sivupalkki, johon kuva on lisätty, siirtyy mobiililaitteissa sivun yläosaan, ja kuva teki siitä hieman ahtaan näköisen. Loppujen lopuksi mobiiliversioiden varsinainen sisältö on mielestäni tärkeämpi kuin kuvat. Navigoinnin helpottamiseksi Käännökset ja oikoluvut -osion sekä CV ja referenssit -osion loppuun oikealle puolelle lisättiin nuolikuvakkeet, joita napsauttamalla/napauttamalla pääsee siirtymään takaisin sivun alkuun. Seuranta ja loppuarviointi Google Analytics Omat kommentit 4
Ensimmäisen harjoitustyön toteuttaminen HTML-templaatin avulla oli kieltämättä haastavaa mutta samalla myös hyvinkin opettavaista. Ongelmanratkaisukykyni kärsivällisyydestä puhumattakaan kehittyi ja opin tulkitsemaan muiden tekemää koodia ja muokkaamaan sitä haluamallani tavalla. Jatkossa aion tutkia templaatin sisällön tarkemmin ennen työskentelyn aloittamista, sillä vaikka templaatti oli rakenteeltaan ja ulkoasultaan yksinkertainen, se sisälsi paljon ylimääräistä koodia, jonka tulkitsemiseen tarvitsin ajoittain alan ammattilaisen neuvoja. CSS:ssä oli myös käytetty em-yksikköä, joka oli itselleni vieras. Kokonaisuutena sivusto on mielestäni onnistunut ja täyttää sille asetetut tavoitteet. Myös asiakkaani oli tyytyväinen lopputulokseen. 5