Responsiivinen web palvelee mobiilikäyttäjää

Yhä useammin nettisivuja luetaan ja tietoa haetaan älypuhelimella. Eipä siis ihme, että web-sivujen suunnittelijat, kuten yrityksemme Hypermedia Oy suunnittelee uudet web-sivustot toimimaan optimoidusti eri kokoisilla näytöillä ja palvelemaan hyvin mobiilikäyttäjiä.

Avainsana uusien web-sivujen suunnittelussa on käsite responsiivinen suunnittelu (responsive web design, RWD). Responsiivinen (mukautuva) suunnittelu sisältää enemmän kuin älypuhelinten kuten Androidin, iPhonen tai Windows 8 puhelinten käyttöliittymään optimoidun web-näkymän luomista.  Mukautuvat webbisivut toimivat hyvin kaikilla eri kokoisilla näytöillä. Web-sivu näkyy hyvin yhtä tyylikkäästi ja hyvin työhuoneen PC:n näytöltä kuin puhelimen näytöltä tai taulutelevision ruudulta.

Ylen sivuilla kuten svenska.yle.fi hyödynnetään responsiivista  web-suunnittelua. Sivun palstoitus mukautuu selainikkunan ja näytön koon mukaan. Sivusto perustuu Drupaliin ja sen taustoista löytyy lisätietoa blogista http://utveckling.ylebloggen.fi/
Itse olen käyttänyt responsiivisesta suunnittelusta myös termiä adaptiivinen, mukautuva suunnittelu, koska web-sivu mukautuu itsestään näytön koon ja selaimen ominaisuuksien mukaan. Aaron Gustafsonin kanssa olen samoilla linjoilla käsitteen käytöstä, adaptiivisten web-sivujen ominaisuuksiin kuuluvat mukautuvien responsiivisten näyttöjen  lisäksi toiminnot, joilla älykkäästi tuetaan käyttäjää eri kokoisissa ja näköisissä käyttötilanteissa. Tämä tapahtuu monin eri tekniikoin kuten XHTML:n, CSS:n ja Javascriptin avulla.

Ammattislangilla puhuen responsiivisessa suunnittelussa käytetään HTML5-kuvauskieltä ja CSS3-tyylimääritteitä. Visuaalisen suunnittelun ja ohjelmoinnin apuna käytetään joustavia ruudukoita (flexible grid) ja CSS3-tyylin kyselyitä (media query). Lopputulos on pelkistetysti se, että älypuhelimessa web-sivu näkyy automaattisesti yksipalstaisena ja kuvat kutistuvat tai venyvät näytön mukaan, työpöydällä palstoja saattaa näkyä rinnan 3 kappaletta ja laajalla näytöllä kuten televisiossa koko homma skaalautuu neljään - viiteen palstaan suunnittelijan visuaalisen tahdon mukaisesti.

Responsiivista suunnittelua tukee hakukoneiden tulosten optimointi ja vastauslinkkien reititys älypuhelimia varten optimoiduille web-sivuille. Google käyttää älypuhelinten hakutulosten parantamisessa Googlebot-Mobile robotteja, jotka ohjaavat aina mahdollisuuksien mukaan web-haun tekijän mobiilioptimoiduille web-sivuille.

Web-sivujen suunnittelijoita ajatellen Google on kerännyt yhteen ohje- ja tukipalvelusivuston, josta web-master tai web-sivujen suunnittelija löytää yksityiskohtaiset ohjeet älypuhelinoptimoidun sivuston tekoon. Osoite: https://developers.google.com/webmasters/smartphone-sites/ - Samalta sivustolta löytyy kosolti vinkkejä, miten web-sivusto ylipäänsä tehdään teknisesti hyvin hakukoneoptimoiduksi.

Responsiivisen web-suunnittelun ruudukko (grid) työkaluja löytyy koko joukko tästä osoitteesta:
http://creativeoverflow.net/12-flexible-grid-tools-for-responsive-websites/