En löytänyt pikagooglailulla mitään, mutta olen nähnyt näitä joillain sivustoilla, ainakin täällä.
Eli miten CSS:ssä onnistuisi helpoiten tyyliohjeiden luominen eri näytöille, eli saisi vähän skaalautuvuutta hyödynnettyä puhelimissa tableteissa yms. Tiedän kyllä tämänkaltaiset ratkaisut:
<link href="jotain.css" rel="stylesheet" type="text/css" MEDIA=PRINT />
Mutta kannattaako tuollaista käyttää?
Järkevämpää tehdä CSS3 media queryillä: http://webdesignerwall.com/tutorials/css3-media-queries
Bootstrapin käyttämä:
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }Tuki IE:ssä versiosta 9 alkaen, aiemmille versioille tuen saa lisättyä JS-koodilla.
Tässä puhutaan nyt kahdesta ihan eri asiasta. Ensimmäisessä viestissä esitetty mediatyyppi (esim. media="print") ei auta juuri muussa kuin aivan erityyppisten esitystapojen suunnittelussa. Esimerkiksi juuri tulostustyylin määrittelyyn se on kuitenkin selvästi oikea tapa.
Jos taas pitää saada sivusta erikokoisia versioita, voi käyttää yllä esitettyä ominaisuutta. Kaiken maailman tabletteja ja puhelimia ei ehkä kannata yrittää huomioida, jos ei oikeasti pysty edes testaamaan laajasti niillä kaikilla; usein niillä pystyy käyttämään hyvin samoja sivuja kuin tavallisellakin tietokoneella.
Kiitos, nyt toimii!
Tälle asiallehan käytetään sellaista hienoa englanninkielistä termiä kuin "responsive web design", joka taas suomalaisten ammattilaisten piirissä näyttää taipuvan aavistuksen kuvaavamman termin alle: mukautuva verkkosuunnittelu. Tai no, on vain osa sitä tietenkin, mutta mielestäni hyvä tuoda esille kun sivuaa aihetta.
Tässä kohtaa myös kiitän Ollia varsin mukavan esimerkkikoodin sujauttamisesta, nuo käytetyt raja-arvot vaikuttavat omaan silmääni järkeviltä. Ruudukko-CSS:t (tai CSS-"frameworkit") taas ovat omaan makuuni hieman hönttöä rompetta, ovat vaan turhaa ylimääräistä opiskeltavaa ja rajoituksia silloin kun osaa jo ennestään CSS:n perusteet erinomaisesti. Olen siis tässä tovin tauon jälkeen palailemassa kuvioihin ja ottamassa kiinni uutta käyttökelpoista CSS:ää. Tässä kohtaa säästyin ylimääräisen hakemisen vaivalta kun sattui sopivasti ketju kohdalle.
Hyvä, että oli hyötyä. Jos haluaa mahdollisimman helposti mahdollisimman monella laitteella toimivan layotin, jota saa helposti muokattua omien mieltymysten mukaan ja joka on tietenkin responsive designia, kannattaa tutustua esim. http://twitter.github.com/bootstrap/
Merri kirjoitti:
Tälle asiallehan käytetään sellaista hienoa englanninkielistä termiä kuin "responsive web design"
Tätä termikysymystä tuli mietittyä aika lailla kirjaa HTML5 sovellusalustana kirjoitettaessa samoin kuin antaessani lausuntoa Sanastokeskus TSK:n sanaehdotuksista, joihin termi oli myös päässyt. Tämä oli yksi niitä asioita, joissa luovuin suomalaistamisesta, koska ”responsiivinen” on jo juurtunut alan käytäntöön.
Termikysymys on tärkeä siksi, että siihen liittyy olennaisia käsitteellisiä ja teknisiä eroja. Responsiivisuus on sitä, että tehdään olennaisesti erilainen taitto (yksinkertaisimmillaan: yksipalstainen ja useampipalstainen) eri näyttökokoja varten. Se on eri asia kuin esimerkiksi se, että muotoilu joissakin rajoissa mukautuu näyttökokoon (esimerkiksi prosentuaalisten leveyksien ansiosta). Näitä tarvitaan usein yhdessä, mutta ne ovat eri asioita ja tarvitsevat eri nimet.
Merri kirjoitti:
Tässä kohtaa myös kiitän Ollia varsin mukavan esimerkkikoodin sujauttamisesta, nuo käytetyt raja-arvot vaikuttavat omaan silmääni järkeviltä.
Ne ovat yksi mahdollisuus. Boostrap tarjoaa ne käyttöön, ja taustalla on varmasti harkintaa ja kokemusta, mutta riippuu tilanteesta, kannattaako niitä käyttää. Jos kaikkia käyttää, pitää suunnitella aika paljon. Ja jokainen asettelu on sitten myös hiottava – ja ylläpidettävä.
Monissa tilanteissa voi olla ihan riittävää tehdä asettelu pienelle näytölle (tyypillisesti yksipalstainen) ja toinen asettelu isommille. Tai siitä voi ainakin aloittaa.
Mutta missä vaiheessa "mukautuva verkkosuunnittelu" tai "mukautuvuus" on vakiintunut johonkin muuhun kuin "responsiivisuuteen"? Tuota responsiivisuutta ei edes löydy Sanastokeskuksen sivuilta mainittuna tällä hetkellä. Google sen sijaan osaa olla sitä mieltä, että mukautuvaa verkkosuunnittelua on jo varsin mukavasti käytetty alan osaajien toimesta ja juurikin vastineena responsive web designille. Väittämäsi juurtuminen näillä vilkaisuilla on aika hataralla pohjalla - varsinkin termille, jolla ei ole vielä ikää kahta vuotta edes englanniksi.
Merri kirjoitti:
Mutta missä vaiheessa "mukautuva verkkosuunnittelu" tai "mukautuvuus" on vakiintunut johonkin muuhun kuin "responsiivisuuteen"?
Eivät ne ole vakiintuneet mihinkään. Sen sijaan responsiivisuus on vakiintunut.
Merri kirjoitti:
Tuota responsiivisuutta ei edes löydy Sanastokeskuksen sivuilta mainittuna tällä hetkellä.
Sanastot laahaavat kehityksen perässä, ja kuten viestistäni ilmeni, koko käsite on vasta lausuntokierroksella.
Merri kirjoitti:
Google sen sijaan osaa olla sitä mieltä, että mukautuvaa verkkosuunnittelua on jo varsin mukavasti käytetty alan osaajien toimesta
Lahjottava Google kertoo parista sadasta esiintymästä, ja niistä kärjessä olevat mainitsevat sen responsiivisuuden selityksenä pikemminkin kuin käytössä olevana terminä. Kokeilepa etsiä suomenkielisiltä sivuilta sanalla responsiivinen. Mukaan sattuu jonkin verran sanan muutakin käyttöä, mutta aika vähän. (Minä tunsin aiemmin sanan vain bridgetermistä ”responsiivinen kahdennus” :-))
lainaus:
Väittämäsi juurtuminen näillä vilkaisuilla on aika hataralla pohjalla - varsinkin termille, jolla ei ole vielä ikää kahta vuotta edes englanniksi.
Maailma muuttuu nopeasti ja kiihtyvällä tahdilla. Tämä on yksi niitä syitä, joiden takia esimerkiksi suomalainen IT-alan termistötyö on aika lailla pudonnut kelkasta: kun käsite pääsee sen käsittelyyn, se alkaa jo olla passé tai sitten sille on vakiintunut nimitys, joka on ehkä terminologisesti ja muutenkin älytön, mutta siis jo vakiintunut.
Yucca kirjoitti:
(Minä tunsin aiemmin sanan vain bridgetermistä ”responsiivinen kahdennus” :-))
Itse tunsin sanan ihan yleisessä merkityksessään "vastaanottavainen/herkästi reagoiva" ja siksi tuo responsive web design tuntuu jo lähtökohtaisesti oudolta. Ensimmäisen kerran kun kuulin siitä, niin ensimmäinen mielikuva oli käyttäjän toimenpiteisiin nopeasti reagoiva weppisivu. Mielestäni RWD:tä kuvaavampi termi olisi vaikkapa adaptive web design.
Mutta, en ole natiivi englanninpuhuja, joten mitä minä tiedän.
Jumalauta kun on kuivaa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.