Responsiivinen web-suunnittelu

Mediakyselyt (media Queries)
Viewport
Lisätietoa

Responsiiviseksi web-suunnitteluksi kutsutaan toteutustapaa jossa sivu osaa mukautua hyvin erilaisiin näyttölaitteisiin ja ympäristöihin.

WWW-sivu on jo alunpitäen ajateltu mediana, joka toimii helposti erilaisissa ympäristöissä. HTML kehitettiin helpottamaan tutkijoiden tiedonvaihtoa ja helpottamaan erilaisten tekstinkäsittelyohjelmien tiedostomuotojen yhteensopivuusongelmia. Idea toimikin aluksi ihan hyvin kunnes joku keksi, että sivuista pitää saada hienomman näköisiä ja sen jälkeen otettiin käyttöön kaikki mahdollinen kikkailu sivuston ulkoasun muokkaamisen avuksi. Samalla hämärtyi ajatus selkeästi rakenteellisesta merkkaustavasta.

CSS:n tultua oli helpompaa määritellä sivun ulkoasua. Responsiivisuudesta ei kuitenkaan ollut vielä mitään tietoa vaan paperimaailmasta tulleet graafikot osasivat taittaa vain kiinteäkokoiseen paperimaailmaan ja toivat saman asenteen mukanaan webbipuolelle. Tästä on edelleen muistona sivuja jotka vaativat jotain tiettyä selainikkunan kokoa toimiakseen. Se mikä toimii paperilla ei toimi WWW:ssä, koska WWW-sivuja voi katsoa ties minkäkokoisella laitteella eli näytön koko vaihtelee, näytön tarkkuus vaihtelee ja joskus käytössä ei ole ollenkaan grafiikkaa vaan vain teksti tai ääni. CSS kuitenkin tarjosi jo työkalut skaalautuvaan ulkoasuun ja eri ympäristöihin laadittuihin ulkoasuihin. Kts. WWW-sivujen käytettävyys ja esteettömyys.

Vasta CSS3 ja sen mukana tulleet mediakyselyt mahdollistavat helpon ja järkevän tavan mukauttaa WWW-sivun ulkoasu erilaisiin ympäristöihin.

Sivun responsiivisuuden testaamiseen voi käyttää Firefoxin Responsive Design View -tilaa.

Responsive Web Design

Mediakyselyt (media Queries)

Mediakyselyiden avulla käytettävä tyylitiedosto voidaan määritellä esimerkiksi seuraavien perusteiden mukaan:

Näyttöalueen koko (leveys ja korkeus)
Tulostuspaperin koko
Median suunta (pysty tai vaaka)
Median kuvasuhde
Median värimäärä
Median resoluutio

Esimerkki

@media all {
  p {
    width: 40%;
    color: black;
  }
}

@media all and (min-width: 300px) {
  p {
    width: 60%;
    color: blue;
  }
}

@media all and (min-width: 600px) {
  p {
    width: 80%;
    color: red;
  }
}

@media all and (min-width: 900px) {
  p {
    width: 100%;
    color: green;
  }
}

Esimerkki, missä vaihdetaan käyttäjälle kapeille näytöille sopiva tyylitiedosto käyttöön selainikkunan leveyden mennessä riittävän kapeaksi.

Mediakyselyiden käyttäminen on siis hyvin yksinkertaista. Ensin luodaan sivulle yleinen layout ja sen jälkeen tehdään siitä optimoituja versioita eri kokoisille näytöille: esim. siirretään kapealla näytöllä sivussa oleva navigointi sivun ala- tai yläosaan tai piilotetaan sivun turhia osia kokonaan pois näkyvistä. Mediakyselyillä voidaan määritellä minkäkokoisella näytöllä otetaan mikäkin css-tiedosto käyttöön.

Viewport

Mobiililaitteet olettavat sivujen olevan leveämpiä kuin niiden näytöt ovat. Esim. Applen laitteet olettavat sivujen olevan 980 pikseliä leveitä ja zoomailevat ja sovittavat niitä tämän oletuksen mukaan omaan näyttöönsä. Jos sivu on kuitenkin suunniteltu responsiiviseksi niin laitteen oma arvailu vain huonontaa sivun esitystä...

Mobiililaitteissa ja muissa pieninäyttöisissä laitteissa responsiivisuutta voidaan parantaa käyttämällä viewport-määritystä:

<meta name="viewport" content="width=device-width, initial-scale=1">

width tarkoittaa sivun oletuskokoa CSS-pikseleinä. Jos suinkin mahdollista niin kannattaa käyttää arvoa device-width, joka on ympäristön todellinen koko eikä jotain kiinteää kokoa.
initial-scale asettaa sivun oletuszoomaustason
Muita mahdollisia asetuksia ovat maximum-scale, minimum-scale ja user-scalable
Responsive Meta Tag

Jos teet responsiivisen sivun niin käytä viewport-määritystä:<meta name="viewport" content="width=device-width, initial-scale=1">. Jos et tee responsiivista sivua niin älä käytä mitään viewport-määrityksiä.

Mobiililaitteiden ja muiden erittäin tarkoilla näytöillä varustettujen laitteiden näytöissä pikselit voivat olla turhankin pieniä. Jos sivun ulkoasu on määritelty pikseleinä niin teksti voi olla tarkassa näytössä lukukelvottoman pientä. Tästä syystä monet selaimet skaalaavat automaattisesti tekstin kokoa tarkoissa näytöissä. Aihetta on selitetty tarkemmin artikkeleissa: A pixel is not a pixel is not a pixel

Viewport ei ole vielä virallinen suositus mutta toimii laajalti.

Lisätietoa

Käyttäjien kommentit