Olen pistänyt merkille, että yhä useampi asiakkaista on tehnyt ennen tarjouksen pyytämistä taustatyötä ainakin sen verran, että tietävät vaatia uusilta verkkosivuiltaan responsiivisuutta. Tämä on liiketoiminnan kannalta erittäin valveutunutta ja hienoa toimintaa! Mitä responsiivinen suunnittelu tarkoittaa, mitä hyötyä siitä on ja miten sitä tehdään?
Yhä useampi käyttää nettiä mobiililaitteilla
Ennen sivut suunniteltiin pöytätietokoneelle ja riitti, että ne toimivat ja näkyivät oikein niiden suurilla näytöillä. Nykyään on välttämätöntä, että sivut toimivat myös kannettavilla tietokoneilla, tablettitietokoneilla ja puhelimilla. Sivujen informaation tulee olla saatavilla iPhoneilla, iPadeilla, kaikilla Android-laitteilla ja muilla alustoilla, sekä kaikilla mahdollisilla näytön resoluutioilla.
Kolmella neljästä suomalaisesta on käytössään kosketusnäytöllä ja internetyhteydellä varustettu puhelin. Kaksi kolmesta on käyttänyt internetiä viimeisen kolmen kuukauden aikana kannettavalla tietokoneella. Yli puolella kotitalouksista on käytössään tablettitietokone.
StatCounterin mukaan mobiililaitteet ohittivat lokakuussa 2017 internetin käytössä pöytätietokoneet ensimmäistä kertaa historiassa. Sen jälkeen markkinaosuudet ovat tasaantuneet, mutta mobiililaitteet ovat edelleen suosituin tapa käyttää nettiä (55,35 %) verrattuna pöytäkoneisiin (44,56 %). StatCounterin tilastojen mukaan Suomessa pöytätietokoneet ovat edelleen suosituin laite (61 % vs. 39 %).
Vuonna 2017 noin 88 prosenttia käytti internetiä ja 68 prosenttia käytti sitä puhelimella. Pääasiallisia käyttötarkoituksia ovat asioiden hoitaminen, viestintä, medioiden seuraaminen ja tiedonhaku.
Työasematietokoneiden, kannettavien tietokoneiden, tablettitietokoneiden, älypuhelimien lisäksi erityisesti nuoret käyttävät nettiä myös muilla pienlaitteilla, kuten älykelloilla, aktiivisuusrannekkeilla, sähköisillä lukulaitteilla, käsipelikonsoleilla ja mp3-soittimilla.
Web-suunnittelussa ja -kehityksessä olemme tulleet siihen pisteeseen, että emme kykene pysymään mukana loputtomassa määrässä erilaisia laitteita ja resoluutioita. Sivuston suunnittelu erikseen jokaiselle laittelle ja resoluutiolle on epäkäytännöllistä tai suorastaan mahdotonta. Pitääkö meidän tyytyä siihen, että sivut toimivat oikein vain osalla laitteista?
Responsiivinen web-suunnittelu
Ajatellaan perinteistä "kiinteää" verkkosivua, jolla on esimerkiksi kolme vierekkäistä saraketta. Tietokoneella tarkasteltaessa kaikki sarakkeet näkyvät rinnakkain, kuten ne on suunniteltukin näkymään.
Tarkasteltaessa sivua resoluutioltaan pienemmällä tabletilla, sarakkeet eivät mahdu yhtä aikaa näytölle, vaan verkkoselain voi näyttää vaakavierityspalkin tai pienentää sarakkeiden sisältöä siten, että niiden sisältö on huonommin luettavissa ilman zoomaamista. Pienellä älypuhelimen näytöllä sivut voivat olla vielä vaikeammin luettavissa. Omat haasteensa tuovat myös mobiililaitteiden "käännettävyys" – niitä voidaan käyttää sekä vaaka- että pystyasennossa.
Responsiivinen web-suunnittelu (engl. Responsive web design) tarkoittaa suunnittelutapaa, jolla pyritään siihen, että verkkosivujen tulee vastata käyttäjän käyttäytymiseen ja käyttöympäristön näytön kokoon, alustaan ja orientaatioon. Siinä sisältö, ulkoasu ja suorituskyky kaikilla laitteilla ovat käytettävyyden ja käyttäjätyytyväisyyden lähtökohta.
Responsiivisesti suunnitellut eli mobiiliystävälliset verkkosivut mukautuvat käyttöympäristöön hyödyntämällä joustavia ruudukoita, ulkoasuja ja kuvia sekä älykkäitä CSS3-mediakyselyjä. Siinä sivulla olevia elementtejä kutsutaan suhteellisilla yksilöillä, kuten prosenteilla, absoluuttisten yksikköjen, kuten pikseleiden tai pisteiden, sijaan. Esimerkiksi kuville voidaan asettaa ominaisuus-arvopari max-width: 100%, jolloin ne eivät voi ulottua isäntäelementin ulkopuolelle.
Mediakyselyjen ansiosta sivut voivat käyttää siis eri CSS-tyylisääntöjä sen perusteella, minkälaisella laitteella sivua tarkastellaan, esimerkiksi selainikkunan leveys. Responsiivinen ulkoasu mukautuu mihin tahansa näytön kokoon, olipa kyseessä sitten pöytätietokone, kannettava tietokone, tabletti, puhelin tai mikä tahansa muu päätelaite.
Kiinteät verkkosivustot voidaan muuttaa mobiiliystävällisiksi tekemällä muutoksia niiden HTML- ja CSS-koodiin. Aiemmin kuvattu kolmen sarakkeen esimerkki voitaisiin toteuttaa esimerkiksi siten, että isoilla näytöillä samalla rivillä näkyisi kolme saraketta, keskikokoisilla näytöillä kaksi saraketta ja pienillä näytöillä yksi sarake.
Mobile First
Useimmat web-suunnittelijat suunnittelevat verkkosivustoja pöytäkoneilla ja yrittävät vasta sitten saada niitä toimimaan hyvin mobiililaitteilla.
Vuoden 2010 Mobile World Congress -tapahtumassa Googlen toimitusjohtaja Eric Schmidt esitti, että web-kehittäjien tulisi noudattaa suunnittelussa mobile first -sääntöä. Tai oikeastaan se ei ole sääntö, vaan suunnittelustrategia. Siinäkin käytetään responsiivista suunnittelua, mutta mobiilikäyttäjien tarpeet etusijalla. Mobile first -ajatukseen liittyy kolme termiä: progressive advancement, graceful degration ja unobstructive JavaScript.
Progressive Advancement on suunnittelustrategia, jossa korostetaan verkkosivuston sisältöä. Sivustosta luodaan ensin hyvin yksinkertainen versio, jossa perussisältö on saatavilla kaikilla verkkoselaimilla. Tämän jälkeen sivustolle lisätään vähitellen monivivahteisempia ja teknisesti vaativampia toimintoja ja ominaisuuksia muun muassa CSS:n ja JavaScriptin avulla, huomioiden kuitenkin loppukäyttäjän selainasetukset. Strategian avulla pyritään luomaan saavutettavampia sivustoja, koska näin suunnitelluilla sivuilla perussisältö on aina saatavilla.
Graceful Degration strategiassa suunnittelu aloitetaan edistyneemmästä päästä, kuten pöytätietokoneista. Sivustosta luodaan aluksi ominaisuuksiltaan monipuolinen versio, jota aletaan kehittämään mobiiliystävälliseksi vähentämällä asteittain joitakin toimintoja ja sisältöjä.
Unobstructive JavaScript on yleinen lähestymistapa JavaScriptin käyttöön verkkosivustoilla. Vaikka termille ei ole virallista määritelmää, se ymmärretään yleensä verkkosivuston toiminnallisuuksien erottamista sen rakenteesta, sisällöstä ja esitystavasta. Sen avulla pyritään välttämään JavaScriptin käytöstä tavallisesti aiheutuvia ongelmia, kuten selaimiten yhteensopivuusongelmia.
Responsiivisuus vaikuttaa hakukoneoptimointiin
Google on rakennettu palvelemaan käyttäjiä, jotka tekevät hakuja netissä. Sen käyttäjät käyttävät mobiililaitteita ja siksi Google suosii verkkosivustoja, jotka kykenevät vastaamaan sen käyttäjien tarpeisiin.
Google suosii sivustoja, jotka on suunniteltu responsiivisesti, optimoitu mobiililaitteille ja on mobiiliystävällisiä. Responsiivisilla sivuilla on parempi käytettävyys, pienempi poistumisprosentti (engl. bounce rate) ja ne latautuvat nopeammin. Niillä ei ole päällekkäistä sisältöä (vrt. erillinen sivu mobiililaitteille) ja niitä jaetaan enemmän sosiaalisessa mediassa.
Responsiivisuus on ollut vuodesta 2015 lähtien yksi Googlen ranking-perusteista – niistä muuttujista, jota se käyttää järjestäessään sivustoja arvioidessaan niiden relevanssia suhteessa käyttäjien hakuihin. Mobiiliystävälliset sivustot saavat enemmän näkyvyyttä sekä enemmän ja kohdennetumpia kävijöitä.
Suunnittelemme mobiiliystävällisiä sivuja
Web-suunnittelu Pokis noudattaa suunnittelussa responsiivista suunnittelua.
Käytämme aina vain responsiivisia WordPress-ulkoasupohjia ja teemme sivuista mobiiliystävälliset.
Testaamme sivut useilla laitteilla ennen julkaisua ja teemme tarvittavat säädöt.