Responsiiviset nettisivut

Responsiiviset nettisivut tarkoittavat sitä, että sivusto skaalautuu automaattisesti käyttäjän laitteen kokoon. Oli sitten kyseessä pöytäkone, kannettava tietokone, tabletti tai kännykkä, nettisivut näkyvät oikein ja ovat helppokäyttöiset. Nykypäivänä internetiä käytetään enemmän mobiililaitteilla, kuin pöytäkoneilla, joten responsiiviset nettisivut ovat erittäin tärkeä asia.

Hari-WebDesign toteuttaa kaikki nettisivut responsiivinen suunnittelu mielessä. Testaamme nettisivut aina pöytäkoneella, kannettavalla tietokoneella, tabletilla ja kännykällä ennen julkaisua.

Miten responsiiviset sivut toimivat?

Aiemmin tehtiin eri versiot nettisivuista mobiililaitteille ja tietokoneille, koska mobiililaitteiden nettiselaimet eivät olleet tarpeeksi nykyaikaisia ja tehokkaita. Älypuhelinten ja teknologian kehityksen myötä enää ei ole tarvetta toteuttaa erillistä sivustoa mobiililaitteille, vaan tehdään responsiiviset nettisivut.

Nettisivuista saadaan responsiiviset käyttämällä useita eri tekniikoita, kuten CSS-mediakyselyitä (media queries), prosentuaalisia mitta-asteikkoja sekä joissain tapauksissa JavaScriptiä. Näiden tekniikoiden avulla saadaan nettisivujen runko muuttumaan, kun selainikkunan tai laitteen koko muuttuu.

Kun käyttäjä avaa nettisivut mobiililaitteella, täytyy responsiivisen nettisivun tunnistaa, että kyseessä on mobiililaite, ja muokata teksin fonttikoko sopivaksi, muuttaa valikot helposti kännykällä toimivaksi ja skaalata nettisivu niin, että sitä ei tarvitse vierittää vaakasuunnassa eikä zoomata.

Yleinen tapa on muuttaa sivuston navigointipalkki yhdeksi painikkeeksi, jota koskettamalla älypuhelimella koko valikko avautuu. Tällöin valikko ei vie turhaa tilaa käyttäjän jo valmiiksi pienestä näyttöruudusta.

Mobiilissa ei ole hiirtä

Responsiivisten nettisivujen suunnittelussa on myös huomioitava esimerkiksi ns. "hiiri päällä -pudotusvalikot". Mikäli nettisivujen päävalikossa on alalinkkejä, jotka aukeavat, kun hiiren laittaa päälinkin päälle, täytyy ymmärtää, että kyseistä toimintoa ei voi suorittaa tabletilla. Valikko tulee siis muuttaa erilaiseksi mobiililaitteilla, tai vähintään tarjota alavalikot käyttäjälle päälinkin klikkauksen jälkeen avautuvalla sivulla.

Voiko nykyiset sivuni muuttaa responsiivisiksi?

Kyllä voi, mutta se ei välttämättä ole helppoa. Mikäli sivusto on koodattu vuosia sitten, voi sen muuttaminen responsiiviseksi "kepulikonstein" olla turhaa edes yrittää. Jos sivusto on vain 1-2 vuotta vanha, sen pitäisi olla jo responsiivinen, mutta jos ei, pystyy sen todennäköisesti helpommin muuttamaan responsiiviseksi.

Minkä tahansa sivuston voi muuttaa responsiiviseksi viimeistään koodaamalla koko sivuston ulkoasun uusiksi, mutta se vaatii usein lähes saman työpanoksen, kuin uusien nettisivujen tekeminen.