[ Jos luet tätä postausta RSS-lukijalla, hyppää suoraan sivuille niin näet jotain muuta. ]

Verkkopalvelut kautta maailman osallistuvat web-standardien levittämiseen Dustin Diazin ideoimalla meemillä. Päivän idea on näytää sivusto yhden vuorokauden ajan ilman tyylitiedostoja. Hyvin suunnitellut sivut toimivat moittetta myös ilman visuaalista pintaa.

Sivuston luonne muuttuu kun sisällöstä jää jäljelle vain rakenne. Miltä oma sivustosi näyttää ilman tyylitiedostoja?

Inventive osallistui meemiin myös viime vuonna – Alaston totuus.

Mikroformaattien hyödyt

Mikroformaatit ovat jo iäkkäitä, mutta niiden hyöty käyttäjille on ollut melkoisen marginaalista, sillä niiden tuki on ollut hyvin vajavaista. Nykyisin Mikroformaattien suurin hyöty on siirtää verkkosivun sisältämät yhteystiedot tai tapahtuman aika ja paikka suoraan sähköposti- tai kalenteriohjelmaan.

Nyt tilanne on kuitenkin muuttunut, tai oikeastaan muuttumassa, sillä mikroformaateista hyötyy nörttien ja edelläkävijöiden lisäksi hakukoneoptimoijat ja hakukokoneiden loppukäyttäjät.

Hakukoneet ymmärtävät mikroformaatteja

Yahoon aluevaltaus on melkoinen kilpailuetu Googleen nähden ja ei tarvita kummoisia ennustajan lahjoja että iso G seuraa nopeasti perässä.

Hakukoneiden käyttäjille tämä tarjoaa osuvampia hakuja. Haku ”seth godin the dip book review” tuottaa huomattavasti älykkäämpiä hakutuloksia, kun hakukoneet osaavat suoraan arvottaa kirja-arvostelut omaksi kategoriakseen ja niiden joukosta ne kirjat joiden kirjoittajaksi on merkitty Seth Godin.

Lukijat voisivat kommentoida jonkin paremman ja selkeämmän esimerkin.

Selaimet tukevat mikroformaatteja

Mikroformaateista on konkreettisempaa hyötyä uusien, niitä tukevein selainten myötä. Firefoxin uusin versio tukee mikroformaatteja. Lataa Firefoxin 3 beta ja kokeile itse.

Mitä sitten?

Näennäisesti pieni muutos verkkopalvelun teknisessä toteutuksessa saattaa saada aikaan melkoisen teknologisen vallankumouksen ja siirrymme vihdoin oikeaan web 2.0 verkkoon semanttisen webin myötä.

Miltä mikroformaatit näyttävät?

Mikroformaatit ovat joustavia ja ne kiinnittävät huomiota vain tiedon merkkauksen ei siihen miltä tieto näyttää. Alla esimerkki Vcard mikroformatin mukaisesta yhteytiedosta tältä sivulta:

<p class="vcard">
  <span class="org">www.inventive.fi</span> © 2004 - 2008 |
  <a rel="nofollow"  href="mailto:info@inventive.fi"
  class="email">info@inventive.fi</a>  |
  <span class="adr">
    <span class="street-address">Huopalahdentie 5 A</span>
    <span class="postal-code">00330</span>
    <span class="locality">Helsinki</span>
  </span> |
  <span class="tel">+358 50 369 8023</span> |
  <a href="http://www.inventive.fi/sivukartta">Sivukartta</a>
</p>

Lisää aiheesta täällä

• Web ei ole visuaalinen media

Lisää aiheesta ja sen vierestä muualla

• http://bergie.iki.fi/blog/semantic_web_is_here-yahoo-and_microformats.html
• http://www.amdesign.fi/pieni-on-kaunista

7 Yhä ajankohtaista artikkelia

Neljässä ensimmäisessä perehdytään nykyaikaisen, vastuullisen verkkopalvelujen suunnittelun periaatteisiin ja hyötyihin.

• Paranna maailmaa lisäämällä kävijöitä sivuillesi
• Onko sivustosi Da Vinci -koodia Googlelle?
• Kuinka lisätä kävijöitä web-standardien avulla
• Web ei ole visuaalinen media
• 10 asiaa jota olet aina halunnut tietää verkkosuunnittelusta, mutta et ole jaksanut Googlata
• Onko web 2.0 kupla?
• Kannattaako verkkoluetteloihin ja yrityshakupalveluihin sijoittaa?

Piditkö artikkeleista? Tilaa tulevat artikkelit RSS-lukijaasi (Mikä on RSS?) tai sähköpostitse uutiskirjeenä.

Kaikki merkittävät selaimet samalla työpöydällä.

Eri selaimet näyttävät www-sivut eri tavoin. Verkkopalvelujen suunnittelijalle tästä on päänvaivaa, mutta selainten erilaisuudet voidaan testata ja poistaa hyvien suunnittelutapojen avulla.

Ennen selaintestaus täytyi tapahtua useammalla koneella. Useamman tietokoneen hankkiminen vain selaintestaukseen on investointi, johon ei helposti rahojaan laita. Nykyisin on parempia tapoja tehdä selaintestausta.

Apple on julkaissut julkisen beta version Safari selaimestaan PC:lle ja Macille. Näin jokainen halukas saa testata sivujen toimivuutta kaikilla selaimilla PC:llä.

Julkaistu Safari on kuitenkin vasta beta asteella, ja se on ihan oikeasti keskeneräinen kehitysversio. Safari on saanut haukkuja tietoturvallisuudesta ja siitä ettei se toimi kaikilla PC koneilla laisinkaan, kuten tässä koneessa, tai että se näyttää sivu varsin toisin kuin Macin Safari.

Apple korjaa pian selaimen lastentaudit ja sen voi ottaa yhdeksi selaimeksi muiden joukossa selaintestaukseen.

Automaattiset kuvakaappaukset eri selaimilla

Selaintestausta helpottamaan on palveluita, jotka pyörittävät joukkoa selaimia ja ottavat pyynnöstä kuvakaappaukset toivotuista sivuista tarkasteltavaksi.

Kuinka saat kaikki Internet Explorerit samalle koneelle

Eolas-patenttikiistan (2003) myötä seurasi jotain hyvääkin, sillä se sai Microsoftin julkaisemaan tiedon miten asentaa useita versioita Internet Explorer selaimesta samalle koneelle. Internet Explorer on eniten selainhuolia aiheuttava selain ja siksi tämä onkin erinomainen apu selaintestaukseen.

Miten saan Internet Explorerin eri versiot samalle koneelle.

Hyvää juhannusta

Irrotan itseni juhannukseksi internetistä, joten en muutamaan päivään vastaa viesteihin.

Kuluttajia palveleva Posti pysyy Postina. Kysymyksiin vastataan kampanjasivustolla.

Käyttöliittymän rakentamisesta

Toteutuksella oli erittäin kireä aikataulu, joten toiminnallisuuksissa pitäydyttiin valmiissa koodikirjastoissa ja jo hyviksi toteutetuissa toimintatavoissa. Valitettavasti ensimmäinen valinta koodipohjaksi Lightbox ei tue videoita. Nopean tutkinnan ja testaamisen jälkeen päädyin samankaltaiseen LightWindow koodiin.

Visuaalisesti näyttävä ja toiminnallinen käyttöliittymä

Sivulla olevat videot avautuvat sivun päälle animoituina.

Saavutettava sisältö kaikille

Sivu toimii myös ilman erikoisefektejä. Sivuston toiminnallisuudet on lisätty hyvien suunnittelutapojen mukaisesti erottamalla sisältö, ulkonäkö ja toiminnallisuus toisistaan. Sisältö on saavutettavissa ilman kehittynyttä toiminnallisuutta tai visuaalisuutta.

Mikäli käyttäjän selaimessa ei ole Javascript päällä, sivulla olevat vastaukset eivät mene piiloon vaan näkyvät alla olevan kuvan kaltaisesti. Mikäli taas selain ei tue CSS-tyylejä tai ne ei jostain syystä ole päällä, on sisältö silti saavutettavaa, kuten alla olevassa kuvassa oikealla.

Vasemmalla sivunäkymä ilman Javascriptiä ja oikealla ilman CSS-tyylitiedostoa.

Sivun päälle Lightwindowlla avautuva video toimii tavallisena linkkinä jos Javascript ei ole päällä.

Portfolio: Postin nimenmuutos Itellaksi

Alastomuuden vaikutuksista

En ole testannut sen vaikutuksia juuri ollenkaan, mutta ei siinä mitään ihmeellistä pitäisi olla. Sivulla näkyvät kuvat, mutta ei mitään CSS-tyylitiedoston kautta tulevia taustakuvia tai muotoiluja. Sivusto on rakennettu saavutettavassa mielessä, joten sen pitäisi olla täysin toimiva ja käyttökelpoinen myös ilman ulkoasuasetuksia.

Haluatko nähdä lisää alastomuutta? CSS Naked day sivustolta löydät lisää alastomuutta.

Miltä sinusta tuntuu? Kommentoi alle.

1. Mitä on saavutettavuus

Verkkopalvelun saavutettavuudella tarkoitetaan yhdenvertaista mahdollisuutta palvelun käyttöön ja osallistumiseen. Tämä saavutetaan esteettömillä sivuilla, joiden käyttö onnistuu erilaisilta ihmisiltä ja eri päätelaitteilla. Saavutettavuus ei siis tarkoita vain esimerkiksi sokeiden tai liikuntaesteisten palvelua. Yhä enemmissä määrin se tarkoittaa myös erilaisten koneiden ja päätelaitteiden palvelemista. Lue Onko sivustosi Da Vinci –koodia Googlelle.

Saavutettavat ja esteettömät sivut ovat vastuullisen verkkojulkaisun lisäksi myös hyvää bisnestä. Lue Paranna maailmaa lisäämällä kävijöitä sivuillesi.

2. Mitä ovat web-standardit

Web-standardeilla tarkoitetaan teknologioita, joilla verkkopalvelu rakennetaan. Web-standardit ovat perusta, joita kaikki selaimet ja päätelaitteet ymmärtävät. Perinteisin web-standardi on HTML, josta on kehitelty XML yhteensopiva XHTML merkintäkieli, jota pääasiassa käytetään nykyaikaisessa verkkopalvelujen rakenteen merkitsemisessä. Tämä rakenne saadaan visuaalisesti muotoiltua CSS-tyylitiedostoilla ja kuvilla. Lue Kuinka lisätä kävijöitä web-standardien avulla.

3. Mitä on (hakukone) löydettävyys

Sijoittuakseen hyvin hakukoneissa on sivuston oltava hakukoneiden saavutettavissa. Hakukoneet saavat tietonsa automatisoiduilta roboteilta, jotka lukevat sivujasi samaan tapaan kuin sokea käyttäjä. Esteettömät sivut ovat siis perusedellytys hakukonelöydettävyydelle. Hakukoneet tunnistavat huonosti muuta kuin tekstipohjaista sisältöä. Siksi informaation jättäminen vain kuvan, Flash-esityksen tai pdf-tiedoston varaan ei ole suotavaa.

4. Mitä on hakukoneoptimointi

Hakukoneoptimoinnin tarkoitus on nostaa optimoitavana olevan sivun näkyvyyttä hakukoneissa. Perustana hakukoneoptimoinnille on luoda käyttöliittymä kuntoon esteettömillä web-standardien mukaisilla sivuilla. Sivuston laadukas ja arvokas sisältö on lisäksi oltava verkkoon ja hakukoneisiin sopivaa. Hakukoneoptimoinnissa avainsanojen sijoittelu ja taivutusmuodot luovat omat haasteensa myyvälle kirjoittamiselle. Lue miten hakukoneoptimointi tehdään.

Hakukoneoptimointi ei kuitenkaan ole ihmeellistä kikkailua vaan hakukonenäkyvyys perustuu verkkopalvelun suunnittelun perusasioihin. Lue Viimeinkin selvyys hakukoneoptimoinnista.

5. Mitä on hakukonemarkkinointi

Hakukonemarkkinoinnilla eli hakusanamainonnalla tuotetaan mainoksia näytettäväksi hakutulosten vierellä tai yläpuolella. Näitä tekstipohjaisia mainoksia näytetään vain samaa aihepiiriä hakeville käyttäjille ja niistä maksetaan klikkausten mukaan. Hakukonemarkkinointi on hyvin kustannustehokas ja helposti seurattava tapa mainostaa, ja se sopii hyvin myös aivan pienimmille yrityksille. Mikäli hakukonemarkkinointiin käytetään merkittävästi rahaa, on hakukoneoptimointi oiva tapa nostaa hakutulossijoitusta ja täten vähentää tarvetta maksupohjaiselle hakukonemainostamiselle.

6. Mitä on viraalimarkkinointi

Paras markkinointi tulee muualta kuin suoraan lähteeltä. Viraalimarkkinoinnilla yritetään saada ideasta niin houkutteleva että muut hoitavat markkinoinnin puolestasi. Parhaita esimerkkejä tästä on Iphone, josta on kirjoitettu ja kohistu uskomattoman paljon (Google löytää yli 50 miljoonaa sivua iphone haulla), vaikka puhelinta ei ole vielä kaupoissa.

Haluttava ja kenties himottavan sisällön luominen on tietysti vaikeaa, mutta vaivan arvoista. Himottava sisältö saa aikaan kuhinaa, nostaa sivuston mainetta ja vahvistaa brändiä. Merkittävä sisältö saa aikaan linkkejä, näkyvyyttä ja se on pitkäikäistä. Nämä parantavat sivun hakukonenäkyvyyttä ja samalla sivuston ja sen tekijöiden uskottavuutta alan asiantuntijoina.

7. Mitä on web 2.0

Web 2.0 on Tim O’Reillyn luoma markkinointisana yhteisöllisemmälle verkolle. Verkko ei ole pitkään aikaan ollut omimmillaan puskemaan tietoa yhteen suuntaan, vaan sen vahvuus on nimenomaan yhteisöllisyydessä. Käyttäjien mahdollisuus osallistua niin kommenttien kuin varsinaisen sisällöntuotannon kannalta lisää verkkopalvelun potentiaalia huimasti. Web 2.0 mullisti markkinoinnin. Cola-Ollin seikkailut YouTubessa ovat jo saaneet eeppisiä piirteitä. Tim O’Reilly jatkaa tässä Podcastissä web 2.0 mahdollisuuksista.

8. Mitä ovat mikroformaatit

Mikroformaatit ovat helppoja ja yksinkertaisia web standardeja, jotka on luotu helpottamaan koneiden ymmärrystä tiedosta. Tälle hetkellä käytetyin mikroformaatti lienee tämänkin sivun yhteystiedoissa käytetty hcard. Firefoxin Tails lisäosalla selain tunnistaa kaikilta sivuilta hcard tyyppisesti merkityt yhteystiedot, joka helpottaa yhteystietojen siirtämistä ja tallentamista. Tuki mikroformaateille on vielä vähäistä selaimissa, mutta se kasvaa tulevaisuudessa varmasti. Lue lisää mikroformaateista baabelin kirjastossa.

9. Mitä on sosiaalinen media markkinointi

Sivustot kuten blogispotti.fi, kerro.fi ja herq.fi keräävät netin mielenkiintoisimpia sivuja muille jaettavaksi. Sivuja voi kommentoida ja äänestää. Käyttäjien arvottamat, suosituimmat sivut nousevat näkyvämmin esille palvelussa. Sosiaaliset mediat saattavat kasvattaa kävijämääriä sivulle huomattavasti. Lisäksi tällaiset sosiaalisen media sivustot tuovat tunnettavuutta ja yleisöä, joka ei olisi muuten niche-sivuston tavoitettavissa. Isossa maailmassa digg.com saa aikaa todella merkittäviä kävijäpiikkejä.

Saadaksesi sosiaalisen median huomion, tai oikeastaan kenenkään huomion on parempi tehdä merkittävää sisältöä. Merkittävä sisältö tuo näkyvyyttä, joka tuo linkkejä, joka tuo puolestaan lisää kävijöitä ja lumipalloefekti on valmis. Seth Godin kertoo kuinka saada suosittelijoita.

10. Mitä on vastuullinen suunnittelu

Vastuullinen suunnittelu on ennen kaikkea käyttäjälähtöistä suunnittelua. Palvelu tehdään käyttäjille, joten heidän tarpeet tulee asettaa etusijalle. Vaikka palvelu olisikin tarkoitettu tarkasti rajatulle segmentille, täytyy palvelua suunnitella hiukan myös muille. Hakukoneet ja sosiaaliset mediat kaipaavat erikoishuomiota ja ne eivät pidä huonosti suunnitelluista palveluista (kukapa pitäisi).

Vastuullisessa suunnittelussa muistetaan myös että Web ei ole (vain) visuaalinen media, vaan palvelun on palveltava useassa käyttöliittymässä hyvinkin erilaiselle käyttäjäkunnalle.

Yhteenveto

Listassa ei puhuttu lainkaan visuaalisuudesta, Ajaxista tai uusimmista Javascript kirjastoista, sillä nämä ovat vain hyvin pieni osa suunnittelua. Verkko on pullollaan oppaita miten ottaa uusin teknologia käyttöön. Tämä on hienoa, sillä muuten niitä ei saataisikaan käyttöön. Verkkosuunnittelussa mennään kuitenkin usein liiaksi teknologiakeskeisesti eteenpäin ja unohdetaan perusasiat.

Vastuullisessa suunnittelussa keskitytään käyttäjään ja käyttäjän palvelemiseen.

Hyvä suunnittelu on hyvää bisnestä.

Lue jatkossakin hyvästä suunnittelusta. Tilaa Inventiven rss syöte

Päinvastoin kuin usein ajatellaan, verkko ei ole pääasiassa visuaalinen media. Visuaalisuus on vain yksi sivun käyttöliittymistä. Mikäli verkkosivut on rakennettu vain visuaalisuutta silmällä pitäen, syrjimme niitä käyttäjiä ja laitteita jotka vaativat toisenlaista käyttöympäristöä. Miten sivusto tulee rakentaa niin että ne toimivat päätelaitteista ja käyttötavasta riippumatta?

Verkkosivut tulisi rakentaa niin että niiden sisältö, visuaalisuus ja toiminnallisuus on erotettu toisistaan.

Vastuullisesti suunniteltu ja toteutettu verkkosivuston toimii kaikilla päätelaitteilla ja on siten kaikkien käytettävissä. Tätä kutsutaan saavutettavuudeksi. Yleensä saavutettavuus tarkoittaa myös paremmin toimivia ja käytettävämpiä sivuja. Lisäksi hyvä rakenne parantaa sivun löydettävyyttä hakukoneissa.

Rakenne kuntoon

Hyvä rakenne  merkitään web-standardeja käyttäen niin, että sivuston varsinainen sisältö on kuvattu yhdessä xhtml-tiedostossa. Tämä sisältää sivun tekstit, metatiedot, videot, kuvat ja muun varsinaisen sisällön. Tämä tiedosto myös määrittää mistä sivulle haetaan ulkonäkö ja kohennettu toiminnallisuus.

Graafinen suunnittelija on vapaa visualisoimaan rakenteen haluamallaan tavalla

Visuaalisuus rakennetaan css-tyylitiedostoilla. Tyylitiedostossa sivun elementit asetellaan paikoilleen, määritellään typografia ja värimaailma. Sivuston rakenne ei suoranaisesti määrää sivuston visuaalisuutta. Tyylitiedostoilla voidaan muokata sivusto aivan toisennäköiseksi vain tyylitiedostoa vaihtamalla. Tästä paras esimerkki on csszengarden, jossa yhdellä sisällöllä on useampi sata eri suunnittelijoiden ulkoasua. Kaikissa näissä sivuissa on sama xhtml-rakenne, vain tyylitiedosto ja sen tuomat taustakuvat vaihtuvat visuaalisuudesta toiseen. Käy kokeilemassa csszengardenia.

Visuaalisuus voi muuttua mediasta toiseen

Tyylitiedostoilla voidaan suunnitella sivuston ulkonäkö mediakohtaisesti. Verkkosivu voidaan suunnitella näyttämään visuaalisesti toisenlaiselta verkkosivua tulostettaessa, perinteisenä verkkosivuna selaimessa, kännykässä tai muussa mobiililaitteessa.

Pienemmissä laitteissa ja tulostettaessa suurikin sivusto toimii paremmin yksipalstaisena. Tulostettaessa voidaan myös piilottaa tulostimessa turhat navigaatioelementit sekä kenties lisätä linkkeihin sivujen osoitteet, jotta linkkien kohteet olisivat tiedossa myös paperilla. Hyvä opas tulostustyylitiedoston rakentamiseen Alistapartissa.

Toiminnan kohentaminen sivuja rikkomatta

Javascript ei saisi koskaan olla pääasiallinen käyttöliittymän määrittäjä. Rakenteen ja tyylitiedoston ollessa kunnossa, voidaan sivuston toimintaa kuitenkin kohentaa JavaScriptillä. Tämän tulee tapahtua niin, että sivut toimivat vaikka jostain syystä päätelaite ei tue javascirptiä. Erinomainen ja selkeäsanainen esitys vastuullisesta scriptauksesta unobtrusivejavascript.

Vastuullisen www-suunnittelun hyödyt

Vastuullinen verkkosivujen rakentaminen parantaa saavutettavuutta, käytettävyyttä ja lisäksi hakukoneet löytävät hyvin tehdyt sivut paremmin. Myös sivujen kehitys ja ylläpitäminen on halvempaa ja helpompaa, kun sivuston rakennuspalikat on eroteltu toisistaan. Tällöin yhtä rakennuspalikkaa voidaan vaihtaa tai muokata koskematta muihin osioihin.

Vastuullisen suunnittelun muistilista

• Erota rakenne, visuaalisuus ja toiminnallisuus toisistaan
• Käytä web standardeja ja testaa koodisi
• Rakenne ei määrää visuaalisuutta
• Käytä Javascriptiä parantamaan käytettävyyttä vastuullisesti ja sivun toimintaa rikkomatta
• Muista myös muut tavat käyttää sivuja: tulostaminen, kännykät, ruudunluku apuvälineet ja hakukoneet

Lisää aiheesta

• Viisi tapaa parantaa verkkosivun käyttöliittymää web standardeilla
• Kuinka lisätä kävijöitä web standardien avulla

Piditkö artikkelista? Tilaa seuraavat artikkelit rss-lukijaasi tai uutiskirjeenä sähköpostiisi.

Näköni huonooni melkoisesti ja kirjoitan tätä tekstiä 36 pistekoolla. Näppäimistön kirjaimista en saa selvää kuin hahmoina, mutta onneksi se on riittävän tuttu ilman näköhavaintoja.

Kokeilen miltä muutaman tutun sivun käyttäminen onnistuu kun näköni on huomattavasti huonompi kuin tavallisesti.

Käytän Mozilla Firefox 2 selainta ja ensimmäiseksi huomaan että sen käyttöliittymän tekstien olevan aivan liian pientä. Hiiren oikean napin valinnat onnistuvat vaivoin arvaten nenä kiinni ruudussa.

Ensimmäisenä luen sähköpostini. Käytän kokonaan verkossa toimivaa Gmail sivustoa. Sivuille pääsen tutusti kirjoittamalla gm -> nuoli alas -> enter. Mistään en saa selvää. Ctrl pohjassa rullahiirtä pyöritettyäni suurenee tekstikoko luettavaan muotoon, ja sivu pysyy nätisti kasassa. Tämän jälkeen ohjelman käyttäminen ja sähköpostin lukeminen Gmaililla onnistuu hyvin. Myös kaikki käyttöliittymäelementit suurenevat, sillä Gmailin kaikki toiminnallisuudet ovat verkkosivua. Toimii myös heikkonäköisellä.

Erään projektin edistymistä en voi silmillä tarkistaa, sillä näkö on sen verran huono, ettei kuvista saa riittävän tarkasti selvää.

Sähköpostissa on houkutteleva kirjatarjous Amazon.com:iin. Kaikki näyttää sekavalta ja tekstin suurennoksen jälkeen vielä enemmän sekavalta. Sivujen lukeminen ja käyttäminen ei onnistu tai lähinnä hermot eivät riitä selailuun ja arvailuun. Käyttö saattaisi onnistua jos oikein harjoittelisi, mutta nyt kolme sekavaa päällekäistä palstaa sisältöä on liian sekavaa jättikokoisilla kirjaimilla.

Seuraavaksi suuntaan Hesariin tarkistamaan kuinka maailma makaa. Sivun tekstit suurenevat kyllä, mutta sivu paukahtaa useassa kohtaa rikki ja tekstit menevät ajoittain pahasti päällekkäin. Sivujen käyttö sujuu silti yllättävän hyvin ja uutiset tulee selattua.

hs.fi suurennetulla tekstikoolla

Vastajulkaistujen sivujen statistiikka kiinnostaa, mutta Google Analyticsin Flash-pohjaiset esitykset eivät suurene ainakaan samoin kuin sivun muut tekstit. Tilastot jäävät selvittämättä.

On aika maistaa Omaa lääkettä – inventive.fi. Logoa lukuun ottamatta mistään ei saa kunnolla selvää, otsikot sentään ovat lukukelpoisia. Suurennettuna lukukelpoiseksi sivu kuitenkin pysyy kasassa ja tekstit eivät tule häiritsevästi päällekkäin.

Taidan siirtyä aikaiselle lounaalle.

Onko sinulla kokemuksia verkkosivujen käytöstä heikkonäköisenä? Kommentoi artikkelia.

Päivitys

Nyt kun näkö alkaa palautua, etsin Hesarista tekstiversiota. Löytyyhän sellainen http://www.hs.fi/teksti/. Tämä toimii huomattavasti paremmin jättitekstillä.

Hakukoneet toimivat kuten muutkin käyttäjät, jos sivuja ei pysty lukemaan, ne poistuvat. Huonosti toteutettu koodi syrjii hakukoneiden lisäksi käyttäjiä, jotka tarvitsevat apuvälineitä, kuten ruudunlukulaitteita, sivujen lukemiseen tai kuuntelemiseen. Tällaiset apuvälineet tulkitsevat sivua hakukoneiden tavoin ja välittävät käyttäjälleen vain tietoa, mikä on tekstimuodossa.

Laadukas toteutus ei ota kantaa visuaalisuuteen, vain tapaan toteuttaa visuaalisesti näyttävät kokonaisuudet oikein tekstiselityksellä varustettuina niitä kaipaaville.

Esimerkki huonosta ja hyvästä koodaustavasta

Mikäli haluan otsikon näyttävämmän näköiseksi, saatan turvautua käyttämään kuvaa.

Yllä näkyvän kuvan voin koodata kahdella tavalla. Huonosti:

<img src="kuva.gif" />

tai hyvin:

<img src="erinomainen_esimerkki.gif"

alt="erinomainen esimerkki" />

Oikealla tavalla koodattuna kaikki käyttäjät tulkitsevat kuvan merkityksen samoin. Visuaalisesti koodit tuottavat samannäköisen koodin suurelle osalle käyttäjistä. Sivuja sokeasti lukevat hakukoneet tulkitsevat kuvat samoin kuin visuaalisesti sivua tulkitsevat lihavoidun alt-atribuutin ansiosta. Alt-tekstiin kuvataan vaihtoehtoinen tapa tulkita kuva, silloin kun kuvaa ei ole mahdollista näyttää.

Verkkopalvelun laadun kannalta on tärkeää erottaa sivujen sisältö, visuaalisuus ja toiminnallisuus toisistaan. Näin kaikki käyttäjät, hakukoneet mukaan lukien pystyvät tulkitsemaan kaikkea sisältöä verkkosivuillasi.

Omien sivujen testaus

Miten tiedät onko sivusi hyvin toteutettu? Pystytäänkö niitä lukemaan päätelaitteista riippumatta? Ainoa oikea tapa näiden kysymysten ratkaisemiseksi on tehdä asiantuntija-arvio ja testata sivustoa oikeilla käyttäjillä. On kuitenkin olemassa ilmainen minuutin kestävä tapa testata sivusi koodin oikeellisuus.

Mene osoitteeseen validator.w3.org ja kirjoita lomakkeen kohtaan validate by url oman kotisivusi osoite, esimerkiksi www.inventive.fi. Katso tuloksia.

www-sivun rakenteen oikeellisuuden tarkastaja validator.w3c.org.

Tulosten tulkitseminen

Saitko tulokseksi onnitteluviestin “This Page Is Valid XHTML 1.0 Strict!” tai vastaavaa? Mikäli sait, hienoa, sivusi ovat todennäköisimmin toteutettu hyvien suunnitteluperiaatteiden mukaisesti. Tämä tarkoittaa, että kaikki käyttäjät ja hakukoneet pystyvät lukemaan sivuasi. Mikäli et, olet huomattavassa haitta-asemassa niihin joiden sivut toimivat World Wide Web Consortiumin (w3c) suositusten mukaisesti.

Virheiden laatu ja määrä

Virhetekstit ovat vaikealukuisia, mutta onneksi virheiden tulkintaan on hyvä näppituntumaneuvo: Älä lue virheilmoituksia vaan katso kuinka paljon niitä on. Mikäli lista on erityisen pitkä ja joudut rullaamaan ruutuasi pitkään ennen sivun loppuun pääsyä ,on virheitä todennäköisesti liikaa. Huonosti toteutetut sivut aiheuttavat huomattavaa haittaa, niin saavutettavuudelle, löydettävyydelle kuin selainyhteensopivuudelle.

Validointivirheet, eli poikkeamat w3c:n suosituksista, ovat hieman samankaltaisia kuin kirjoitusvirheet. Muutama pieni virhe ei häiritse kokonaisuuden ymmärtämistä, mutta saattaa antaa epäammattimaisen kuvan. Suuri määrä virheitä tai liian vakavat virheet, kuten kuvien käyttäminen korvaamaan tekstiä ilman vaihtoehtoista versiota, saattavat muuttaa koko sisällön lukukelvottomaksi. On tapauksia, joissa yksittäisiä virheitä voi jättää koodiin selainten erilaisen sisällön tulkinnan takia, mutta nämä ovat yksittäisiä poikkeustapauksia.

Mikäli virheitä on ruudulla niin vähän, että voit ne peittää näkyvistä yhdellä kädellä, on virheiden määrä todennäköisesti vain vähän haitallista. Tällöin voit tutkia muutamaa alasivuasi; ja tarkistaa mitä validaatori sanoo niistä. Mikäli mistään ei löydy muutamaa virhettä enempää ovat sivusi paremmassa kunnossa kuin suomalaisilla keskimäärin.

Tarvitsetko apua?

Mikäli tarvitset apua virheiden tutkinnassa ota yhteyttä. Inventive auttaa tulkitsemaan virheitä ja niiden vakavuutta. Mietitään yhdessä mahdollisia jatkotoimenpiteitä ja hakukoneoptimointi mahdollisuuksia.