Avoin kirje IRC-Gallerialle ja muillekin WWW-sivustoille http://iki.fi/juhtolv/tmp/bugreports/irc-galleria.net/avoin_kirje.txt Kirjoittanut: Juhapekka ”naula” Tolvanen http://iki.fi/juhtolv Aloitettu: 2010-10-04 PÄIVITYS 2012-07-05: Näyttää siltä, että kaikkiin tässä kerrottuihin ongelmiin tuli korjaus ainakin siellä IRC-Galleriassa. Joten kyllä kannatti valittaa! Mutta olkoon tämä varoittavana esimerkkitapauksena muille WWW-sivujen tekijöille. Sitäpaitsi muilla WWW-sivuila tässä kerrottuja ongelmia varmasti riittää jatkossakin. “People who design for print are very stable people, people who design for the web aren’t.” David Berlow, type designer and founder of The Font Bureau *** Johdanto: Rant numero 1 Ei hyvää päivää! Ei vittu nyt oikeesti! Herätkää, pahvit! Surffailtuani WWW:ssä melkein sen syntymästä saakka, olen päivä päivältä yhä vaan enemmmän alkanut epäillä, että: 1) Weppileiskapettereiden keskimääräinen älykkyysosamäärä on tod.näk. alhaisempi kuin heidän kengännumeronsa ja ruumiinlämpönsä. 2) Weppileiskapettereiden suosikkiharrastuksiin kuuluu varmaankin liimojen ja liuottimien haistelu. 3) Kun weppileiskapetteri käy sienimetsällä, hän tod.näk. ei niistä sienistä ruokaa valmistaessaan koskaan ryöppää niitä sieniä, jotka oikeasti kuuluisi ryöpätä. 3) Kun weppileiskapetterin kallonkutistaja määrää hänelle erilaisia lääkkeitä, niin sen jälkeen hän varmaankin: 3.1) Syö aamulääkkeitä iltaisin ja iltalääkeitä aamuisin. TAI 3.2) Syö aamu- ja iltalääkkeitä sekaisin. TAI 3.3) Syö iltalääkkeitä siinä samalla kun naukkailee pohjia ennen kuin lähtee ryyppäämään perjantai-iltana. Voi tietysti olla niinkin, että ainakin osasyyllinen WWW-suunnittelun huonoon nykytilaan on weppileiskapettereiden pomot, joita vaivaa nuo samat ongelmat ja jotka aina vaan ovat hengittämässä niskaan vaatien WWW:n uusimpien villitysten ja megatrendien kritiikitöntä seuraamista. Jos joku kertoisi noille pomoille, että HTML-kielellä ja Javascriptillä on mahdollista implementoida raivostuttava klemmari-wizardi, jota ei saa millään pois päältä, niin mitä suurimmalla todennäköisyydellä nuo pomot heti ryntäisivät weppileiskapettereidensä luokse ja sitten suu vaahdossa kuola valuen vaatisivat heitä välittömästi tekemään heidän WWW-saitilleen samanlaisen, vaikka sillä weppileiskapetterillä olisi jo ennestään työn alla iso kasa korjattavia käytettävyysongelmia tai jopa paikattavia tietoturvabugeja. *** WWW-sivujen layoutin skaalautuvuusongelmat: IRC-Galleria varoittavana esimerkkinä Viime aikoina monella muullakin WWW-sivustolla on esiintynyt tällainen infernaalisen raivostuttava käytettävyysongelma: Fonttikoko on oletuksena lukukelvottoman pieni ja sitten kun sitä fonttikokoa koittaa suurentaa vaikka sivustokohtaisesti, niin WWW-sivuston layout menee ties millä tavalla rikkisärkikatkipoikki. Toisinsanoen, käy aivankuin vanhassa sananlaskussa: ”Kun juokset sutta pakoon, niin karhu tulee vastaan.” Kenties idioottivarmin tapa saada tuollainen ongelma syntymään on tämä: Määritellään sekä fonttikoot että WWW-sivun mittasuhteet käyttäen mittayksikköinä pisteitä (pt) ja pikseleitä (px) eikä m-kirjaimen kokoa (em) tai x-kirjaimen kokoa (ex). Kuten WWW-sivujen layout-ongelmissa yleensäkin, tuon ongelman taustalla saattaa olla tällainen asennevamma: Kuvitellaan, että WWW-sivun layouttia voi suunnitella samalla tavalla kuin paperisen dokumentin lay-outtia. Tuollainen kuvitelma on tietenkin silkkaa hevonpaskaa! Kun paperilla viilaillaan millintarkasti, niin nuo tyhmät weppileiskapetterit viilailevat WWW-sivujen lay-outtia ruudullaan pikselintarkasti, vaikka oikeasti pitäisi viilailla sitä em-yksiköiden tarkasti tai ex-yksiköiden tarkasti. Korkeintaan silloin, kun kysessä on mediatyyppi nimeltä ”print”, voi CSS:ää käyttää WWW-sivun layoutin suunnitteluun aivan kuin suunnittelisi paperista dokumenttia. Kuten kenties tulette huomaamaan, IRC-Galleria ei ole päätynyt varoittavaksi esimerkiksi siksi, että juuri siellä nuo skaalautuvuusongelmat ilmenisivät raivostuttavimmilla tavoilla, vaan siksi, koska itse henk.koht. olen juuri sillä sivustolla kaikkein useimmin joutunut kärsimään noista ongelmista. IRC-Galleriaan tuo tauti iski välittömästi uusimman ulkonäköuudistuksen myötä. Tutkin tuon sivuston tyylitiedostojen lähdekoodia ja siellä tosiaan oli jokseenkin kaikki fonttikoot ja mittasuhteet määritelty käyttäen px- tai pt-yksikköjä tai sekä että. Minulla on myös WWW-selaimessani (Firefox-johdannainen nimeltä Iceweasel) laajennos nimeltä Greasemonkey, mutta asetustiedoston laatiminen IRC-Galleriaa varten olisi ollut aivan sairaan raskas urakka, koska nuo IRC-Gallerian alkuperäiset tyylitiedostot todella ovat aivan valtavan isoja. Minä ihan oikeasti valitin heille asiasta ja meilikansioistani löytyy IRC-Galleriasta tullut vastaus, jonka päiväys on ”Mon, 2 Nov 2009 14:17:08 +0200”. Sen sitaattiosiossa näkyy yhä alkuperäiset kommenttini, jotka olin lähettänyt WWW-lomakkeen avulla: Tihrupienet fontit pois! Layout ei saa rikkoutua, vaikka selaimen asetuksissa suurennetaan fonttien kokoja! Em. ongelma on kyllä yks vitun syöpä ja kulkutauti weppisivuilla ja nyt se on oikein todenteolla iskenyt IRC-Galleriaankin. Ilmainen vinkki: Todellisen weppikehittäjän tunnistaa siitä, että hänen stylesheeteissään px-yksiköt loistavat poissaolollaan ja sen sijaan fonttien koot ja lay-outin mitat on määritelty käyttäen em- ja ex-yksiköitä. Myös prosentteja voi käyttää joissakin paikoissa. Olin siis valittanut asiasta IRC-Galleriaan ensimmäisen kerran 2.11.2009 tienoilla ja nyt kun tätä kirjoitan, on jo 4.10.2010. Eli melkein vuosi on vierähtänyt. Muistaakseni valitin asiasta myös jossain IRC-Gallerian yhteisössä, joka oli perustettu sitä varten, että voi kommentoida tuota ulkonäköuudistusta. Sen jälkeen asiaan ei ole tullut minkäänlaista korjausta, mutta sen sijaan on kyllä tehty ainakin sellainen uusi ominaisuus kuin Natsat sekä VIP-ominaisuuksien jakelu muille. Joo, ihan kivoja ominaisuuksiahan nuo ovat ja olen itsekin hyödyntänyt niitä jo aivan ”kyNpillä”, mutta on se nyt kumma, ettei IRC-Gallerialla ole tuon vertaa intoa korjata todellisia käytettävyysongelmia. Olisihan se niin kivaa, jos ensin korjattaisiin käytettävyysongelmat ja sitten vasta tehtäisiin lisää ominaisuuksia, mutta ilmeisesti kilpailevien WWW-sivustojen hengittäessä niskaan on pakko jotenkin pärjätä siinä kilpailussa muita vastaan ja sen takia erilaisten tehtävien prioriteetti on mitä on. Muistaakseni olen lukenut jopa sellaisen uutisen, että IRC-Galleria on menettänyt käyttäjiä Facebookille; Vähemmästäkin tulee paineita kehittää kuumeisesti uusia ominaisuuksia, vaikka aiemmin lisättyjen ominaisuuksien tuomia ongelmia on yhä korjaamatta. Pahoin pelkään, että osasyyllinen ongelmaan on myös se, että IT-alalla yleensäkin yli kolmekymppisten ja sitä vanhempien on aika hankalaa saada töitä ja tästä sitten seuraa se, ettei juuri kellään weppileiskapetterillä ole omakohtaista kokemusta ongelmasta nimeltä ikänäkö: http://fi.wikipedia.org/wiki/Ik%C3%A4n%C3%A4k%C3%B6 Ikänäkö ilmenee mm. siinä, että tietokoneen työpöytään ja käyttöliittymään yms. paikkoihin alkaa tehdä mieli säätää aina vaan isompi fonttikoko (Itse olen tätä kirjoittaessani 37-vuotias). Sitten kun nuo nuoret kirkassilmät päästetään tekemään WWW-sivuja, niin fonttien koot ovat yleensä silkkaa pientä tihrua joka vitun kohdassa. Samasta syystä usein Flash-kikkareissakin fontit ovat usein raivostuttavan pientä tihrua ja sitähän ei voi WWW-selaimesta säätää senkään vertaa mitä tavallisten WWW-sivujen ollessa kyseessä. *** Ruutulaukauksien selitykset Surkuhupaisinta tässä ongelmassa on kenties se, että ei luulisi olevan liian vaikeaa testailla omien WWW-sivujensa layoutin toimivuutta myös kokeilemalla, että mitä tapahtuu, kun fonttikokoa suurennetaan (ja WWW-selaimen ikkunan kokoa muutellaan). Tosin sitä hommaa helpottaa huomattavasti se, että käyttää WWW-selaimenaan Firefoxia ja siinä laajennosta nimeltä NoSquint. Väännetään nyt sitten oikein rautalangasta ja oikein ruutulaukausten avulla, että miten nuo skaalautuvuusongelmat ilmenevät IRC-Galleriassa. Teen tämän siis siinä toivossa, että vihdoinkin saisin IRC-Gallerian ylläpitäjien kupoleissa edes jotain päreentuiketta aikaiseksi. En tosin pidättelisi hengitystäni sitä päivää odotellessani. En voi myöskään edes sanoa, että ”Talk is cheap!”, koska vastauksesssaan IRC-Gallerian ylläpito ei edes luvannut yhtään mitään korjausta asiaan: Saimme uudistuksesta runsaasti palautetta ja käymme viestejä parhaillaan läpi. Tämä vie kuitenkin aikaa, sillä viestejä tuli muutoksen yhteydessä useita kymmeniä tuhansia Ja tämän on tarkoitus olla varoittava esimerkki myös muille WWW-sivujen tekijöille, jotta hekään eivät sortuisi näihin samoihin virheisiin; Niin laajalle levinnyt synti, syöpä ja kulkutauti on kyseessä ihan oikeasti. Jos IRC-Gallerian ylläpidon kupoleissa ei tämänkään ansiosta ala tapahtua edes jotakin päreentuiketta, niin toivottavasti edes muiden WWW-sivustojen suunnittelijat ottavat tästä onkeensa. Toistan: IRC-Galleria ei ole päätynyt varoittavaksi esimerkiksi siksi, että juuri siellä nuo skaalautuvuusongelmat ilmenisivät raivostuttavimmilla tavoilla, vaan siksi, koska itse henk.koht. olen juuri sillä sivustolla kaikkein useimmin joutunut kärsimään noista ongelmista. Aloitetaanpa! Eli ensin tulee aina ruutulaukaus ja sitten selitykset siitä, mitä vikaa siinä näkyy: http://iki.fi/juhtolv/tmp/bugreports/irc-galleria.net/irc-galleria.net.bug.01.png Alapalkissa näkyvä lukema ”100%” tarkoittaa, että NoSquint-laajennoksessa on irc-galleria.net:in sivuilla fonttikoko on sama kuin selaimessa oletuksena. Layout ei vielä tässä vaiheessa ole rikki, mutta fontit ovat aivan lukukelvotonta tihrua monissakin paikoissa. Fonttien anti-aliasointi, pehmennys yms. joutuvat toimimaan kykyjensä äärirajoilla: Monissa kohdin kirjamia on sulautunut yhteen: Esim. linkissä Blogimerkintä kirjaimet ”lo” ovat sulautuneet yhteen ikäänkuin pieneksi b-kirjaimeksi. Linkissä Video kirjaimet ”ide” ovat sulautuneet yhteen ja linkissä Tietoa kirjaimet ”ie” ja ”toa” ovat sulautuneet yhteen. Ja niin edelleen. http://iki.fi/juhtolv/tmp/bugreports/irc-galleria.net/irc-galleria.net.bug.02.png NoSquint-laajennoksen asetuksista fonttikokoa nostettiin arvoon 110% ja uusi ongelma alkoi pistää silmään: Oikeassa ylänurkassa oleva hakujen tekemiseen tarkoitettu tekstinsyöttökenttä peittää jo jonkin verran linkkiä nimeltä Kauppa. Fonttien anti-aliasointi, pehmennys yms. alkaa jo toimia hienosti. http://iki.fi/juhtolv/tmp/bugreports/irc-galleria.net/irc-galleria.net.bug.03.png Fonttikokoa nostettiin arvoon 130% ja fonttikoko on varmasti riittävän iso ainakin minulle. Mutta ongelmia tuli lisää: Vieraslistalla nick nimeltä Rakkikoira meni piiloon ja linkki nimeltä ”Näytä enemmän vierailijoita” menee päiväyksen 1.10.2010 päälle. Em. tekstinsyöttökenttä peittää myös linkkiä nimeltä VIP. Linkki nimeltä Kauppa on jo täysin piilossa. http://iki.fi/juhtolv/tmp/bugreports/irc-galleria.net/irc-galleria.net.bug.04.png Omassa profiilissani last.fm-saitille tallentuneiden viimeksi kuuntelemieni biisien listasta leikkautui alareunaa pois. Ei, en ole käyttänyt profiilissani enkä kuvissani minkäänlaisia modauksia enää moneen vuoteen. http://iki.fi/juhtolv/tmp/bugreports/irc-galleria.net/irc-galleria.net.bug.05.png Mun yhteisö -laatikon alareunasta on alareunaa leikkautunut pois niin, ettei ”Ei jonoa” -teksti enää näy. http://iki.fi/juhtolv/tmp/bugreports/irc-galleria.net/irc-galleria.net.bug.06.png Lopuksi vielä fonttien oletusfonttikoot sellaisina kuin ne asetusdialogeissa näkyvät. Huomatkaa, että pienin kirjasinkoko on säädetty arvoon ”Ei ole” ja sivut saavat käyttää omia kirjasinlajejaan oletusten sijaan. Näettekö?: Niin päivänselviä käytettävyysongelmia, jotka olisi helppo huomata ajoissa testaamalla, eikä korjausta näy eikä kuulu! Älkää olko niinkuin IRC-Galleria ja muut peelot WWW-saitit: Älkää tehkö WWW-sivujenne layoutista niin paskaa, että se menee rikki, jos vähänkään fonttikokoa suurentaa. *** Linkit Tähän osastoon lisäilen ainakin URL:eja, joiden takaa löytyy muilla WWW-sivustoilla esiintyvien skaalautuvuusongelmien bugiraportteja ruutulaukauksineen. Korjattu: http://iki.fi/juhtolv/tmp/bugreports/caran.d.ache/webformbug.01.png http://iki.fi/juhtolv/tmp/bugreports/caran.d.ache/webformbug.02.png http://iki.fi/juhtolv/tmp/bugreports/facebook/facebook_bug.01.png http://iki.fi/juhtolv/tmp/bugreports/facebook/facebook_bug.02.png http://iki.fi/juhtolv/tmp/bugreports/facebook/facebook_bug.03.png http://iki.fi/juhtolv/tmp/bugreports/fastseduction/fastseduction_bug.01.png http://iki.fi/juhtolv/tmp/bugreports/pualingo.com/ Korjaamatta: http://iki.fi/juhtolv/tmp/bugreports/facebook/facebook_bug.04a.png http://iki.fi/juhtolv/tmp/bugreports/facebook/facebook_bug.04b.png http://iki.fi/juhtolv/tmp/bugreports/facebook/facebook_bug.04c.png http://iki.fi/juhtolv/tmp/bugreports/nanowrimo/nanowrimo_bug.01.png http://iki.fi/juhtolv/tmp/bugreports/songmeanings.net/ http://iki.fi/juhtolv/tmp/bugreports/tynan.net/ http://iki.fi/juhtolv/tmp/bugreports/wwwwolf/wwwwolf_bug.01.png Facebookilla, tuolla IRC-Gallerian pahalla kilpailijalla on siis ollut ongelmia fonttikoon skaalautuvuudessa ennenkin, mutta toisinkuin IRC-Galleria, he ovat aina korjanneet ne melko nopeasti. Muita sivuja aiheesta: How to Size Text with CSS Create User-friendly Web Site Font Sizes with CSS Relative Font Sizing (Shirley E. Kaiser) http://websitetips.com/articles/css/fonts/#why “What about a site's design breaking if the font size is increased by the user? Well, it's also important to allow for font size increases and decreases with your design and layout, too. Test your design and layout by increasing the font size in various browsers. Your design and layout shouldn't break or create unreadable text by increasing the font size at least a couple of notches or possibly more, depending on your site's target audience. If it does break or the text becomes unreadable in some way, you'll need to make adjustments to the CSS for your layout and possibly make other changes. Planning flexibility and scalability from the start is the way to go. If that isn't the case, though, you may need to do some retrofitting by reworking some of your CSS and possibly some of the design elements to make them scalable. (These issues are beyond the scope of this tutorial, though - maybe that's a good topic for a tutorial to come, huh?)” Let Users Control Font Size (Jakob Nielsen) http://www.useit.com/alertbox/20020819.html “So, why is so much website text so hard to read in the first place? Two theories: * Most web designers are young, and so have perfect vision. Tiny text doesn't bother them as much as it bothers people on the other side of 40. Designers also tend to own expensive, high-quality monitors that are easier on the eyes. * While creating a website, designers don't actually read the information on the pages. They simply glance at the text to make sure it looks great. In fact, many designs are approved with "lorem ipsum" standing in the place of real copy. When you don't have to read the words, it doesn't matter that the characters are small.” The HTML Hell Page (Eric. S Raymond) http://www.catb.org/~esr/html-hell.html “CSS that sets fixed-size fonts dimensioned in pixels This is the idiot web designer's favorite way to make a site unreadable on a monitor with a finer dot pitch than the one he/she happened to use. Guess what happens when you set a 10 or 11px font on a 72dpi monitor and it gets viewed on a 120dpi monitor? That's right, instant eyestrain and another user cursing your name. This problem is going to get worse as displays get larger and finer-grained.” *** Jälkisanat: Rant numero 2 Voi vittu näiden kaikenmaailman typerien weppileiskapettereiden ja heidän typerien pomojensa kanssa! Ei näin! Ei näin! Ei näin! Ei missään tapauksessa näin! Pällit! Olettepas huonoja! Hankkikaa elämä tai vetäkää vittu päähänne ja paetkaa vuorille! *** P.S Muistinko muuten mainita tämän?: IRC-Galleria ei ole päätynyt varoittavaksi esimerkiksi siksi, että juuri siellä nuo skaalautuvuusongelmat ilmenisivät raivostuttavimmilla tavoilla, vaan siksi, koska itse henk.koht. olen juuri sillä sivustolla kaikkein useimmin joutunut kärsimään noista ongelmista.