Responsiiviset layoutit study
0 likes338 views
Responsiivisuus www-suunnittelussa: mukautuvat lay-outit ja tuki eri päätelaitteille. Tutkielma
Responsiiviset layoutit study
- 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