Kannabishankkeen sivut

SUUNNITTELU

1. Tarjous ja määrittely

Jätin tarjouksen ESR-rahoitteisen Kannabisinterventio nuorille kannabiksen käyttäjille -hankkeen sivuston suunnittelusta 16.4.2018.

Tarjouksen hyväksymisen jälkeen pidimme aloituspalaverin hankkeen yhdyshenkilön ja työkaverini Pasi Vastamäen kanssa. Tapaamisessa kirjasin ylös sivuston määrittelyt. Varasin hostingpalvelulta hankkeen domainin www.kannabishanke.fi. Sovimme, että valmiit sivu siirretään YADin käytössä olevaan palvelintilaan (Xilo).

2. Rakenne ja layout

Seuraavaksi suunnittelin sivuston rakenteen ja layoutin. Hankkeen visuaalisen ilmeen suunnittelisi viestintätoimisto Cocomms, joten layoutia suunnitellessani en lähtenyt pohtimaan sivuston visuaalista ilmettä sen syvällisemmin (tyyli suunnitelmissa on kuitenkin vanhahtavaa, koska toivottiin kasvisto-/opetustaulutyyliä).

Rakenne- ja sisältösuunnitelma

TOTEUTUS

Aloitin rakentamaan sivuja hankkeen hyväksymiä suunnitelmia mukaillen. Valitsin toteutustavaksi single page -layoutin, koska sivusto tulisi olemaan rakenteeltaan suhteellisen tiivis paketti ja siksi sovitettavissa näppärästi yhdelle sivulle. Teemaksi valitsin Moesian, josta tein lapsiteeman.

1. Kuvitukset ja logot

Cocommsin laatiman graafisen ohjeiston saatuani lisäsin sivustolle hankkeen värit ja asensin fontit sivuston käyttöön Adoben Typekitistä ja Google Fontsista. Cocommssin suunnittelemasta logosta tein sivustolle soveltuvan version sekä faviconin.

Sivuston kuvitukseksi oli toivottu kannabisaiheisia opetustauluja (tai jotain sen tyylistä), joten etsin Wikimediasta Creative Commons -lisenssillä varustettuja käyttövapaita kannabiskuvia. Yhdistelin kuvia Photoshopissa taustakuvaksi.

Otsikkokuva

Logojen käytöstä oli annettu tarkat ohjeet: EU-lippulogon tulee näkyä selainnäkymässä kaikilla näytöillä heti sivuille tultaessa. Lisäksi lippulogon ja Vipuvoimaa -logon on esiinnyttävä samansuuruisena kuin muut logot:

2. Kustomointi ja lisäosat

Muokkasin sivustoa ja yksittäisten artikkeleiden sivua hankkeen tarpeisiin sopivaksi. Piilotin kommentoinnin ja authorin lisäosien avulla. Teemaan suositeltuina lisäosina käytin Site Originin Page Builderiä ja Widgets Bundlea. Lisäksi työntekijä-osion ja logo-osion sisältötyyppien luomiseen tarvittiin teeman mukana tullutta Toolset Typesia. Hakukoneoptimoin sivut Yoast SEO:lla ja indeksoin Googleen. Kaikki käyttämäni lisäosat voit katsoa materiaalilistauksesta.

3. Testaus

Kehitin sivuston responsiivisuutta rakennusvaiheessa Firefoxin Responsive Design Modessa. Käytin responsiivisuuden testaamiseen lisäksi erilaisia verkkopalveluita, kuten http://mobiletest.me

Mobiilikehitysnäkymä

Myös työyhteisöstä oli apua testauksessa, pyysin sähköpostitse heitä testaamaan omilla laitteillaan. Tässä vaiheessa korjattavaa löytyi vielä paljon: mm. EU-lippulogo ei asettunut kaikilla näytöillä kuten piti.

Hakukoneoptimoin sivuston Yoast SEO-lisäosan avulla.


4. Julkaisu

Julkaisuvaiheessa ilmeni teknisiä ongelmia: palvelintilan kapasiteetti tuli vastaan ja nimipalvelimet oli väärin asetettu. Soitto Neturan Joonalle auttoi ja saatiin sivut julkaistuksi aikataulussa, 15.5.

5. Päivitysvastuu ja jatkotyöt

Pidin hankkeen yhteyshenkilölle päivitysopastuksen ja tein hänelle oman käyttäjätunnuksen ja annoin täydet oikeudet sivuston hallinnointiin.

Sivuston somejakoa varten muokkasin Facebookin Sharing Debuggerin ja og:image-määrityksen avulla somejakoon optimoidun kuvanäkymän.

Myöhemmin varasin hankkeen käyttöön myös www.kannabis.eu -domainin ja tein sinne väliaikaisen responsiivisen html-sivun Oma apu -sivuston valmistumista odotellessa.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *