Skaalautuvat nettisivut
Yhdet ja samat nettisivut tulisi toimia monenlaisilla laitteilla; puhelimilla, tableteilla, pöytäkoneilla, älytelevisioilla ja jopa pelikonsoleilla. Tämän takia nettisivuista tehdään skaalautuvat eli responsiiviset. Sivujen rakenne ja ominaisuudet sopeutuvat ympäristön mukaan.
Käytettävien 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 läheltä ja pystyasennossa.
Samojen nettisivujen tulisi kuitenkin toimia kaikilla laitteilla, näytön koosta, laitteen ominaisuuksista ja käyttöasennosta riippumatta. Ratkaisuna haasteeseen nettisivujen rakenteesta tehdään responsiiviset eli skaalautuvat. Sivujen rakenne ja ulkoasu joustaa näytön koon mukaan.
Nettisivujen skaalautuvuuden voi todeta 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ä kolme, kaksi tai yksi.
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ämä tulee kertoa selvästi.
Tarkat näytöt
Puhelimien näytöt ovat selvä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 suurempia kuvien kokoja.
Suurien kuvien ongelma liittyy kasvaviin tiedostokokoihin. Isot tiedostokoot hidastavat sivuja ja vaikuttavat hakukonesijoitukseen. Tähän on kuitenkin olemassa monia eri keinoja, jolla sivut 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ä tilat elementtien välillä.