Your company's code factory

Modern full-stack Python and Django development with Vue frontends and underlying infrastructure

Mitä ovat adaptiivisuus ja responsiivisuus?

Internetsivustojen ulkoasuja toteutetaan pääasiassa kahdella eri tekniikalla: responsiivisesti tai adaptiivisesti. Noviaria voi toteuttaa projektinne kummalla tahansa tavalla, mutta nämä tavat ovat tosiaan pois sulkevat, eli uutta internetsivua suunnitellessa, on päätettävä kumpaa tapaa sovelletaan. Molemmilla tavoilla pyritään toteuttamaan internetsivu tai -ohjelmisto, jonka ulkoasu riippuu kulloinkin käytettävästä laitteesta. Laite on yleensä tässä yhteydessä kannettava tietokone, pöytätietokone, tabletti tai älypuhelin, mutta voi olla myös esim. upotettu järjestelmä, kuten älykello, viihdejärjestelmä tai tiedotusnäyttö.

Responsiivisuus

Responsiivinen suunnittelu tarkoittaa, että sivusto mukautuu automaattisesti eri laitteille, laitteen näytön koon mukaan. Sivustosta on tällöin olemassa yksi samansisältöinen versio, joka tyypillisesti toteutetaan nk. murtumispisteillä. Murtumispisteen nimi voisi kuvaavammin olla muuntumispiste, ja se on ennalta määritelty pikselikoko (tyypillisesti sivuston leveys pikseleissä), jonka alittuessa tai ylityessä sivuston ulkoasu muuttuu. Yleinen tapa on toteuttaa sivusto kahdella murtumispisteellä, jolloin saavutetaan yksi versio älypuhelimille ja sitä pienemmille laitteille, yksi välikoko esim. tablet-tietokoneille, ja yksi työpöytäversio esim. kannettaville tietokoneille ja sitä suuremmille laitteille kuten pöytätietokoneille.

Responsiivinen suunnittelu on paras vaihtoehto, kun etsitään kustannustehokasta ratkaisua toteuttaa internetsivusto käytettäväksi monelle eri laitteelle. Kyseinen suunnittelutapa on kuitenkin kompromissi, koska vain sivuston ulkoasu muuttuu. Tämä tarkoittaa, että eri laitteiden ominaisuuksia ei voida tehokkaasti hyödyntää, kuten esimerkiksi älypuhelimien paikannusta tarjoamaan automaattisesti reittiä lähimpään toimipisteeseen tai älykellojen ja -puhelimien mobiilimaksuominaisuuksia.

Adaptiivisuus

Adaptiivinen suunnittelu puolestaan tarkoittaa, että sivustosta luodaan useita kokonaan eri versioita, yksi kullekin laitteille tai laiteryhmälle. Sivustosta näytettävä versio riippuu kulloinkin käytettävästä päätelaitteesta ja eri versioiden sisältö ja toiminnallisuus voi tarvittaessa erota toisistaan huomattavasti.

Adaptiivisuus ei välttämättä käytä responsiiviseen tapaan murtopisteitä, vaan sivuston eri versioita voidaan kohdistaa myös suoraan käytetyn päätelaitteen tyypin tai ominaisuuksien mukaan.

Sivustojen toteuttaminen adaptiivisesti on työläämpää ja täten myös kalliimpaa, mutta on oikea valinta, kun halutaan hyödyntää jokaisen laitteen ominaisuuksia täysimääräisesti tai kun on tarve pitkälle optimoida jokin tietty alusta joko suorituskyvyn osalta tai markkinointitarkoituksessa, esim. Google AMP-tekniikalla.