Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design

  • Login to see the comments

  • Be the first to like this

Responsive Web Design

  1. 1. Responsive Web DesignEri kokoisille näytöille sopeutuviensivujen toteutustekniikkaJanne Heinonen / Valtion taidemuseo16.4.2013
  2. 2. Ei erillisille mobiilisivustoille• Sivustoja voidaan toteuttaa tunnistamaan laite,jolla sitä katsellaan  Tarvitaan eri sivustoversioteri päätelaitteille, esim m.iltalehti.fi• Responsiivinen suunnittelu mahdollistaa sen, ettäuudet laitteet ovat automaattisesti tuettuja eikätuki edellytä erillisiä teknisiä ratkaisuja sivustonylläpitäjiltä.• (Mobiiliapplikaatiosta ei kannata tehdä kilpailijaaverkkosivuille, erillinen tarvelähtöinenlähestymistapa jos applikaatioita toteutetaan)
  3. 3. Sama sivusto sopii sellaisenaan eripäätelaitteille
  4. 4. Miten edetä?• Monilla (mutta ei kaikilla) sivuilla pelkkälaitteen suorittama skaalaus riittäätarjoamaan riittävän käyttökokemuksen• Mutta käyttökokemus vaihtelee laitteittaineikä käyttötilannetta voida huomioida• Sivuston uusimisen yhteydessä on responsive-suunnittelumalli otettava huomioon
  5. 5. Responsiivisuus perustuu• CSS:n avulla toteutettuun joustavaanasemointiin (CSS Media Queries -tekniikka)– @media screen and (min-width: 800px) andmax-width: 1200px) { /*määritykset */ }• Skaalautuviin kuviin• Vanhemmissa selaimissa erillisiin javascript-toteutuksiin• Toimituksellisiin valintoihinnäyttöpinta-alaan perustuen,mitä näytetään ja missä järjestyksessä
  6. 6. 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 huomioitukäytetystä päätelaitteesta riippumatta
  7. 7. 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 huomioitukäytetystä päätelaitteesta riippumatta

×