liferay road show responsiivinen suunnittelu
TRANSCRIPT
Responsiivinen suunnittelu- pintaa syvemmältä
Liferay Roadshow 7.5.2015
7.5.2015 2www.ambientia.net
Screen fragmentation (Android)
7.5.2015 3www.ambientia.net
”A 10-second delay will oftenmake users leave a site
immediately.”
- Jacob Nielsen
7.5.2015 4www.ambientia.net
Performanssibudjetti”Sivun pitää olla käytettävä X sekunnissa tai
nopeammin”
7.5.2015 5www.ambientia.net
HTML, CSS, JavaScript, images, fonts
28.6.2013 6www.ambientia.net
Yhdistetään, minifioidaan, optimoidaan
7.5.2015 7www.ambientia.net
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
Responsiiviset kuvat
7.5.2015 9www.ambientia.net
7.5.2015 10www.ambientia.net
1400 x 788 px
294 kb
7.5.2015 11www.ambientia.net
750 x 422 px
90 kb
320 x 180 px
18 kb
Latausajat 3G-yhteydellä
7.5.2015 12
0 1 2 3 4 5
Large
Medium
Small
seconds
www.ambientia.net
<img src=”ship.jpg”>
7.5.2015 www.ambientia.net 13
Uusia tapoja esittää kuvia HTML:ssä:srcset, sizes, picture, source
7.5.2015 www.ambientia.net 14
<imgsrcset="ship-large.jpg 1400w,
ship-medium.jpg 750w,ship-small.jpg 320w"
src="ship-medium.jpg"alt="Risteilyalus Tukholman saaristossa.">
7.5.2015 www.ambientia.net 15
Selaintuki?
7.5.2015 www.ambientia.net 16
7.5.2015 17www.ambientia.net
Srcset-attribute - caniuse.com
Picturefill-polyfillillä saadaan toimimaan myös muilla
selaimilla
7.5.2015 18www.ambientia.net
Responsiiviset kuvat Liferay-palveluissa
28.6.2013 19www.ambientia.net
Suunnitellaan responsiivisetverkkopalvelut vastuullisesti!
Aletaan käyttämään responsiivisia kuvia jo tänään!
28.6.2013 20www.ambientia.net