Sifr ja muita turhuuksia
Päivitin hieman blogin taittoa, pahoittelen jos IE-käyttäjille tulee tikku silmään. Poistin sifr:n (Scalable Inman Flash Replacement) käytöstä, kun se tuntui jumittavan selailun välillä kokonaan. Jälleen yksi hyvä muistutus siitä, miten typografian kanssa näpertely nettisivujen kanssa on edelleen syvältä ja poikittain. Sifr on ihan kiva lelu, mutta todellisuudessa se on kuitenkin vain edistynyt hack, joka ei edes toimi kunnolla. Voisin jopa sanoa, että sifr on ihan paska.
Www-sivujen ulkoasua suunnitellessa typografian merkitys on karkeasti arvioiden puolet kokonaisuutta ajatellen. Kuten perinteisemmät printtipuolen suunnittelijat tietävät, se ei ole ihan sama mitä fonttia läiskii leiskaan. Web-puolella on ollut oikeastaan pakko suhtautua typografiaan vähän leväperäisesti, koska muuten ei pää kestäisi ja lopputulos olisi edelleen yhtä hanurista.
Käytettävyysnäkökulmasta on erittäin tärkeää, että teksti toimii kuten tekstin kuuluukin: sen voi valita (ja kopioida), sen voi lukea ruudunlukijoilla, sen kokoa voi kasvattaa selaimessa (jos selain tätä tukee) ja niin edelleen. Sifr:ä käytettäessä teksti näyttää olevan tekstiä, mutta todellisuudessa alkuperäinen teksti on korvattu pienellä flash -moviella javascriptin avulla. Lopputuloksena syntyvä teksti näkyy tarkoituksenmukaisesti, jos käyttäjällä on asennettuna flash -player ja javascriptin käyttö on sallittu selaimen asetuksissa.
Suunnittelijan näkökulmasta taas on erittäin tärkeää, että teksti näyttää typografisesti eheältä (ja useimmiten, miellyttävältä), ja että se muodostaa muun graafisen suunnittelun kanssa yhdessä järkevän ja toimivan kokonaisuuden. Taikasana tässäkin sopassa on erottuvuus. Visuaalisen suunnittelijan työn perustarpeena kun on suunnitella sivustoista erottuvat. Ei siis välttämättä silmiä raastavat joulukuusikokoelmat, mutta selkeästi (edukseen) erottuvat. Suunnittelussa täytyy samalla ottaa huomioon kaikennäköistä muutakin (esim. brandin graafinen ohjeisto, sivuston fiilis, toimintatarkoitus ja yleinen tunnelma), mutta erottuvuus on se tärkein yksittäinen asia.
Tällä hetkellä nuo lähtökohdat ovat edelleen hieman ristiriidassa. Ei niin paljoa kuin esimerkiksi viisi vuotta sitten, mutta kuitenkin. Lyhyesti sanottuna ongelma on, että suunnittelijalla ei ole riittävästi mahdollisuutta vaikuttaa tekstin ulkoasuun. Tässä kohtaa pari pikkupuristia vetää taas varmaan lattensa väärään kurkkuun, mutta menkööt. Nimittäin halusimme tai emme, KAIKKI vähääkään yksittäiselle ihmiselle tärkeät sivustot maksaa (ja tilaa) asiakas, jolle on AINA tärkeää erottua. Tässä kohtaa ei ole siis merkitystä sillä, onko kyseessä vapaaehtoisvoimin rahoitettu yhteisö, tiukan rahanahne pörssikoalitio vai yksityinen ammatinharjoittaja. Jopa yksittäisen blogin tai kotskasivun nyplääjällä on konkreettinen tarve ja halu erottua joukosta oman itsensä näköisenä.
Tämä perustarve onkin se kaiken pahan alku ja juuri. Sen piikkiin voidaan laittaa flashin suosio, pdf-muotoiset kotisivut, kuvamuodossa tallennetut tekstit, animoidut giffit, taulukkotaitot ja niin edelleen. Ihmiset (no, suunnittelijat) yrittävät kiertää olemassa olevia sääntöjä ja standardeja päästäkseen edes hieman erottumaan muusta massasta. Www-sivujen visuaalisessa suunnittelussa tähän voidaan vaikuttaa graafisella ilmeellä ja typografialla, mutta suunnittelijoilla ei ole kauheasti valinnanvapauksia typografian puolella.
Oletetaan, että suunnittelija haluaisi käyttää sivustolla tiettyä typografiaa, joka olisi samassa linjassa brandin muun viestinnän kanssa. Valitettavan usein tällaisessa tilanteessa joutuu käyttämään leipätekstissä jotain yleisesti hyväksyttyä perusfonttia, joka löytyy jo kaikilta käyttäjiltä. Mitä turvallisempi fontti (Verdana, Arial, Times New Roman), sen mitäänsanomattomampi ja tylsempi on sitten lopputuloskin. Säälittävän typografisen räpellyksen kruunaa vielä sekin, että otsikkofontteihin pätee samat rajoitukset kuin leipätekstiinkin.
Otsikoissa (ja yleensä päätason navigointielementeissä) voidaan kuitenkin nähdä asialliseksi lipsua käytettävyysvaatimuksista, koska käytettävissä olevat vaihtoehdot eivät aiheuta aivan niin paljon vahinkoa käytettävyydelle kuin leipätekstin kanssa (hah). Tällöin teksti voidaan korvata joko bittikarttakuvalla tai skaalautuvana flash -muotoisena tekstinä. Korvattaessa teksti bittikarttamuotoisilla kuvilla syntyy nipullinen käytettävyys- ja löydettävyysongelmia, joita ei voi kiertää oikein mitenkään. Lopputuloksena on kyllä nätinnäköistä leiskaa, mutta kuinkas paljon sellainen lohduttaa jos otsikot eivät rekisteröidy Googlen hakuindeksiin, tai kun tekstin kopioiminen leikepöydälle ei enää onnistukaan? Kun tekstiä korvataan skaalautuvalla flashilla (sifr), poistuu muutama käytettävyysongelma, mutta perusongelmat pysyvät edelleen samoina: teksti ei olekaan käyttäjälle enää tekstiä, vaikka näyttääkin siltä.
Nykyinen tilanne nyppii minua niin käyttäjänä kuin suunnittelijanakin. Käyttäjänä haluaisin, että saisin revittyä mahdollisimman paljon irti surffailukokemuksistani ilman, että eteen tulee kaikennäköisiä hilipatitippaa -tilanteita. Suunnittelijana tahtoisin, että edes joskus saisi tehdä oikeasti hienonnäköistä (ja käytettävää) taittoa.
No, onneksi tulevaisuus on hiukkasen valoisampi. CSS 3 -spesifikaatiossa on jo ehdotuksena ulkoisten OpenType -fonttien käyttäminen html-dokumenteissa. Ehdotus oli alunperin CSS 2:ssa mukana, mutta jostain syystä se poistettiin CSS 2.1 -versiossa. Perkl. Ehkä CSS 3:n yleistyessä aikanaan päästään viimeinkin eroon kaikennäköisistä turhuuksista. Sitä odotellessa.



Saitti näyttää jokseenkin simppeliltä, koska tyylitiedosto sijaitsee jossain kehityskoneellasi :)
http://localhost:8888/wordpress/wp-content/themes/faust_chili/style.css
Sun seeässässäs osoittaa localhostiin, joten ei pitäis olla ongelmia IE:nkään käyttäjillä :)
Saaperi te ootte nopeempia ku mun cyberduck :D
Itse olen käyttänyt otsikoissa menetelmää, jossa taustakuva nostetaan tekstin päälle. Jos käyttäjän selain ei näytä kuvia, näytetään teksti sieltä alta. Hakurobotti lukee tekstin normaalisti ja homma toimii kutakuinkin ok. Copypaste ei vain pelaa pelkälle otsikolle. Aina häviää.
CSS3:sta saataneen odotella vielä vuosia.
Siis teetkö tuon jotenkin muuten kuin CSS:llä (jolloin piilotetaan teksti ja kuva on kyseisen tekstin sijasta elementin taustakuvana)? No, riippumatta siitä, ongelma on tosiaan sama mitä yleensäkin. Eli selainten skaalaus ei toimi, ja kopiointi ei onnistu.
Pitäsköhän pitää joku 5:n vuoden paussi duuneista ja tulla sit uudestaan katsoon josko olis helpompaa? :D
Omassa blogissani on headerissa käytössä ko. tekniikka. Toteutustapoja on monia ja niissä on erilaisia ongelmia. Skaalaus ja copypaste ne ilmeisimmät.
Aika kattava lista tekniikoista ja niiden variaatioista:
http://css-discuss.incutio.com/?page=ImageReplacement löytyy
Dave Shea on myös monen muun lisäksi aikoinaan pohtinut aihetta:
http://www.mezzoblue.com/tests/revised-image-replacement/
Itse olen ollut poissa nettisuunnittelusta jonkin aikaa ja keskittynyt printtipuolelle. Täytyy myöntää, ettei huvittaisi tulla takaisin…
Voisin kuvitella, että printtipuolen hommissa on ne hauskemmat puolensa. :) Ja toisin kuin yleensä, pääsee näkemään konkreettisesti kättensä jäljet. :D