Viewport on selaimen ikkuna-alue, jossa verkkosivuston sisältö näytetään. Se on käytännössä se ruudun osa, joka on käyttäjän nähtävissä ilman vieritystä. Viewportin koko vaihtelee laitteen mukaan: pöytäkoneen näytöllä se voi olla 1920×1080 pikseliä, kun taas älypuhelimessa tyypillisesti 375×667 pikseliä tai vastaava.
Viewport ja responsiivinen suunnittelu
Viewport on keskeinen käsite responsiivisessa suunnittelussa. Kun sivusto mukautetaan eri laitteille, suunnittelu perustuu viewportin kokoon, ei laitteen fyysiseen näytön kokoon. Tämä on tärkeä ero: saman laitteen viewportin koko voi vaihdella, jos käyttäjä muuttaa selaimen ikkunan kokoa tai vaihtaa laitteen orientaatiota pystysuorasta vaakasuuntaan.
Modernit verkkosivustot käyttävät viewport meta -tagia HTML-koodin <head>-osiossa. Tämä kertoo selaimelle, miten sivun tulee skaalautua eri näyttöko’oilla. Ilman tätä tagia mobiiliselaimet saattavat yrittää näyttää desktop-version pienennettynä, mikä johtaa luettavuusongelmiin.
Tyypillinen viewport-asetus näyttää tältä: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Tämä tarkoittaa, että sivun leveys vastaa laitteen näytön leveyttä ja alkuperäinen zoomitaso on 100%.
Viewport-yksiköt CSS:ssä
CSS:ssä voidaan käyttää viewportiin perustuvia mittayksiköitä, jotka skaalautuvat automaattisesti selaimen koon mukaan. vw (viewport width) tarkoittaa prosenttia viewportin leveydestä — 1vw on 1% viewportin leveydestä. Vastaavasti vh (viewport height) mittaa korkeutta.
Näitä voi käyttää esimerkiksi hero-osion korkeuden määrittelyyn: height: 100vh tekee osiosta täsmälleen näytön korkuisen. Tai responsiivinen fonttikoko voi skaalautua näytön koon mukaan: font-size: 4vw suurenee isommilla näytöillä ja pienenee kapeammilla.
Pk-yrityksen sivustolla viewport-yksiköt voivat tehdä suunnittelusta joustavamman ilman kiinteitä breakpointeja. Ne on kuitenkin hyvä yhdistää min/max-rajoituksiin, jotta tekstit eivät kasva liian suuriksi tai pieneksi.
Above the fold ja viewport
“Above the fold” -käsite liittyy läheisesti viewportiin: se tarkoittaa sitä sisältöä, joka näkyy heti sivun latautuessa ilman vieritystä — eli viewportin sisällä. Tämä alue on kriittinen, koska se on ensivaikutelman paikka ja päättää, jatkuuko käyttäjä sivustolla vai poistuu.
Pk-yrityksen sivustolla viewportin ensimmäiseen näkymään tulisi sijoittaa tärkein viesti, selkeä arvolupaus ja call-to-action. Jos nämä jäävät “below the fold” eli vaativat vieritystä, osa käyttäjistä ei koskaan näe niitä.
Yhteenveto
Viewport määrittää, kuinka paljon verkkosivustosta näkyy kerralla käyttäjälle. Sen ymmärtäminen on olennaista responsiivisen suunnittelun kannalta. Pk-yritykselle tämä tarkoittaa sitä, että kriittisimmän sisällön tulee mahtua viewportiin heti alussa, sivuston on mukauduttava eri viewportteihin saumattomasti ja käyttökokemuksen on oltava optimaalinen riippumatta laitteesta tai näytön koosta. Viewport on ikkuna liiketoimintaasi — varmista että näkymä on houkutteleva.