Download - Responsiiviset layoutit tutkielma
![Page 1: Responsiiviset layoutit tutkielma](https://reader035.vdocuments.pub/reader035/viewer/2022080203/5878238e1a28aba12d8b70d5/html5/thumbnails/1.jpg)
Responsiivisuus www-sivuissa
Mukautuvat lay-outit ja tuki eri päätelaitteille
Tutkielma
Outi Kotala / Guidesi
2.2.2012 1
![Page 2: Responsiiviset layoutit tutkielma](https://reader035.vdocuments.pub/reader035/viewer/2022080203/5878238e1a28aba12d8b70d5/html5/thumbnails/2.jpg)
Responsiivisuus sivustossa • Sivun rakenne (layout) mukautuu selainikkunan koon ja näytön
resoluution mukaan • Sivusta voidaan piilottaa tai korostaa eri asioita selainikkunan koon ja
näytön resoluution mukaan. • Sivusta ei kuitenkaan toteuteta eri versioita erilaisille päätelaitteille
2.2.2012 Guidesi 2012 2
![Page 3: Responsiiviset layoutit tutkielma](https://reader035.vdocuments.pub/reader035/viewer/2022080203/5878238e1a28aba12d8b70d5/html5/thumbnails/3.jpg)
2.2.2012 Guidesi 2012 3
Desktop view" Tablet view"
Mobile view (iPhone)"
![Page 4: Responsiiviset layoutit tutkielma](https://reader035.vdocuments.pub/reader035/viewer/2022080203/5878238e1a28aba12d8b70d5/html5/thumbnails/4.jpg)
Kompastuskivet - huomioitavaa • Pelkkä resoluutioon mukautuminen ei riitä – myös selainrajoitukset
sekä julkaisualustan tekniset vaatimukset on huomioitava • Entä mikä on asiakkaiden nettikaistanopeus?
2.2.2012 Guidesi 2012 4
Lähde: yiibu.com!
![Page 5: Responsiiviset layoutit tutkielma](https://reader035.vdocuments.pub/reader035/viewer/2022080203/5878238e1a28aba12d8b70d5/html5/thumbnails/5.jpg)
Strategia • Analysoitava sekä asiakkaiden nykyinen päätelaitekanta että
arvioitava tulevaisuuden käyttö! • Analysoitava suunniteltavan palvelun sisältö ja sen asettamat
vaatimukset päätelaitteille mukauttamiseen • “Breakpointit”: Mitkä ovat tärkeimmät resoluutio + laite + tekniset
ominaisuudet, joita halutaan tukea? • Kustannusanalyysi valitulle tekniikalle • Jos responsiivisuus valitaan, minkälainen suunnitteluprosessi tukisi
sitä parhaiten?
2.2.2012 Guidesi 2012 5
-> GO / NO GO?"
![Page 6: Responsiiviset layoutit tutkielma](https://reader035.vdocuments.pub/reader035/viewer/2022080203/5878238e1a28aba12d8b70d5/html5/thumbnails/6.jpg)
Lisätietoa • http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/
8907527 • http://www.alistapart.com/articles/responsive-web-design/ • http://www.slideshare.net/yiibu/pragmatic-responsive-
design • Kirja: Ethan Marcotte: Responsive Weg Design
– http://www.abookapart.com/products/responsive-web-design
• Hyviä esimerkkejä toteutuksista: – http://bostonglobe.com/
2.2.2012 Guidesi 2012 6