Responsiivisuus www-sivuissa

Mukautuvat lay-outit ja tuki eri päätelaitteille

Tutkielma

Outi Kotala / Guidesi

2.2.2012 1

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

2.2.2012 Guidesi 2012 3

Desktop view" Tablet view"

Mobile view (iPhone)"

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!

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

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