Lähtökohtana responsiivisen sivuston suunnittelussa on yksi ainoa sisältö ja sen käyttämiseksi yksi joustavasti laitteiden ja näyttökokojen mukaan muuntuva ja siten dynaaminen ulkoasu. Tässä jutussa vähän responsiivisen web-sivuston tärkeimmästä osasta, perustana toimivasta responsiivisesta “gridistä”.
Perustana responsiivinen grid
Miten varmistetaan, että sivuston sisältö näkyy hyvin sekä isoimmilla näytöillä että pienillä mobiililaitteilla?
Tärkein vastaus tähän on näyttökoon ja laitteen perusteella mukautuva, “fluidi” sivuston perusrakenne. Alla oleva kuva havainnollistaa, miten sivuston eri osioissa näkyvä sisältö sijoittuu responsiivista perusrakennetta käytettäessä eri tavoin eri näyttökokoja käytettäessä.
Kuvan oikeassa laidassa olevalla suurella näytöllä sivujen sisältö keskitetään koko ruudulle siten, että vasemmalla ja oikealla ei ole oikeastaan mitään sisältöä (ehkä taustakuva tai -kuvia) ja koko sisältö näkyy kerralla kokonaan ja sijoittuen koko otsikkoon ja koko alla olevaan rakenteeseen eri levyisine osioineen. Keskikoossa sisällön leveys pienenee, eikä koko sisältö enää mahdu kerralla ruudulle, mutta rakenne säilyy samanlaisena kuin isommillakin näytöillä. Pienimmässä näyttökoossa vasemmalla koko sisältö asettuu yhteen sarakkeeseen rullattavaksi pystysuunnassa. Harmaana näkyvä otsikkopalkki ulottuu isoimmalla ruudulla koko näytön laidasta toiseen, pienimmällä vain yhden sarakkeen levyisenä.
Tällainen rakenteen muutos saadaan käyttämällä sivuston perustana CSS-kielen avulla kuvattua ruudukkoa (engl. grid), jossa on tyypillisesti kaksitoista tai kuusitoista perussaraketta. Tällaisia ruudukoita ryhdyttiin käyttämään websivustojen suunnittelussa ja toteutuksessa jo ennen responsiivista suunnittelua, koska perus-gridin avulla luotuihin sarakkeisiin voi asemoida erilaisia sivun elementtejä käyttämättä perinteisesti pelkällä HTML-kielellä kuvattuja taulukoita.
Yhtä tai useampaa tällaisen ristikon sarakkeista voi “työntää” (push) tai “vetää” (pull) sarakkeiden perusjärjestyksestä poikkeavaan järjestykseen, mikä toimii myös responsiivisten gridien asemoinnin perustana. Varmaankin yleisin kiinteäleveyksinen grid kulkee nimellä 960 System, koska 960 pikselin sivuleveyden saa jaetuksi tasan kahteentoista, kuuteentoista tai kahteenkymmeneenneljään samanlevyiseen sarakkeeseen.
Responsiivinen web design käynnistyi CSS:n versiosta 3, koska siihen sisältyvällä media queries -moduulilla voi tunnistaa käytettävissä olevan näyttöalueen koon ja muokata sitten dynaamisesti sarakkeiden keskinäistä sijoittelua. Oheisen kuvan mukaisessa gridissä leveimmässä näytössä otsikkopalkki leviää kaikilla näytön koilla yli koko näytön välittämättä sarakkeista. Palkin alapuolella oleva tummanharmaana näkyvä osa täyttää kaikki ruudukkoon määritellyt sarakkeet. Tämän alapuolella olevat kaksi osioita sijoitellaan push/pull -komennoilla vierekkäin, kun kyseessä on riittävän leveä näyttö, mutta kapeimmissa näytöissä peräkkäin eli käytännössä alakkain.
Dynaamisesti tapahtuvat muutokset responsiivisella sivulla havaitsee hyvin, jos sivua katselee esimerkiksi älypuhelimella ja kääntää laitetta pysty- ja vaaka-asentoihin. Jos vaakaleveys on riittävän suuri, saattaa vain yhden sarakkeen sivu muuttua useampisarakkeiseksi.
Suunnittele responsiivinen sivusto “mobile first” !
Edellä kuvatun näyttökokoon mukautuvan perusristikon (engl. responsive grid) sisällä teksti rivittyy automaattisesti uudelleen rakenteen muuttuessa. Perusristikko ei kuitenkaan ilman eri toimenpiteitä skaalaa kuvia tai videoita sopimaan yhtä hyvin suurille tai pienille näytöille – näistä lisää seuraavassa jutussa.
Dynaamisesti muotoaan muuttavan sivuston pitäminen käyttäjille yhtenäisenä erikokoisilla näytöillä on saanut monet suunnittelijat asettamaan lähtökohdaksi pienimmät näyttökoot, minkä päälle lisätään erilaisia isoilla näytöillä luettavuutta ja navigointia parantavia elementtejä. Tähän “Mobile first” -suunnitteluperiaatteeseen liittyy läheisesti myös hallittu JavaScript-ohjelmoinnin käyttö ja lähes täydellinen Flash-elementtien korvaaminen esimerkiksi HTML5-kielen vastaavilla toiminnoilla. Yksi tunnettu kirjoittaja responsiivisesta web designista on Luke Wroblewski, jonka blogista löytyy myös tarkempaa yhteenveto “mobile first” -periaatteista.
Mobile First -periaate toimii minusta erinomaisesti myös siinä tapauksessa, että sivustosta halutaan esimerkiksi eri älypuhelimille tai tableteille omat sovelluksensa (apps) ja tietokonenäytöille kiinteälevyiset sivut esimerkiksi mainosten helpompaa myyntiä ajatellen.
Teknistä toteuttajaa varten
Useimmiten responsiivisessa gridissa media query:t porrastetaan siten, että ensin laukeaa suurimpien näyttöjen sijoittelut ja viimeisenä kaikkein kapeimman näytön sijoittelut. Jutussa kuvana esitetyn gridin CSS-koodi saattaa siten näyttää alla olevan esimerkin mukaiselta:
/* all screens at least 960px wide */
@media only screen and (min-width: 960px) {
/* column widths */
.col1 {width:80px} .col2 {width:160px} .col3 {width:240px} .col4 {width:320px}
...
/* Source order */
.push1 {left:80px} .push2 {left:160px} .push3 {left:240px} .push4 {left:320px}
...
.pull1 {right:80px} .pull2 {right:160px} .pull3 {right:240px} .pull4 {right:320px}
..
@media only screen and (min-width: 768px) e.g. iPad {
/* column widths */
.col1 {width:60px} .col2 {width:120px} .col3 {width:180px} .col4 {width:240px}
...
/* Source order */
.push1 {left:60px} .push2 {left:120px} .push3 {left:180px} .push4 {left:240px}
...
}
/* mobile devices with max 767px viewport e.g. iPad vertical */
@media only screen and (max-width: 600px) {
/* Make all columns full width */
.col1, .col2, ... .col12, { width:100% !important; }
/* No source ordering on mobile */
.push1, .push2, ... .push12 { left:auto !important; }
.pull1, .pull2, ... .pull12 { right:auto !important; }
}
