6.6.2013

HTML5 – identtinen käyttökokemus kaikilla selaimilla on unohdettava!

Tuukka Uskali

Sinisen Meteoriitin Lead Designer Tuukka Uskali kannattaa vahvasti uutta HTML5 -standardia. Meteoriitti.comin toimitus kyseli Tuukalta, mitä HTML5 tuo mukanaan ja miksi sitä kannattaa alkaa käyttää.

Mitä tarkoittaa HTML5?

WWW-sivujen rakenteiden kuvaamiseen käytetty HTML-kieli on kypsynyt vuosien saatossa nykyiseen muotoonsa ja kantaa nyt versionumeroa viisi. Vaikka HTML5-spesifikaation on kaavailtu valmistuvan lopullisessa muodossaan vasta yli kymmenen vuoden kuluttua – vuonna 2022, on HTML5 kuitenkin läsnä jo tässä ja nyt. Sen tarkoituksena on korvata laajalti käytössä oleva XHTML Web Designerien ja HTML-tuottajien työkaluna WWW-sivujen taitossa. Modernit selaimet tukevat varsin kattavasti HTML5 spesifikaatiota ja hieman vanhempia selaimia varten on olemassa Javascript-pohjaisia kirjastoja, joiden avulla HTML5 tuki on mahdollista ulottaa pääosin näillekin päätelaitteille.

Vuosi 2022 kuitenkin kummittelee monen HTML5:n käyttöönottoa harkitsevan mielessä. Huolestumista herättää, mitä kaikkea pitkän taipaleen varrella ehtii vielä tapahtua ja muuttua. HTML5 spesifikaatio on kuitenkin jo nyt valmis tuotantokäyttöä varten. Vertailun vuoksi voidaan ottaa esimerkkinä verkkopalvelun esityskerroksen kuvaamiseen käytetty CSS2.1 spesifikaation laajennos. CSS2.1 on ollut tuotantokäytössä jo kymmenen vuotta, vaikka se varsinaisesti valmistui vasta vuoden 2011 kesäkuun alussa. Webin kehitys on tänäpäivänä hyvin nopeaa, eikä ole syytä jäädä odottamaan spesifikaatioiden valmistumista ennen houkuttelevien ominaisuuksien käyttöönottoa.

Mitä HTML5 sisältää?

HTML5 sisältää useita merkittäviä uudistuksia, joista maininnan arvoisia ovat ainakin uudet semanttiset elementit, yksinkertaistettu dokumentin outline, audio, video, lomake-elementit ja rikkaiden web-sovellusten saavutettavuutta parantava WAI-ARIA-saavutettavuusstandardi. Kehittäjiä kiinnostanevat erityisesti contenteditable, local storage, säännölliset lausekkeet ja canvas. Näiden lisäksi HTML5:n yhteyteeen usein liitetään geolocation, web sockets ja CSS3. Näistä ulkoasun ja käyttöliittymän kannalta tärkeimpänä ominaisuutena voidaan pitää uutta CSS3 spesifikaatiota, jota toteuttamalla on mahdollista rakentaa palvelun visuaalinen ilme hyvin kevyellä rakenteella.

Voittajia HTML5:n käytössä ovat käyttäjät, kehittäjät, hakukoneet ja ennen kaikkea Internet. Uudemman tekniikan avulla esitetty sisältö on entistä semanttisemmin jäsenneltyä, rakenteellisesti yksinkertaisempaa ja tämän johdosta paremmin saavutettavissa. Käyttökokemus on jouhevampi ja paremmin skaalattavissa, koska esityskerrokseen liittyvät ylimääräiset elementit ja Javascript-kutsut eivät enää ole samassa mittakaavassa tarpeen. Lisäksi mobiili web on lyönyt itsensä läpi ja Internetissä surfataan jollain mobiililla päätelaitteella yhä enemmissä määrin. Vanhanaikaisella tekniikalla toteutetut sivut aiheuttavat harmaita hiuksia ja suorituskykyongelmia uusimmille mobiilipäätelaitteille, jotka on kehitetty pääosin tukemaan kehittyneempiä tekniikoita, kuten HTML5:tä ja CSS3:a.

Tätä silmällä pitäen varsin mielenkiintoisena CSS3:n ominaisuutena voidaan pitää CSS media -kyselyitä. Näiden avulla voidaan sama WWW-palvelu esittää eri päätelaittelle niille ominaisessa muodossa. Esimerkiksi sama verkkopalvelu voidaan esitää älypuhelimen selaimelle yksipalstaisena kun puhelinta pidetään pystytasossa, kaksipalstaisena kun sitä pidetään vaakatasossa ja kolmipalstaisena kun palvelua tarkastellaan kannettavalla tietokoneella. Samasta verkkopalvelusta voidaan siis usein pienellä vaivalla rakentaa päätelaitekohtainen räätälöity käyttökokemus.

Entäpä vanhemmat selaimet?

Miten huomioidaan Internet Explorer 7 tai 8? Tämä on kysymys, mikä hyvin usein tulee vastaan ja siihen ei ole yksiselitteistä vastausta. Kehitys menee eteenpäin ja ainoastaan selainta säännöllisesti päivittämällä voi olla varma että näkee Internetin sellaisena, kuin se on tarkoitettukin. Usein ongelmaksi muodostuu kuitenkin se, ettei käyttäjällä ole mahdollisuutta päivittää itsenäisesti selainta, varsinkin jos kyseessä on työkäyttöön tarkoitettu tietokone. Tällaisessa tapauksessa tietokoneella on usein asennettuna yrityksen linjauksen mukainen verkkoselain, johon on vielä kehitetty yrityksen toimintajärjestelmiin liittyviä kriittisiä liitännäisiä. Näissä tilanteissa päivitysprosessi on suunniteltava huolellisesti ja päivitystiheys on harva.

Huomattava osa varsinkin viestinnällisen verkkopalvelun suunnittelusta ja toteutuksesta liittyy ulkoasuun ja käyttöliittymään. Tulisiko verkkopalvelun ulkoasun sitten vastata kaikilla selaimilla, vanhoilla ja uusilla täysin sitä vastaan piirrettyä visuaalista ilmettä? Mielestäni ei, sillä verkkopalvelun tulee mukautua sen mukaan, mitä ominaisuuksia siellä vierailuun käytettävällä päätelaitteella on tarjota. Vielä muutama vuosi taaksepäin oli tapana suunnitella verkkopalveluiden käyttöliittymä vähiten kehittyneen selaimen ehdoilla. Tuolloin modernimpien selainten uusimpia ominaisuuksia ei otettu käyttöön, tai niitä yritettiin toteuttaa hyvin kustannustehottomasti myös vanhempiin selaimiin. Lopputuloksena oli hyvin raskaat, skaalautumattomat sivut sekä moderneille että vanhemmille selaimille. Selainlaajennuksia, kuten Flashi,a käytettiin muun muassa monipuolisemman typografian esittämiseen ja tämä luonnollisesti heikensi sivun suorituskykyä, saavutettavuudesta nyt puhumattakaan.

Mobiilin webin kasvun myötä markkinoille on tullut useita erikokoisia näyttöjä, ja älypuhelimille sekä tablet-tietokoneille yksilöllisiä ominaisuuksia kuten kosketuskäyttöliittymät, GPS-paikantimet, sensorit ja prosessointitehon rajoitukset. Nämä osoittavat, että webbiä ei seurata enää samankaltaisten työpyötäkonfiguraatioiden kautta, joten on pystyttävä yhä luovempaan ja personoidumpaan käyttöliittymäsuunnitteluun.

Joskus on kuitenkin perusteltua, että verkkopalvelu näyttää visuaalisesti lähes samalta samankaltaisilla päätelaitekonfiguraatioilla. Tämän ei tulisi olla esteenä käyttöön otettaessa uusinta tekniikkaa ja parhaita toimintatapoja WWW-kehityksessä. Useimmat HTML5:n vaatimat elementit voidaan tuoda vanhempien selaimien ulottuville mm. Javascriptin avulla. CSS3:n puuttuvia ominaisuuksia voidaan korjata niin ikään Javascriptilla mutta kannattaako tämä aina ainoastaan visuaalisen ilmeen takia? Se on aikaa vievää työtä, mikä ei maksa itseään takaisin. Pidän parempana lähtökohtana sitä, että verkkopalvelua ei pyritä tekemään vastoin selaimen kykyjä täysin visuaalisesti identtiseksi vaan keskitytään siihen, että verkkopalvelu ei näytä rikkonaiselta millään selaimella.

Käyttöliittymän toteutus- ja suunnitteluvaiheessa kannattaa siis kysyä itseltään: käytänkö päivän siihen, että teen kaikille selaimille täysin identtiset pyöristetyt kulmat karttalaatikkoon, vai teenkö samassa ajassa moderneille selaimille pyöristykset sekä GPS-paikannusmahdollisuuden, mikäli päätelaite tukee sitä. Selaimet ovat kaikki erilaisia ja niillä on jokaisella omat vahvuutensa. Näitä vahvuuksia tulisi tuoda paremmin esille, sen sijaan että pyrittäisiin asettamaan kaikki samalle viivalle vähiten tuetuimman ominaisuuden mukaan.

Aiheeseen liittyviä linkkejä

 Kiinnostuitko? Ota yhteyttä!