Responsiivinen web design (suomalaisittain “mukautuva”, lyhenteeltään RWD) on tuonut muutamia lisävaiheita webkehitykseen vuosien varrella. Selainikkunan mukaan skaalautuvista leiskoista on esitetty ideoita jo vuodesta 2001, mutta varsinaisesti tekniikka standardoitiin vasta vuonna 2010. Tekniikan tullessa usein responsiivisuutta myytiin lisäarvona ja sivut toteutettiin ei-responsiiviseksi, jos siitä ei maksettu. Meillä on ollut aina periaatteena sisällyttää responsiivisuus hintaan, eikä yksikään saitti ole ollut ei-responsiivinen, koska se on aivan sama asia kuin rikkinäinen sivusto. Eihän kukaan myy periaatteella “saat ehjän, jos maksat lisää, muuten tehdään rikkinäistä”. Tai ei ainakaan pitäisi, bad business.
Sveitsiläinen yritys Vanamco AG myy Device Lab -paneelia, joka on käytännössä mobiililaitteita ja tabletteja varten luotu paneeli, jota itse nimitän suomenkielellä “responsiiviseksi seinäksi”. Testipuhelimiin liimataan velcroja eli tarranauhoja takakanteen, pistetään seinään kiinni ja laturien johdot pujotetaan välissä olevista aukoista taakse kätevästi piiloon. Levy on jalustassa magneeteilla kiinni ja sen saa kätevästi irti jos tarvitsee vaikka irrottaa kaikki johdot kerralla.
BrowserSync on työkalu, jonka avulla saa kehitysympäristössä kehitetyn sivuston toimimaan siten, että tarvitsee selata vain yhtä näkymää ja muutokset heijastuvat kaikkiin laitteisiin reaaliaikaisesti. Vanamco kehittää vastaavaa työkalua Ghostlab, jolla saa saman aikaan. BrowserSync on kuitenkin osa Duden käyttämää Gulp-taskrunneria ja siksi ehdoton työkalu.
Käytännössä Gulp ja BrowserSync “vahtii” muokattavia tiedostoja ja kun koodari tekee muutoksen sivustoon, BrowserSync päivittää selaimet jokaiseen laitteeseen automaattisesti. Samaan tapaan sivustolla klikkailu ja rullaaminen näkyy jokaisessa laitteessa samanaikaisesti. Näin jokaisen näkymän yksitellen muokkaaminen on helppoa ja suoraviivaista, eikä joka laitetta tarvitse selata erikseen. Laitteisiin ei tarvitse edes koskea ja jopa yksittäisen laitteen koodia voi sörkkiä reaaliajassa testatakseen kuinka jokin muutos näkyy juuri kyseessä olevalla laitteella.
Device Lab on responsiivisessa suunnittelussa aivan ehdoton työkalu. Sivut tulee työstön aikana testattua oikeilla laitteilla. Emulaattoreita (esimerkiksi Resizer, Responsinator tai Google Chromen kehittäjätyökalut) on olemassa, mutta keinotekoinen laite ei päihitä oikeita laitteita. Suosittu palvelu alalla on myös BrowserStack, joka käyttää oikeita laitteita, joihin käyttäjä ottaa yhteyden selaimessa toimivan virtuaalikoneen välityksellä. Mutta edelleen, oikeaa fyysistä laitetta nokan edessä on kivempi katsoa, eikä ole esimerkiksi hitaalla netillä yhteysongelmia kun kehitys tapahtuu paikallisesti.
Vanamcon Device Labiin mahtuu pädin lisäksi viitisen puhelinta. iPad on minulla myös henkilökohtaisessa käytössä sekä osa puhelimista on myös käyttöpuhelimia, joten kaikkia ei velcroilla kiinnitetä seinään pysyvästi. Tätä tarkoitusta varten olen kekseliäästi liimannut yhden velcron pöytään stopperiksi, jotta esimerkiksi iPad ja käyttöpuhelin pysyy pystyssä ilman tarraakin.
Tällä hetkellä testaamme kaikki sivustomme seuraavilla älylaitteilla:
- HTC Desire Z:lla (2010) (kiinteä testipuhelin)
- iPhone 4 (2010) (kiinteä testipuhelin)
- iPhone 6 Plus (2016)
- iPhone 5 (2013)
- OnePlus One (2015)
- Sony Xperia Z3 (2015) (kiinteä testipuhelin)
- iPad 4 (2014)
Käytössä Macbookkien lisäksi testaukseen myös IBM Thinkpad T61, jossa Windows 7 ja Internet Explorer 9. Tarkoituksena hommata vielä yleisin Lumia-malli. Laajempaan lisätestailuun ollaan joskus käytetty Jyväskylän SC5 Open Device Labia, josta löytyy vähän enemmän laitteita.
Suomalaisia responsiivisia sivustoja kannattaa katsoa osoitteesta Mukautuva.fi. Siellä myös joitakin meidän työnäytteitä ja lisääkin on tulossa.
