Responsiivisuus www-suunnittelussa: mukautuvat lay-outit ja tuki eri päätelaitteille. Tutkielma

1. Responsiivisuus www-sivuissa
Mukautuvat lay-outit ja tuki eri
päätelaitteille
Tutkielma
Outi Kotala / Guidesi
2.2.2012 1

2. 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

3. 2.2.2012 Guidesi 2012 3
Desktop view" Tablet view"
Mobile view (iPhone)"

4. 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!

5. 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?"

6. 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