Responsiiviset komponentit: taulukot

Responsiivisuus on parhaillaan kovassa huudossa. Olen jo aiemmin käsitellyt, mitä responsiivinen design on ja miten toteuttaa responsiivinen navigaatio. Tällä kertaa tarkastelun kohteena responsiivista komponenteista ovat taulukot.

Aikoinaan jopa koko sivusto saatettiin rakentaa käyttäen taulukoita. Tämä ei kuitenkaan nykyään enää ole erityisen suositeltavaa, sillä se aiheuttaa esimerkiksi responsiivisuuden saralla paljon haasteita.

Tästä huolimatta taulukot ovat edelleen hyviä sarakepohjaisen tiedon näyttämiseen. Pienten näyttöjen kohdalla tässä saattaa kuitenkin tulla ongelmia, jos taulukossa on vaikkapa 20 saraketta. Taulukosta tulee väkisin niin leveä, että sivulle ilmestyy sivupalkki, kun näytön koko pienenee. Sivupalkkeja käyttäjät eivät yleensä koe erityisen mukavina. Tämän lisäksi sivusto näyttää huonolta, kun se skaalautuu muuten hyvin, mutta taulukko on selvästi liian leveä. Ratkaisuvaihtoehtoja ongelmaan on useita.

Tapa 1: Sarakkeiden piilotus

Helpoin ja yksinkertaisin tapa on piilottaa vähemmän tärkeät sarakkeet pienemmillä näytöillä. Tämä onnistuu yksinkertaisesti CSS:n display:none-määritteellä. Ongelma tässä lähestymistavassa on tietysti se, että käyttäjältä piilotetaan tietoa perustuen siihen, minkä kokoinen näyttö hänellä on. Vaikka osa sarakkeista saattaakin olla vähemmän merkitseviä, käyttäjällä ei ole mitään tapaa saada näiden sarakkeiden tietoja näkyviin. En suosittele tämän lähestymistavan käyttöä.

img 626a200de9912

Tapa 2: Mahdollisuus valita sarakkeet

Tämä vaihtoehto on paranneltu versio ensimmäisestä ratkaisumallista. Oletuksena kun näytön koko pienenee, myös näytettävien sarakkeiden määrä pienenee, mutta taulukon ohessa on pudotusvalikko, jonka kautta on mahdollista saada näkyviin piilotetut sarakkeet.

img 626a20119cd77

Tämä lähestymistapa tarvitsee toimiakseen myös JavaScriptia. Kun taulukosta tulee liian leveä, sivustolle ilmestyy sivupalkki, joita yleensä olisi hyvä välttää. Tämä saattaa pahimmassa tapauksessa myös rikkoa sivuston ulkoasua. Tämän vuoksi en tätä mallia käytä, sillä parempiakin on olemassa.

Tapa 3: Taulukon muuttaminen kaavioksi

Hieman erikoisempi vaihtoehto on muuttaa taulukko kaavioksi, sillä kaaviot saattavat tietyissä tilanteissa soveltua paremmin pienille näytöille. On kuitenkin selvää, ettei kaikkia taulukoita ja niiden tietoa ole järkevää edes muuttaa kaavioiksi.

img 626a201555342

Ratkaisu sopii siis vain tietynlaisiin tilanteisiin. Tämän lisäksi voidaan jälleen pohtia sitä, että tiedon esittämismuoto vaihtuu riippuen näytön koosta. Tämä ei välttämättä ole hyvä asia. Jos mobiilikäyttäjät näkevät kaavion, miksei työpöytäkäyttäjä näe sitä ellei pienennä selaintaan? Ratkaisu vaatii JavaScriptin käyttöä.

Tapa 4: Solujen väritys

Tässä ratkaisumallissa taulukko on isoilla näytöillä ihan normaalin näköinen. Kun näytön koko pienenee, solut menevät osittain päällekkäin CSS:n float:left-määritteen takia, kun kaikki solut eivät enää mahdu yhdelle riville. Täten myös normaali taulukon omainen rakenne hajoaa.

img 626a20199d075

Jotta solujen sisällön pystyy liittämään oikeaan sarakkeeseen, solut väritetään eri väreillä. Värityksestä huolimatta taulukon rakenne saattaa silti olla hyvin epäselvä. Ratkaisu toimii pelkällä CSS:llä.

Tapa 5: Sarakkeiden kääntäminen

Tällä hetkellä paras ratkaisu mielestäni on sarakkeiden ”kääntäminen”. Tällä tarkoitan sitä, että taulukon ylhäällä ensimmäisessä rivissä olevat solut siirtyvät ensimmäiseen sarakkeeseen allekkain. Samoin myös taulukon muu sisältö kääntyy tavallaan sivuttaiseksi. Kun näytön leveys pienenee, vasen otsakesarake pysyy paikoillaan, mutta muutoin taulukkoon ilmestyy sivupalkki. Tämä on huomattavasti parempi vaihtoehto kuin koko sivun levyinen sivupalkki. Toteutus onnistuu muutamalla tavalla.

David Bushellin ratkaisussa on käytetty pelkästään CSS:ää. Tämä ratkaisu ei kuitenkaan toimi aivan kaikilla selaimilla (esim. IE 9), joten tämän käyttöä ei voi suositella ellei halua sorsia IE 9:n käyttäjiä.

img 626a201d87b65

Zurb.comin väki on toteuttanut saman idean toisella tavalla. Tämä ratkaisu toimii myös IE 9:llä. Tämä ratkaisu on kuitenkin riippuvainen JavaScripistä, joka kuitenkin tuntuisi toimivan ihan hyvin myös mobiililaitteilla. Tosin Windows Phone 8:n mukana tulevalla IE:llä ei taulukon sivupalkkia näy ollenkaan, mutta liikuttelu sivulle päin kyllä toimii silti. Tästä puutteesta huolimatta pidän tätä ratkaisutapaa tällä hetkellä parhaana.
img 626a2021369cc

Kolmas tapa poikkeaa edellisistä vaihtoehdoista. Tässä mallissa taulukko muuttuu melkein listamaiseksi pienellä näytöllä. Jokaisessa solussa on sarakkeen nimi ja siihen liittyvä tieto. Tällöin ei tarvita ollenkaan sivupalkkia, vaan taulukko vie huomattavasti enemmän tilaa pystysuunnassa. Tämä ratkaisu on myös erittäin mielenkiintoinen, mutta siinä on muutamia hankaluuksia.img 626a202534738

Itse asiassa taulukkoa ei ole rakennettu HTML:n taulukko <table>-elementillä vaan <div>-elementillä. Tämä aiheuttaa ongelmia erityisesti, jos taulukoita on tarkoitus muokata sisällönhallintajärjestelmän kautta. Monet sisällönhallintajärjestelmien editorit vaativat tällaisessa tapauksessa HTML-koodin tuntemusta. Zurbin ratkaisussa tätä ongelmaa ei ole, sillä se käyttää <table>-elementtiä ja oikeiden taulukoiden muokkaaminen editoreissa onnistuu yleensä huomattavasti käyttäjäystävällisemmin kuin <div>-elementtien.
Tämä ratkaisu vaatii myös <div>-elementille data-label-attribuutin, joka tuo huomattavasti lisätyötä ja toistamista, jos sitä muokataan sisällönhallintajärjestelmän kautta. Jos taulukko luodaan automaattisesti jonkin skriptin toimesta, silloin tämä ratkaisu on yksi parhaimmista. Ratkaisu toimii pelkän CSS:n avulla.

Yhteenveto

Responsiiviset taulukot ovat haastavia, sillä yleensä sarakepohjaisen tiedon näyttämiseen tarvitaan tilaa nimenomaan leveyssuunnassa. Mobiililaitteissa tätä ei aina ole lähellekään niin paljon kuin normaaleilla näyttölaitteilla. Tilan loppuessa kesken pitää miettiä muunlaisia ratkaisuja. Tässä artikkelissa kuvattiin tämän hetken yleisimpiä vaihtoehtoja, mutta jään mielenkiinnolla odottamaan myös tulevaa, sillä uusia vaihtoehtoja ilmestyy varmasti lisää.

Voit kokeilla demoja itse pienentämällä selaintasi. Mikä vaihtoehdoista sinun mielestäsi toimii parhaiten?
mainos_Responsiivinen-suunnittelu

Timo Leiniö

Chief Technical Officer & Partner

Lue lisää aiheesta