Liferay Road Show Responsiivinen suunnittelu
•Download as PPTX, PDF•
0 likes•568 views
Liferay Road Show Helsinki 7.5.2015 Responsiivinen suunnittelu Mikko Suominen
Liferay Road Show Responsiivinen suunnittelu
- 2. Responsiivinen suunnittelu - pintaa syvemmältä Liferay Roadshow 7.5.2015 7.5.2015 2www.ambientia.net
- 3. Screen fragmentation (Android) 7.5.2015 3www.ambientia.net
- 4. ”A 10-second delay will often make users leave a site immediately.” - Jacob Nielsen 7.5.2015 4www.ambientia.net
- 5. Performanssibudjetti ”Sivun pitää olla käytettävä X sekunnissa tai nopeammin” 7.5.2015 5www.ambientia.net
- 6. HTML, CSS, JavaScript, images, fonts 28.6.2013 6www.ambientia.net
- 8. 62% sivuston kuormasta on kuvia 7.5.2015 8 Average Bytes per Page by Content Type Images HTML CSS Javascript Fonts Other www.ambientia.net http://httparchive.org/interesting.php#bytesperpage
- 10. 7.5.2015 10www.ambientia.net 1400 x 788 px 294 kb
- 11. 7.5.2015 11www.ambientia.net 750 x 422 px 90 kb 320 x 180 px 18 kb
- 12. Latausajat 3G-yhteydellä 7.5.2015 12 0 1 2 3 4 5 Large Medium Small seconds www.ambientia.net
- 14. Uusia tapoja esittää kuvia HTML:ssä: srcset, sizes, picture, source 7.5.2015 www.ambientia.net 14
- 15. <img srcset="ship-large.jpg 1400w, ship-medium.jpg 750w, ship-small.jpg 320w" src=/slideshow/liferay-road-show-responsiivinen-suunnittelu/48035916/"ship-medium.jpg" alt="Risteilyalus Tukholman saaristossa."> 7.5.2015 www.ambientia.net 15
- 17. 7.5.2015 17www.ambientia.net Srcset-attribute - caniuse.com
- 18. Picturefill -polyfillillä saadaan toimimaan myös muilla selaimilla 7.5.2015 18www.ambientia.net
- 19. Responsiiviset kuvat Liferay- palveluissa 28.6.2013 19www.ambientia.net
- 20. Suunnitellaan responsiiviset verkkopalvelut vastuullisesti! Aletaan käyttämään responsiivisia kuvia jo tänään! 28.6.2013 20www.ambientia.net