Suomen helpoin

Osuuspankki on avannut uuden verkkopankkikäyttöliittymän ja mainostaa sitä Suomen helpoimmaksi Internet-pankiksi. Näkemys helppoudesta on kummallinen.

Kaikki linkit on korvattu nappuloin, mikä tuntuu todella oudolta. Kerrataanpa perusjako: nappuloiden on tarkoitus lähettää lomakkeelle syötetty tieto palvelimelle, linkkien on tarkoitus johdattaa uuteen verkko-osoitteeseen. Miksi kaikille webiä käyttäneille tuttu käyttölogiikka on pitänyt keksiä uudelleen? Heti ensimmäisellä sivulla kehotetaan valitsemaan tunnistautumustapa, vaikka tapoja on tarjolla vain yksi. Kun vain yksi vaihtoehto on tarjolla, valintaan pakottaminen on ainoastaan hämmentävää.

Valinta tehdään klikkaamalla nappulaa, joka suorittaa JavaScriptin pätkän, joka ohjaa toiselle sivulle eli toimii kuten yksinkertainen linkki toimisi. Ilman JavaScriptiä ei siis pääse yhtään minnekään. Tämä rajoitus on aivan turha eikä siitä edes varoiteta missään, huolimatta HTML-speksin helppokäyttöisestä noscript-tagista.

Tekstin koon vaihtaminen toimii vain Internet Explorerissa, mutta silloinkin vain kun JavaScript kytketään päälle. Näin ei tällä hetkellä voi kuitenkaan toimia, jos ei tahdo koneelleen kutsumattomia vieraita. Tämän, kuten myöskin värit vaihtavan toiminnon olisi helposti voinut tehdä palvelinpäässä, jolloin ei oltaisi oltu riippuvaisia selaimen asetuksista ja merkistä.

Sivut julistavat olevansa XHTML:ää, mutta eivät sitä ole. Taitto on tehty kiinteän levyisin taulukoin, mutta sentään pikselikuvia ei ole käytetty. Varsinkin heikkonäköisten keskuudessa varsin yleisellä 800×600-resoluutiolla osa tekstistä jää ruudun ulkopuolelle ja pakottaa selaimen esittämään sivuttaisvierityspalkin aivan turhaan, mikä syö tilaa ennestään pieneltä ruudulta ja vaikeuttaa sivujen lukemista. Näin yksinkertainen sivu pitäisi helposti saada mahtumaan 640×480-resoluutioon tai jopa pienempäänkin.

Onkohan mainostettua ulkopuolisen yrityksen tekemää käytettävyystestiä suoritettu muilla kuin yleisimmän selaimen oletusasetuksilla? Esimerkiksi sokeaa web-lomakkeella avustavat labelit, fieldsetit ja legendit puuttuvat kokonaan.

Entä mistäköhän johtuu, että helppokäyttöisyyden, selkeyden ja esteettömyyden luullaan tarkoittavan rumaa, vastenmielistä ja karua ulkoasua?

Standardien seuraamisen vaikeus

Kokeiltuaan varsin naiivilla tavalla XHTML:n mukaista MIME typeä Milan Negovan on tullut siihen tulokseen, että application/xhtml+xml:ää ei tulisi käyttää web-sovelluksissa. Perustelunsa ovat tosin aika kehnot.

Selkeä pääsyy Nogovanin niskoitteluun on se, että hän käyttää web-sivujensa taustateknologiana Microsoftin ASP.NETiä ja on ilmeisen mieltynyt sen huomattavasti työtä vähentävään mutta webin rikkovaan Web Forms -malliin. Hän vertaa ASP.NETin valmiskontrolleja valmiiksi leikattuun leipään. Vertaus olisi parempi, jos se ottaisi huomioon sen semanttisen HTML:n irvikuvan, jota ASP.NET tuottaa. Kenties lisäaineet, jotka huolimatta viipaloinnista saavat leivän pysymään tuoreena ja pehmeänä voisivat edustaa sitä puolta. Lisäaineet kyllä hoitavat varsinaisen tehtävänsä, mutta eivät ole erityisen terveellisiä eikä lisäaineleipä enää maistukaan leivältä (toisin kuin ennen vanhaan) vaan kylmältä teollisuustuotteelta. Se kehnoista vertauksista.

Nogovanin esimerkkinä käyttämän ValidationSummaryn tuottama HTML on kammottavaa:

<code><table id="_ctl0_vs" class="vsummary" cellpadding="0"
cellspacing="0" border="0" width="100%">
<tr><td>
<font color="Red">Enter site URL<br></font>
</td></tr>
</table></code>

Edellisen tarkoitus on antaa käyttäjälle palautetta täyttämättä jääneestä lomakkeen kentästä. Asian voisi toki hoitaa tyylikkäämmin, kuten valveutuneet hyvin tietävät. Negovan itkee sitä, että käyttämällä application/xhtml+xml:ää Mozilla ei suostu näyttämään sivua jossa on päätteetön br-elementti. Kuten Anne van Kesteren kommenteissa kysyy, miksi ihmeessä sitten käyttää koko XHTML:ää? Jos välittää enemmän siitä, että oma työ on vähän helpompaa kuin että selaimelle menee vain puhdasta markupia, eikö olisi kaikille palvelus tyytyä HTML 4.01 Transitionaliin? (Ei olisi.)

Seuraava esimerkki on vielä edeltävääkin hirveämpi. Negovan valittaa, ettei ASP.NETin tuottama javascript suostu toimimaan Mozillassa application/xhtml+xml:ää käytettäessä. Kyseessä on ehkä pahin koko ASP.NETin yksittäinen suunnitteluvirhe, jo pelkällä nimellään kauhua herättävä javascript:__doPostBack(), joka muuttaa linkin lomakkeen lähettäväksi javascriptiksi. Paitsi ettei linkki ole missään vaiheessa linkki. En tiedä, kuinka ASP.NETin arkkitehdit osasivat perustella tuon kammotuksen tarpeellisuuden.

A-elementti on tarkoitettu muuttumattomille urleille ja input-elementti on lomakkeen vaihtuvasisältöisille kentille ja nappuloille. Jako on selkeä, eikä sen sotkemisesta seuraa muuta kuin käyttäjien hämmentyminen ja käyttömahdollisuuksien liian tiukka rajaaminen (yritäpä avata tuollainen linkki uuteen ikkunaan tai välilehdelle, turha toivo). Standardien noudattaminen on muutakin kuin validoituvuus, vähän kuten lain kirjaimen noudattaminen on eri asia kuin lain hengen noudattaminen.

Negovan käyttää linkkiä räikeästi väärin etusivullaan olevassa kyselylomakkeessa. Siihen vastaaminen tapahtuu luonnollisesti radio-buttonista vaihtoehto valitsemalla ja sitten lähetyspainiketta painamalla. Sen sijaan vastaukset saa näkyviin linkin näköistä alleviivattua tekstiä klikkaamalla. On typerää, että tuo linkiksi naamioitu skripiti lähettää lomakkeen, joka pitää sisällään Viewstaten eli tilatietoa. Koska sivulla ei ole mitään muuta “tilaa” kuin sen oletustila (paitsi tieto siitä onko äänestänyt, mutta senpä pitäisikin olla tallennettuna keksiin), on ajatus entistä typerämpi. Kuinka vaativaa on kirjoittaa: <a href="default.aspx?results=true">See results</a> ja parametrin perusteella päättää näytetäänkö äänestyslomake vaiko tulokset? Ilmeisesti aivan liian.

Milan Negovan pelkää, että käyttäjien syöttämä epävalidi XML voi rikkoa hänen huolella rakentamansa XHTML-sivun siten, että sen tilalla on selaimessa vain tyly virheilmoitus. Pelko on aiheellinen, muttei tilanteen estäminen ole edes kovin vaikeaa. Ensimmäinen sääntö on olla sallimatta HTML:ää. Tämä tapahtuu HTML-enkoodaamalla ihan kaikki käyttäjien syöte.

Jos on tarve kappalejakoa enemmän mahdollistaa rakenteiden kuvaamista, voi joko rakentaa oman yksinkertaisen kuvauskielen joka parsitaan XHTML-muotoon tai sitten sallia mahdollisimma pieni osajoukko XHTML-elementtejä syötteeseen. Tämä pieni osajoukko on helppo “validoida”, eli käytännössä varmistaa päätöstagien olemassaolo, mitään attribuutteja tuskin tarvitaan. Ja jos todella tarvitaan koko XHTML:n nimiavaruus käyttöön, voi käyttää HTMLTidyä varmistamaan siistin lopputuloksen.

Pelko rikkoutuneesta Citi Bankin sivusta on aiheeton, sillä kyllähän isoilla organisaatioilla on resursseja huolehtia HTML:nsä puhtaudesta. Pienemmät eivät tähän ehkä vielä pysty, mutta tarvittavat ammattitaito leviää kyllä niihinkin. Lopultakin, kyse on vain siitä, että tiettyjä metodeja noudatetaan kaiken sisään saapuvan syötteen suhteen. Tietoturvasta välittävä jo tekee näin joka tapauksessa.

Hassua, että Nogovanin sivujen alaotsikkona on ASP.NET with emphasis on web standards. Ehkä hän on matkinut populäärin lähestymistavan muualta webistä, mutta selvästi näyttää sitä, ettei hän ole alkuunkaan sisäistänyt otsikkoaan.

Vaikeat verkkosovellukset

Verkkosovellukset ovat monella tapaa haastava juttu. En koskaan lakkaa hämmästelemästä sitä välinpitämättömyyden määrää, mitä joka päivä joudun webissä kohtaamaan. Tarkastelen tässä tavallisia verkkosovellusten sudenkuoppia. Ai mikä on verkkosovellus? Se on verkkosivusto, joka hyödyntää palvelinpään ohjelmointia. Luokittelisin siis kaikki ei-staattiset sivustot sovelluksiksi.

Verkkosovellukset ova haastavia siksi, että ne ovat syntyneet melkein suunnittelematta, webin suosion luontevana jatkona. Niitä on opittu rakentamaan aikana, jolloin web muuttui lähes joka päivä. Tilanne on nyt radikaalisti toinen, kehitys on lähes pysähtynyt. Nyt on jo korkea aika unohtaa jollekin tietylle selaimelle ohjelmointi ja keskittyä standardien noudattamiseen.

JavaScript ja JavaScript tappelivat, kumpi voitti? Kaikki hävisivät

WWW toimii mainiosti, kun dokumenttimuotoista tietoa (hypertekstiä) selataan. Yksinkertaiset haku- ja palautelomakkeet mahtuvat mukaan melko luontevasti, mutta ongelmia tulee niissäkin jo tavanomaisessa pakollisten kenttien tarkistuksessa. Tämä johtuu tietysti JavaScriptista, joka toimii vähänkin vanhemmilla selaimilla kovin epäyhtenäisellä tavalla, jos lainkaan. JavaScriptiin varaan siis ei voi laskea yhtään mitään olennaista, jos haluaa, että sovelluksesta tulee mahdollisimman saavutettava. Ja miksei haluaisi?

Tämä ei tietenkään tarkoita sitä, että JavaScriptiä ei voisi käyttää, sitä on vain käytettävä toisarvoisiin toimiin, joita ilman verkkosivut ovat täysin käyttökelpoiset. Google ei ole samaa mieltä, vaan on rakentanut Gmail-sovelluksen, joka hyödyntää mm. JavaScriptiin (ECMAScript) kuulumatonta IE:n XMLHttpRequest ActiveX -objektia tai Mozillan XMLHttpRequest-objektia. Tällä saavutetaan sovelluksessa varsin vähän, lähinnä joka toinen sivulataus ei tavallisen puolen sekunnin sijaan vie lainkaan aikaa. Ottaen huomioon, että tätä varten sisään kirjauduttessa odotellaan useamman sekunnin ajan JavaScript-kikkareiden latautumista, saavutettu hyöty on jossain minimaalisen ja negatiivisen välillä. Tämän takia kaikista maailman selaimista vain kolme (Win-IE:t, Mozilla-pohjaiset ja Safari) kelpaa Googlelle.

Googlen valintaa perustellaan sillä, että Gmail ei ole perinteinen verkkosivu vaan sovellus, joka nyt vain sattuu toimimaan selaimissa. Perustelu olisi jotenkin hyväksyttävissä, jos Gmail saavuttaisi jotain poikkeuksellista hyötyä selainkohtaisten toimintojen hyödyntämisellään. Koska se ei sitä tee, menettää argumentti merkityksensä.

On ironista, että itse Googlen päätuote, hakukone, olisi Gmailin sivuilla täysin hukassa. Mikä onni, että palvelu vaatii sisäänkirjautumisen! Kummallista on myös, että Googlen Blogger-porukka on saanut kasaan erittäin kelvon verkkosovelluksen, joka hyvin pienillä korjauksilla toimisi vaikka vanhoilla Netspaceilla. Tuota ammattitaitoa ei selvästi ole osattu jakaa.

Suurin syy vältellä JavaScriptin käyttöä ei edes ole sen vaihteleva selaintuki. Aikana, jolloin tietoturva-aukkoja etsitään ja hyödynnetään kiihtyvällä tahdilla on jatkuvasti hetkiä, jolloin aukko on löytynyt muttei vielä paikattu. Usein aukkojen hyödyntämistä ei voi estää kuin kytkemällä kaiken aktiivisen sisällön JavaScripteineen pois päältä. On siinä selittelemistä, kun toimenpiteen jälkeen verkkokaupasta ei voikaan enää ostaa mitään.

Hooämteeäl vai mikälie

JavaScript ei ole ainoa ongelma. Jo niinkin perusasia kuin HTML tuottaa monille sovellusten rakentajille vaikeuksia. Ylimääräisen javascriptauksen pois jättäessään Google ottaisi menettävänsä nopeushyödyn helposti takaisin siistimällä HTML:äänsä. Se sisältää nyt antiikkista font-size-table-kakka-HTML:ää, sivuun sisällytettyä CSS:ää ja JavaScriptiä ja muuta massiivisin turhaa tavaraa, jota liikutellaan putkea pitkin ilman mitään järkevää syytä. Googlen tavaramerkkiulkoasu on niin askeettinen, ettei sen kuvaaminen puhtaalla CSS:llä tuottaisi edes amatöörille vaikeuksia.

Jäljestä päätellen tyypillinen Visual Studion designeriä käyttävä ASP.NET-koodaaja ei edes katso kehittimen tuottamaa HTML:ää. Yllättävän monet ohjelmoijat pitävät HTML:ää merkityksettömänä yksityiskohtana, suorastaan häpeällisenä pakkopullana, jota ei kehtaa opetella ainakaan alkeita enenpää. Mahtaako se johtua siitä, että HTML:ää vääntävät eivät ole uusmediakuplan pamahdettua kovassa huudossa, en osaa sanoa.

HTML kuitenkin on tärkeä. Siihen vähän huomiota kiinnittämällä tehdään sovelluksesta kuin sovelluksesta melkein millä tahansa selaimella käytettävä ja sutjakkaasti latautuva. Jokaisen web-ohjelmoijan tulisi osata vähän enemmän kuin perusasiat HTML:stä. CSS:n vääntämisen voi jättää visuaalisesti lahjakkaammille, ja keskittyä dokumentin rakenteen kuvaamiseen. Sen ohjelmoija osaa, jos kuka.

Näinhän se tehdään, eikö?

Kolmas tyypillinen ongelma on, että web toimii niin kovin eri tavalla kuin käyttöjärjestelmän työpöytä. Se mitä käyttäjä näkee ei olekaan koko ajan ohjelmoijan hallittavissa. Työpöytäsovelluksia tehneen on vaikea hyväksyä sitä, että kun sivu on latautunut selaimelle se pysyy siellä kunnes käyttäjä tekee jotain. ASP.NET:in kiero Web Forms -malli koettaa piilottaa webin todellisen olemuksen käväisemällä palvelimella joka välissä. Ajatus on nokkela, mutta tuloksena on ongelmia, joita olen monta kertaa jo käsitellyt. Riittänee, että sanon, ettei ymmärtämättä syvällisesti webin toimintatapaa voi ASP.NET:in kanssa tehdä hyväksyttävää jälkeä.

Yksi työpöytäajattelun muoto ovat popupit ja varsinkin niiden ajattelematon käyttö. Popup-blokkereiden räjähdysmäinen kasvu Windows XP SP2:n myötä onneksi pakottaa edes osittain luopumaan moisista käytönvaikeuttajista. Silti vielä monet merkittävät suomalaiset sivustot hämmentävät käyttäjää rikkinäisellä toiminnallisuudellaan.

Webin toimintatapaa ei kannata ajatella esteenä. Sen kiertämiseen ei kannata käyttää kauheasti energiaa, koska samalla helposti rikkoo toiminnallisuuden joillakin selaimilla. On osattava tunnustaa, että joidenkin asioiden tekeminen verkossa ei välttämättä onnistu mitenkään järkevästi. Kenties sovelluksen tekeminen verkkoon ei silloin ole hyvä ajatus ollenkaan. Toisaalta myös hankalaa tapausta kannattaa miettiä toisenkin kerran, josko webille luonnollisempi toteutustapa tulisi mieleen vasta toisella yrittämällä.

Kaikki verkkoon materiaalia tuottavat sisällöntuottajasta ohjelmoijaan ovat vastuussa siitä, että tuotos toimii parhaalla mahdollisella tavalla verkossa. Aivan kuten verkkokirjoittamisessa on otettava huomioon verkko mediana on web-ohjelmoijankin mietittävä tarkkaan mitä käsistänsä päästää. Webissäkin pitäisi ottaa käyttöön lehdistä tutut apinalaatikot, jotta vastuullisia olisi helpompi hauk… öö.. valistaa.

Gmail-kutsuja

Sain viimein erän Gmail-kutsuja jaettavaksi. Jaan kutsut palkintoina niille, jotka parhaiten perustelevat joko puolesta tai vastaan aiheesta Gmailin kaltaiset, vaikeasti saavutettavat, voimakkaasti skriptatut, selainriippuvaiset ja standardien vastaiset verkkosovellukset. Palkitsen parhaat x vastausta, jossa x voi olla myös nolla, jos kunnollisia vastauksia ei tule yhtään.

Lähetä oma vastauksesi kommenttina tähän kirjoitukseen tai sitten palautelomakkeella, jos et tahdo sähköpostiosoitettasi tai mielipidettäsi julkisuuteen.

Lisäys: Okei, kaikilla näemmä on jo Gmail-tili, mutta jos ei ole, niin pelkästään pyytämällä saa.

Suutarin lasten kengät

Jos yhtään seuraa mistä webissä web-kehittäjien ja designereiden parissa puhutaan, niin osaa varmasti mainita esimerkiksi standardien, semanttisesti oikean markupin tai CSS:n käytön puolesta taistelun. Helposti siis luulisi, että ajatusmaailma olisi laajasti omaksuttu. Seuraavassa tuloksia ehdottoman epätieteellisestä tutkimuksesta suomalaisten uusmediayritysten web-sivujen teknisestä laadusta.

Kävin läpi kaikki Rekaksoispisteen Yritysoppaassa listatut yritykset, jotka selkesti mainostavat omilla sivuillaan toteuttavansa web-sivuja. Jätin siis tutkimatta mainos- ja markkinointitoimistot sekä mobiilifirmat ja sensellaiset.

Jokaisen yrityksen kotisivulla tarkastelin seuraavia asioita: mitä Content-Typeä käyttäen sivu selaimelle välitettin, mitä Doctypeä käytettiin jos käytettiin, oliko käytetty XML-julistusta ja kuinka monta virhettä W3C:n validaattori sivulta löysi. Mikäli validaattori valitteli että käytettyä merkistöä ei löytynyt, merkitsin tämän tiedon ylös ja vihjasin sille oikean merkistön tarvittaessa. Mikäli sivusto oli toteutettu kokonaan tai osittain Flashilla, kirjasin sen ylös ja havainnot saitin käyttökelpoisuudesta ilman Flash-pluginia.

Tutkittavia sivuja oli yhteensä 41 kappaletta. Ainoastaan viisi sivua validoitui. Kymmenen sivua ei edes käyttänyt doctypeä, 22 käytti joko HTML 4.01 tai 4.0 Transitionalia, viisi XHTML 1.0 Transitionalia ja yksi XHTML 1.0 Strictiä. Kukaan ei käyttänyt HTML 4.01 Strictiä, mikä saattaisi olla paras kompromissi tällä hetkellä. Kaikki sivut tulivat XHTML:stä huolimatta palvelimelta text/html -MIME-typellä varustettuna, mikä on ymmärrettävää kun valtaselain ei muuta tue.

Yhdeksän sivua käytti joko kokonaan tai osittain Flashiä, mutta vain kolme näistä tarjosi lisäpalikattomille tekstiversiota. Yksi näistä kolmesta oli tiedoiltaan selvästi vanhentunut. Ne kuusi, jotka eivät Flashittömiä huomioineet eivät tarjonneet edes yhteystietoja, vastassa oli pelkkää tyhjyyttä. Aika tylyä.

Tässä valossa täytyy sanoa, vaikka työnantaja ei varsinaisesti uusmediayritys olekaan, että olemme sentään Kynämiehen sivuilla saavuttaneet jotain poikkeuksellista. Tehkää perässä, pyydän.

Lisäys 9.7.2009: Kun tämä kirjoitus julkaistiin, joku tulistui siitä niin paljon, että perusti oikein kokonaisen, anonyymin blogin Bloggeriin, jossa haukkui minut maanrakoon. Blogia ei ole enää olemassa, enkä muista sen sisällöstä juuri mitään. Pelastin alla olevan kommentin, josta käy jotain ilmi.