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.
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 id=”924″ title=”Uutiskirje”]