Tilaa-Lehti.fi on suomalainen aikakauslehtien tilauspalvelu netissä. Yleistyvän mobiilikäytön vuoksi halusimme tehdä sivustosta responsiivisen, jotta se palvelisi entistä paremmin myös mobiilikäyttäjiä.

Responsiivisessa suunnittelussa lähtökohtana on tarjota käyttäjille sivustosta sama HTML-versio riippumatta siitä millä päätelaitteella (esim. pöytätietokone, tabletti tai älypuhelin) käyttäjä selaa sivustoa, mutta vaikuttaa sivuston elementtien asetteluun ja näkyvyyteen CSS3-tyylitiedostojen tarjoamien media-queryjen kautta.

Media-queryjen avulla sivuston käytettävyyttä ja käyttökokemusta voidaan parantaa tunnistamalla laitteiden ominaisuuksia, kuten näytön tai selainikkunan kokoa, ja mukauttamalla sivuston esitystapa niiden mukaisesti.

Google Analytics -palvelusta huomaamme, että mobiilikäyttäjien määrä sivustolla on noussut viimeisen vuoden aikana tasaisesti ja sama suuntaus tulee todennäköisesti jatkumaan myös tulevaisuudessa.

Tilaa-Lehti.fi mobiilikäyttäjien osuudet

Tilaa-Lehti.fi -sivuston mobiilikäyttäjien osuuden kehitys vuosina 2012-2013.

Sivusto on toteutettu vuonna 2009 WordPress-julkaisujärjestelmällä ja ulkoasuteemaksi valittiin silloin ilmainen Voodoo Dolly -teema, jota muokattiin vastaamaan tarpeita.

Ulkoasuteema on hyvin simppeli, mutta siisti, 980 pikseliä leveä ja kolme erillistä palstaa sisältävä teema. Yksi tärkeimmistä valintaperusteista tuolloin oli, että keskimmäinen, varsinaisen sisällön sisältävä palsta oli HTML-koodissa ensimmäisenä, jotta Google tulkitsisi sen pääsisällöksi. Tämä ei ole enää niin tärkeää, koska sisältö voidaan erotella nykyään esimerkiksi HTML5:n semanttisilla tägeillä, kuten <header>, <nav> ja <article>.

Sivuston yläpalkissa (#header) on logo ja slogan, jotka toimivat samalla linkkinä etusivulle. Sen alla on päänavigaatio (#navBar), jossa on linkit tärkeimmille sisältösivuille ja hakukenttä. Vasemmalla palstalla (#leftColumn) on lista eri lehtikategorioista, keskipalstalla (#centerColumn) varsinainen sisältö ja oikealla palstalla (#rightColumn) linkki palvelun Facebook-sivulle, sisältöön liittyviä muita sivuja sekä suosituimpia tarjouksia. Alapalkki (#footer) on myös jaoteltu kolmeen palstaan, joissa on linkkejä sisältösivuille ja sosiaalisen median profiileihin sekä toinen vaihtoehtoinen hakukenttä.

Tilaa-Lehti.fi yli 980px

Tilaa-Lehti.fi-sivuston taittuminen yli 980 pikseliä leveille näytöille.

Sivuston muokkaaminen responsiiviseksi

Valitsimme responsiivisen suunnittelun “breakpointit” sen perusteella miten sivuston käyttöliittymä toimi eri resoluutioilla. Sivuston toimivuutta eri resoluutioilla voi testata helpoiten selainikkunaa pienentämällä ja eri päätelaitteilla puolestaan ilmaisella Screenfly-testaustyökalulla.

Useimmat mobiiliselaimet osaavat skaalata HTML-sivut siten, että ne mahtuvat kokonaan näytölle. Viewport-tägillä voidaan kuitenkin varmistaa, että selain tulkitsee sivun leveydeksi laitteen näytön leveyden. Lisäämme <head>-tägin sisälle seuraavan koodin:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, text-size=normal" />

Vanhassa designissa ensimmäinen ongelma oli ulkoasuteeman kiinteä 980 pikselin leveys. Kun sivustoa tarkasteltiin tätä kapeammalla näytöllä, selain joko luo automaattisesti ärsyttävät vaakavierityspalkit tai pakottaa sivuston skaalautumaan näytön kokoon, josta seuraa useimmiten hyvin pieni fonttikoko, josta ei saa selvää ilman zoomaamista.

Uudessa designissa sivuston leveys alle 980 pikselin levyisillä näytöillä määriteltiin kiinteän leveyden sijasta mukautumaan 95 %:iin näytön leveydestä. Sivun molemmille laidoille jätettiin yhteensä 2,5 % marginaalit, ettei teksti ala suoraan näytön vasemmasta reunasta.

Nämä säännöt on suunnattu etupäässä sivustoa tableteilla vaakatasossa selaaville käyttäjille.

@media only screen and (max-width:980px) {
#pageWrap {
width: 95%;
}

Varsinaisten rakenteellisten elementtien (#header, #navBar, #container ja #footer) leveydet määriteltiin 100 % levyisiksi sekä kuvien ja listojen ja muiden maksimileveydeksi niin ikään 100 % niiden container-elementteihin nähden.

#header, #navBar, #container, #footer {
width: 100%;
}
img {
height: auto;
max-width: 100%;
}

Lisäksi oikeanpuoleinen palsta siirrettiin vasemman- ja keskipalstan alapuolelle, jolloin keskimmäisen palstan tärkeimmät asiat saatiin paremmin esille. Alapalkin eli footerin palstat määriteltiin vielä 33 %, mutta vähintään 130 pikseliä leveiksi, jotta niissä olevat tekstit taittuvat nätisti ja ovat luettavissa myös pienemmillä näytöillä.

Tilaa-Lehti.fi alle 980 pikseliä leveillä näytöillä

Tilaa-Lehti.fi alle 980 pikseliä leveillä näytöillä. Hakukenttä on jäänyt pois ja oikeanpuolimmainen palsta taittuu kahden muun palstan alapuolelle.

Seuraava breakpoint sivustolla oli 650 pikseliä ja sitä pienemmän resoluution näytöt, jotka koskevat lähinnä tableteilla pystytasossa tai älypuhelimilla sivustoa selaavia käyttäjiä.

Alle 650 pikseliä leveillä näytöillä sivun tärkeimmälle informaatiolle eli keskipalstalle jäi liian vähän tilaa, joten vasen palsta sai myös jäädä sen tieltä pois.

Koska reponsiivisen suunnittelun ideana ei ole vain piilottaa elementtejä mobiililaitteilta, vasemmalla palstalla oleva lehtikategorialistaus korvattiin päänavigaation alapuolelle tulevalla, JavaScriptillä toteutettavalla, alasvetovalikolla. Alasvetovalikko sisältää samat linkit lehtikategorioihin kuin listakin, mutta sitä on helpompi käyttää mobiililaitteilla. Alapalkin palstat taittuvat automaattisesti alekkain silloin, kun ne eivät mahdu näytölle vierekkäin.

Tilaa-Lehti.fi alle 650 pikselin leveydessä

Alle 650 pikselin leveydessä vasen sivupalkki on muutettu alasvetovalikoksi.

Koska CSS3:n media-queryt ovat periytyviä ja rakenteelliset elementit on määritelty jo isommilla resoluutioilla näytön kokoon skaalautuviksi, 650 pikseliä pienempien resoluutioiden osalta tarvitsee tehdä enää näiden sisällä olevien elementtien säätöjä. Hyvin pienillä näytöillä kannattaa välttää esim. float-määritteitä, joilla sivujen taitto rikkoutuu helposti.