Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Responsive Web Design

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×