Est. 2007
Turenki | FI
60°55’51.0”N
24°38’26.9”E

Skaalautuvat
nettisivut

Yhdet ja samat nettisivut tulisi toimia monenlaisilla laitteilla: puhelimilla, tableteilla, pöytäkoneilla, älytelevisioilla ja jopa pelikonsoleilla. Tämän takia sivuista tehdään skaalautuvan eli responsiiviset. Sivujen rakenne ja ominaisuudet sopeutuvat ympäristön mukaan.


Laitteiden kirjo on laaja ja niiden näytöt ovat hyvin erilaisia. Pöytäkoneissa näytöt ovat suuria ja vaakamallisia, tablettien ja puhelinten näytöt ovat pieniä ja niitä käytetään yleensä läheltä ja pystyasennossa.

Samojen nettisivujen tulisi kuitenkin toimia kaikilla laitteilla, näytön koosta, laitteen ominaisuuksista ja orientaatiosta riippumatta. Ratkaisuna haasteeseen nettisivujen rakenteesta tehdään responsiiviset eli skaalautuvat. Sivujen rakenne ja ulkoasu siis ”joustaa” näytön koon mukaan.

Sivujen skaalautuvuuden voi todeta melkein millä tahansa sivustolla. Verkkokauppa avataan pöytäkoneella selaimeen, napataan hiirellä selaimen toisesta laidasta kiinni ja pienennetään selainta. Jos tuotteita näkyy leveimmillään kuusi rinnakkain, näkyy niitä kapealla näytöllä vain yksi tai kaksi.

Sormella vai hiirellä

Pöytäkoneita käytetään hiirellä ja näppäimistöllä, puhelimia ja tabletteja sormilla. Hiirtä käytettäessä on paljon helpompi klikata pientäkin linkkiä tai valita tekstiä tarkasti. Sormella tämä ei olekaan niin helppoa. Tämän takia kosketuksen käyttö täytyy ottaa huomioon nettisivujen suunnittelussa. Linkit ja napit, ja erityisesti niiden kosketusalueet täytyy suunnitella suuremmaksi jotta valinta onnistuu myös sormella.

Nettisivujen navigointi on myös erilaista kosketuksella. Pöytäkoneella galleriaa selataan klikkaamalla, puhelimella kuvia on mukavempi katsoa pyyhkäisemällä. Pöytäkoneilla valikko saattaa tulla esille kun hiiri viedään linkin päälle. Tämä ei tietenkään toimi puhelimella. Valikot ja kaikki tieto pitää olla saatavilla sormen painalluksella ja tästä tulee kertoa selvästi.

Tarkat näytöt

Puhelimien näytöt ovat selkeästi tarkempia kuin pöytäkoneiden. Tämä johtuu siitä, että niitä katsotaan paljon lähempää. Muiltakin osin puhelimien näyttöjen kehitys on jättänyt pöytäkoneet jälkeensä.

Perinteisille näytöille suunniteltu grafiikka ja valokuvat näyttävät hyvin pehmeiltä ja epätarkoilta korkeamman resoluution näytöillä. Tämän takia suurempi resoluutio tulee ottaa huomioon sivuilla käytettävissä valokuvissa ja grafiikassa.

Moni grafiikka voidaan esittää vektorimuodossa, joka näyttää aina tarkalta näytön resoluutiosta riippumatta. Kaikki valokuvat ja osa muustakin grafiikasta joudutaan silti esittämään bittikarttakuvina. Tällöin joudutaan käyttämään paljon suurempia kuvien kokoja.

Suurien kuvien ongelma liittyy kasvaviin tiedostokokoihin. Isot tiedostokoot hidastavat sivuja ja vaikuttavat hakukonesijoitukseen. Tähän on kuitenkin olemassa monia eri ratkaisuja, jolla sivuja saadaan toimimaan tehokkaammin. Ajatuksena on, että ladataan kulloisessakin tilanteessa optimaaliset kuvat, ei epätarkkoina, muttei liian tarkkoina.

Teksti

Jotta teksti pysyisi luettavana kaikilla laitteilla, täytyy myös sen skaalautua. Puhelimia ja tabletteja luetaan lähempää, joten tekstin koko myös pienenee niillä. Samoin otsikoiden ja tekstin väliset kokoerot pienenevät.

Suositeltava rivin pituus on 50-60 merkkiä. Liian pitkällä rivillä silmä väsyy ja tippuu helposti matkasta, liian lyhyet rivit ovat stressaavia silmälle.

Tekstikappaleiden, otsikoiden ja muun sisällön välinen tila tulee olla riittävä ja sopusoinnussa. Määrittelyssä kannattaa käyttää suhteellisia yksiköitä, jotta kokonaisuus skaalautuu kaikilla näytön koilla, eikä vain kiinteästi määritellyissä pisteissä.


Utopia auttaa suunnitelemaan skaalautuvat tekstin ja otsikoiden koot sekä skaalautuvat tilat elementtien välillä.