Upload
janne-heinonen
View
100
Download
1
Embed Size (px)
Citation preview
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