CMS-suunnitteluopas – Osa 7: Responsiivisuus

Modernit verkkosivustot suunnitellaan mukautumaan erilaisiin näyttöihin, joka lisää hieman suunnittelijan työtä. Aiemmin sivustot toteutettiin johonkin tietyyn leveyteen, esimerkiksi 1024 pikseliin, joka oli jokin aika sitten keskiarvo olemassa olevan monitorikannan leveydestä. Tälläiset sivustotkin toimivat tableteissa ja kännyköissä, mutta niitä pitää jatkuvasti skaalata ja vieritellä eri suuntaan näytöllä.

Tämä artikkeli on osa sarjaa, jossa esittelen vinkkejä kuinka voit suunnitella nettisivuston graafisen ilmeen julkaisujärjestelmän päälle.

Responsiivinen sivusto

Nykyaikaa on sen sijaan toteuttaa automaattisesti eri näyttökokoihin skaalautuvaa sisältöä – sama sivusto näkyy pöytäkoneissa leveimmillään, tableteissa hieman kapeampana ja kännyköissä aivan kapeana. Jos muutat selaimesi leveyttä tällä sivustolla, näet että eri alueet joko skaalautuvat tai sitten pinoutuvat toistensa päälle. Samalla hetkellä myös eri elementit, kuten otsikot ja leipäteksti suurenevat ja pienenevät näytön leveyden mukaan. Tällä saavutetaan maksimaalinen luettavuus ilman jatkuvaa sivujen skaalaamista ja pyörittelyä. Tätä on responsiivisuus.

Erillinen mobiilisivusto?

Netissä on myös runsaasti sivustoja, joihin on toteutettu oma erillinen mobiilisivusto. Esimerkkinä tästä Iltasanomien verkkopalvelu, jossa kävijän käyttämä alusta (pöytäkone, tabletti, kännykkä) tunnistetaan ja tarjotaan sen pohjalta sopivaa sisältöä. Esimerkin mukaisesti www.iltasanomat.fi pöytäkoneille ja m.iltasanomat.fi kännyköille (ja tableteille).

Erilliset mobiilisivut ovat kuitenkin enimmäkseen mediatalojen omaksuma tapa ja heidän sisällöntuotantonsa tukee tätä toimintaa – kyseessä on vain yksi kanava, jossa sisältö julkaistaan. Tällöin molempien verkkoalustojen pitää olla täysautomatisoituja, ettei niitä tarvitse päivittää erikseen.

Miten suunnittelen responsiivisen sivuston?

Responsiivisuus ja sen liittäminen verkkoprojektiin aiheuttaa joskus päänvaivaa myös kokeneelle websuunnittelijalle. Periaate on, että sivujen sisällön – kuvien ja tekstin – pitäisi pystyä skaalaantumaan kohtalaisen vapaasti ja muodostamaan erilaisia sommitteluvariaatioita tietyissä leveyksissä. Sisältö siis asettuu usemmiten päällekkäin mentäessä pienempään ruudun leveyteen.

Täysleveydessään sivulla on kolme vierekkäistä palstaa. Jokaisen palstan leveys on 33 %.

Kun ruutu pienenee, myös palstojen tila pienenee niin, että ei ole enää mahdollista näyttää kolmea vierekkäistä palstaa. Sivusto antaa käskyn sisällölle ”Muuta palstat 50 % leveiksi”. Palstat suurenevat hieman ja vievät nyt kumpikin puolet tilasta. Sisältö on helpommin luettavissa.

Kännykkäkoossa palstat on määrätty 100 % leveiksi, joten ne vievät yksittäin koko leveyden ja asettuvat myös allekkain. Yleensä näitä leveyspisteitä, joissa sisältö saa uudet mitat on 2-5, esimerkiksi:

  • ”Pieni” (kännykkä) alle 640 pikseliä leveät näytöt.
  • ”Keskikoko” (tabletit) 640 – 1024 pikseliä leveät näytöt
  • ”Suuri” (pöytäkoneet) yli 1024 pikseliä suuremmat näytöt

Websuunnittelija voi tietysti tarvittaessa luoda lisää pisteitä. Sisällön voi myös tarvittaessa piilottaa yllä olevien pisteiden mukaan. Esimerkiksi, jos taulukko ei mitenkään skaalaudu oikein pienelle näytölle, se voidaan piilottaa ja näyttää taas isommissa ruuduissa. Tätä tekniikkaa kannattaa kuitenkin käyttää varoen, sillä piilotettu elementti ladataan joka tapauksessa piiloon ja jos se on iso, se voi hidastaa koko sivun esille tuloa.

Toimivatko responsiiviset sivut jokaisella selaimella?

Responsiivisuus on tekniikkana sen verran nuori, että aivan kaikki markkinoilla olevat selaimet eivät siihen pysty. Esimerkiksi vasta Internet Explorerin versio 9 on yhteensopiva ja näyttää sisällön oikein. Muut selainvalmistajat ovat ottaneet asiakseen tukea responsiivisuutta huomattavasti aikaisemmin. Mobiiliselaimet ovat alun perinkin aina tukeneet tätä tekniikkaa.

Listan Internet-selainten markkinaosuuksista löytää täältä ja listan eri selainten toimivuudesta löytää täältä.

Yleisesti ottaen, enää ei kuitenkaan kannata tehdä vanhan tekniikan mukaisia, tiettyyn kokoon lukittuja sivustoja, vaan käyttää responsiivisuuden tarjoamaa tekniikkaa. On esitetty lukuja siitä että jo vuonna 2015 yli puolet nettisivuista avataan mobiiliselaimella.

Katso myös: Bonus: Inspiraatiolinkkejä

Kirjoita kommentti