Tässä ne nyt on, ebrandin uusitut verkkosivut. Päätavoitteena oli yksinkertaistaa, kiteyttää ja selkeyttää sivustoamme. Liikkuva etusivun ”slider” alkaa olla pikkuhiljaa menneen talven Lumia, joten päätimme tehdä etusivusta hieman erilaisen. Sivustolla on luonnollisesti käytetty moderneita web-tekniikoita. Samalla yritimme kiteyttää ydinosaamisemme selkeästi sosiaalisen median palveluiksi, muutamaksi tuotteeksi ja tuoda referenssejä paremmin esille.

Responsive Design, vapaasti suomennettuna mukautuva, skaalautuva tai jopa vain responsiivinen suunnittelu (verkkosivutoteutus) on saanut viimeaikoina Suomessakin enemmän ja enemmän jalansijaa. Mukautuvuus tarkoittaa tässä verkkosivustojen sisällön ”mukautumista” käytännössä kaiken kokoisille päätelaitteille isoista työpöytänäytöistä älypuhelimiin ja tabletteihin. Eräs parhaiten toimiva esimerkki on helsinki.fi, jossa mukautuvaa verkkosivustoa voi testata vaikka pienentämällä ikkunaa (tai katsomalla sivustoa puhelimella tai tabletilla). Helsinki.fi:ssä sisältö pysyy käytännössä samana, mutta se näytetään käyttäjälle eri tavalla.

Miksi mukautuva suunnittelu on tärkeää? Ihmiset selaavat nettiä mobiililaitteilla koko ajan enemmän ja enemmän. Sivujen tulisi avautua nopeasti kaikenlaisilla päätelaitteilla ja pääasiallisesti sisältää samat asiat kaikissa versiossa, toki joitain asioita voidaan näyttää yksinkertaisemmin pienemmällä näytöllä. Relevantin tiedon löydettävyys tulisi säilyä hyvänä päätelaitteesta huolimatta.

Mukautuva verkkosivutoteutus on varsin erilainen lähestyminen verkkosivujen suunnitteluun verrattuna pitkän aikaa de facto -standardina toimineeseen 960px grid -ajatteluun. 960 grid tarkoittaa siis sitä, että pääsisältö on maksimissaan aina, näytön koosta riippumatta, 960 pikseliä leveä ja yli menevän osan päällä näytetään taustakuvaa tai taustaväriä. 960 grid aiheuttaa mobiliikäyttäjille aika turhaa zoomausta. Vaikka zoomaus tai alaspäin vieritys onkin luonnollisimpia puhelimilla tai hiirellä tapahtuvia toimintoja, voidaan responsiivisen suunnittelun avulla tämä tarve poistaa käytännössä kokonaan. Uusittu ebrand.fi mukautuu kivasti monenlaisille mobiililaitteille, kuten älypuhelimille, tableteille ja läppäreille. ebrandin uusia sivujakin voi testata eri päätelaitteilla tai pienentämällä ja suurentamalla ikkunaa. Jatkossa suurin osa ebrandin toteuttamista verkkosivuista tulee olemaan responsiivisia, lisää projektiuutisia lähiviikkoina!

Menemättä liialti teknisiin asioihin, suomalaiset blogit ovat käsitelleet aihetta enemmänkin. Suosittelemmekin luettavaksi seuraavia blogikirjoituksia:

http://www.aldone.fi/blogit/teppo/?x32648=178565

http://www.aucor.fi/blogi/teknologiatutkassa-responsive-design

http://kilta.sovelto.fi/creative/yleinen/responsive-web-design-ja-mobile-first-mita-ja-miksi/

http://kiskolabs.com/laukaus/artikkelit/responsive-design

// Jukka Weissenfelt & ebrandin pojat