Hei,
Tämä on erittäin haastava aihe, miten näyttää kuvia web-sivuilla?
Resoluutiot:
--- 320-480px (mobiili)
--- 768px/1024px (iPad, vaaka, pysty)
--- "Suuret näytöt"
Eli pitäisikö tehdä esim. <div> ja antaa sille background image, tai upottaa kuva html-koodin joukkoon? Seuraava iso ongelma on kuvan tarkkuus, eli kuvan alkuperäinen koko voi olla: 960x450px -> se kuitenkin koodataan puolet pienemmäksi 480x225px, jotta "Retina" -tarkkuus saavutetaan.
Lähestymistapoja on todella paljon, mutta en osaa valita mitään järkevää tapaa. Mielestäni kaikki ovat enemmän tai vähemmän huonoja. Miten te näyttäisitte kuvia web-sivuilla, jos pitää tukea tarkkaa resoluutiota ja vaikkapa Mobiili, Tablet, Laptop/ Desktop -näkymiä, pysty- ja vaaka suunnassa!?
Olen tehnyt .css -tyylitiedoston, joka hakee ensin pienimmän kuvan (siis lataa) jos laite on suurempi resoluutioisempi niin Media Queryn avulla ladataan keskikokoinen kuva jos taas kaikkein suurin niin suurin kuva ladataan. Ei tämä systeemi kuitenkaan ole mitenkään järkevä, mielestäni.
/* Smartphones (portrait and landscape) */
@media only screen and (min-width: 320px) and (max-width: 480px) {
.main-image {
background-image: url('images/suomenlinna-small.png');
background-repeat: no-repeat;
background-size: 480px 225px; /* alkp. 960x450px */
display: block;
width: 480px;
height: 225px;
}
}Yllä yksi huono tapa. Samaan tapaan tulisi 3 kuvaa (Small, Medium, Large). Adaptive Images -tapa lienee yksi lähestymistapa. Mutta siinä joutuu sotkemaan aivan liikaa taas.. esim. nyt tuo JavaScript WordPress -koodin sekaan.. jne. kiitän kaikesta avusta!
...
Laitan vielä linkin tähän loppuun, artikkeli jota olen tutkinut ja joka on sekoittunut päätäni entisestään: Choosing A Responsive Image Solution
late kirjoitti:
Miten te näyttäisitte kuvia web-sivuilla, jos pitää tukea tarkkaa resoluutiota ja vaikkapa Mobiili, Tablet, Laptop/ Desktop -näkymiä, pysty- ja vaaka suunnassa!?
<img src="kisu.jpg" alt="söpö kisu" />
Riippuu vähän tarkoituksesta, ja mille laitteille optimointi aiotaan suorittaa. Nuo viewportit kun pakkaa vähän laitteista riippuen olemaan eri kokoisia pysty -ja vaakatossa toisiinsa nähden. joissain tapauksissa 320px on omansa, joissain tapauksissa käy laajempi alue 320-480. riippuu vähän siitä millainen leiska halutaan näyttää. Esim jos halutaan dedikoida laitteelle x oma ulkoasu portraittina, käyttäisin @media screen (max-width:320px), enkä suinkaan min-widthiä, ja tekisin landscapelle omansa.
Kaikki riippuu siitä millainen leiska halutaan tehdä, ja millainen responsiivisuus saada aikaan.
Okei, kiitän! Tarkoitan tässä tapauksessa vain kuvia. Eli nyt päädyin ehkä hieman lapselliseen ratkaisuun:
/* Kuvat: < 320 | 360 | 480 | 768 | 1024 > */
Eli viisi erilaista kuvaa tyyliin 0-359px ja sitten 360-479px ja niin edes päin... Tämä ei tietenkään ole optimaalinen ratkaisu, mutta tuen näin aika monia laitteita ja ennen kaikkea haluan että kuvat ovat "Retina" tarkkuudella kaikki. Nyt seuraavaksi onkin varmaan hyvä käydä optimoimassa kaikki .png -kuvat! (mahdollisimman kevyiksi).
Tulevaisuudessa toivon että tähän kuvien näyttämiseen saadaan jokin järkevä ratkaisu, nyt eri tapoja aivan liikaa. Liian monimutkaisia kun puhutaan kuitenkin kuvan näyttämisestä web-sivuilla!
Ymmärrän, että retinalle ”pitää” tehdä tuplakokoinen kuva, joka sitten skaalataan puoleen. Ei ole vaikeaa, voi käyttää JavaScriptia. Sen sijaan en ymmärrä, miksi sinun pitää tehdä jokaiselle mahdolliselle ruudulle oma kuvatiedosto.
Responsiivinen kuva:
img{
max-width:100%;
}Voi elämä, täällä on taas todellisia taiteilijoita liikkeellä. Vetosin tuohon artikkeliin. Eli kun käy sen rauhassa läpi ja yrittää itse tehdä niin on jo todella pitkällä ja pää varmasti sekaisin.
Tuossa artikkelissa on nimen omaan esimerkkinä laajakuva, josta sitten mobiili-versioon tehdäänkin erilainen "zoomattu" kuva, kaikki toki terävänä tarkkuutena. Recalle sen verran, että voitko lukea artikkelia ihan vähän eteenpäin.. tuo on jo hyvä alku.
late kirjoitti:
Lähestymistapoja on todella paljon, mutta en osaa valita mitään järkevää tapaa. Mielestäni kaikki ovat enemmän tai vähemmän huonoja. Miten te näyttäisitte kuvia web-sivuilla, jos pitää tukea tarkkaa resoluutiota ja vaikkapa Mobiili, Tablet, Laptop/ Desktop -näkymiä, pysty- ja vaaka suunnassa!?
Näinhän se on, mitä haastat. Eli aika haastava aihe ja johon ei näytä olevan yhtään järkevää ratkaisua.
En tiedä, onko siihen olemassa yhtään kovin yksinkertaista ratkaisua.
Oliko kyseessä sivusto, jonne voi ladata kuvia? Tällöin upload.php tiedostossa tulisi tutkia lähetetyn kuvan koko ja muoto ja tehdä sen mukaan toimenpiteet.
Ehdotukseni on tämä: eri muotoiset kuvat sijoitetaan ero hakemistoihin, sieltä sitten näytetään kuva käyttäjän resoluution mukaan.
Tämäkin voi kuulostaa mutkitkaalta, mutta ohjelmalle itselleen se ei sitä ole, sillä kuvatiedoston nimi on osittain sen resoluutio-tiedoissa.
Mielestäni suurin haastavuus on näyttää kuva 50% koossa, jotta se olisi riittävän tarkka (retina). Sitten miten kuva voi skaalautua vaikkapa älypuhelimessa (320-480px) pysty- ja vaakasuunnassa mitenkään järkevästi? Sitten jos ajatellaan isoa näyttöä, vaikkapa 40 tuumaa, niin kannattaako siihen ympäristöön laittaa samaa kuvaa kuin puhelimen pikku näytölle...
Kyse on omista kotisivuista, joita kehitän eteenpäin oppimisen kannalta. Nyt haen kuvat vain omalta palvelimelta, mutta mitä jos haluaisin hakea osan kuvista Flickr -profiilista. Silloin osa tekniikoista ei taas toimi (Adaptive Images). Tein nyt vain 5 eri media querya ja viisi erilaista kuvaa, jotta tuen joitakin suosittuja yleisiä resoluutioita. Ei lainkaan järkevin ratkaisu, mutta ehkä vuoden päästä tilanne parempi, jokin järkevä yleistapa.
..toisaalta sama ongelma odottaa minua kun teen yksinkertaisen sliderin, eli en nyt tietenkään voi rakentaa 5 eri slideria. Itse en käytä enään tylsäpiirto näyttöjä, MBP Retina, iPad3 ja älypuhelin.. siksi en edes harkitse enään huonommille näytöille tekemistä, vaan kaikesta tehdään mahdollisimman tarkkaa, ikonit, grafiikka, kuvat ja video.
late kirjoitti:
Mielestäni suurin haastavuus on näyttää kuva 50% koossa, jotta se olisi riittävän tarkka (retina). Sitten miten kuva voi skaalautua vaikkapa älypuhelimessa (320-480px) pysty- ja vaakasuunnassa mitenkään järkevästi? Sitten jos ajatellaan isoa näyttöä, vaikkapa 40 tuumaa, niin kannattaako siihen ympäristöön laittaa samaa kuvaa kuin puhelimen pikku näytölle...
Ei samaa kuvaa, ei...
Kun on kyse mobiili-sivuista, voi olla kannatavaa näyttää vaakakuvakin pystykuvana, eli laidoilta joutuu leikkomaan osan pois.
Kun on riittävän suuri alkuperäinen kuva, siitä voi muotoilla sopivan, vaikka 2048px leveän ja näyttää sen 1024 pikselin levyisenä.Ja nimeksi voi silti antaa kuva-1024.jpg. Kieltämättä hiukan haastava homma jos ja kun kuva on vain osana sivua ja näytetään alkuaan (sivun luojan resoluutiossa) vaikka 625 px levyisenä.
Kun on tiedossa kävijän resoluutio (joka tutkitaan javascriptillä),siinä pitäisi vaikkapa php:llä laskea, minkä kokoisena kuva tulisi näyttää tietynlaisella näytöllä ja suurentaa(käytännössä pienentää) kuvan kokoa siitä kahdella. Huh huh...
Case study aihetta sivuten:
http://mobile.smashingmagazine.com/2013/09/16/
Kiitos molemmille jälleen, juu tutkin tuon artikkelin myöhemmin tarkemmin, mutta tuntuu taas siltä että ei ole yhtä hyvää tapaa tehdä. Esimerkiksi "teen" tänään sliderin sivuille, mutta tuntuu siltä että joudun tekemään jonkun naurettavan oman ratkaisun kuvien suhteen.
esim. <span> elementtien avulla näytetään tietyt kuvat (bg-img) jos mobiili ja muuten isommat kuvat... toinen aika törkeä vaihtoehto olisi jättää slider kokonaan pois kännykkä versiosta ja laittaa vaikka 3-4 kuvaa allekkain. En ihan hahmota mikä on järkevin tapa näyttää 200x200px kuva -> 100x100px kuvana. Esim. onko css-tyylitiedosto oikea paikka bg-kuvana, sitten background-size, ja kuitenkin width ja height -arvot.
...
Nyt minulla on tyylitiedosto, joka on tarkoitettu Mobiili-laitteille. Kun on jokin muu laite selain tutkii kohdat "Media Query" ja toimii niiden mukaisesti. Ainakin DEV TOOLS näyttää että lataa vain pienen kuvan esim. tuo 320px.. eli ainakin suorituskyky parempi, mutta toisaalta tuossakin tapauksessa kuva on 2x näytettävän kokoinen. Haluan teräväpiirtoa myös älypuhelimiin, vaikka se hidastaisi puolella latausnopeutta.
Kuvien, grafiikan, logojen, ikonien laatu on tärkeä kun silmä on jo tottunut näkemään kaikkialla "Retinaa" ... se ottaa pahasti silmään kun tylsäpiirtoinen ikoni pomppaa silmille. Sitä vain tottuu terävään fonttiin ja kuvaan, ja se lienee jo arkipäivää.
Tässä esimerkki, miten voit javascrptillä tulostaa kuvan leveyden.
<html>
<head>
<style type="text/css">
#kuva{
height:auto;
border:1px;
border-style:solid;
border-color:#000;
}
</style>
</head>
<body>
<img src="imake.jpg" id="kuva"/>
<script>
document.getElementById('kuva').style.width="100px";
</script>
</body>
</html>Tuossa samassa script-hommassa voit ensin tutkia käyttäjän resoluution ja laskea kuvan leveyden.
Kohtaan "100px" tulostettaisiin sitten javascript-muuttujassa oleva leveys.
Tuossa ei tulosteta mitään vaan asetetaan javascriptillä kuvalle korkeus. Kuvan mittojen muuttelu ei tosin taida olla tässä ongelmana, vaan resoluutioriippuvaisten kuvatiedostojen lataaminen optimaalisella tavalla.
The Alchemist kirjoitti:
Tuossa ei tulosteta mitään vaan asetetaan javascriptillä kuvalle korkeus. Kuvan mittojen muuttelu ei tosin taida olla tässä ongelmana, vaan resoluutioriippuvaisten kuvatiedostojen lataaminen optimaalisella tavalla.
Niimpä. Kuten sanoin, sen puolen voi tehdä javascriptillä. Ja tarvittaessa ylempänä sivua muuttaa kuvia pienemmiksi php:lla, mutta arvelen että siihen ei ole tarvetta. Toisaalta voi tehdä eri kokoisia kuvia, jotka tulostetaan esittämälläni tavalla näytölle. Kun on kyse pienemmistä tulostuskoosta, ei varmaan haittaa vaikka alkuperäinen kuva olisi enemmän kuin puolta suurempi. Ja näytöille, joiden koko on melkein sama, voi tulostaa saman kuvan, koska sen tarkkuus riittää molemmille.
Tämä homma taas tulisi tehdä tuon img-tagin yläpuolella ja määrittää siellä oikea kuvapolku.
pistemies: tässä varmaan haettiin juuri ihan käytännön esimerkkiä "sille tavalle esittää eri kokoisia kuvia", ei niinkään epäselvää teoriaa....
Lebe80 kirjoitti:
pistemies: tässä varmaan haettiin juuri ihan käytännön esimerkkiä "sille tavalle esittää eri kokoisia kuvia", ei niinkään epäselvää teoriaa....
Ei tuo ihan pelkkää teoriaa ole. Aika selvät perusohjeet, mistä asiasta pitäisi kirjoitella koodeja, jotta homma toimisi.
En vaan itse jaksa ruveta tuohon noista asioista koodeja värkkäämään, kun en itse niitä tartte.
Nyt late asia taitaa olla niin, että sinun on hankittava Jukka K. Korpelan SVG – responsiivisten kuvien tulevaisuus -oppikirja. ;)
Vektorigrafiikka on tarkoitettu juuri tällaisiin tilanteisiin, ja web-maailmassa SVG-kieli on jo muutenkin erittäin hyvin tuettu, joten polyfillejä tarvitaan hyvin vähän (jos ollenkaan). SVG on itse asiassa yksi polyfillien hyödyntämä tekniikka.
No joo. Onhan minunkin kotisivuni aika pitkälle responsiiviset. Tuossa esimerkki:
http://my.pm-netti.com/
Sekä kuvien että tekstien koko pienenee, kun ruutua pienentää. Kuvat ovat samankokoisia eli suurille näytöille ei ole isompaa kuvaa. Homman olen tehnyt lähinnä pikku-näyttöjen tarpeita ajatellen.
Mutta löytyy asiasta myös suomeksi:
http://www.sofokus.com/blogi/mita-on-responsiivinen-design/
Noniin, mitä artikkeli edellä sitä putkalaiset perässä.
Eli ne jotka kolusivat artikkelin läpi ymmärsivät että tähän kuva juttuun on jo useita ratkaisuja. Kaikki toinen toistaan huonompia. Yritin tästä herättää keskustelua.
Onko jossain listaa tuon konna korpelan kaikista kirjoista? En ollut lainkaan tietoinen että olisi joku kuviin liittyvä? Muutenkin onko listaa suomi web kirjoista. Itse tutkin usein docendoa, mutta valikoima pieni. Olisi kiva lukea suomeksi.
Pistemies tarvitset ulkoasun suunnittelijan, värimaailma, fontti, tyyli jne. Linkki on kiva, kiitos. Tuon kaverin tekstejä olen tutkinut ennenkin. Pitää kuitenkin muistaa että luemme kaikki noin suurinpiirtein samoja kirjoja ja artikkeleita. Tästä johtuen kai yritämme myös suomentaa samaa sanaa kuukauden välein responsive design.. Ja näin pois päin. Pistemies katsoppa joskus sivujasi iPadilla pystysuunta. Itse käyttäisin koko saatavilla olevan leveyden.
late kirjoitti:
Pistemies tarvitset ulkoasun suunnittelijan, värimaailma, fontti, tyyli jne. Linkki on kiva, kiitos. Tuon kaverin tekstejä olen tutkinut ennenkin. Pitää kuitenkin muistaa että luemme kaikki noin suurinpiirtein samoja kirjoja ja artikkeleita. Tästä johtuen kai yritämme myös suomentaa samaa sanaa kuukauden välein responsive design.. Ja näin pois päin. Pistemies katsoppa joskus sivujasi iPadilla pystysuunta. Itse käyttäisin koko saatavilla olevan leveyden.
Kiitos, kiitos.
Pari vuotta sitten, kun noita rakensin, en varsinaisesti suunnitellut niistä responsiivisia sivuja. Vahingossa melkein sellaiset tuli :)
Minun näyttöni on 1280px leveä ja se on suurin koko, jossa nuo sivuni näytetään.Sen ansiosta hommasta ei tarvinnut tehdä monen kokoisia kuvia. Lisäksi olisi voinut muuttaa siten, että mainoksia ei näytetä lainkaan pienemmillä näytöillä tai että ne näytetään eri tavalla, esim. pystybanneri vaakabannerin sijaan ja ilman sivupalkkeja ym. ym.
Nuo sivuni eivät ole missään nimessä parasta plaatua. Tällä hetkellä olen jälleen suunittelemassa sivujeni uudistamista, teen niistä CMS-pohjaiset. Lisäksi linkkihakemiston laitan kokonaan pois.
Minua ei tosiaan haittaa, vaikka täältä löytyisi jokunen partneri lisää sivujani rakentamaan. Vaikka tekemään sinne oppaan responsiivisista sivuista :)
Ja mikäli taitoa riittää, luoda sinne uuden ulkoasun.
late kirjoitti:
En ollut lainkaan tietoinen että olisi joku kuviin liittyvä?
En minäkään, tuli vain mieleen hyvä nimi Yucan seuraavalle kirjalle. ;)
pistemies kirjoitti:
No joo. Onhan minunkin kotisivuni aika pitkälle responsiiviset. Tuossa esimerkki:
http://my.pm-netti.com/
Sekä kuvien että tekstien koko pienenee, kun ruutua pienentää. Kuvat ovat samankokoisia eli suurille näytöille ei ole isompaa kuvaa. Homman olen tehnyt lähinnä pikku-näyttöjen tarpeita ajatellen.
Tuohan on valehtelematta erittäin huono esimerkki, kun pelkkä navigaatiopalkki vain pienenee käyttökelvottomaksi. Kuvissa ei tapahtunut mitään muutosta.
Responsiivinen ulkoasu harvoin tarkoittaa sitä, että fonttikokoa käpistellään, ainakaan pienemmäksi.
edit:
jahas, kuvat pienenevät joskus, jollain logiikalla (selaimen piti kai alunperinkin olla pieni, jotta efekti toteutui). Ja tosiaan, tuo ei ole responsiivinen ulkoasu, vaan fiksailet vain kuvien kokoa aivan väärällä logiikalla. Melkein voisi kutsua tuota epäresponsiiviseksi :D
Tässä on jQueryn esimerkki, joka toimii paljon loogisemmin:
http://view.jquerymobile.com/1.3.2/dist/demos/
esim.
http://view.jquerymobile.com/1.3.2/dist/demos/
jukkah kirjoitti:
Nyt late asia taitaa olla niin, että sinun on hankittava Jukka K. Korpelan SVG – responsiivisten kuvien tulevaisuus -oppikirja. ;)
Vektorigrafiikka on tarkoitettu juuri tällaisiin tilanteisiin, ja web-maailmassa SVG-kieli on jo muutenkin erittäin hyvin tuettu, joten polyfillejä tarvitaan hyvin vähän (jos ollenkaan). SVG on itse asiassa yksi polyfillien hyödyntämä tekniikka.
Svg on lopulta aika hyödytön formaatti yleistä käyttöä ajatellen. Tavallisia bittikarttakuvia on liki mahdotonta muuntaa aidoiksi svg-kuviksi, paitsi jos tietysti piirtää kaiken käsin alusta loppuun uusiksi svg:nä. Mikäli svg:tä haluaa käyttää, niin lähtökohtaisesti pitäisi toteuttaa kaikki kuvamateriaali uusiksi vektorigrafiikkaan erikoistuneella grafiikkasovelluksella. Sittenkin esimerkiksi valokuvat täytyy edelleen säilyttää bittikarttoina.
Svg ei ratkaise meidän ongelmaamme lopullisesti, mutta sillä saa aikaan uusia ongelmia.
The Alchemist kirjoitti:
Svg on lopulta aika hyödytön formaatti yleistä käyttöä ajatellen. Tavallisia bittikarttakuvia on liki mahdotonta muuntaa aidoiksi svg-kuviksi, paitsi jos tietysti piirtää kaiken käsin alusta loppuun uusiksi svg:nä. Mikäli svg:tä haluaa käyttää, niin lähtökohtaisesti pitäisi toteuttaa kaikki kuvamateriali uusiksi vektorigrafiikkaan erikoistuneella grafiikkasovelluksella. Senkään jälkeen esimerkiksi valokuvat täytyy edelleen säilyttää bittikarttoina.
Allekirjoitan koko jutun täysin.
Työjutuissa käytämme sivustojen kuvina hyvinkin paljon (tuote)valokuvia, joita olisi svg-muodossa lähes mahdoton näyttää mitenkään järkevästi tai svg-formaattille on hankala keksiä oikeaa syytä.
late kirjoitti:
Onko jossain listaa tuon konna korpelan kaikista kirjoista?
Yllättäen Jukan omilta sivuilta tuollainen löytyy http://www.cs.tut.fi/~jkorpela/kirjat.html. Olettaisin että tuo on täydellisin saatavilla oleva.
Lebe80 kirjoitti:
Responsiivinen ulkoasu harvoin tarkoittaa sitä, että fonttikokoa käpistellään, ainakaan pienemmäksi.
Tekstien koon suhteen harvemmin onkaan mitään ongelmia eri kokoisilla näytöillä. Se taas johtuu minulla siitä, että halusin säilyttää menun yhdellä rivillä, sikäli kuin se oli järkevää, vaikka sivun kokoa kaventaisikin jonkin verran pienemmällä näytöllä.
Kuten sanoin, en ole suunnitellut sivujani responsiivisiksi.
Lebe80 kirjoitti:
Tässä on jQueryn esimerkki, joka toimii paljon loogisemmin:
http://view.jquerymobile.com/1.3.2/dist/demos/
Kiitos linkistä. Otan tuon huomioon, kun suunnittelen sivujani uusiksi. Pikkuisen siinä on purtavaa, jotta saa menun näkymään tietyllä tavalla.
pistemies kirjoitti:
Onhan minunkin kotisivuni aika pitkälle responsiiviset.
pistemies kirjoitti:
Kuten sanoin, en ole suunnitellut sivujani responsiivisiksi.
Lebe80 kirjoitti:
pistemies kirjoitti:
Onhan minunkin kotisivuni aika pitkälle responsiiviset.
pistemies kirjoitti:
Kuten sanoin, en ole suunnitellut sivujani responsiivisiksi.
>zzz<
Muuten, jäi kysymättä. Onko tuo jquery.mobile tarkoitettu vain mobiili-sivuja varten vai ihan normaaliin kaiken kestävvän käyttöön...?
pistemies kirjoitti:
Onko tuo jquery.mobile tarkoitettu vain mobiili-sivuja varten vai ihan normaaliin kaiken kestävvän käyttöön...?
Kyllä.
Itse olen ainakin käyttänyt vaikka siten, että esim touch -eventit on rekisteröity jos navigator on joku mobiililaite. Eipä ole tullut kyllä käytettyä "normaali" -puolella kertaakaan.
Aha.
Väsynyttä menoa.
The Alchemist kirjoitti:
Svg on lopulta aika hyödytön formaatti yleistä käyttöä ajatellen. Tavallisia bittikarttakuvia on liki mahdotonta muuntaa aidoiksi svg-kuviksi, paitsi jos tietysti piirtää kaiken käsin alusta loppuun uusiksi svg:nä. Mikäli svg:tä haluaa käyttää, niin lähtökohtaisesti pitäisi toteuttaa kaikki kuvamateriaali uusiksi vektorigrafiikkaan erikoistuneella grafiikkasovelluksella. Sittenkin esimerkiksi valokuvat täytyy edelleen säilyttää bittikarttoina.
Svg ei ratkaise meidän ongelmaamme lopullisesti, --
En tarkoita (etkä oletettavasti luullutkaan tarkoittavani), että joku firma innostuisi nettisivujen nykyisten rasterikuvien vektoroinnista. Tarkoitan, että jatkossa graafikko ei muuntaisi vektoreita rastereiksi ainakaan firman nettisivuja varten.
Lebe80 kirjoitti:
Työjutuissa käytämme sivustojen kuvina hyvinkin paljon (tuote)valokuvia, joita olisi svg-muodossa lähes mahdoton näyttää mitenkään järkevästi tai svg-formaattille on hankala keksiä oikeaa syytä.
En tarkoittanutkaan SVG:tä valokuva-jpg:n vaan vektori-png:n korvaajaksi. SVG ei ratkaise koko ongelmaa, mutta rajaa sen valokuviin.
The Alchemist kirjoitti:
sillä [SVG:llä] saa aikaan uusia ongelmia.
Kuten?
Teet aika rohkean oletuksen siitä, että graafikot yleensäkään käpistelevät vektorigrafiikkaa. Esimerkiksi Photoshopille ja Gimpille koko svg-grafiikan käsite on täysin tuntematon konsepti eikä niillä piirrettyjä kuvia voi muuntaa vektoripohjaisiksi mitenkään. Kyse ei ole siitä, että graafikon pitäisi vain olla tallentamatta kuvia jpeg:ksi svg:n sijaan, vaan siitä että koko tuotantoketju pitää pistää uusiksi.
Onnea vain sille firmalle, jolla sattuu olemaan listoillaan graafikoita, jotka suosivat vektorigrafiikkaa ja Illustratoria Photoshopin sijaan, mutta veikkaan että se on aika harvinaista.
The Alchemist kirjoitti:
Onnea vain sille firmalle, jolla sattuu olemaan listoillaan graafikoita, jotka suosivat vektorigrafiikkaa ja Illustratoria Photoshopin sijaan, mutta veikkaan että se on aika harvinaista.
No jos lähtökohta on se, että mennään jalat edellä puuhun, ei SVG:stä ole apua. 800x1600-rasterikuvasta on myös aika huono tehdä kunnollista retinaversiota.
Olen itse hirveän huono pikselitaiteen kanssa ja kokemukseni varsinkin Adoben ohjelmistoista on olematon, mutta käsitykseni mukaan vektorigrafiikan teko on kuitenkin (paljon) vaikeampaa kuin perinteisten rasterikuvien. Photarissa on helppo mättää vaikka millaista efektiä, kun sovellus voi käsitellä suoraan pikseleitä ja sen jälkeen unohtaa kaiken aiemmin tapahtuneen. Vektorigrafiikassa ei käsitellä pikseleitä vaan objekteja ja luulisin sen asettavan teknisiä rajoitteita kuvankäsittelylle.
Fotorealismi on tietysti mahdollista vektorikuvienkin kanssa, mutta se varmasti vaatii reilusti enemmän työtä kuin Photoshoppia käyttäen. Siinä mielessä voi olla perse edellä puuhun kiipeämistä pakottaa tekemään svg:tä, kun "retinakuvien" ongelma pixmappien kanssa on kuitenkin pakko ratkaista jollain tavalla. Lienee simppeliä vääntää grafiikat vaikka 4k tarkkuudella ja skaalata niitä pienemmiksi tuotantokäyttöön.
Noniin.. keskustelu käy kuumana, hyvä hyvä...
Tuota, tämä on taas varmaankin typerä kysymys, mutta kuvitellaan että käyttäjä on bussissa ja hänellä on älypuhelin. Onko 320kb kuvan lataaminen (näyttäminen) iso prosessi? Eli onko kuva nykynopeuksilla aivan liian iso Mobiili-maailmaan? Ja jos on niin millaisesta koosta puhutaan, max. 50kb?
No huhhuh. Jos 320kb kuvan lataaminen olisi minun mielestäni liian iso prosessi, hommaisin nopeamman yhteyden puhelimeeni. Jos se ei olisi mahdollista, sanoisin "voi voi, tulevaisuutta odotellessa"
Kokeilin omalla "halpis" älypuhelimellani. Samsung Galaxy S III mini, nettiyhteys 1Megan luokkaa, hyvin avautu. Mutta kyse olikin tavallaan myös niistä tilanteissa kun ollaan ruuhkabussissa huonojen yhteyksien päässä (esim. vain 1 palkki).
Onko jotain suosituksia Mobiili-laitteisiin kuvien kokoon liittyen? Toinen asia, jos kuva on pystysuunnassa (älypuhelin) liian pieni, niin onko ok "vaatia" käyttäjää kääntämään puhelin vaakatasoon, jotta kuvan mittasuhteet muuttuisivat suuremmiksi?
...mitä enemmän olen lukenut ja kokeillut responsiivisia juttuja sitä monimutkaisemmiksi asiat ovat muuttuneet. Kaikki tuntuu olevan kiinni sisällöstä ja siitä ideologiasta miten sisältöä halutaan näyttää. Haluan kuulua siihen porukkaan joka tekee vain yhdet sivut kaikille laitteille.
Yhdet sivut kaikille laitteille tarkoittaa joko sitä, ettei sivuilla ole sisältöä kovinkaan paljoa ja että ulkoasu on yksinkertainen, tai sitten sitä että epäonnistut ja sivuistasi tulee kasa paskaa. Mikään "responsiivinen" sivusto ei ole ollut kovin hyvä millään alustalla. Hyvin usein ne ovat karseata paskaa.
Musta nyt tuntuu, että Late menee nettisivuissa responsiivisuus edellä, eikä ajattele käytettävyyttä eikä sisältöä.
Responsiivisuus ei automaattisesti tee sivustosta käytännössä toimivaa, vaikka se teknisesti olisikin
Ylen uutisten sivusto (http://yle.fi/uutiset/) on mielestäni hyvin toteutettu responsiviinen sivusto. Se on nimenomaan käytännössä toimiva.
Tosin kännykällä luen yleensä erillistä mobiiliversiota (http://m.yle.fi/uutiset/) joka on jonkin verran kevyempi käyttää etenkin heikoilla yhteyksillä.
Juu YLEn sivujen värimaailma on kiva ja selkeä. Muutenkin responsiivinen hyvällä tavalla. Ainoa asia jota en ymmärrä on miksi navigaatioita pitää olla 2 päällekkäin, sivut voisivat olla selkeämmät.
late kirjoitti:
Juu YLEn sivujen värimaailma on kiva ja selkeä. Muutenkin responsiivinen hyvällä tavalla. Ainoa asia jota en ymmärrä on miksi navigaatioita pitää olla 2 päällekkäin, sivut voisivat olla selkeämmät.
Olen kanssasi täysin eri mieltä. Alanavit on selkeitä, ja silti eri pääkategorioiden välillä on helppo selailla. Ps. Naveja on itseasiassa kolme mobiilisivustolla, silti erittäin selkeä ja käytännöllinen.
Sivut on selkeitä typon osalta ja sisältöä on helppo lukea. Ulkoasun selkeyden vuoksi sisältö on hyvin esillä ja eroteltuna toisarvoisista uutislistoista yms.
The Alchemist kirjoitti:
Yhdet sivut kaikille laitteille tarkoittaa joko sitä, ettei sivuilla ole sisältöä kovinkaan paljoa ja että ulkoasu on yksinkertainen
En nyt ihan ole samaa mieltä.
Kun lukee tietoa tuosta responsive-design sivuilta niin kyllä tuon responsiivisuuden yksi päämärä vaikuttaisi olevan se, ettei tarvitse ylläpitää kahta sivustoa (mbiili+persussivut).
pistemies kirjoitti:
The Alchemist kirjoitti:
Yhdet sivut kaikille laitteille tarkoittaa joko sitä, ettei sivuilla ole sisältöä kovinkaan paljoa ja että ulkoasu on yksinkertainen
En nyt ihan ole samaa mieltä.
Kun lukee tietoa tuosta responsive-design sivuilta niin kyllä tuon responsiivisuuden yksi päämärä vaikuttaisi olevan se, ettei tarvitse ylläpitää kahta sivustoa (mbiili+persussivut).
miten yksi ulkoasu poissulkee sen, mitä Alchemist juuri sanoi.
Lebe80 kirjoitti:
miten yksi ulkoasu poissulkee sen, mitä Alchemist juuri sanoi.
Koska responsiivisissä sivuissa ei ole kyse siitä, mitä sivu sisältää vaan siitä miten sivu esitetään toimivasti näyttökoosta riipumatta.
En nyt ymmärrä miten responsiivisuus liittyisi mitenkään siihen että sivusto olisi paskaa kaikilla alustoilla. Kysehän on vain loppupeleissä siitä, miten sivuston sisältö skaalataan ja siirretään sopivammaksi näyttöön. Se, että vastaan on tullut huonoja designeja, on vain syy huonon designerin ja sen suoltaman leiskan.
Toinen asia on se, että ihmiset on tottuneet samaan leiskaan kaikilla alustoilla. Aika näyttää sen, pitääkö seuraava sukupolvi sitä parempana että leiskat skaalautuu eri näyttökokoihin.
pistemies kirjoitti:
Lebe80 kirjoitti:
miten yksi ulkoasu poissulkee sen, mitä Alchemist juuri sanoi.
Koska responsiivisissä sivuissa ei ole kyse siitä, mitä sivu sisältää vaan siitä miten sivu esitetään toimivasti näyttökoosta riipumatta.
Ei responsiivisuus liity mitenkään siihen, esitetäänkö sivu toimivasti.
Se on vain nimitys siihen, että sivun tyylit vaihtuvat selaimen koon muuttuessa. Disaini voi silti olla täysin susi, vaikka olisikin responsiivinen.
Kuten groovyb sanoi, eivät nämä asiat liity toisiinsa mitenkään.
edit:
Siksi ehkä olisi järkevämpi keskittyä sivuston käytettävyyteen ennemmin, kuin mennä (kuten olen sanonut aikaisemmin) pelkän responsiivisen ulkoasun ehdoilla (varsinkin kun täällä yksi tyyppi on jäänyt nyt jumiin pelkkien kuvien esittämiseen).
Eli ensiksi varmaan kannattaisi miettiä, tarvitseeko sivut responsiivista ulkoasua oikeasti, vai ollaanko tekemässä ulkoasua responsiiviseksi vain responsiivisuuden vuoksi ilman mitään sen suurempaa lisäarvoa.
Lebe80 kirjoitti:
(varsinkin kun täällä yksi tyyppi on jäänyt nyt jumiin pelkkien kuvien esittämiseen).
Teen versiota 2.0 kotisivuistani. Kuvat skaalautuvat eri näytöille. Kyse on 200% kokoisesta kuvasta joka näytetään aina 100% koossa. Lisäksi kuva on aina sama ja sitä tarkoitin tällä Mobiliili -kysymyksellä, onko 300kb liian raskas kuva ladata älypuhelimella. (huono yhteys)
- Toinen seikka jota ihmettelen tiettyjen kaalimaan kakaroiden kohdalla on se että kirjoitustyyli on niin hyökkäävä. Varsinkin kun puhutaan responsiivisesta suunnittelusta, joka ainakin oman käsitykseni mukaan on valtava kokonaisuus, käsitteitä, erilaisia tyylejä ja tekniikoita.
Aiheesta on kirjoitettu kilo kaupalla kirjoja. Esimerkiksi nyt tämä kuvien näyttäminen webissä nyt ja tulevaisuudessa. Nämä ovat mielestäni asioita, joita ei ole vielä ratkaistu. Olemme jossain välivaiheessa ja ainakin itse odotan suu auki mitä siinä lusikassa on.
late kirjoitti:
Olemme jossain välivaiheessa ja ainakin itse odotan suu auki mitä siinä lusikassa on.
Vaikka tuolla tarkoittanet vain kuvien esittämistä, niin kenties joskus saadaan jquery.responsive niminen paketti, joka hoitaa kaiken oleellisen lähes valmiiksi (kuvia lukuunottamatta).
late kirjoitti:
Aiheesta on kirjoitettu kilo kaupalla kirjoja. Esimerkiksi nyt tämä kuvien näyttäminen webissä nyt ja tulevaisuudessa. Nämä ovat mielestäni asioita, joita ei ole vielä ratkaistu. Olemme jossain välivaiheessa ja ainakin itse odotan suu auki mitä siinä lusikassa on.
No, omasta mielestä tämä responsiivisuus on nimenomaan se välivaihe, joka on kehitetty vain sen vuoksi, että meillä on nyt erikokoisia laitteita.
Tulevaisuudessahan meiltä voi nuo erikokoiset näytöt vaikka hävitä, ja tilalle tulee täysin uudenlainen näyttötekniikka.
Itse pitäisi tuota responsiivista ulkoasua vain yhtenä tapana näyttää nettisivuja. Yleensähän responsiivisen ulkoasun omaava sivusto ei ole järin graafinen, vaan muistuttavat pitkälti uutis-/blogialustan ulkoasua.
late kirjoitti:
- Toinen seikka jota ihmettelen tiettyjen kaalimaan kakaroiden kohdalla on se että kirjoitustyyli on niin hyökkäävä. Varsinkin kun puhutaan responsiivisesta suunnittelusta, joka ainakin oman käsitykseni mukaan on valtava kokonaisuus, käsitteitä, erilaisia tyylejä ja tekniikoita.
No selkeyden vuoksi, jos minä olen mielestäsi kaalimaan kakara, niin sitä olet sitten myös itse, varsinkin kokemuksesi mukaan. Jotenkin jokainen kysymyksesi vain tukee tätä kokemattomuuttasi. Sinulla on kovasti virtaa, mutta tunnut suuntaavan sen aivan vääriin paikkoihin.
Ymmärrän, että responsiivisen ulkoasun suunnittelu on nyt in, pop ja rock, mutta kannattaa silti edelleen muistaa suhteuttaa asioita.
Kuvien koko ei niinkään vaikuta lataamiseen, vaan enemmänkin se, kuinka monta tiedostoa selain joutuu yhdellä näyttö-/latauskerralla lataamaan (css, js, kuvat yms. yms.). Mikäli tiedostoja on paljon, lataus on hitaampaa. Nykyisillä yhteyksien nopeuksilla ei juurikaan ole enää vaikutusta.
Mobiililaitteet vastaavat jo hyvinkin pitkälti ihan "desktop"-laitteita ja näissä kaikissa on hitaita ja nopeita laitteita niin "valokuituyhteyksillä" kuin hitailla (alle) 3G-yhteyksillä.
Kaalimaan kakaroissa ei ole mielestäni mitään vikaa, ei myöskään putkalaisissa. Ihan mielenkiintoisia pointteja..
Lebe80 kirjoitti:
Sinulla on kovasti virtaa, mutta tunnut suuntaavan sen aivan vääriin paikkoihin.
Yritän saada kotisivujeni version 2.0 ulos tällä viikolla. Mitä tarkoitat tuolla yllä olevalla.. nyt pyrin AMK:hon ja mietin vakavasti yrittäjyyttä. Haluaisin oppia tekemään web-sivuja Front End + Back End puoli. Apuna luultavasti WordPress. Pääkaupunkiseudun PK-yritykset.
late kirjoitti:
Lebe80 kirjoitti:
Sinulla on kovasti virtaa, mutta tunnut suuntaavan sen aivan vääriin paikkoihin.
Mitä tarkoitat tuolla yllä olevalla..
Näitä:
Lebe80 kirjoitti:
Ymmärrän, että responsiivisen ulkoasun suunnittelu on nyt in, pop ja rock, mutta kannattaa silti edelleen muistaa suhteuttaa asioita.
Lebe80 kirjoitti:
Musta nyt tuntuu, että Late menee nettisivuissa responsiivisuus edellä, eikä ajattele käytettävyyttä eikä sisältöä.
Responsiivisuus ei automaattisesti tee sivustosta käytännössä toimivaa, vaikka se teknisesti olisikin
Yrittäjyydessä ei kannata panostaa pelkkään Wordpressiin, vaan mukaan kannattaa ottaa esim. Concrete5, jolla saa helposti luotua isompia sivustoja, kun Wordpressin rajat tulevat vastaan. Drupalit yms. sopivat taas sitten todella suurille sivustoille, joskin siinäkin rakentelu ei ole ihan niin suoraviivaista kuin esim. Conretessa.
Muutenkaan ei kannata erikoistua vain yhteen julkaisujärjestelmään, vaan tutkia ihan rauhassa useampia.
Oman kokemuksen perusteella Wordpress tosiaan riittää vain hieman pienemmille (blogi-/uutis-) sivustoille, jonka jälkeen joutuu jo sen verran tekemään alustan kanssa töitä, että toinen julkkari on heti paljon käytännöllisempi.
Lebe80 kirjoitti:
Oman kokemuksen perusteella Wordpress tosiaan riittää vain hieman pienemmille (blogi-/uutis-) sivustoille, jonka jälkeen joutuu jo sen verran tekemään alustan kanssa töitä, että toinen julkkari on heti paljon käytännöllisempi.
Tarkoittaako tämä nyt sitä kun tein työvuoron varausohjelman, niin jollain toisella alustalla en olisi joutunut tekemään niin paljon koodia itse?
Sinun tänne jakamasi koodin perusteella et käyttänyt edes WordPressin valmiita toimintoja vaan purkkasit surutta ihan omiasi. Olisit luultavasti päässyt vähemmällä jo käyttämällä WP:tä oikein.
WP:ssä tein virheen SQL-lauseen kanssa. Se oli tilanne jossa ennen tehtiin yhdellä tapaa ja sitten uuden version 3.5 yhteydessä homma oli muutettu. Moni muukin sai silloin saman virheilmoituksen kuin minä. Mutta antaa selitysten olla, tekemällä oppii. Yritän saada uudet sivuni liveksi perjantaihin mennessä.
..olisi sitten mukava saada palautetta miten pystyn kehittämään sivuista paremmat. Ja tietenkin yleinen toimivuus. Yksin on aina haastava testata, enkä muutenkaan ole vielä paneutunut tarpeeksi testaamiseen. Kiitos kommenteista joka tapauksessa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.