Responsiivinen web-suunnittelu

bannerikuva

Johdanto

Responsiivinen suunnittelu on kasvanut sitä suuremmaksi puheenaiheeksi, mitä enemmän päätelaitteiden monimuotoisuus on kasvanut. Nettisivuja ei enää katsota tietokoneen pääteruudulta, vaan mukaan on tullut erilaiset mobiililaitteet, kuten älypuhelimet ja tabletit.
responsiivisuuden havainnollistaminen

Kuvan lähde: oamk.fi

Responsiivinen käyttöliittymä muokkaa sisällön päätelaitteelle sopivaksi sen resoluution mukaan. Aikaisemmin nettisivut rakennettiin niin, että mobiilinäkymälle oli oma sivustonsa ja tietokoneen ruudulle oma sivustonsa. Nämä sivustot yleensä tallennettiin omiin kansioihinsa ja käyttäjä valikoi (tai sivusto tunnisti käyttäjän päätelaitteen), katseliko hän sivustoa mobiililaitemuodossa vai normaalina näkymänä kun hän saapui sivulle. Vaihtoehtoisesti selaimen osoitekenttään kirjoitettiin osoite, joka vei suoraan mobiilisivustoon (kuten m.iltalehti.fi).

Responsiivisella suunnittelulla voidaan yksi web-sivusto rakentaa niin, että se tunnistaa päätelaitteen resoluution ja skaalaa sivuston sille sopivaksi. Ei siis tarvita enää useampaa sivustoa per päätelaite vaan yksi sivusto, joka skaalautuu käyttäjän päätelaitteelle.

Käsitteitä

Media Query »

HTML5/CSS3:n tarjoama mahdollisuus havaita käyttäjän käyttämän päätelaitteen selaimen leveys, jonka avulla CSS-tyylejä voidaan muuttaa eri päätelaitteille sopivaksi.

Breakpoints »

Breakpointissa määritellään tyylin muutospiste, jossa CSS-tyyliä halutaan muuttaa. Usein tässä kohdassa muutetaan elementtien asettelua ja fonttien kokoa. Break Point määritellään CSS:ssä Media Query -kyselyiden avulla.

Fluid Grid »

Sivuston käyttöliittymä on toteutettu joustavasti, eli elementit skaalautuvat päätelaitteen selaimen mukaan. Elementtien koko on määritelty suhteellisina yksikköinä, kuten prosentteina.

Mobile First »

Ajatusmalli, jossa käyttöliittymää lähdetään suunnittelemaan päätelaitteiden "heikoimmasta yksilöstä", eli mobiililaitteesta.

Responsiivisen suunnittelun etuja:

Säästäminen
Yhden verkkosivun rakentaminen eri päätelaitteille vähentää kustannuksia, eikä jokaiselle uudelle laitteelle tarvitse suunnitella yhteensopivaa verkkosivua. Lisäksi yhden verkkosivuston rakentaminen säästää aikaa ja resursseja, ei pelkästään rahaa.
Käyttäjäkokemuksen tehostaminen
Kun sivusto on suunniteltu eri päätelaitteille yhteensopivaksi, käyttäjät voivat käydä sivustolla useammin eri päätelaitteilla kun sivuston selaaminen on tuttua ja yksinkertaista.
Toimiva ratkaisu
Responsiivinen suunnittelu on hyvä menetelmä tällä hetkellä, koska se ratkaisee eri päätelaitteiden näyttöihin soveltuviin verkkosivuihin liittyviä ongelmia.