Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Responsive Web DesignEri kokoisille näytöille sopeutuviensivujen toteutustekniikkaJanne Heinonen / Valtion taidemuseo16.4....
Ei erillisille mobiilisivustoille• Sivustoja voidaan toteuttaa tunnistamaan laite,jolla sitä katsellaan  Tarvitaan eri si...
Sama sivusto sopii sellaisenaan eripäätelaitteille
Miten edetä?• Monilla (mutta ei kaikilla) sivuilla pelkkälaitteen suorittama skaalaus riittäätarjoamaan riittävän käyttöko...
Responsiivisuus perustuu• CSS:n avulla toteutettuun joustavaanasemointiin (CSS Media Queries -tekniikka)– @media screen an...
Esimerkkejä• http://yle.fi/uutiset/• http://www.helsinki.fi/• http://www.nokia.com/global/• Näyttävyydestä ei tarvitse tin...
Esimerkkejä• http://yle.fi/uutiset/• http://www.helsinki.fi/• http://www.nokia.com/global/• Näyttävyydestä ei tarvitse tin...
Prochain SlideShare
Chargement dans…5
×

Responsive Web Design

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

×