Inventive Design
18.1.2007 Lasse Larvanko

Viisi tapaa parantaa verkkosivun käyttöliittymää web-standardeilla

Web standardit ovat hyvän verkkojulkaisun perusta

Hyvin toteutettu käyttöliittymä auttaa käyttäjää nauttimaan sivujen sisällöstä. Hyvin suunnitellun ulkonäön lisäksi sivut on myös koostettava ammattitaidolla, jotta käyttökokemus on myönteinen. Aiemmin kerroin web-standardien bisneseduista verkkojulkaisemisessa ja nyt keskityn web-standardien tarjoamiin käyttöliittymäparannuksiin.

1. Sivut latautuvat ja piirtyvät nopeammin

Tuntuuko sivujen lataaminen joskus turhauttavan hitaalta? Haluatko omien sivujesi latautuvan nopeasti? Hitaan internetyhteyden lisäksi syynä on usein huonosti toteutettu ja raskas käyttöliittymäkoodi.

Vanhanaikainen taulukoilla toteutettu sivun taitto näyttää sivun vasta kun taulukko on kokonaan latautunut ja on lisäksi usein noin puolet raskaampi ja siten saman verran hitaampi ladata. Hyvin tehty tyylitiedostolla (CSS) taitettu sivu sen sijaan alkaa näkyä ruudulla sitä mukaa kun sivua on ladattu, joten esimerkiksi mainosten hidas latautuminen toisesta palvelusta ei estä käyttäjää lukemasta sivua. Vähemmän koodia sisältävänä sivu on lisäksi nopeampi ladata.

Tyylitiedostojen käyttö taittona nopeuttaa sivuja myös tietokoneen välimuistin takia. Tyylitiedosto jää käyttäjän tietokoneen välimuistiin, ja sitä ei tarvitse ladata joka kerta sivua ladattaessa toisin kuin sivuilla, joilla sivun ulkonäkö on koodattu suoraan sivuun. Näin seuraavien sivujen lataus nopeutuu entisestään.

2. Parempi tulostusversio ilman erillistä tulostusversiota

Tulostettaessa tärkeintä on sivun varsinainen sisältö. Tulostettaessa onkin parempi muuttaa sivu lineaariseen yksipalstaiseen muotoon ilman ylimääräisiä verkkosivun käyttöön liittyviä elementtejä kuten navigointia, sivupalkkeja, hakua ja mainoksia.

Css taitolla voit tehdä oman tyylitiedoston tulostusta varten niin, että mistään sivusta ei tarvitse tehdä erikseen tulostusversiota, vaan selain osaa automaattisesti käyttää sille luotua tyylitiedostoa, jolla määritellään millä tyylillä sivu tulostetaan ja miltä osin.

Kokeile esimerkiksi tulostaa tätä sivua, niin näet jo esikatselussa eron millainen tämä sivu on ruudulla ja tulostettaessa.

3. Sivut saadaan mukautumaan eri näytöille ja päätelaitteille

Tyylitiedostopohjainen taitto on hyvin joustavaa, ja siksi eri näytöille tai päätelaitteille on mahdollista pienin kustannuksin rakentaa omat tyyliinsä. Esimerkiksi nämä sivut ovat suuremmilla (yli 960 pikseliä) näytöillä kolmipalstaiset, mutta pienemmillä näytöillä vain kaksipalstaiset. Itse palstojen koko ei muutu jotta rivipituudet pysyisivät optimaalisina ja kuvat mahtuvat edelleen omille paikoilleen.

Inventive.fi suurella näytöllä ja oikealla pienemmällä 800 pikselin levyisenä.

Samoin kuin tulostettaessa mukauttaminen tapahtuu lisäämällä uusi tyylitiedosto, joka määrää nämä säännöt sekä yksinkertainen Javascript joka testaa ruudun resoluution.

Lisäksi olisi mahdollista rakentaa eri versiot esimerkiksi kännyköille tai vaikkapa saavutettava tekstiversio.

4. Mahdollisuus ylläpidettäviin kehittyneempiin toimintoihin

Web standardit luovat perustan sivujen käsittelyyn ulkopuolisella Javascriptillä. Näin toiminnallinen koodi on erillisessä tiedostossa tyylitiedoston tavoin, mikä helpottaa sivujen ylläpidettävyyttä ja jatkokehitystä.

Mikäli päätelaite eli selain ei kykene tai saa käyttää Javascriptiä ei sivu mene rikki vaan palautuu tilaan, jossa se toimii ilman tätä asteittaista parannusta. Web-standardit ovat hyvä perusta myös monimutkaisemmalle sisällön hakemiselle ja näyttämiselle, kuten AJAX.

5. Hyvin rakennetut sivut ovat esteettömät

Web-standardit mahdollistavat lähdekoodin esittämisen sen sisällön mukaisessa järjestyksessä, jolloin ne sopivat parhaiten apuvälineitä tai karsittua käyttöliittymää käyttäville. Näin sivut toimivat myös niillä käyttäjillä, jotka vanhanaikaiset sivut saavat turhautumaan ja poistumaan sivuilta tuohtuneina.

Mitä web-standardit ovat?

Web standardeilla tarkoitetaan tapaa jolla verkkosivun käyttöliittymä eli varsinaiset sivut koostetaan.

Ne koostuvat usein kolmesta perustasta:

  • xhtml rakenteesta joka kuvaa sisällön merkityksen
  • tyylitiedostosta (css), jossa kuvataan sivun ulkoasu
  • DOM, jossa kuvataan käyttöliittymän erityiset toiminnallisuudet

Standardit ovat jo suhteellisen vanhoja ja vakiintuneita ja kaikki uudemmat selaimet tukevat niitä hyvin.

Haluatko saada nämä ja muut hyödyt omille sivuillesi?

Piditkö artikkelista? Voit tilata uudet artikkelit suoraan sähköpostiisi uutiskirjeenä.

Kommentit

3 kommenttia artikkelista “Viisi tapaa parantaa verkkosivun käyttöliittymää web-standardeilla”

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

  1. Inventive Design : Web ei ole visuaalinen media http://inventive.fi/web-ei-ole-visuaalinen-media/

    [...] Viisi tapaa parantaa verkkosivun käyttöliittymää web standardeilla [...]

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

    [...] Ilman laatuprosessia jää käyttöliittymäkoodin laadun tarkastaminen helposti tekemättä. Web standardien automaattiset tarkistustyökalut ovat kuitenkin nopeita keinoja laadun tarkistamiseen. Aikaisemmin olen jo kertonut web-standardien hyödyistä: [...]

  3. Inventive Design | Tuhoaako Google helvetti hakukonenäkyvyytesi? http://www.inventive.fi/tuhoaako-google-helvetti-hakukonenakyvyytesi/

    [...] viisi-tapaa-parantaa-verkkosivun-kayttoliittymaa-web-standardeilla [...]

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>

tyylitiedostolla (CSS) taitettu sivu sen sijaan alkaa näkyä ruudulla sitä mukaa kun sivua on ladattu."



Sivun alkuun