Tampere
03 May, Friday
6° C

Proakatemian esseepankki

Front-end -kehittäjän checklist



Kirjoittanut: Waltteri Kolkka - tiimistä Evision.

Esseen tyyppi: Yksilöessee / 2 esseepistettä.

KIRJALÄHTEET
KIRJA KIRJAILIJA
The Mobile Web Designer’s Idea Book, Volume 4
Patrick McNeil
Esseen arvioitu lukuaika on 2 minuuttia.

Web-kehittäjänä olen hyvin pitkälti vastuussa tekemiemme nettisivujen toimivuudesta, käytettävyydestä sekä suunnittelijan kanssa ulkonäöstä ja skaalautuvuudesta. Pyrimme automatisoimaan tuotantoprosessiamme hyvin pitkälle, ja myös sen vuoksi on tärkeää, että rakentamamme sivut ovat virheettömiä, kun luovutamme tuotteen asiakkaalle. Tähän esseeseen olen koonnut tarkistuslistan hyvistä käytänteistä sekä tärkeistä elementeistä, jotka tulevat olemaan osa jokaisen sivun lopputarkistusta ja tuotantoprosessia. Listan avulla vähennämme hakuammuntamaista korjausprosessia ja pystymme tehokkaaseen ja systemaattiseen laatuvalidointiin.

 

Nettisivujen tärkeimmät ominaisuudet, joiden tulee olla kunnossa julkaisuhetkellä

 

  • Pienet yksityiskohdat ja oikeinkirjoitus

Kirjoitusvirheet tai esimerkiksi teemojen väripoikkeamat syövät sivun uskottavuutta, joten on erittäin tärkeää, että ne tarkistetaan useaan kertaan. Verkkotallissa tuotamme myös kielten kääntämispalveluita, joten jos muutoksia tulee, pitää ne muistaa implementoida sivuille kaikilla kielillä. Sisällöntuotannosta vastaa yleensä eri ihminen kuin sivujen tekniikasta, joten tarkistukset tehdään aina vähintään tuplana.

  • Kontaktisivu, jossa on oikeat tiedot

Kaikkien yhteystietojen on oltava täysin oikein, sillä virheet niissä voivat maksaa asiakkaallemme kaupat. Yhteystietosivun on hyvä sijaita näkyvällä, helposti löydettävällä paikalla, ja vaikka useammalla sivulla. Yhteydenottolomakkeissa tulee alusta asti olla varmuus siitä, että lähetetyt viestit kulkevat sujuvasti asiakkaan sähköpostiin. Asennamme yhteydenottolomakkeen yhteyteen myös tarvittaessa spämmifiltterin.

  • Käytettävyys

UX- eli käyttäjäkokemustestaus on tärkeää, jotta asiakkaamme sivuista tulee miellyttävät selata. UX-testauksessa tulee ottaa huomioon kuvaoptimointi, latausajat, skaalautuvuus eri laitteille, mahdollisen verkkokaupan ja maksujen toimivuus, kaavakkeiden täyttö ja lähetys. Sen lisäksi on hyvä antaa muutaman ihmisen testata sivuja ja kerätä palaute heiltä. Jos toistuvia teemoja tai ongelmia löytyy, tulee ne korjata, vaikka asia ei itselle tuntuisi ongelmalta. Navigointi sivuilla on myös tärkeä osa käytettävyyttä. Kaikkien linkkien tulee viedä oikeisiin paikkoihin, ja klikattavien elementtien tulee myös näyttää siltä, että ne ovat klikattavia.

  • Mobiiliystävälliset sivut

Web-kehitys on jo pitkään seurannut Mobile First -mallia, sillä etenkin kuluttajat vierailevat verkkosivuilla yhä enenevissä määrin mobiililaitteilla. Tämän vuoksi on tärkeää, että yleisimmät laitetyypit ovat täysin tuettuja ja että sivut skaalautuvat oikein eri laitteilla. Alalla on yleensä omat vakio breakpoint -pikselileveydet, joita selain lukee. Näissä pisteissä sivuston rakenteen tulee muuttua, jotta tekstit ovat helposti luettavissa ja kaikki sisällöt saatavilla.

  • Yhteensopivuus

Mobiiliystävällisyyden lisäksi on tärkeää, että sivut toimivat oikein kaikilla yleisillä selaimilla. Selainyhteensopivuuden testaamiseen on olemassa työkaluja, joita käytämme. Myös käytettyjen pluginien eli lisäosien yhteensopivuus on testattava, jotta mitkään php-koodit eivät ole ristiriidassa keskenään. Yhteensopivuus saattaa muuttua matkan varrella, kun lisäosiin tulee päivityksiä. Jatkuvan toimivuuden takaamiseksi WordPress-ylläpito on tärkeää

  • Permalink-rakenne

Hakukoneoptimoinnin kannalta on tärkeää, että linkkien rakenne on informatiivinen. Linkkien rakenteelle voidaan tehdä oma kaava, jota esim. blogeissa ja uutissyötteissä käytetään paljon. Permalink-rakenne voi myös olla täysin kustomoitu, jolloin kaikkien sivujen linkki voi olla omanlaisensa. Esimerkiksi siirtäessämme blogisivustoa pois Blogger -alustalta WordPressiin jäljittelimme silti Bloggerin aiempaa linkkirakennetta. Tämä tehtiin sen vuoksi, että hakukoneet säilyttäisivät näkyvyyden, vaikka sivuston sijainti ja ulkonäkö vaihtui.

  • Turvallisuus

Sivun turvaaminen Järjestelmänhallinta-alueesta frontendiin on hyvin tärkeää, ja se tulee tehdä oikein alusta asti. SSL-sertifikaatti tekee sivusta kävijöiden nähden luotettavan. Backendin kannalta tärkeää on, että adminit huolehtivat salasanojensa turvallisuudesta. Tietyille admineille voidaan myös antaa vähemmän muokkausoikeuksia. Esimerkiksi sisällöntuottajalle ei tarvitse antaa rajatonta pääsyä koodiin, kunhan hän saa tarvittaessa muuttaa tekstisisältöjä. Olemme luoneet tämän kannalta turvallisia ratkaisuja mm. ravintolamenuihin ja blogialustoihin.

  • Sosiaalisen median linkit

Iso osa asiakkaistamme käyttää jonkinlaista sosiaalista mediaa toiminnassaan, joten integroimme ikonit heidän nettisivuilleen, jotka toimivat linkkeinä heidän sosiaaliseen mediaansa. Myös esimerkiksi kolmen viimeisimmän postauksen näyttävät syötteet ovat suosittuja sivuilla. Näiden toimintojen toimivuus on tärkeää, koska monien yritysten viestintä keskittyy enemmän sosiaaliseen mediaan.

  • Hakukoneoptimointi

Viimeisenä mutta ei vähäisimpänä on muotisananakin tuttu hakukoneoptimointi. Syy siihen, että se näkyy viimeisenä on se, että sen alle mahtuu iso osa jo listatuista asioista. Hakukoneiden lajittelumenetelmät ovat osaksi vaihtuvia ja salattuja, mutta toimivat, sisällöltään hyvät, optimoidut ja aktiiviset sivut sijoittuvat usein korkeimmalle. Useilla eri työkaluilla pystymme tehostamaan hakukonenäkyvyyttä entisestään pidemmällä aikavälillä.

Kommentoi