Inventive Design
1.2.2007 Lasse Larvanko

Web ei ole visuaalinen media

Ruudulla näkemämme on vain yksi käyttöliittymä verkkosivulle

Käyttöliittymänä voi olla perinteinen web selain, tulostin, kännykkä ruudunlukulaite tai hakukone.

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

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

Kommentit

3 kommenttia artikkelista “Web ei ole visuaalinen media”

Tilaa tämän artikkelin kommentit RSS-syötteenä

  1. Inventive Design | 10 asiaa jota olet aina halunnut tietää verkkosuunnittelusta, mutta et ole jaksanut Googlata http://www.inventive.fi/10-asiaa-jota-olet-aina-halunnut-tietaa-verkkosuunnittelusta-mutta-et-ole-jaksanut-googlata/

    [...] 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. [...]

  2. Inventive Design | Kuinka ratkaiset verkkopalveluiden laatuongelmat http://www.inventive.fi/kuinka-ratkaiset-verkkopalveluiden-laatuongelmat/

    [...] Visuaalisesti samannäköisen sivun saa tuotettua lukemattomilla tavoilla. Visuaalisuus ei kuitenkaan ole oikea lähtökohta verkkopalvelun käyttöliittymän rakentamiseen. Web ei ole vain visuaalinen media, vaan asioiden merkitys määrää kuinka käyttöliittymä tulisi rakentaa. Esimerkiksi kuvan käyttö otsikkona ilman oikeaa rakennetta hävittää otsikon semanttisen merkityksen ja ilman alt-tekstiä otsikon tietokaan ei välity verkkosivua ei-visuaalisesti lukevalle, kuten Googlelle. [...]

  3. Sokeakin näkee tämän sivun eli saavutettavuus hakukoneoptimoinnin kylkiäisenä – Tulos http://www.tulos.fi/artikkelit/sokeakin-nakee-taman-sivun/

    [...] Web ei ole visuaalinen media [...]

Kommentoi

pakollinen

pakollinen, mutta ei tule näkyviin

Voit käyttää seuraavia elementtejä kommenteissa: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Vastuullinen verkkosivujen rakentaminen parantaa saavutettavuutta, käytettävyyttä ja hakukoneet löytävät sivut paremmin."



Sivun alkuun