Nykykameroilla esitettävät kuvat ja videot skaalataan yleensä käsin tai automaattisesti kiinteälevyisille nettisivuille siten, että ne näkyvät kokonaan käytettävissä olevan sivun tai sen palstan leveydellä – käytännössä sivun leveys isollakin ruudulla on useimmiten vain 960 pikseliä ja palstoilla tätä selvästi vähemmän. Kuvia ja videoita voi toki erityisellä “lightbox”-laajennuksella esittää koko käytettävissä olevan ruudun kokoisena, jolloin nykypäivän paremmat kännykätkin pystyvät esittämään täys-HD-kokoisen videon sen todellisella pikselitarkkuudella. Digikameroiden tai edes nykykännyköiden mitään valokuvia ei sen sijaan pysty esittämään alkuperäisellä tarkkuudella juuri missään näytöissä edes koko sivun näyttönä.
Näyttökoko pienenee, kuvat eivät
Kun sivustosta tehdään responsiivinen, kuvien ja videoiden asettelu täytyy ajatella monessa suhteessa eri tavalla kuin vain yhtä staattista kokoa käytettäessä. Sama toki pätee myös kiinteän web-sivuston esittämiseen esimerkiksi iPhonen sovelluksena, olettaen että sisältö halutaan pitää samana.
Vaikka sivun koko ja sen palstat skaalautuvat alaspäin sekä teksti rivittyy kaventuneeseen kokoon uudelleen perustana olevaa mukautuvaa kehikkoa (responsive grid) käyttäen, kuvat ja videot pysyvät ilman erityistemppuja alkuperäisessä koossaan. Osa jää silloin pimentoon ja sivua joutuu pystysuunnan lisäksi rullailemaan alaspäin, alla esimerkkinä lyhyt Youtubeen lataamani videopätkä Kalifornian Palm Springsissä – en ole tähän videoon tehnyt mitään responsiivisen sivuston edellyttämiä säätöjä:
Perusratkaisut CSS:llä
Liitän tähän alle yhden kuvan, jonka 1000 pikselin leveys on suurempi kuin tämän jutun esittävän sarakkeen maksimileveys 810 pikseliä. Olen ladannut tuon Helsingin Pikkukosken uimarantaa esittävän, Lumia 800:n testin yhteydessä esitetyn kuvan alkuaan 1000 pikselin levyisenä, jonka skaalasin etukäteen PhotoShopilla alun perin paljon leveämmästä koosta. Miksi kuva sitten näkyy koko sarakkeen levyisenä, vaikka muuttaisit selaimesi leveyden paljon pienemmäksi?
Peruskeino pitää kuvat ja videot responsiivisessa (tai kiinteälevyisessäkin!) sivudesignissa korkeintaan sivun levyisenä määrittämällä kuvien ja videoiden maksimileveydeksi esityssivun tai sarakkeen maksimileveys. Tämä tapahtuu käyttäen CSS-kielen ominaisuutta tietyntyyppisten sivulla esiintyvien elementtien maksimileveyden määrittämiseksi seuraavaan tapaan:
/* limit image & video width to max. 100% */
img, video {
max-width: 100%;
}
Tämä perusratkaisu on toimiva erityisesti pieniä näyttökokoja ajatellen, mutta rajoittaa jutun asettelua isoilla näytöillä melkoisesti. Usein jutuissa halutaan yhden tai muutaman pääkuvan ohessa eri kohtiin pienempiä kuvia, joiden ympäri teksti juoksee. Kiinteälevyisille sivustoille tällainen asettelu on helppoa esimerkiksi käyttämäni WordPressin uusimmalla versiolla: vedät vain hiirellä kuvan pienemmäksi ja määrittelet, tasataanko se käytettävän tilan vasempaan tai oikeaan laitaan tahi sijoitetaan keskelle aluetta.
Responsiivisessa sivustossa kuvan leveyden voi kirjoitusvaiheessa asetella kiinteän pikselimäärän ohessa joko prosentteina julkaisun leveydestä tai typografiasta tutuilla em-yksikköinä eli suhteessa eri selaimissa käytettävään perusfontin (M-kirjain) leveyteen.
Kun kuva määritellään näin, leveys pysyy koko ajan suhteellisena esitysalueen leveyteen. Olen sijoittanut saman kuvan kuin yllä tämän tekstin vasemmalle puolelle leveydellä 35 prosenttia koko jutun leveydestä. Voit kokeilla skaalauksen toimivuutta ja jutun ulkoasua kaventamalla selaimesi hitaasti suurinta kokoa pienemmäksi.
Kuvan pienentäminen suhteessa koko jutun esitysleveyteen ei välttämättä tuota kovin hyvältä näyttävää tulosta ainakaan pidettäessä älypuhelimen näyttöä pystysuunnassa; kuvista tulee näin turhankin pieniä.
Edistyneemmissä sivustoratkaisuissa juttujen koko leveyttä pienempiä kuvakokoja muutetaan vasta sitten, kun palstan leveys menee kuvan alkuperäistä esitysleveyttä pienemmäksi. Tällaista dynaamista muotoilua käyttäen jutun taitto pitäisi oikeastaan ennen julkaisua tarkastella koko sivuston kaikissa mahdollisissa esitysleveyksissä.
Yhä yleisempi -ratkaisu tähän ongelmaan on kaikkien jutussa esiintyvien kuvien klikkauksella avautuva “lightbox”, jossa kuva näkyy likimain käytettävissä olevan näytön levyisenä, voit kokeilla tätä klikkaamalla tämän sivun kuvia.
Voit piilottaa osan kuvista ja videoista mobiililaitteissa
Monilla sivustoilla on erilaisia videopätkiä suurikokoisena esimerkiksi otsikoissa tai vaikkapa sivuston eri kohtiin sijoitetuissa mainoksissa (!). Nämä voi olla usein perusteltua piilottaa pienikokoisilta ruuduilta kokonaan, koska ne latautuvat suhteellisen hitaasti ja vievät myös tilaa ruudulta. Temppu on suhteellisen helppo tehdä tiettyihin paikkoihin kiinteästi sijoitettavalle sisällölle käyttäen CSS-kieltä esimerkiksi seuraavasti:
/* Small screens: strip rotating header widget */
@media only screen and (max-width: 601px) {
.header-widget {display: none;}
}
Perinteisesti nettimainonta hinnoitellaan paikan ja koon mukaan: koko etusivu, otsikko, sijoitus jutun seassa tai sivupalkissa tietyssä järjestyksessä ja tietyssä pikselikoossa jne
Siispä haaste mainosmyyjille: Kun hyvin mietitty responsiivinen sivusto on nopea ja muihin ratkaisuihin verrattuna mainosmyyjän yritykselle kustannustehokas ratkaisu, miten hinnoitella siihen sovitettava mainonta? Tavoitteena tietylle mainokselle yksi sopimus, joka kattaa joko dynaamisesti kooltaan pienenevä tai tietyn rajaleveyden kohdalta kokonaan peitettävän sijoittelun sivustolla.
