Nykypäivän nettisivut tulisivat olla jokaiselle ihmisille saavutettavat, käytti tämä millaista laitetta tahansa. Tällöin responsiivisuus astuu esiin luomaan jokaiselle käyttäjälle käyttäjäystävällisen kokemuksen sivustolla vierailtaessa.
Responsiiviset nettisivut ovat olleet jo pitkään standardi web-kehityksessä. Responsiivisuuden ei tulisi olla rahastettava lisäominaisuus, vaan jokaiseen moderniin nettisivutoteutukseen automaattisesti sisällytettävä työ. Mitä tämä kuitenkin käytännössä tarkoittaa – käymme sen tässä artikkelissa läpi. Sen lisäksi kerromme, että mitä hyötyjä responsiivisuudesta on ja miten responsiivisuutta oikein määritetään verkkosivustoille.
Mitä responsiivisuus tarkoittaa?
Responsiivisuus on nettisivujen sisällön ja rakenteen automaattista skaalautuvuutta tai mukautuvuutta sivustoa selattavan laitteen näyttökoon mukaan. Oli kyseessä sitten suuri pöytäkoneen näyttö, kannettava tietokone, tabletti tai älypuhelin, responsiiviset nettisivut näyttävät hyvältä ja ovat helposti käytettävät. Reponsiivinen sivusto mukautuu suoraan sivuston latautuessa käytettävälle laitteelle tai vaihtoehtoisesti se mukautuu myös automaattisesti esimerkiksi selainikkunaa pienentäessä.
Konkreettisemmalla tasolla responsiivisuus on usein verkkosivujen suunnittelussa sitä, että esimerkiksi osio, jossa vierekkäin iso kuva sekä tekstipalsta, mukautuu puhelimen näytöllä allekkain sen sijaan, että nämä olisivat vierekkäin. Asettamalla ne pienemmällä näytöllä allekkain, ei toinen osio esimerkiksi ”valu näytön ulkopuolelle”, joka voi aiheuttaa käyttäjälle ärsyttävää sivuston vierimistä vaakatasossa.
Responsiivisuus on myös sitä, kun tietokoneen isolla näytöllä verkkosivujen valikkolinkit ovat sivuston yläosassa rivissä, kun taas puhelimen näytöllä valikko on muuttunut painettavaksi ikoniksi (kutsutaan myös hampurilaisvalikoksi), joka erikseen avaa valikon mobiilikäyttäjälle.
Miksi nettisivujen tulisi olla responsiiviset?
Nykypäivänä nettisivujen käyttö älypuhelimilla on jopa suurempaa kuin tietokoneella. Tästä syystä nettisivujen skaalautuminen puhelimien näytöille sopivaksi on erittäin tärkeää.
Mikäli nettisivut eivät ole responsiiviset, on erittäin todennäköistä, että vierailija poistuu sivustolta nopeasti. Nykypäivänä responsiivisuuden ollessa jo arkipäivää, ovat internetin käyttäjät tottuneet nettisivuihin, jotka mukautuvat sulavasti erilaisiin näyttöihin. Sen myötä monet eivät suostu käyttämään sellaisia sivustoja, jotka eivät ole responsiivisia. Sivuston mukautumattomuus eri näyttöihin voi siis hyvin olla myös este esimerkiksi yrityksen markkinoinnille ja myynnille verkon kautta.
Myös Google arvostaa responsiivisuutta (Googlen ilmoitus aiheesta). Tämä käy ilmi hakukonetuloksissa, joissa responsiivisilla nettisivuilla on suurempi todennäköisyys olla korkeammilla sijoituksilla, kuin sellaisilla sivuilla, jotka eivät ole responsiiviset. Hyötyä tulee siis myös hakukoneoptimoinnin näkökulmasta.
Miten nettisivut toteutetaan responsiivisiksi?
Useimmiten nettisivut toteutetaan aluksi tietokonenäkymille ja sen jälkeen näkymät mukautetaan pienempiä näyttöjä varten. Nettisivujen responsiivisuus mahdollistetaan verkkosivujen toteuttajan toimesta teknisellä tasolla käyttäen CSS-komentoja eli verkkosivustojen tyylityskoodia. Näitä CSS-komentoja käytetään kaikkeen muuhunkin nettisivuston tyylitykseen, kuten taustavärien, fonttityylien ja välityksien määrittämiseen.
Hyvänä esimerkkinä voimme käyttää vaikka fonttikokoja. Verkkosivuston leipätekstin koko voidaan merkitä esimerkiksi seuraavanlaisella CSS-komennolla:
p { font-size: 20px; }
Tämä CSS-komento määrää, että sivuston leipätekstin koko on 20 pikseliä. Jos haluamme käyttää mobiilinäytöillä pienempää leipätekstin fonttikokoa, tulee meidän hyödyntää CSS-komennoissa media query -komentoja, jotka ovat CSS-komennoissa muotoa @media. Nämä media queryt määräävät, että missä ruutuko’oissa tietyt komennot tulevat voimaan.
Tässä esimerkki media query -komennosta leipätekstin osalta:
@media (max-width: 768px) { p { font-size: 16px; } }
Kyseinen CSS-komento määrää, että näyttöko’oissa, jotka ovat korkeintaan 768 pikseliä leveitä, käytetään leipätekstissä fonttikokona 16 pikseliä aiemmin määrätyn 20 pikselin sijasta.
Vastaavia komentoja voi hyödyntää minkä tahansa muunkin CSS-komennon muuntamiseen pienempiä ruutuja varten, oli kyseessä sitten jonkun osion leveys tai useamman palikan sijoittaminen allekkain sen sijaan, että ne olisivat rivissä.
Yleisiä näyttökokoja responsiivisuuden määrityksessä
Alla listaus yleisimmistä näyttöko’oista, joita sivustojen responsiivisuusmäärityksissä useimmiten hyödynnetään.
- pöytätietokoneen näytöt (yli 1280px)
- kannettavien tietokoneiden näytöt (1024px-1280px)
- tabletit (768px-1024px)
- puhelimet (alle 768px)
Listaukseen voisi lisätä myös esimerkiksi puhelinten ja tablettien vaaka-asennot tai ylisuuret näytöt, mutta näillä neljällä näyttökokotyypillä pärjää jo hyvinkin pitkälle. Usein sivuja suunnitellaan myös niin, että sivustot mukautuvat sekä isolle pöytätietokoneen näytölle että kannettavan tietokoneen näytölle, jotta näitä ei tarvitse mukauttaa erikseen.
Yhteenveto
Responsiivisuus on siis nykypäivänä tärkeä nettisivujen ominaisuus, joka tulisi huomioida jokaisessa toteutuksessa. Responsiivisista sivuista hyötyvät käyttäjät sekä sivuston omistaja, joten syytä sen sivuuttamiselle ei ole.
Mikäli sinulla on tarve toteuttaa nettisivusi kaikille laitteille soveltuviksi, ota yhteyttä sivujesi toteuttajaan. Jos olet vasta perustamassa nettisivuja, varmista, että palveluntarjoaja huomioi responsiivisuuden toteutuksissaan. Voit lukea blogistamme myös yleisiä ohjeita nettisivujen perustamiseen.
Vaihtoehtoisesti, voit ottaa myös yhteyttä meihin ja katsotaan yhdessä sivustosi responsiivisuus kuntoon.
