O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Responsive Web Design

  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

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

×