Leiska, jota devaaja rakastaa

Verkkosivustojen ulkoasun suunnitelmaa kutsutaan nimellä leiska, joka tulee englanninkielisestä termistä layout. Leiskat ovat staattisia kuvia, jotka esittävät, miltä lopullisen sivuston tulee näyttää eri päätelaitteilla. Lisäksi ne kertovat jonkin verran myös siitä, millaisia interaktioita sivustolle toteutetaan. Leiskojen tehtävänä on kertoa kehittäjälle, miten sivuston tiedot ja palvelut halutaan tarjoilla kävijälle – ne ovat siis kommunikaatioväline.

Koska leiskat ovat staattisia kuvia, ne eivät tietenkään voi täydellisesti kuvata sitä, miltä jokainen yksityiskohta jokaisella sivulla näyttää – etenkin responsiivisilla sivustoilla, joilla sisällön asettelu mukautuu käytettävän selainnäkymän koon mukaan. Tästä syystä onkin tärkeää, että leiskat pystyvät kommunikoimaan selkeästi vaaditut konseptit ja visuaalisen filosofian, joita sitten voidaan soveltaa tarpeen mukaan lopullisessa toteutuksessa.

Mitä kehittäjä näkee, kun hän katsoo leiskaa

Verkkosivun ulkoasu rakentuu kahdesta ”kerroksesta”: HTML-dokumentin puumaisesta elementtihierarkiasta sekä elementteihin vaikuttavista CSS-tyyleistä. HTML määrittelee dokumentin sisäisen hierarkian sekä elementtien keskinäiset suhteet ja CSS elementtien ulkoasun.

CSS:n yhtenä peruspilarina toimii laatikkomalli, joka määrittelee kaikille elementeille muutamat perusominaisuudet: sisällön, täytteen, reunuksen ja marginaalin. Yhteistä kaikille elementeille on se, että ne ovat oikeasti suorakaiteen muotoisia kappaleita, jotka voivat pitää sisällään muita suorakaiteen muotoisia kappaleita. Koko verkkosivu onkin maatuskanukkea muistuttava laatikkopino, jossa jokaisen laatikon sisällä on 0-n kappaletta muita laatikoita. Lyhyesti sanottuna kehittäjä näkeekin leiskassa laatikoita.

Vaakasuuntaiset kaistaleet

Verkkosivustot on ensisijaisesti tarkoitettu tekstuaalisen sisällön esittämiseen ja tekstuaalista sisältöä pääsääntöisesti esitetään digitaalisessa kontekstissa siten, että sitä voidaan vierittää pystysuunnassa. Kaikki verkkosisällön kuluttamiseen tarkoitetut välineet tukeutuvat tähän paradigmaan. Koska on oletettavaa, että käyttäjät eivät pidä pystysuuntaista vierittämistä (järjellisyyden rajoissa, toki) ongelmana, voidaan verkkosivustojen asettelun pystyakseli pitää joustavana ja keskittyä vaaka-akselin kontrollointiin.

Vaakasuunnassa vieritettävät sivustot tuntuvat lähes poikkeuksetta kummallisilta ja jossain määrin rikkinäisiltä. Siksi onkin tärkeää, että sivuston sisältö pyritään vaakasuunnassa pitämään selainikkunan sisällä. Tämä on yksi tärkeimmistä responsiivisen verkkosivutaiton perusajatuksista.

Koska vaakasuunnassa tila on tavallaan lukittu, on luontevaa ajatella verkkosivun rakentuvan vaakasuuntaisista kaistaleista, jotka on ladottu peräkkäin. Näin ajateltuna sivun rakenne muuttuu usein huomattavasti intuitiivisemmaksi ja erittäin helpoksi hahmottaa. Jokainen kaistale muodostaa oman kontekstinsa, jonka tehtävänä on tarjota kävijälle jokin looginen ryhmä toimintoja ja palveluja.

Komponentit muodostavat käyttöliittymän

Sivuston toiminnot ja palvelut tarjotaan kävijälle käyttöliittymän kautta. Käyttöliittymä puolestaan muodostuu yksittäisistä komponenteista, jotka ovat kuin rakennuspalikoita, joista muodostetaan toimivia kokonaisuuksia. Komponentteja yhdistelemällä saadaan aikaiseksi esim. lomakkeita, valikoita ja erilaisia listauksia. Koska komponentit ovat lähtökohtaisesti uudelleenkäytettäviä rakennuspalikoita, voidaan komponenttien kautta viestiä helposti yhtenäinen malli sivuston toiminnallisuuksien toteuttamiseksi. Tämä tekee myös sivuston käyttämisestä helpompaa, kun visuaalisesti samanlaiset elementit myös toimivat samalla tavalla.

Komponenttien käytöstä hyvä esimerkki on Googlen kehittämä Material-UI-komponenttipankki, jossa on määriteltynä valtava määrä erilaisia käyttöliittymäkomponentteja. Käytännössä kaikki Googlen sovellukset käyttävät näitä komponentteja ja ne toimivat kaikilla alustoilla samalla tavalla. Yksittäisten verkkosivustojen tapauksessa ihan tämän kokoluokan toteutuksille ei yleensä ole tarvetta, mutta esim. Facebookin React-kirjasto on komponenttipohjainen järjestelmä, joka on viime vuosina saavuttanut suuren suosion verkkosovellusten käyttöliittymätoteutuksissa.

Mitä pitää muistaa leiskaa suunniteltaessa

Kun sivustoa kehitetään, on erittäin hyödyllistä, jos ulkoasu voidaan toteuttaa mahdollisimman suoraviivaisena ja yhtenäisellä sekä pitävällä logiikalla. Poikkeukset, pienet ”kikkailut” ja mahdolliset epäjohdonmukaisuudet lisäävät yleensä jonkin verran kehitystyötä ja saattavat jopa tehdä sivustoista raskaampia päätelaitteille. Siksi onkin muutama tärkeä asia, jotka on hyvä pitää mielessä leiskaa suunniteltaessa.

Leiska, jota devaaja rakastaa onkin siis sellainen, jota devaaja ymmärtää.

Älä väritä viivojen yli

Sivun varsinaiselle rungolle on pääsääntöisesti leiskoissa määriteltynä oma alueensa. Joissakin tapauksissa saattaa vaikuttaa hyvältä tehokeinolta ”nostaa” joitakin yksittäisiä osia sisällöstä muun sisältöalueen ulkopuolelle. Tämä aiheuttaa kuitenkin usein jopa melko kinkkisiäkin pähkinöitä, kun koko sisällön halutaan toimivan järkevästi kaikilla päätelaitteilla ja kaikenkokoisilla ruuduilla. Onkin usein järkevämpää pitää sivun runko absoluuttisena ulkorajana kaikelle sisällölle – käyttäjille tällä nimittäin ei ole juurikaan merkitystä, kunhan sivuston käyttö on luontevaa ja nopeaa.

Nostojen lisäksi kannattaa myös miettiä muuta sisältöä ja sen soveltuvuutta eri päätelaitteille. Usein esim. leveähköt taulukot saattavat rikkoa sivujen asettelua mobiililaitteilla. Myös kuvien, esitysgrafiikan, videoiden, valikoiden ja lomakkeiden käytettävyyttä mobiilissa kannattaa miettiä ja hieman jopa testailla ennen niiden varsinaista toteutusta.

Leiskan tulisi kuvata sivuston informaatiorakennetta

Sivuston konsepti määrittelee hyvin pitkälti sen, millaisia informaatiorakenteita sivuston taustalle tarvitaan, jotta halutut toiminnallisuudet saadaan toteutettua järkevästi. Leiska voi kuitenkin ottaa kantaa siihen, mitä tietoa halutaan näyttää missäkin yhteyksissä. Mikäli leiska ja konsepti eroavat paljon näkemyksissään siitä, millaisen informaatiorakenteen päälle sivustoa rakennetaan, on tuloksena pahimmillaan valtava määrä lisätyötä. Konseptin ja leiskan tulisikin siis tukea toisiaan, jotta sivuston kehitys saadaan sujuvaksi ja loppullinen toteutus voidaan pitää selkeänä ja mahdollisimman yksinkertaisena.

Informaatioarkkitehtuuri vaihtelee sivustoittain ja sen täydellinen ymmärtäminen ilman taustalla olevan järjestelmän toiminnan tuntemusta on lähes mahdotonta. Siksi onkin erittäin järkevää pohtia tätä aspektia yhdessä sivustoa kehittävän tahon kanssa. Mitään yleispätevää sääntöä informaatioarkkitehtuuria koskevien ongelmien selvittämiseksi ei ole olemassa. Yhtenä työkaluna ongelman ratkaisemisessa voidaan käyttää esimerkiksi mind mapin kaltaista karttaa, jolla saadaan tuotua hieman konkretiaa muuten niin abstraktiin aiheeseen.

Parhaiten konseptin, leiskan ja informaatioarkkitehtuurin yhdistäminen onnistuu silloin, kun nämä kaikki suunnitellaan samaan aikaan tiiviissä yhteistyössä. Me Karhu Helsingillä olemmekin huomanneet, että projektien kokonaiskustannukset jäävät yleensä varsin paljon alhaisemmiksi, kun sama taho toteuttaa projektista sekä suunnittelun että toteutuksen. Tästä syystä suosittelemme asiakkaillemme omaa leiskaosaamistamme osana sivustoprojektia, jotta voimme varmistaa projektin valmistumisen aikataulussa ja budjetissa. Vankka informaatioarkkitehtuuri sivuston perustana myös tarjoaa erittäin hyvän pohjan jatkokehitykselle.

Responsiivinen on dynaaminen

Käytännössä kaikki sivustot toteutetaan nykyään responsiivisina, eli ne mukautuvat päätelaitteen ruutukokoon. Responsiivinen sivusto onkin myös ulkoasultaan dynaaminen, sillä sen tulee automaattisesti reagoida muutoksiin ruutukoossa. Tämä toteutetaan usein ns. breakpointien avulla.

Breakpointit määrittelevät yleensä muutaman ruutuleveyden joissa sivuston asettelu muuttuu jotenkin hieman radikaalimmin. Breakpointit yleensä vastaavat erilaisia päätelaitekategorioita (matkapuhelimet, tabletit ja pöytätietokoneet) ja asettelut näissä breakpointeissa pyritään optimoimaan kullekin päätelaitekategorialle.

Nykyinen, varsin laaja päätelaitekirjo kuitenkin aiheuttaa sen, että näiden breakpointien väliin mahtuu yhä kasvava määrä laitteita, jotka eivät välttämättä enää suoraan kuulu mihinkään em. kategorioista. Tällöin on tärkeää, että sivuston leiska on suuniteltu sellaiseksi, että se toimii hyvin myös määriteltyjen breakpointien välillä. Siirtymät breakpointista toiseen pitäisi siis pystyä jotenkin kuvaamaan niin, että sivuston kehittäjä osaisi varmistaa sivuston järkevän toiminnan kaikilla päätelaitteilla. Tähän ei ole tietääkseni olemassa mitään varsinaista työkalua, mutta sanallinen kuvaus sekä linkit esimerkkitoteutuksiin toimivat hyvänä ohjenuorana leiskasuunnittelijalta kehittäjälle.

Kirjasimet pilvestä

Kirjasinpilvipalveluiden myötä erikoisfonttien hyödyntäminen sivustoilla on nykyään varsin helppoa ja myös kohtuuhintaista. Hyviä ja varsin laajalti käytettyjä palveluita ovat mm. Adoben Typekit ja Monotypen fonts.com. Jos vain mahdollista, leiskoissa käytettyjen erikoisfonttien olisi erittäin hyvä olla käytettävissä jostakin tällaisesta pilvipalvelusta webfont-lisenssillä. Tämä tekee fonttien käyttämisestä helppoa, nopeaa ja ennen kaikkea laillista. Fonttien lisenssit nimittäin ovat lähtökohtaisesti todella rajoittavia ja vaikka niiden tarjoileminen sivuston kanssa samalta palvelimelta onkin melko yksinkertaista, on usein melko vaikea sanoa, rikotaanko näin toimittaessa fontin käyttöehtoja vai ei. (Todennäköisesti rikotaan.)

Leiskatiedostojen tekninen toteutus ja määrittely

Kun sivuston ulkoasua lähdetään rakentamaan, eivät kehittäjät yleensä tukeudu pelkästään leiskoista luotuihin rasterikuviin, vaan he käyttävät leiskojen lähdetiedostoja. Leiskoja voidaan suunnitella periaatteessa millä tahansa grafiikkaohjelmistolla, mutta jonkinlaiseksi de facto -standardiksi on tällä alalla muodostunut Adobe Photoshop.

Olemme käytännössä huomanneet, että Photoshopia osaavat yleensä käyttää riittävällä tasolla niin graafiset suunnittelijat, web-kehittäjät kuin projektipäällikötkin. Tästä syystä leiskojen lähdetiedostoformaatiksi varsin varma valinta on Photoshopin käyttämä PSD. PSD-tiedostosta kehittäjät saavat suoraan tiedot esim. käytetyistä kirjasimista ja väreistä sekä viitettä siitä, miten leiskan sunnittelija on ajatellut sivuston rakenteen toimivan.

Koska PSD toimii jonkinlaisena tienviittana myös sivuston rakenteen suunnittelussa, on tärkeää, että PSD-tiedoston rakenne on itsessään mahdollisimman selkeä. Tämä tarkoittaa, että:

• Tasot on nimetty kuvaavasti
• Tasot on ryhmitelty selkeisiin tasosetteihin – mielellään niin, että päätasolla tavaraa on varsin vähän
• Tasojen ja tasosettien järjestys kuvaa (mahdollisuuksien mukaan) niiden järjestystä sivulla

Logot, ikonit ja muu vektorigrafiikka

Sivustoilla käytettävän vektorigrafiikan on käytännössä oltava SVG-muodossa. Leiskassa käytetyt vektorikomponentit tulisikin tästä syystä yleensä toimittaa omina SVG-tiedostoinaan PSD-tiedoston mukana. PSD:ssä voisi tällaisten komponenttien kohdalla olla esim. tason nimen perässä merkintä ”(SVG)” tai ne voisivat olla suoraan Photoshopin ”smart object” -tasoja.

SVG on formaattina oikeastaan hiukan liiankin monipuolinen, joten sen käyttäminen verkkosivustoilla ei ole välttämättä aina ihan triviaalia. Joissakin tapauksissa SVG-tiedostoja joudutaan hieman muokkaamaan käyttötarkoitukseen sopiviksi, mutta tämä onnistuu yleensä kohtuullisella vaivalla.

Kommunikaatiota

Kuten kirjoituksen alkupuolella totesin, leiska on kommunikaatioväline, jonka tehtävänä on välittää suunnittelijan ajatukset kehittäjälle. Leiska ei usein kuitenkaan ole yksinään riittävä väline hoitamaan tätä koko hommaa, vaan lisäksi muut kommunikaatiokeinot ovat tarpeen. Leiska, jota devaaja rakastaa onkin siis sellainen, jota devaaja ymmärtää.