← Back to front page

Legacy-sivuston muuttaminen responsiiviseksi

Hengitysliiton tupakoinnin lopettamiseen tukea tarjoavalla Stumppi.fi-palvelulla on pitkä historia Ambientiassa. Ensimmäinen versio on julkaistu vuoden 2005 tienoilla. Alustana on aina ollut kuitenkin Ambientian Content Manager, toki versio on muutaman kerran päivitetty. Palvelu on kokenut matkan varrella muutaman ulkoasumuutoksenkin, joista viimeisin allekirjoittaneen käsialaa. Kyseessä on siis legacy-projekti (vanhempaa tekniikkaa, joka on edelleen käytössä), jonka frontend-koodit on kirjoitettu paljon ennen kuin responsiivisen suunnittelun periaatteita on ollut edes olemassa.

Kun muokataan kiinteälle leveydelle suunniteltua sivustoa responsiiviseksi, ideaalein ratkaisu olisi muokata jokaisen sivupohjan HTML-rakenne uusiksi ja ottaa mahdollisesti taustalle jokin kätevä CSS-framework kuten Foundation tai Bootstrap. Tuo olisi tarkoittanut sitä, että nyt kun palvelussa on sivuvalikon elementti #sidenav ja sen leveydeksi on määritelty 220px, olisi tuon #sidenav-elementin luokaksi määritelty esimerkiksi Bootsrapin gridin mukaan class=”col-md-3 col-sm-12″. Framework olisi siis hoitanut elementin asettelun erikokoisissa näytöissä.

Itse päädyin kuitenkin sellaiseen ratkaisuun, että tein yhden responsive.css tyylitiedoston, jonne määrittelin tyylit kapeille näytöille. Media queryn sisään meni siis esimerkiksi tuo #sidenav, jonka leveydeksi pienellä ruudulla asetetaan 100 %. Olemassa olevat tyylitiedostot ja sivupohjat eivät tässä lähestymistavassa joutuneet kovinkaan suuren remontin kohteeksi.

Jos olisin valinnut toisen lähestymistavan ja siivonnut myös HTML-rakenteen, olisi koodi ollut ehkä pykälän verran siistimpää. Nyt säästyi kuitenkin aikaa tehdä muitakin asiakkaalle hyödyllisiä päivityksiä. Lähtökohtaisesti on hölmöä lisätä mobiililaitteita – joiden yhteysnopeudet usein ovat huonommat kuin pöytäkoneiden – varten yksi tiedosto lisää kasvattamaan latauskuormaa. Tätä varten otin projektin kehitykseen Grunt-työkalun, jolla voi automatisoida erilaisia sivuston ohjelmointiin liittyviä tehtäviä. Stumpin tapauksessa laitoin Gruntin yhdistämään kaikki CSS-tiedostot ja minifioimaan ne. Saman tempun Grunt teki Javascript-tiedostoille. Kaksitoista tiedostoa pieneni tässä käsittelyssä vain kahteen tiedostoon.

Pääpaino responsiivisen version suunnittelussa oli saada Stumpin hyvin kirjoitettu tekstisisältö esiin. Tavoitteena oli näyttää muutenkin pienessä mobiilinäytössä mahdollisimman vähän sivuston käyttöliittymää ja saada kävijän huomio itse sisältöön. Typografiaan kiinnitettiin myös paljon huomiota: pieniä viilauksia fonttikoossa, harmaan sävyjen hienovaraista tummennusta ja rivivälien tarkistusta. Tämä kaikki siksi, että lukukokemus myös mobiililaitteilla olisi mahdollisimman hyvä.

Responsiivinen Stumppi.fi

Mikko Suominen works at Ambientia as an Interaction Designer. He designs user interfaces and uses front-end technologies like HTML, CSS and JavaScript fluently.

Leave a Reply

  • (will not be published)

Time limit is exhausted. Please reload CAPTCHA.

Please, leave us a message and we'll contact you.
You can also contact our Service Desk by phone +358 290 010 500 or email servicedesk@ambientia.fi.