Blogi | 07.02.2017

Jokainen älypuhelimen käyttäjä lienee kokenut tilanteen, jossa ruutuun avautunut sivusto ei näykään kunnolla, sivua pitää skrollailla sormenpää rakoilla tai teksti on mikroskooppista. Taikasana tässä on responsiivisuus, eli sivuston fiksu skaalautuminen erilaisiin näyttökokoihin ja laitteisiin. Moni luulee oman sivustonsa olevan kunnossa, mutta entäpä jos sinunkin helmasi kukkivat ja puskuri repsottaa?

Lähes kaikki ymmärtävät nykyään, mitä responsiivinen verkkosivu tarkoittaa, mutta lyhyesti sanottuna se on sivusto, jonka sisältö mukautuu eri näyttökokoihin. Tämä kuva havainnollistaa hyvin miten sama aineisto taipuu eri laitteisiin mobiilista tablettiin ja läppäristä pöytäkoneeseen:

bermuda-responsiivinen

Vaikka web-sivut on tehty responsiivisesti jo vuosien ajan, varsinaiseen suunnitteluun ei ole olemassa vieläkään täysin ylivoimaista työkalua. Vaikka vaihtoehtoja on (esim. Sketch, XD tai perinteinen Photoshop), rautalankamallit ja luonnokset suunnitellaan eri näyttöko’oille edelleen yksitellen. Vasta kun sivusto koodataan esim. Bootstrapin avulla responsiiviseen html-muotoon, nähdään lopullisesti miten se taipuu eri tilanteisiin.

Mutkia ei voi oikoa

Erilaisia näyttökokoja on nykyään satoja, joten kaikki ei aina näytä heti hyvältä. Jokainen sivuston elementti täytyy käydä läpi mahdollisimman monella eri selaimella ja laitteella, koska jokainen niistä saattaa tulkita koodia omalla tavallaan. Standardeja on olemassa, mutta ne eivät aina päde. Tästä saamme usein kiittää Microsoftia, mutta myös Apple ajaa nykyään omia reittejään.

Valmis malli ohjaa umpikujaan

Jotkut ratkaisevat ongelman käyttämällä valmiiksi mobiilioptimoituja sivupohjia, mutta silloin jonkun muun tekemä rakenne ryhtyykin ohjaamaan suunnittelua. Jos halutaan kertoa yrityksen viidestä päätuotteesta ja rakenteessa on vain kolme palstaa, lopputulos muistuttaa liikenneruuhkaa Hampurissa (molempia on kokeiltu, en suosittele.)

bermuda-hampuri

Silmät kiinni ja koodaamaan

Toinen tapa on mennä koodi edellä ja ohjelmoida sivustoa samalla kun toteutetaan sisältöä. On kuitenkin äärimmäisen vaikeaa suunnitella mitään, jos lopputuloksesta ei ole minkäänlaista aavistusta. Hyvän luonnoksen eli leiskan avulla löydetään oikeat kulmat nopeasti sekä tehdään oikeita päätöksiä sivuston designista ja sisällöstä.

Suunnittelija kuskina ja koodari kartturina

Paras tapa toteuttaa responsiivisia sivustoja onkin tiivis yhteistyö suunnittelijan ja koodarin välillä. Toisella on ymmärrys sisällöstä ja toisella teknisistä yksityiskohdista. Koodari voi jo alkuvaiheessa antaa aikaa säästäviä neuvoja suunnittelijalle, kun taas täydellinen lopputulos vaatii designerin käsiä ja silmää. Kaikkea ohjaa hyvin suunniteltu prosessi, joka välttää pahimmat kivikot ja ojanpohjat.

Valitse voittajatiimi

Kun siis seuraavan kerran tarvitset verkkosivustoa, varmista että kumppanillasi on sekä suunnittelijat että koodarit samassa pilttuussa ja että he eivät tyydy valmiisiin sivupohjiin. Muuten kulmasi todennäköiseti repsottavat niin pahasti, ettet pääse ensimmäisenä maaliin.

bermuda-voittajatiimi

Viimeisimmät artikkelit

Milloin olet katsonut digikanaviesi pinnan alle?

Blogi

22.11.2022

Milloin olet katsonut digikanaviesi pinnan alle?
Lue lisää

Ville Toimela

Ihmiset

22.11.2022

Ville Toimela
Lue lisää

Me emme luo työnantajamielikuvia

Blogi

02.11.2022

Me emme luo työnantajamielikuvia
Lue lisää

Finla Työterveys: 16 myyttiä työterveydestä

Blogi

02.11.2022

Finla Työterveys: 16 myyttiä työterveydestä
Lue lisää

Kuulostaako yrityksesi karhealta vai lempeältä?

Blogi

26.10.2022

Kuulostaako yrityksesi karhealta vai lempeältä?
Lue lisää

Uudet puitteet hybridityölle

Blogi

17.10.2022

Uudet puitteet hybridityölle
Lue lisää

Miika Korppi

Ihmiset

17.10.2022

Miika Korppi
Lue lisää

Etsimme WordPress-kehittäjiä

Rekry

27.09.2022

Etsimme WordPress-kehittäjiä
Lue lisää

Viimeinen päivä bermudiaanina

Blogi

23.09.2022

Viimeinen päivä bermudiaanina
Lue lisää

Open Studios avaa Bermudan ovet 4.10.

Uutiset

20.09.2022

Open Studios avaa Bermudan ovet 4.10.
Lue lisää

Haussa copywriter vakituiseen työsuhteeseen

Rekry

13.09.2022

Haussa copywriter vakituiseen työsuhteeseen
Lue lisää

Kasvua, muutosta ja nimitysuutisia

Uutiset

25.08.2022

Kasvua, muutosta ja nimitysuutisia
Lue lisää