Blogi, miten selvitän verkkosivujen toimivuuden

Teemme verkkosivuja työksemme, joten uskallan väittää, että meillä on jotain kompetenssiä huudella. Autan mielelläni sinua selvittämään, onko nykyiset verkkosivusi vuoden 2019 vaatimalla tasolla.

Mobiilikäyttäjien määrä lisääntyy jatkuvasti. Vuonna 2017, kaikista verkkovierailuista 63 % tehtiin mobiililaitteilla. Keskimääräinen kävijä viettää verkkosivuilla aikaa n. 4 minuuttia ja katselee keskimäärin alle 4 sivua. HUOM! Tässä on mukana myös YouTube ja Facebook - jotka nostavat keskimääriä ihan huimasti.

Tämä tarkoittaa siis sitä, että verkkosivujen on toimittava mobiilissa moitteitta (ei, harva kääntää laitetta vaakaan, vielä harvempi zoomaa sivuja) jotta verkkosivuilla käydään etusivua pidemmällä.

Miten selvitän verkkosivujen toimivuuden itse?

Sinun ei tarvitse olla propellihattu tai edes osata alkeellisintakaan koodia selvittääksesi verkkosivujesi toimivuuden. Ensimmäisessä listauksessa käyn läpi, miten selvität verkkosivuston toimivuuden mobiilissa:

  • Teksti on luettavaa mobiililaitteella ilman zoomausta
  • Mobiililaitteella näkyy yksi "lohko" tai osa sivusta kerrallaan
  • Teksti ei vuoda yli
  • Kuvat eivät vääristy

Skaalautuvuus on parhaiten testattavissa tietokoneen selaimella. Hyvä skaalautuvuus tarkoittaa sitä, että verkkosivusto toimii yhtä hyvin mobiililaitteesta riippumatta, eikä ne vaadi erillistä mobiilikytkintä, joka mobiililaitteen tunnistaessaan vaihtaa sivuston ulkoasua. Mobiilikytkin ei välttämättä tunnista jokaista laitetta, joten toimivuus ei ole taattu.

  • Pienennä / suurenna selainikkunan kokoa.
    • Jos sivusto skaalautuu nätisti mukana, ne toimivat mobiilissa
  • Kuvien tulisi skaalautua ja säilyttää kuvasuhteensa
  • Tekstin tulisi pysyä luettavana
  • "Lohkojen" tulisi muuttua rinnakkaisista lohkoista allekkaisiksi.

Näillä toimenpiteillä voi hyvin testata sivuston toimivuutta.

Miten selvitän teknisen toimivuuden?

Jotta verkkosivut toimivat kunnolla ja jotta ne myös löytyisivät hakukoneista hyvin, tekninen toteutus on oltava kunnossa. Tästäkin voit saada hyvää osviittaa kurkkaamalla koodia (klikkaa sivuja hiiren oikealla ja "näytä lähdekoodi")

  • Sivuston osiot tulisi olla rakennettu DIV-elementeillä (riittää, että silmäilyllä löytyy useampia DIV-viittauksia)
    • Mikäli DIVien tilalla on esimerkiksi paljon TABLEja, tekniikka on 2000-luvulta
  • Otsikot ovat H2 - H3 - H4 - tagien sisällä (esimerkiksi <h2>Otsikkoteksti</h2>) H1 - tagia tulisi käyttää vain kerran, sivuston pääotsikossa
    • Voit esimerkiksi etsiä CTR+F - toiminnolla otsikoiden tekstejä niin löydät otsikot
  • Koodin alusta löytyy meta-tageja