Responsive Web Design

Responsive Web DesignEri kokoisille näytöille sopeutuvien

sivujen toteutustekniikka

Janne Heinonen / Valtion taidemuseo16.4.2013

Ei erillisille mobiilisivustoille

• Sivustoja voidaan toteuttaa tunnistamaan laite, jolla sitä katsellaan Tarvitaan eri sivustoversiot eri päätelaitteille, esim m.iltalehti.fi

• Responsiivinen suunnittelu mahdollistaa sen, että uudet laitteet ovat automaattisesti tuettuja eikä tuki edellytä erillisiä teknisiä ratkaisuja sivuston ylläpitäjiltä.

• (Mobiiliapplikaatiosta ei kannata tehdä kilpailijaa verkkosivuille, erillinen tarvelähtöinen lähestymistapa jos applikaatioita toteutetaan)

Sama sivusto sopii sellaisenaan eri päätelaitteille

Miten edetä?

• Monilla (mutta ei kaikilla) sivuilla pelkkä laitteen suorittama skaalaus riittää tarjoamaan riittävän käyttökokemuksen

• Mutta käyttökokemus vaihtelee laitteittain eikä käyttötilannetta voida huomioida

• Sivuston uusimisen yhteydessä on responsive- suunnittelumalli otettava huomioon

Responsiivisuus perustuu

• CSS:n avulla toteutettuun joustavaan asemointiin (CSS Media Queries -tekniikka)– @media screen and (min-width: 800px) and max-width: 1200px) { /*määritykset */ }

• Skaalautuviin kuviin• Vanhemmissa selaimissa erillisiin javascript-

toteutuksiin• Toimituksellisiin valintoihin

näyttöpinta-alaan perustuen, mitä näytetään ja missä järjestyksessä

Esimerkkejä

• http://yle.fi/uutiset/• http://www.helsinki.fi/• http://www.nokia.com/global/

• Näyttävyydestä ei tarvitse tinkiä• Käytettävyys ja saavutettavuus huomioitu

käytetystä päätelaitteesta riippumatta