← Back to front page

CSS-frameworkit suunnittelutyön apuna

Oleellinen osa Ambientian tekemissä konseptisuunnitelmissa on klikkailtava HTML-malli – toimiva prototyyppi verkkopalvelusta ilman taustalogiikkaa tai graafisesti viimeisteltyä ulkokuorta. Klikkailtava HTML-sivu on sekä asiakkaalle, että ohjelmoijille helpompi käsittää kuin pelkät rautalankapiirrokset, joissa toiminnallisuudet on kuvattu sanallisesti. En ole vielä koskaan kuullut ohjelmoijan kysyvän klikkailtavasta mallista, että miten tämän pitäisi toimia.

Paperiprototyypistä klikkailtavaan malliin

Ennen HTML-mallia hahmotellaan käyttöliittymän pääperiaatteet paperille. Joskus paperiprototyypeistä tehdään vielä digitaaliset versiot jollain siihen sopivalla työkalulla kuten Omnigrafflella tai Balsamiqilla. Kun aletaan suunnittelemaan klikkailtavaa HTML-mallia tehdyistä prototyypeistä, on helpompaa ottaa pohjaksi joku CSS-framework, kuin alkaa työstämään mallia tyhjästä.

CSS-frameworkeja on olemassa lukuisia. Itse olemme käyttäneet viimeisimmissä projekteissamme Twitterin Bootstrapia. Bootstrap tulee olemaan mukana myös Liferayn versiossa 6.2, joten tämänkin takia siihen on ollut hyvä tutustua. Pohjana kaikissa frameworkeissä on gridi-systeemi, joka helpottaa elementtien asettelua sivulla. Esimerkiksi Bootstrapin gridi-systeemi on jaettu 12 sarakkeeseen. Tämän lisäksi Bootstrapissa on valmiiksi tyyliteltyjä elementtejä kuten nappeja, taulukoita, lomakkeita, navigaatio-elementtejä ja paljon muuta. Kaikki nämä komponentit helpottavat HTML-mallin koostamista.

Responsiivinen suunnittelu HTML-mallissa

Bootstrapin frameworkin gridi-systeemi on tehty myös responsiiviseksi. Gridiin asetellut elementit putoavat allekkain pienillä näytöillä. Elementtien sijoittelua pienemmissä näytöissä voi helposti säädellä Bootstrapin monimuotoisen gridin ansiosta. Esimerkiksi desktop-koossa voi olla vierekkäin neljä laatikkoa, tablet-koossa kaksi ja pienimmässä puhelinkoossa olisi vain yksi laatikko yhdellä rivillä.

Responsiivinen suunnittelu on paljon järkevämpää tehdä suoraan selaimeen kuin vaikka Photoshopilla. Frameworkien avulla sivuston saa melkein automaattisesti ainakin johonkin pisteeseen asti responsiiviseksi, jolloin suunnittelija voi keskittyä paremmin ongelmakohtiin, jotka vaativat enemmän optimointia kapeilla ruuduilla.

Gridi-systeemi desktop-, tablet- ja mobiilikoossa

Frameworkien gridi-systeemit mukautuvat näytön koon mukaan

Hammer suunnittelijan työkalupakkiin

Frameworkien lisäksi HTML-prototyypeissä käytännöllinen pikku softa on Hammer for Mac. Hammerin perusajatus on, että se helpottaa staattisten html-sivujen kanssa työskentelyä projektin alkuvaiheessa. Konseptisuunnitelman edetessä HTML-prototyypitkin usein kasvavat monen sivun suuruisiksi. Kaikilla sivuilla on kuitenkin yhteisiä elementtejä, kuten ylä- ja alatunnisteet. Esimerkiksi sivuston navigaation ylläpitäminen kymmenellä eri sivulla kasvaa nopeasti aika kivuliaaksi työksi, kun niihin halutaan tehdä muutoksia. Hammerilla navigaation voi erottaa omaksi html-tiedostokseen ja liittää sen jokaiselle sivulle mukaan. Näin muutoksen voi tehdä vain yhteen paikkaan.

Olin puhumassa Ambientian järjestämässä Liferay Roadshow tilaisuudessa responsiivisesta käyttöliittymäsuunnittelusta CSS-frameworkien avulla. Esitys videoitiin, joten voit katsoa sen Ambientian Youtube-kanavalta.

Please, leave us a message and we'll contact you.
You can also contact our Service Desk by phone +358 290 010 500 or email servicedesk@ambientia.fi.