Julkiset tietoverkot

Sorakuilu

Responsiivinen sivu

Responsiivisuus tarkoittaa sitä, että samaa sivustoa voi lukea eri välineillä, tableteilla, puhelimella, tietokoneella jne.

Responsiivinen eli joustava suunnittelu on oikeastaan joukko tekniikoita ja ideoita, yleisohjeena ovat seuraavat vinkit:

  1. käytä html5:ta
  2. käytä CSS3:ta
  3. suunnittele responsiivinen eli joustava grid (verkko) taustaksi -suunnittele aluksi kaikki näkymät eri kuvaruutukokoihin - mobiiliin sijoittuva sivu niin, että sen pieni näyttökoko otetaan huomioon. Toisaalta pitäisi muistaa, että myös entistä suuremmat näytöt ovat yleistymässä.
    • joitain osia voi piilottaa pienillä ruuduilla
    • muutettavia ominaisuuksia ovat korkeus, leveys ja suunta
    • osien keskeistä asemointia voi vaihtaa (esim vierekkäiset sarakkeet voi sijoittaa myös allekkain)
    • elementtejä voi asettaa skaalautumaan kuvaruudun koosta riippuen, pikselikokomääritysten sijasta tulisi käyttää mahdollisimman paljon em-kokomääritystä, joka määrittää objektien koon suhteessa muihin objekteihin eri näyttökoissa.
    • kuvien, tekstialueiden ja säiliöelementtien kokomäärittelyihin voi käyttää prosentteja
  4. käytä media querya selvittämään käytössä olevan median koko ja määritä css:ssä erot eri kokoiselle ruuduille

Responsiivinen gridi

Koodataan tekemällä objekteille koko- ja paikkavaihtoehtoja näyttökoon mukaan. CSS3:ssa on rivejä, joiden edessä on miinus (-) ja niiden tarkoituksena on pienentää objekteja määritellyssä suhteessa. Alla esimerkki alle 480 pikselin näkymille.

@media only screen and (max-width : 480px)
{
#mygrid
{
display: -ms-grid;
margin: 3px;
-ms-grid-columns: 100%; /*yksi leveä sarake */
-ms-grid-rows: 70px auto auto auto; /*4 riviä */
}

#myheader
{
-ms-grid-row: 1;/*sijoita riville 1 / sarakkeeseen 1*/
-ms-grid-column: 1;
}

#block1
{
-ms-grid-row: 2; /*sijoita riville 2 / sarakkeeseen 1*/
-ms-grid-column: 1;
}
#block2
{
-ms-grid-row: 3; /*sijoita riville 3 / sarakkeeseen 1*/
-ms-grid-column: 1;
}

#block3
{
-ms-grid-row: 4;
-ms-grid-column: 1;
}
}

Mediakysely ja -sääntö

Käytä css:ssä media querya (tarkistetaan, mitä mediaa käytetään ja valitaan css sen mukaan). Mediakyselyn voi tehdä eri tavoilla, esimerkiksi laittamalla head-elementtiin oma tyylitiedoston linkki erikokoisille kuvaruuduille tai sisällyttämällä mediakysely tavalliseen css-tiedostoon.

(a) head-elementtiin

Lisätään seuraava määritys:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

Kysely koostuu kahdesta osasta:

  1. median tyyppi - media type (screen)
  2. itse kysely suluissa sisältää varsinaisen tarkasteltavan media piirteen (max-device-width)jota seuraa kohdearvo(480px)
Suomeksi: kysymme laittelta onko sen vaakasuuntainen resoluutio (max-device-width) sama tai pienempi kuin 480px. Jos ehto toteutuu (siis laite on pienikuvaruutuinen laite esim. iPhone, laitew lataa pyydetyn shetland.css:n. Muuten linkistä ei välitetä.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

with-sanan avulla voi käyttää montaa ehtoa kyselyssä

(b) tavalliseen css-tiedostoon

@media screen and (max-device-width: 480px)
{
.column
{
float: none;
}
}

Tällöin head-elementtiin lisätään:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="respo2.css" type="text/css" rel="stylesheet">