Mukautuva suunnittelu

Mukautuvasta suunnittelusta on puhuttu jo sen verran, että jokaisella digitaalista suunnittelua ymmärtävällä on jonkinlainen näkemys aiheesta. Jollei sinulla ole ja katsot kuuluvasi tuohon joukkoon, niin lue ensin Ethan Marquetten artikkeli A List Apartista sekä Smashing Magazinen pidempi, mutta sangen kattava artikkeli Responsive Web Design: What It Is and How To Use It.

Sama palvelu kolmessa eri laitteessa. Kuva (c) 2011 Visualavid.net

Responsiivinen vai mukautuva?

Ensinnäkin semantiikkaa. Englanniksi suunnittelutavan nimi on responsive design, mutta Daniel Koskisen blogimerkinnän keskustelu herätti ajatuksia, ja puhun itsekin mieluummin mukautuvasta kuin responsiivisesta suunnittelusta.

Hyvin tiivistetysti mukautuvuus on verkkosivujen skaalausta näyttölaitteen tai selainikkunan leveyden mukaan. Tämä ei kuitenkaan ole sitä perinteistä skaalausta, jossa pisimmät rivit muuttuvat lukukelvottomiksi leveillä ikkunoilla tai näytöillä, vaan sivujen sisältöä ja asettelua voidaan muuttaa lennosta.

Tämän kirjoituksen tarkoitus on tarkoitus käsitellä aihetta kolmesta keskeisestä näkökulmasta: siitä, mitä tekniikka tarkoittaa käyttäjille, asiakkaille ja suunnittelijoille.

Mukautuvan suunnittelun vaikutus esitystapaan

Teksti voidaan pitää hyvin luettavana, sillä tekniikassa tekstiosien leveys on täysin suunnittelijoiden hallittavissa. Kuvat voidaan esittää isompina isoilla ruuduilla ja pienempinä mobiililaitteille, tai niiden esitettävä versio voidaan vaihtaa ruudun koosta riippuen (vaikkapa Filament Groupin tekniikalla). Kolumnien ja sivun elementtien kokoa, paikkaa ja muotoa voidaan vaihtaa lennosta parhaiten selaimen tai näyttölaitteen kokoon soveltuvaksi.

Mukautuvuus tekee verkkopalvelujen erilliset mobiilimoottorit osittain tarpeettomiksi, sillä se on osa verkkopalvelun HTML-rakennetta eikä erillinen palvelun mobiiliversio. Se on siis muoto, joka reagoi käyttäjän tapaan käyttää sivustoa. Se nojaa HTML5-koodaukseen, ja sellaisena vaatii ajanmukaisen selaimen ja/tai laitteen toimiakseen odotetusti.

Tämä sivu on mukautuva: voit testata sen toimimista pienentämällä selainikkunaasi hitaasti aina lähes postimerkin kokoiseksi saakka, ja tarkkailemalla sivun elementtien muutoksia.

Mitä mukautuvuus tarkoittaa käyttäjille?

Suurin lupaus on tietty sisällön käyttökelpoisuus annetuissa ympäristöissä. Oikein suunniteltu mukautuva verkkopalvelu skaalautuu täyttämään työkoneen ison ruudun, ja kun myöhemmin samaa sisältöä kahlaa mobiililaitteen pieneltä ruudulta niin sen muoto on juuri sille optimoitu.

Käyttäjille mukautuvuus on läpinäkyvyyttä. Se ei vaadi erillisiä kikkoja toimiakseen vaan se on automaattisesti läsnä, juuri laitteeseen sopivassa koossa.

Sisällön priorisointi

Mukautuvuus antaa myös mahdollisuuden räätälöidä ja priorisoida näytettävää sisältöä. Otetaan esimerkiksi kuvitteellisen ravintolan verkkopalvelu:

Pöytäkoneiden ja läppärien näytöiltä käy kauniisti ilmi ravintolan historia ja luonne, isot kuvat sisustuksesta pääsevät oikeuksiinsa ja interaktiivinen menu näyttää annosten kuvan hiiren liikkeen myötä.

Sama sivu mobiililaitteella katsottuna näyttää ensimmäisenä sivuna ravintolan yhteystiedot pienen kartan kanssa, puhelinnumero mahdollistaa suoran soittamisen ravintolaan. Menu on selkeä ja helppolukuinen, mutta jättää pöytäversion interaktiivisuuden sikseen.

Esimerkissä vaikutetaan sisällön järjestykseen ja esittämistapaan. Joitakin sisältöjä voidaan jättää käytettävyyden vuoksi tietyistä ympäristöistä kokonaan pois.

Mitä mukautuvuus tarkoittaa asiakkaillesi?

Kun aiheesta on maalailtu yhdeksän hyvää ja kymmenen kaunista, niin on syytä arvioida myös mukautuvan suunnittelun implikaatioita niille, joille sellaista tehdään – siis asiakkaille, joille digitoimistot, osaavat suunnittelijat ja mainostoimistot niitä myyvät mm. ylläolevilla lupauksilla.

Kustannukset

Mukautuva suunnittelu voi tulla huomattavasti tavanomaista suunnittelua kalliimmaksi. Käytän muotoa “voi tulla” tässä tarkoituksella, sillä asia riippuu useasta tekijästä. Siitä, onko suunnitteleva taho tottunut suunnittelemaan tällaisia palveluja sekä visuaalisesti että rakenteellisesti. Siitä, onko palvelun rakentamisesta vastaava taho tottunut HTML5-muotoon ja mukautuvan muodon käyttöön omassa työssään. Siitä, puhuvatko nämä kaksi tahoa ongelmitta samaa kieltä keskenään.

Mitä sitten on huomattavasti kalliimpi? Suunnittelutyön visuaalisiin ja käyttöliittymällisiin osiin varattava aika todennäköisesti kasvaa karkeasti noin 50% tavanomaisesta, toteuttamisen nousetessa varovaisemmin noin 30%. Kaikki riippuu siitä, kuinka rutinoitunut yhteistyökumppanisi on.

Huomisen tekniikkaa

Sangen uutena tekniikkana mukautuvuus verkkopalvelussa tarkoittaa digitaalisessa etulinjassa olemista. Se myös tarkoittaa, että oikein suunniteltuna sillä toteutetut verkkopalvelut ovat käyttökelpoisia pidempään. HTML uudistuu melko hitaasti muihin verkon teknologioihin nähden.

Asiakkaille tämä tarkoittaa niiden tarpeiden ymmärtämistä, jolla mukautuvuuteen lähdetään: pelkkä lupaus uusimmasta tekniikasta on väärä tapa lähestyä asiaa. Me palvelujen suunnittelun parissa viihtyvät teemme viimeisintä huutoa mielellämme, mutta maksumiehenä ei saa olla pelkkä halu tehdä uusinta uutta.

Asiakkaan tarpeiden tulee ohjata suunnittelua, mutta suunnittelijoiden osata ja uskaltaa tarjota parhaiten soveltuvia tekniikoita. Jos näiden kahden keskiössä responsiivisuus on toimiva ratkaisu, niin hienoa.

Mitä mukautuvuus tarkoittaa suunnittelijoille?

Yllä lukee sangen monessa kohdassa suunniteltu ja oikein suunniteltu. Suurin paino mukautuvuuden oikeassa toteutumisessa on tietty osaavilla suunnittelijoilla, joille tekniikka tuo uusia vaatimuksia mukanaan.

Käyttöliittymäsuunnittelun puolella mukautuvat layoutit vaativat tekniikan ymmärtämistä aiempaa perinpohjaisemmin. Rautalankamalleissa pitää ymmärtää aiempaa enemmän kolumniajattelusta ja grideistä sekä skaalauksesta. Käyttökuvaukset sekä ohjeistukset vaativat enemmän aikaa, ja toisin kuin intuitio sanoisi niin ohjeistuksia ei kannata jakaa jokaiselle laitteelle erikseen vaan pitää yhdessä. Varaudu piirtämään jokaisesta keskeisestä näkymästä malli jokaiselle halutulle muodolle.

Visuaalisen suunnittelun puolella muutoksen painoarvo on valtava. Kuten Marquetten artikkelista voi huomata, voidaan kuvia myös rajata ja kaventaa uudelleen sivun leveyden muuttuessa.

Tämä on kuitenkin pientä verrattuna siihen määrään perehtymistä ja ymmärtämistä, mitä käyttöliittymägrafiikoiden käytöksen muutokset vaativat: Aiemmin staattiset elementit voivat liikkua ja muuttaa muotoaan, eikä ongelmaa voi oikein kiertää tekemällä jokaisesta näkymästä useampaa viimeisteltyä versiota – ihan budjetti- ja resurssisyistä.

Takavuosien “ei voida tehdä tätä helposti” -kommentit teknikoilta tulevat jälleen tutuksi. Perehdy prosentuaalisiin kolumneihin ja grideihin, jos haluat helpottaa HTML-taittajan työtä projektin aikana.

Teknisen suunnittelun ja toteutuksen puolella muutokset työhön ovat tietty selkeät. Mukautuvuus tarkoittaa sekä hyvää HTML:n hallintaa että kykyä suunnitella eteenpäin niin, että kokonaisuus pysyy jatkuvasti kasassa.

Ottamalla progressiinen suunnittelu mukaan saadaan palvelu pysymään kunnossa myös vanhemmilla laitteilla, mutta vaatimukset ymmärryksestä kasvavat entisestään.

Teknisellä puolella vastaan tulee myös palvelujen painon kasvu. Mobiililaitteet ovat heikommalla suorituskyvyllään ja usein rajoitetummalla nopeudellaan altavastaajina, ja näille siirretään helposti liikaa dataa pureskeltavaksi. Vaikka asian pitäisi olla kaikkien suunnittelijoiden mielessä, niin vastuu jää helposti teknikon harteille. Helpoin tapa kiertää tätä on olla proaktiivinen jo projektin alkuvaiheessa, ja saada kaikki huomioimaan asia.

Lopuksi

Jokaista tässä mainittua kohtaa voisi avata reilusti enemmän, sillä paljon jää vielä kirjoittamatta. Keskeisimmät huomiot tulivat kuitenkin mainittua, ja on kiinnostavaa seurata mihin paikalliset suunnittelijat ja toteutukset tässä venyvät.

On myös muistettava, että HTML5 lupaa paljon muutakin kuin mukautuvuutta. Sen semanttinen rakenne tarjoaa uusia tapoja jäsennellä rakennetta, ja tämä muodostaa osittain uudenlaisen pohjan suunnittelulle.

3 thoughts on “Mukautuva suunnittelu

  1. Great information. Lucky me I came across your blog by chance (stumbleupon).
    I have book-marked it for later!

    Check out my web blog: Ervin

  2. Hmm it seems like your site ate my first comment (it was extremely long)
    so I guess I’ll just sum it up what I had written and say, I’m
    thoroughly enjoying your blog. I as well am an aspiring blog blogger but I’m still new to the whole thing. Do you have any points for novice blog writers? I’d certainly appreciate it.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>