Vinkki: Suunnittele responsiivisen sivuston rautalankamalli Reflow:lla

Responsiivisen sivuston suunnittelu alkaa aina sisällöstä!

Kun sivujen sisältö on tiedossa, voidaan aloittaa sisällön priorisointi ja suunnitella sisällön asemointi. Muista, että verkkosivujen sisältö on käytännössä sarja peräkkäisiä elementtejä,  joita sivulle ladotaan. Koska responsiivisten verkkosivujen ideana on, että kaikki laitteet saavat saman lähdekoodin näytettäväkseen, ei elementtien järjestys muutu eri kokoisilla näytöillä. Elementtien sijoittuminen omille riveilleen tai rinnakkain perustuu html-elementtien tyyppeihin; lohko- tai rivielementteihin. Tätä käyttäytymistä muuttamalla voidaan vaikuttaa elementtien asemointiin ja luoda haluttu layout. Elementtien järjestys säilyy kuitenkin samana ja siten asemoinnin muuttaminen on rajallista.

Edellä mainitusta johtuen, on sivuston suunnittelussa aina syytä laatia ns. rautalankamalli (wireframe), jossa sivun elementit on piirretty laatikoina. Tämä piirrustus toimii sekä suunnittelijan apuna että koodarin ohjeena siitä, miten sivu tulee toteuttaa. Sama rautalankamalli toimii myös sivuston dokumentaationa ja keskustelun apuna kun projektin eri osapuolet sopivat tulevasta toteutuksesta. Hyvin laadittu ja ylläpidetty rautalankamalli on hyödyllinen ja tärkeä osa sivuston suunnittelua.

Rautalankamalleja voi piirtää vaikkapa vain kynällä ja paperilla. Jotkut käyttävät PowerPoint:a. Mikä tahansa piirto-ohjelma soveltuu käyttöön mutta Reflow tekee paljon muutakin kuin piirtää kuvan.

Rautalankamalli Adobe Edge Reflow ohjelmalla

Adobe Reflow suunnitteluvälineenä

Adobe Reflow on responsiivisten sivustojen suunnitteluun tarkoitettu sovellus. Reflow tuottaa sivun html ja CSS-koodin kaikkine responsiivisine ominaisuuksineen. Lähdekoodi ei ehkä ole kaikkien koodareiden mieleen mutta kuitenkin riittävän hyvä lähtökohta toteutukselle ja ellei muuta, niin sen avulla voidaan laatia toimiva malli sivuston responsiivisen asemoinnin testaamiseksi. Pisimmälle vietynä Reflowlla voidaan tehdä sivuston mockup / demo, joka on jo lopullisen sivuston näköinen myös visuaalisine elementteineen.

Vaikka Reflowlla voi tehdä hyvin viimeistellyn näköisen ja valmiin mallin, suosin itse sitä suunnittelun aputyökaluna, jolla voi tehdä toimivan rautalankamallin. Se on aputyökalu, jota voi käyttää suunnitteluprosessissa vaikka sen tuottamaa lähdekoodia ei hyödynnettäisikään lopullisessa tuotantoversiossa.

Prosessi on yksinkertainen. Aloita luomalla sivustollesi uusi Reflow projekti. Valitse sivuston layoutin kannalta sopiva määrä asemointisarakkeita ja ryhdy piirtämään sivuston elementtejä suorakaiteina sivulle. Tällainen yksinkertainen piirros toimii parhaiten kuvaamaan sivun rakennetta. Halutessasi voit laatia samasta sivustosta myös kehittyneemmän mallin, jossa käytät suorakaiteiden sijaan teksti- ja kuvaelementtejä. Tällaisella versiolla on helppo demonstroida sivuston rakennetta ja toimintaa.

Reflown käytöstä löydät ohjeet Slideshare palveluun ladatusta Corellian kalvosetistä.

Tilaa uutiskirje, saat vinkkejä myös joulun jälkeen

[contact-form-7 404 "Not Found"]
Kari Selovuo

Kari Selovuo

Kari on Corellian saavutettavuus ja web-tekniikoiden asiantuntija. Karin kiinnostuksen ja koulutusten aiheina on mm. Verkon tekniikat (HTML, CSS ja JavaScript), WordPress julkaisujärjestelmä ja sen käyttö, websuunnittelu, käytettävyys ja saavutettavuus verkossa.

Kari on IAAP (International Association of Accessibility Professionals) jäsen ja sertifioitunut saavutettavuusasiantuntija CPWA (CPACC + WAS)

This Post Has One Comment

  1. […] Wireframe.  Tekninen rakennepiirros sivuston rakenteesta, jonka pohjalle visuaaliset suunnittelut tehdään. Wireframe kertoo sivuston koodaajalle millaisesta rakenteesta sivusto rakentuu. Suunnittelija yleensä toteuttaa wireframen. Wireframen tekemiseksi tarvitaan yleensä jonkinasteista koodin tuntemusta, jotta pystyy suunnittelemaan toimivan sivuston. Corellia määrittelee wireframen näin: rautalankamalli eli (wireframe), on mallinnus mihin sivun elementit on piirretty laatikoina. Tämä piirrustus toimii sekä suunnittelijan apuna että koodarin ohjeena siitä, miten sivu tulee toteuttaa. Sama rautalankamalli toimii myös sivuston dokumentaationa ja keskustelun apuna kun projektin eri osapuolet sopivat tulevasta toteutuksesta. Hyvin laadittu ja ylläpidetty rautalankamalli on hyödyllinen ja tärkeä osa sivuston suunnittelua. Lähde: https://corellia.fi/vinkki-suunnittele-responsiivisen-sivuston-rautalankamalli-reflowlla/ […]

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *