Responsiiviset kotisivut

Responsiiviset kotisivut

Responsiivisilla kotisivuilla tarkoitetaan mobiili­­ystävällisiä sivuja, jotka toimivat älypuhelimella, tabletilla ja tietokoneen näytöllä. Sivut mukautuvat päätelaitteen näytön kokoon säilyttäen tekstin samalla lukukelpoisena, jolloin ne ovat positiivinen käyntikortti yrityksen imagolle.

Vanhat ja ajastaan jälkeenjääneet kotisivut eivät anna hyvää kuvaa yrityksen toiminnasta. Kotisivujen uusiminen on helppoa Jokinetin kanssa. Riittää, että tilaat meiltä kotisivut, niin teemme niin sovittaessa uudet kotisivut vaikkapa avaimet käteen -toteutuksella.

Mobiiliystävälliset kotisivut

Kaikki Jokinetin tekemät kotisivut ovat oletuksena mobiiliystävällisiä, jolloin niitä voi selailla sujuvasti älypuhelimella, tabletilla tai desktop -tietokoneella. Katso esimerkkejä ammattimaisesti tehdyistä kotisivuista referensseistämme.

Responsiiviset kotisivut

Mobiiliystävällisiin kotisivuihin saat myös WordPress-sisällönhallintatyökalun (CMS), jolla sisältötekstien päivitys on todella yksinkertaista.

Mobiilikäyttäjien osuus jo yli 50%

Vuonna 2017 mobiilikäyttäjien osuus nettisivuilla ylitti maailmanlaajuisesti 50% rajapyykin. Vuoden 2021 alkupuoleella ensimmäisen kvartaalin aikana käyttäjien osuus hipoi jo 55% lukemia.

Mobiilikäyttäjien osuus kaikesta nettiliikenteestä on jo niin huomattava, että yrityksen on pakko ottaa se huomioon kotisivujen suhteen.

Bounce Rate ja Exit Rate

Kotisivujen yhdeydessä on olemassa käsite Bounce Rate, jolla tarkoitetaan prosenttiosuutta käyttäjiästä, jotka tulevat yrityksen nettisivuille, katsovat vain yhden sivun ja lähtevät samantien pois.

Bounce Rate tunnetaan myös nimellä Exit Rate. Ei-mobiiliystävällisillä sivuilla Bounce Rate on varmasti paljon suurempi, kuin hyvin tehdyillä responsiivisilla verkkosivuilla.

Mikä on responsiiviset kotisivut?

Responsiivisilla kotisivuilla tarkoitetaan kotisivujen yhteydessä sitä, että verkkosivu mukautuu erilaisten päätelaitteiden (desktop-tietokone, tabletti tai älypuhelin) näytön leveyteen ilman, että tekstistä tulee lukukelvotonta. Responsiivisissä verkkosivuissa tärkeää onkin se, että fontin koko säilyy lukukelpoisena kaikilla eri päätelaitteilla.

Kotisivut älypuhelimella

Kännykän näytöllä responsiiviset kotisivut skaalautuvat siten, ettei tekstin koko mene lukukelvottomaksi (liian pieneksi). Älypuhelimella onkin kiva selata kotisivujen sisältöä vaikkapa kotisohvalta.

Responsiiviset kotisivut, kännykkä

Kotisivut tabletilla

Tabletissa responsiivisia kotisivuja on jo yleensä paljon helpompi käyttää älypuhelimen kapeaan näyttöön verrattuna. Monilla tabletti onkin korvannut laptop-tietokoneen käytön päivittäisessä nettiasioinnissa.

Responsiiviset kotisivut, tabletti

Kotisivut tietokoneella

PC-tietokoneen desktop-näyttöihin responsiiviset kotisivut muokkautuvat myös sujuvasti.

Responsiiviset kotisivut, tietokone

Miten responsiivisia kotisivuja tehdään?

Responsiivisia kotisivuja voidaan tehdä monella eri tavalla. Kaikkein isoin ja työläin tapa on tehdä mobiiliystävällinen toteutus alusta lähtien uudestaan CSS-tekniikan avulla.

Onneksi on olemassa valmiita tekniikoita, jotka helpottavat mobiiliystävällistä toteutusta paljon.

Bootstrap

Yksi tekniikka, jolla mobiiliyhteensopivia kotisivuja tehdään on nimeltään Bootstrap, joka on ilmainen ja avoimeen lähdekoodiin perustuva CSS-sovelluskehys. Bootstrap tuo avun responsiiviseen, mobiililaitteille tarkoitettuun käyttöliittymän kehitykseen. Se sisältää CSS- ja JavaScript-pohjaisia suunnittelumalleja, lomakkeita, painikkeita, navigointia ja muita hyödyllisiä komponentteja käyttöliittymää varten.

Bootstrap-tekniikassa kotisivut optimoidaan 5 eri näyttökoolle, joita käsitellään lyhyesti seuraavissa alukappaleissa.

Extra pienet näytöt (<576px)

Mobile first -ajattelumallin mukaan responsiiviset nettisivut tehdään lähtökohtaisesti extra-pienille näytöille, joiden näytön resoluutio on vähemmän kuin 576 pikseliä.  Tällaisia voivat olla mm.  kännykät pystysuunnassa.

Pienet näytöt (≥576px)

Käännettäessä kännykkä vaakasuuntaan, puhutaan mobiililaitteista, joiden näytön resoluutio on suurempi kuin 576 pikseliä. Näytön leveys 576 pikseliä onkin ensimmäinen “breakpoint” Bootstrap-sovelluskehyksessä.

Keskikokoiset näytöt (≥768px)

Tabletti-näytöistä puhutaan laitteista, joiden näytön resoluutio on vähintään 768 pikseliä. Riippuen tabletista se voi toteutua vaakasuunnassa tai pystysuunnassa. Nettisivuilla ylävalikko voi olla tabletti-näytön resoluutiolla usein vielä “hampurilais”-menuna (kolme vaakaviivaa, josta klikkaamalla avautuu ylävalikko).

Laajat näytöt (≥992px)

Tietokoneen näytöistä puhutaan silloin, kun näytön resoluutio on vähintään 992 pikseliä. Nettisivuilla ylävalikko voi olla tässä näytön leveydessä nettisivupohjasta riippuen joko vielä “hampurilais”-menuna tai avattuna auki.

Extra-laajat näytöt (≥1200px)

Suuremmista tietokoneen näytöistä puhutaan silloin, kun näytön resoluutio on vähintään 1200 pikseliä. Useimmiten tällöin ylämenu näkyy kokonaisena ja yrityksen logokin hieman isompana pienempiin näyttöihin verrattuna.

Kotisivupohjat

Yksi kätevä tapa tehdä kotisivuja on ottaa pohjaksi valmis käyttöliittymän mallipohja.

Hyvin tehdyt kotisivupohjat on yleensä tehty käyttämään Bootstrap-sovelluskehystä mobiiliystävällisen toteutuksen aikaansaamiseksi.

Jokinetin käyttämiä WP Astra käyttöliittymäpohjia pääset selaamaan osoitteesta alla olevasta painikkeesta klikkaamalla.

Näistä muokkaamalla saadaan tehtyä yritykselle näyttävän näköiset kotisivut, jotka toimivat mobiili-, tabletti- ja pc-laitteilla.

Kotisivupohjissa on yleensä kourallisen verran valmiita ja erilaisia sivupohjia. Yksi sivurakenne voi olla esim. artikkelisivu, josta yritys voi sisällönhallintatyökalun avulla luoda vaikkapa 50 erilaista sisältöartikkelia. Näin lopullisten sivujen määräksi yrityksen kotisivuilla voi muodostua kymmeniä, jopa satoja erilaisia sivuja.

Kuvat kotisivulla

Parhaat kotisivut saadaan aikaan käyttämällä ammattilaisen ottamia valokuvia yrityksen toiminnasta. Aina ammattivalokuvaajan palkkaaminen ei kuitenkaan ole mahdollista, jolloin voidaan käyttää itse otettuja kuvia.

Useissa kotisivupohjissa kuvien minimiresoluutio on 1920 x 1280 pikseliä, johon päästään suhteellisen helposti uudehkoa älypuhelimen kameraa käytettäessä.

Kotisivuja perustettaessa voidaan käyttää myös valmiita, IStock-kuvapankista otettuja kuvia ja lisäksi omia (tai ammattilaisvalokuvaajan) ottamia kuvia.

Kotisivujen suorituskyky

Kotisivujen suorituskyky on tärkeä ominaisuus Google hakukonenäkyvyyden kannalta.

Googlella on olemassa PageSpeed Insights -työkalu, jolla voi testata kotisivujen nopeutta.

Yksi kätevä työkalu on myös WegPageTest.org tuottama työkalu, jolla sivujen nopeutta voi kokeilla eri puolelta maailmaa.

Jos suorituskykyä ei oteta millään tavalla huomioon sivuja tehdessä, voivat kotisivut “kaatua” (ts. mennä jumiin) suurilla kävijämäärillä. Pahimmassa tapauksessa koko palvelin kippaa, jolloin kukaan ei pääse käyttämään sivuja.

WordPressillä tehtyjen kotisivujen suorituskykyä voidaan parantaa käyttämällä erilaisia Cache-toteutuksia tai nopeudenoptimointi-lisäosia, joilla sivut saadaan kestämään normaalia suurempia kävijämääriä.

Kirjoittaja on yrittäjä Jokinetissä,
ja ohjelmistoinsinööri AMK
(vm. 1996-2000)

Jaa sivu:

Kiinnostuitko kotisivuistamme?

Klikkaa painiketta ja laita Jokinetille viestiä, niin saadaan yrityksesi kotisivuasia vireille!
Toimi heti
Scroll to Top