Responsive Web Design
-
Upload
janne-heinonen -
Category
Design
-
view
100 -
download
1
Transcript of Responsive Web Design
![Page 1: Responsive Web Design](https://reader035.fdocument.pub/reader035/viewer/2022081004/55bab1a3bb61eb6b058b45be/html5/thumbnails/1.jpg)
Responsive Web DesignEri kokoisille näytöille sopeutuvien
sivujen toteutustekniikka
Janne Heinonen / Valtion taidemuseo16.4.2013
![Page 2: Responsive Web Design](https://reader035.fdocument.pub/reader035/viewer/2022081004/55bab1a3bb61eb6b058b45be/html5/thumbnails/2.jpg)
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)
![Page 3: Responsive Web Design](https://reader035.fdocument.pub/reader035/viewer/2022081004/55bab1a3bb61eb6b058b45be/html5/thumbnails/3.jpg)
Sama sivusto sopii sellaisenaan eri päätelaitteille
![Page 4: Responsive Web Design](https://reader035.fdocument.pub/reader035/viewer/2022081004/55bab1a3bb61eb6b058b45be/html5/thumbnails/4.jpg)
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
![Page 5: Responsive Web Design](https://reader035.fdocument.pub/reader035/viewer/2022081004/55bab1a3bb61eb6b058b45be/html5/thumbnails/5.jpg)
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ä
![Page 6: Responsive Web Design](https://reader035.fdocument.pub/reader035/viewer/2022081004/55bab1a3bb61eb6b058b45be/html5/thumbnails/6.jpg)
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