Mobiilipuhelinten yleistyttyä verkkosivujen tuli skaalautua myös pienempiä resoluutioita omaaville sekä mittasuhteiltaan eri muotoisille näytöille. Pelkkä sivun skaalautuminen ei ratkaissut ongelmaa, sillä tietokoneen näytöltä katseltuna suuretkin fontit saattoivat näyttää hyvinkin pieniltä mobiilipuhelimen näytöltä. Olikin selvää, että verkkosivuille tarvittiin mobiiliversiota, jotta sisältöjen lukeminen, mutta myös katselu onnistui luontevammin.

Aluksi saatettiin tehdä kaksi versiota verkkosivuista, joista toiseen viitattiin usein alidomainilla – esimerkiksi http://m.hs.fi -, jonne käyttäjä ohjattiin joko erillisen valikon avulla tai sitten sivulle asetettiin pieni ohjelma, joka tunnisti, millä selaimella käyttäjä saapui verkkosivuille. Selaimet käyttävät niin sanottua useragent -sovellusta, joka toimii käyttäjän puolesta esittäytyessään palvelimelle, josta verkkosivut ladataan.

Kahden verkkosivun – siis tietokone ja mobiilin – ylläpitäminen oli turhaa ja pian siihen löytyikin ratkaisu CSS-tyylikielestä (Cascading Style Sheets), jonka perustalle responsiivinen design rakentui.

Responsiivinen design

Käytännössä responsiivinen design merkitsee sitä, että verkkosivujen tyylitiedostoon merkitään resoluutioiden raja-arvoja, jonka alittuessa tai ylittyessä voidaan verkkosivulle määritellä juuri tiettyjen raja-arvojen sisällä käytettyjä tyylejä. Raja-arvot merkitään niin sanottujen media query parametrien avulla. Siihen asetetaan maksimileveys pikseleinä, jonka alittuessa tyyli muuttuu tuon maksimileveyden alittavalle ruudulle sopivaksi.

Ethan Marcotte on ilmoittautunut henkilöksi, joka “aloitti koko responsiivisen designin” aikoinaan. Hänet mainitaan myös useilla verkkosivujen suunnittelua käsittelevillä verkkosivuilla. Omilla verkkosivuillaan Ethan esittelee itsensä verkkosivujen suunnittelijana, jonka vastuulla ovat muun muassa People Magazine, The Sundance Film Festival, The Boston Globen verkkosivujen suunnittelu.

Bootstrap

Bootstrap on alun perin kehitetty kahden Twitterin työntekijän, Mark Otton ja Jacob Thorntonin, toimesta. Bootstrap automatisoi responsiivista designia. Se pitää sisällään verkkosivujen rungon, johon voi asetella erilaisia elementtejä kuten nappuloita, lomakkeita, listoja suoraan Bootstrapin sivuilta. Näin verkkosivujen tekeminen, niin responsiivisuuden kuin myös elementtien designin suhteen, Bootstrapin avulla on erittäin vaivatonta.

Lopuksi

Responsiivisesta designista on tullut de facto tapa tehdä verkkosivuista käyttäjäystävällisiä niin mobiililaitteella kuin myös tietokoneella. Usein verkkosivujen suunnittelu aloitetaankin ensin mobiililaitteen sommitelmasta, josta sitten siirrytään tietokoneversioon. Mikäli sivujen kehittämisessä käytetään valmiita kirjastoja, kuten Bootstrapia, ei verkkosivujen responsiivisuudesta tarvitse välittää. Bootstrap hoitaa tyylien vaihdokset eri resoluutioille ja näin verkkosivujen kehittäjän vastuulle jää verkkosivujen tyylien muokkaaminen vaikkapa asiakkaansa brändin mukaiseksi.