Pystysuuntaiseen asemointiin vaikuttavat elementtien korkeudet, niiden väliset marginaalit ja tekstin rivikorkeus. Modulaarinen skaala on yleisesti käytetty ratkaisu vertikaalisen rytmin toteutukseen. Se perustuu useimmiten kantaluvun ja kertoimen määrittelyyn.

Kantaluku tarkoittaa tässä yhteydessä suunnittelun pienimmän yksittäisen elementin kokoa, josta valitulla kertoimella johdetaan kaikkien sitä suurempien elementtien koko. Kerroin perustuu usein kultaiseen leikkauksen tai muuhun graafisessa suunnittelussa vakiintuneeseen suhdelukuun.

Vertikaalinen rytmi verkossa

Toimiva vertikaalinen rytmi on myös viimeistellyn verkkopalvelun suunnittelun perusta, joskaan sen käyttö ei ole suunnittelijoiden keskuudessa itsestäänselvyys. Responsiiviset, näytön kokoon skaalautuvat sivustot ovat tuoneet vertikaalisen rytmin toteutukseen uusia haasteita, koska samankokoinen teksti ei enää toimi siirryttäessä kännykän näytöltä kolmenkymmenen tuuman työpöytänäyttöön.

Mobiililaitteiden huomioiminen suunnittelussa alkaa olla vallitseva käytäntö, mutta suurille näytöille suunnittelu unohdetaan valitettavan usein. Osa ongelmaa on myös se, että kaikki visuaaliset suunnittelijat eivät tunne tekniikkaa johon sivuston ulkoasun toteutus selaimessa perustuu.

Ongelmaa on käsitelty verkossa jo useamman vuoden ajan ja erilaisia työkaluja löytyy myös lukuisia. Tässä muutama esimerkki:

Ongelmaan ei tunnu olevan yhtä täydellistä ratkaisua. Päätimme toteuttaa itse kevyen työkalun prototyypin ja sen avulla parantaa molemminpuolista ymmärrystä suunnittelijoiden ja teknisten toteuttajien välillä.

Työkalu helpottaa suunnittelijan ja kehittäjän työtä

Työkalun toteutuksen perusta on rem-yksiköiden (root em) käyttö. Koska useat suunnittelussa käytetyt ohjelmistot eivät tällä hetkellä mahdollista suoraan rem-yksikköjen käyttöä, työkalu antaa suunnittelijalle mahdollisuuden testata erilaisia vertikaalisia rytmejä ja muuttaa rem-yksiköt vastaaviksi pikselimitoiksi.

Teknistä toteutusta varten työkalu generoi minimalistisen responsiivisen css-koodin. Tämä ratkaisu ei ole välttämättä täydellinen kaikissa tapauksissa, ja monimutkaisemmat ulkoasut vaativat poikkeuksia työkalun pelkistettyihin css-tyyleihin. Tavoitteena oli luoda yksinkertaisin mahdollinen ratkaisu, joka tarjoaa suunnittelijalle riittävän määrän hallintaa muuttamatta työkalun käyttöä liian monimutkaiseksi.

Kokeile työkalua: vertical-rhythm.crasman.fi

Teemu Korpilahti avatar