Keskiviikkona, 11.2.2016

Device Lab responsiivisen suunnittelun apuna

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.

Pullopostia?

Koottuja kuulumisia sisältävä bittivirtojen pulloposti saapuu rantaasi noin kolmen kuukauden välein.