Web ei ole visuaalinen media

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

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.