Kyhäsin kasaan nettisivut!

Skeittitapuli on YADin, Tampereen Vanhan kirkon ja Pirkanmaan Kaarikoirat ry:n yhteishanke, jonka tavoitteena on lisätä nuorten hyvinvointia skeittauksen avulla. Skeittitapuli sijaitsee Vanhan kirkon kellotapulissa ja on auki kesä-elokuun ajan.

Sain tehtäväksi luoda Skeittitapulille nettisivut ja tässä postauksessa kerron kuinka nettisivu-projekti eteni.

1. Pidimme Skeittitapulin tuottajan kanssa palaverin, jonka aikana kirjasin ylös tuottajan toiveet nettisivujen sisältöjen, visuaalisen ilmeen ja deadlinen suhteen.

2. Hankin ohjaajani kanssa Skeittitapuli.fi -domainin One.com palvelusta.

3. Tutkimme erilaisia WordPress -teemoja tapulin tuottajan kanssa, joista valitsimme parhaiten nettisivun tarkoituksia vastaavan teeman. Siis raikkaan, selkeän ja helposti lähestyttävän.

4. Sopivan teeman löydyttyä latasin sen palvelimelle ja tein tarpeelliset muutokset wp-config -tiedostoon, sekä vaihdoin Wordpressin Salts Key Generatorin avulla "suolaukset". Niiden vaihtaminen auttaa nettisivujen tietoturvaan.

5. Saadessani WordPressin teeman ladattua, teimme ohjaajani kanssa ylläpito-tunnukset minulle, tuottajalle sekä ohjaajalleni Saaralle.

6. Seuraavaksi latasimme WordPressin lisäosan, jonka avulla saimme sivuston Maintanance-tilaan. Sen ollessa käytössä näkymä nettisivuille on seuraavanlainen:

Sivu on siis ikään kuin huoltotilassa, jos sitä yrittää mennä katsomaan. Sivuston valmistuttua tila otetaan pois käytöstä ja näkymän pitäisi olla silloin normaali.

7. Aloin työstämään sivuston ulkoasua, sekä lisäilin uusia ja poistin tarpeettomia lohkoja. Pelkistin sivun ensin mustavalkoiseksi, selkeyttääkseni näkymää, jonka jälkeen lähdin työstämään tuottajan toiveiden mukaista ilmettä muuttamalla värimaailmaa, sekä fontteja.

8. Tutustuin myös "vimpaimiin" joiden avulla sain mm. linkitettyä Skeittitapulin some-tilit sivuston alareunaan.

9. Sivuston identiteetti -osiosta sain lisättyä Skeittitapulin logon ja pikku-ikonin välilehden vasempaan reunaan.

10. Valitsin nettisivuille teemaväriksi oranssin, nettisivujen taustakuvan tehneen graafikon kuvituksen pohjalta. Opin myös käyttämään Oma CSS -toimintoa, jonka avulla pystyin kirjoittamaan koodiin erilaisia muutoksia esimerkiksi fonttikoon suhteen tai lohkojen marginaalien leveyttä muuttaessa. Syksyllä avoimen AMK:in kautta käymästäni koodauskurssista oli tässä kohtaa kyllä hyötyä!

11. Seuraavaksi pääsemmekin fontin valintaan ja sen käyttöön ottamiseen, mikä ei ollut ihan helppo juttu! Kokeilimme yhtä fonttia otsikoihin, mutta se ei ollut ilmeen mukainen, joten tuottaja etsi tilalle sopivamman Adobe Fonts:ista.

Adobe Fontsissa on laaja valikoima erilaisia fontteja.

Sopivan fontin löydyttyä pitää lisätä se ensin Web-projekteihin, kopioida CSS-koodin pätkä ja lisätä se Oma CSS -osioon, josta voi vielä muokata fontin välistystä, paksuutta yms. ominaisuuksia.

   

12. Tuottajan toiveena oli saada Google maps -upotus nettisivuille ja se hoitui yllättävän kivuttomasti kopioimalla Google mapsin oma linkki, jonka siirsin Vimpaimista löytyneeseen HTML-koodi lohkoon. Koodista pystyi myös suoraan muokkaamaan kartan kokoa, joka oli helpotus!

HTML-koodilohko muokkaustilassa.

Google Maps -näkymä valmiilla sivulla.

13. Latasin WordPressiin Jetpack -lisäosan, joka auttaa seuraamaan sivuston tilastotietoja.

14. Tuottaja halusi Instagramin feed -näkymän nettisivuille, joten latasin myös sitä varten lisäosan.

Tältä Instagram feed näyttää nettisivuilla lisäosan kanssa.

15. Sivuston alapalkkeihin tuli yhteystiedot, somekuvakkeet, sekä yhteistyötahojen logot. Logojen asettelun kanssa oli haasteita, joten päädyimme ohjaajani avustuksella lopulta lataamaan lisäosan, jonka avulla saimme logot sijoitettua järkevästi. Logoja klikatessa pääsee kunkin yhteistyötahon nettisivuille.

16. Lisäsin sivun yläreunaan valikon, jonka otsikkoja klikkaamalla sivu ohjaa näkymän tiettyyn kohtaan tekstiä. Tämä vaati Koodieditorissa seikkailemista, otsikkoihin oman ID:n lisäämistä ja lopulta WordPressin Valikot kohtaan URL:n ja linkkitekstin syöttämistä.

17. Viimeisimpinä asioina tein ohjaajani avustuksella hakukone optimointia: lisäsin verkko-osoitteen Google search Console:en, käytin Yoast SEO -lisäosaa, jonka avulla vaihdoin metatekstin, joka tulee näkyviin hakukoneessa tai jakaessa linkin sivustolle esimerkiksi Facebookissa. Lisäsin myös avainfraasin ja tarkastin miltä sivusto näyttää eri laitteilla. Alkuun sivusto oli Google haun toisella haku sivulla, mutta kesän edetessä se kipusi ensimmäiseksi hakutulokseksi!

18. Viimeiset viilaukset tein tuottajan kanssa tsekkaamalla sivun yleisen toimivuuden, vaalentamalla värejä, sekä taustakuvaa, jotta ne olisivat silmälle miellyttävämpiä ja leipäteksti helpommin luettavaa. Myöskin tiivistimme sekä hiomme sivuston tekstejä. Tuottaja antoi kommentteja ja kertoi mielipiteitään sivuston suhteen pitkin projektia, josta oli iso apu.

Tässä linkki valmiille nettisivuille: https://skeittitapuli.fi/

Loppusanat:

En ollut koskaan aikaisemmin tehnyt nettisivuja, joten tämä oli hauska, mielenkiintoinen ja melko stressaavakin projekti! Nettisivuja tehdessä on tärkeää muistaa seurata mobiilinäkymää jatkuvasti muutoksia tehdessä, koska nykyaikana suurin osa verkossa tapahtuvasta liikenteestä tapahtuu mobiililaitteilla.

Näen myös tärkeänä käydä keskustelua nettisivujen tilaajan (tässä tapauksessa Skeittitapulin tuottajan) kanssa verkkosivujen tarpeista, toiveista visuaalisen ilmeen ja toimintojen suhteen. Täytyy myös pitää tilaaja ajan tasalla muutoksista ja kysellä mielipiteitä projektin edetessä, sillä joskus itsestä toimivilta tuntuvat ratkaisut voivat tilaajan mielestä olla huonoja. Kompromissien tekeminen ja valintojen perusteleminen on tärkeä taito, sillä aina tilaajan toiveita ei saa järkevästi toteutettua ja voi joutua keksimään tilalle toisenlaisia ratkaisua.

Saavutettavuus täytyy myös osata huomioida esimerkiksi fontin valinnan ja ja kuvien alt-tekstien kohdalla. Myöskin värit ja tekstien sopiva pituus, sekä selkeys ovat isossa roolissa tässä.

Kokonaisuudessaan tämä oli innostava projekti ja oli hauska päästä hyödyntämään koodauskurssilla oppimiani taitoja!