Blogi: Mukautuvaa verkkosuunnittelua

Tässä artikkelissa esitellään joitakin uusimpia ja yleistyneimpiä mukautuvan verkkosuunnittelun vaihtoehtoja, joilla erilaisten päätelaitteiden kirjoon ja niiden webin käyttökokemukseen yritetään mukautuvasti ja joustavasti vastasta.
Mukautuvassa verkkosuunnittelussa pitää miettiä eri päätelaitteita, joita tällä hetkellä ovat pöytäkoneen ja kannettavan lisäksi myös erilaiset mobiilipuhelimet, tabletit, televisiot ja pelikonsolit. Lisäksi uudemmat laitteet mahdollistavat näytön käytön vaaka- ja pystysuunnassa. Miten sitten tällaisia variaatiota voisi lähestyä mukautuvasti?
Usein ei tehdä mitään, vaan suunnitellaan yksi kiinteän kokoinen ja asiakasta miellyttävä ulkoasu, joka optimoidaan yhdelle näyttöresoluutiolle. Muilla resoluutioilla sitten scrollataan tai suurennetaan ja pienennetään sivustoa per sivu.

Miten mukautuvuus rakennetaan?
Yleensä sivusto suunnitellaan ensin uusimmille selaimille ja uusimmilla tehosteilla. Sitten tullaan taaksepäin eli esimerkiksi reunojen pyöristykset häviävät vanhemmilla selaimilla. Toinen tapa suunnitella on toteuttaa ensin yhteinen pohjatoiminnallisuus, joka toimii lähes kaikilla päätelaitteilla ja sitten lisätään tehosteita uudemmillle päätelaitteille ja selaimille.
Tyylitekniikoiden hyödyntäminen mukautuvassa verkkosuunnittelussa
Skaalautuvien sisältöelementtien suunnittelussa sivun sisältö ja sen muut elementit laitetaan kiinteän kokoisen pikselilaatikon sijaan skaalautuvaan laatikkoon. Tällöin laatikko skaalautuu aina samaan leveyteen näyttökoon mukaan.
Skaalautuvat kuvituskuvat ovat kohtuullisen haasteellinen kohta mukautuvassa verkkosuunnittelussa. Yksinkertaisimmillaan kuvien skaalautuvuuden voi tehdä niin, että niiden leveys ei ylitä ympäröivän kehyksen leveyttä.
Tyylitiedostojen sovittaminen eri päätelaitteille tuli käyttöön CSS 2.1 mukana. Tämä mahdollisti aluksi erillisten tyylitiedostojen tekemisen eri päätelaitteille, kuten tietokoneen näytölle, televisiolle ja mobiililaitteille. Päätelaitteen kokoa voi muuttaa yhdessä tyylitiedostossa ja tehdä tarvittavat muutokset tai piilotukset muutamien kenttien avulla. Kun tyylittelytekniikka on hallussa, voi alkaa miettiä, miten toteuttaa mukautuva ulkoasu.
Joustavia verkkosuunnittelun menetelmiä
Sivusto voidaan suunnitella erillisillä elementeillä, joita voivat olla esimerkiksi reunapalstat ja sisältöpalsta jaettuna useampaan elementtiin. Tällöin näytetään suurilla näytöillä reunamarginaalit ja näyttökoon pienentyessä ne vastaavasti pienenevät, kunnes näyttö pienimmillään ”tiputtaa” elementit saman levyisinä allekkain. Tämä on melko yleinen tekniikka.
Näiden lisäksi voidaan suunnitella erillisiä näkymiä sivustosta eri näytöille. Tämä vaatii eniten layout- eli ulkoasusuunnittelutyötä. Sivuston ulkoasu siis muuttuu skaalatessa näyttöä.
Skaalautuvuutta voi toteuttaa myös pienin muutoksin eli esimerkiksi vain tekstin ja kuvien kokoa kasvattamalla tai pienentämällä näyttökoon mukaan. Tätä voi käyttää hyvin lisäominaisuutena muiden skaalautuvuusmentelmien kanssa.
Mobiilisovelluksissa hyödynnetään pienillä näytöillä ruudun ulkopuolelle jäävää tilaa. Tällöin esimerkiksi kolmepalstaisilla sivustoilla puhelimen ruudulla näytetään vain yksi palsta kerrallaan, vasemmalla tai oikella olevat palstat saadaan vaakavierityspalkilla näkyviin. Myös näytön yläpuolella voi olla sisältöä, joka tulee tarvittaessa esiin esimerkiksi napin painalluksella.
Tässä muutama keino, jotta web-sisällön helppo saatavuus olisi mahdollisimman päätelaiteriippumatonta.
Anne Laakso
Senior Consultant
 

19.2.2013