Saako kehyksiä käyttää sivuston toteutuksessa?

Päällimmäinen kysymys ei ole, että saako niitä käyttää, vaan pikemminkin: "Tuoko kehysten käyttö niin paljon hyötyjä, että niiden käyttö oikeuttaisi kehyksien aiheuttamat käytettävyys- ja saavutettavuusongelmat?"

Netscape loi frame-ominaisuuden Navigator-selaimensa versioon 2.0, vuonna 1996. Kehystekniikka mahdollistaa selainikkunan jakamisen pienempiin alueisiin esim. siten, että osa sisällöstä on staattista (esim. valikko aina näkyvissä) ja osa "dynaamista" (sisältösivu muuttuu). Tämä olikin erittäin suosittu tapa toteuttaa sivustoja aina vuoteen 1999 asti. Vuodesta 1999 eteenpäin muut tekniikat tulivat suosituimmiksi ja kehystekniikka painui pikkuhiljaa vain muutamien vannoutuneiden ja aloittelevien suunnittelijoiden leikkikaluksi. Jostain syystä vielä nykyäänkin monet tekevät ensimmäiset kotisivunsa kehystekniikkaa apuna käyttäen. Itsekin tein ensimmäiset sivuni kehystekniikalla. Toisaalta harva aloitteleva tekijä miettii ensimmäisenä sivujen saavutettavuutta ja käytettävyyttä, jotka kehystekniikka tekee ongelmallisiksi.

Kehysten ongelmista kertoo jotain sekin, että Netscape - kehystekniikan kehittäjä - luopui kehysten käytöstä omilla internet-sivuillaan alle kuuden kuukauden käytön jälkeen.

Suurin periaattelinen ongelma kehysten käytössä on se, että ne rikkovat webin periaatteellisen idean: "Kokoelma yksittäisiä sivuja, jotka yhdistetty toisiinsa linkkien avulla. Jokaisella sivulla on oma osoitteensa (URL) ja sitä voidaan käyttää yksittäisenä dokumenttina (sisältäen itsessään mm. tarvittavan navigoinnin)".

Jokainen näistä alueista (frameista/kehyksistä) on täysin oma alidokumenttinsa ja jokaista alidokumenttia voidaan hallita ja kutsua erikseen. Tästä aiheutuukin yksi kehystekniikan monista ongelmista. Hakukoneiden tutkiessa sivustoja, ne eivät välttämättä kiinnitä huomiota siihen, että sivusto on toteutettu kehystekniikalla. Jos sivusto on jaettu esim. kahteen kehykseen "valikko.html" ja "sisältö.html", hakukone tallentaa molemmat dokumentit omana dokumenttimaan tietokantaansa ja sivuja haettaessa voi olla, että vain toinen näistä sivuista näytetään, vaikka molempien sivujen tulisi näkyä yhdessä.

Kehystekniikka antaa tekijälle mahdollisuuten määritellä kehysten koon ja sijoittelun, samoin kuin niiden toiminnallisuuden. Monesti kuitenkin kehykset toimivat vain visuaalisena paradigmana (Miten sokeiden selain esittää kehykset?) ja monesti käy niin, että kehystekniikalla toteutetut sivut toimivat visuaalisesti hyvin vain tietyillä resoluutioilla, johtuen huonosta suunnittelusta ja osaksi itse kehystekniikasta.

Kehystekniikalla toteutettu sivu saadaan näkymään kehyksiä tukemattomilla selaimilla laittamalla "index.html" sivulle tagi "<noframes>" esim.:

<noframes>
  <body>
    Kehyksiä tukemattomien selaimien sisältö.
  </body>
</noframes>

Sivustosi rakentuessa esim. kolmesta kehyksestä: "header", "menu" ja "content". Jos käyttäjä joutuu esim. hakukoneen kautta suoraan "content"- kehykseen tarkoitetulle sivulle, ilman että hän tulee etusivusi kautta, ei hän silloin näe "header" eikä "menu" kehyksiä lainkaan. Tämä tekee sivuston sisäisen navigoinnin ko. käyttäjän kohdalta mahdottomaksi. Ongelman voi korjata JavaScriptin avulla, olettaen, että käyttäjä sallii JavaScriptien ajamisen selaimessaan.

<script language="JavaScript">
  <!--
  if (top == self) 
  {
    self.location.href = "index.html";
  }
  // -->
</script>

<script language="JavaScript">
  <!--
  if (window == top)
  {
    top.location.replace = "index.html";
  }
  // -->
</script>

Kehyksien näennäisiä hyötyjä: (väitteitä ja vastaväitteitä)

HYÖTY: Kehyksiä käytetään laajasti Webissä ja usein? niitä pidetään teknisesti korkealaatuisten sivujen merkkinä.
TAI SITTEN EI: Kehyksiä käytettiin laajasti Webissä ennen 2000-lukua. Viimeistään kuluvan vuosituhannen alussa kehystekniikka kohtasi korvaajansa, ja nykyisin kaikki korkealaatuiset sivut toteutetaan esim. XHTML:llä yhdistettynä CSS-tyyleihin.

HYÖTY: Kehykset voidaan toteuttaa siten, että sivut näkyvät myös selaimissa, jotka eivät tue kehyksiä. Se vaatii kuitenkin aikaa ja työtä.
TAI SITTEN EI: Voidaan toteuttaa, mutta - miksi pitäisi? Uusien standardien mukaan kehystekniikkaa ei enää tulisi käyttää missään. Kehyksillä saavutettava "hyöty" voidaan kokonaisuudessaan toteuttaa CSS:n avulla, ja lisänä saadaan paljon muitakin ominaisuuksia, joita kehyksien avulla ei voida tehdä.

HYÖTY: Sivujen latausaika pienenee kehysten ansiosta. Käyttäjän tarvitsee ladata ainoastaan sisältöosa ikkunasta, koska navigointipalkki, logot yms. on jo ladattu aikasemmin.
TAI SITTEN EI: Vastaava nopeussäästö voidaan toteuttaa myös yhdistelmällä XHTML, CSS ja JavaScript. Toisaalta nykyisillä laajakaistanopeuksilla saavutettava hyöty on pienempi kuin kehysten aiheuttamat haitat.

HYÖTY: Kehysten avulla voidaan parantaa sivuston käytettävyyttä. Navigointi on tallella, vaikka sivun sisältö vaihtuu.
TAI SITTEN EI: Kiinteä navigointi, header ja footer pitää toteuttaa XHTML:n ja CSS:n avulla, sikäli kun niitä haluaa käyttää.

HYÖTY: Koska navigointi ja sivun sisältö ovat erillään, sivun sisältöä voidaan helposti päivittää, koska se on omassa erillisessä dokumentissaan.
TAI SITTEN EI: Nykymääritelmän mukaan rakenne ja ulkoasu tulee eriyttää. Mielestäni myös rakenne ja sisältö tulisi eriyttää. Sisällön "includaukset" on helpointi suorittaa PHP:n avulla, jolloin edes sivuston rakenneosiin ei tarvitse koskea.

HYÖTY: Kaksi asiakirjaa voidaan esittää vierekkäin.

HYÖTY: On ainakin jotain, mistä web-kehittäjät voivat väitellä vuodesta toiseen.

Haittoja:

Laillisuusongelma: sivun yläosassa, alaosassa ja vasemman reunan navigointipalkissa, kaikissa on yrityksen logot ja kaikin puolin kokonaisuus näyttää yritys X:ltä. Jos navigoinnista on linkki toisen yrityksen sivuston tietylle sivulle, saattaa käydä niin, että tämän vieraan yrityksen sisältö on yrityksen X raameissa. Tämä on laitonta, sillä tässä annetaan kuva, että vieraan yrityksen tarjoama palvelu olisi yrityksen X palvelu.
Vanhoissa selaimissa BACK-napin painallus siirsi käyttäjän edelliselle kehyksettömälle sivulle, vaikka oltaisiin käyty jonkun kehyksen sisällä kuinka monella sivulla tahansa. BACK-ei siirtänyt takaisinpäin ko. kehyksen sisällä vaan pois koko kehyssivulta.
Navigointi kehys-ikkunoissa saattaa tuntua useista käyttäjistä mysteeriltä. Navigoinnin toteuttamiseen pitää panostaa erittäin paljon.
Kehykset vievät helposti enemmän tilaa, kuin minkä arvoisia ne ovat. Jos sivusto suunnitellaan suuremmalle resoluutiolle, kuin millä sitä käytetään, kehyksiin tulee liukupalkit, jotka vievät suhteessa paljon tilaa etenkin, jos sivulla on useita kehyksiä.
Sivuston merkitseminen "kirjanmerkkeihin" ei onnistu oikein, koska selaimelle katsottava sivu on aina "index.html", riippumatta siitä mitä alidokumenttia katsot.
Ongelma joka syntyy esim. kavereille lähetettävistä linkeistä. Löydät mielenkiintoisen sivun ja haluat lähettää osoitteen kaverillesi. Tämäkään ei helpolla onnistu, koska selaimen näyttämä URL viittaa aina sivuston "index.html"-sivuun. Tällä tavoin menettää siis paljon mahdollisia lukijoita.
Nykyään internetiä selataan monella muullakin tavalla kuin vain kotitietokoneella, esim. käsimikrot (PALM), kännykät ym. Lisäksi on esimerkiksi sokeiden selaimet. Mikään edellä mainituista ei osaa näyttää kehyssivua oikein, jopa taulukkotaitolla toteutettu sivu näkyy niillä paremmin.
Kehyssivujen tulostaminen ei ikinä ole mukavaa. Pahimmassa tapauksessa jokainen kehys tulostetaan erikseen, jolloin saat sivun nimen omalle paperille, valikon toiselle, yhteystiedot kolmannella ja varsinaisen sisällön neljännelle.
Hakukoneilla on ongelmia (myös mahtavalla Googlella) kehyssivujen indeksoinnissa. Kuten jokainen on huomannut, hakutuloksissa saattaa sivun esittelyn kohdalla lukea: "Selaimesi ei tue kehyksiä, lataa selain joka tukee niitä." Kyseinen teksti on sivun toteuttajan <noframes></noframes>-tagin sisältö ja se on useimmiten varsin epäinformatiivinen. Täten kehyksillä toteutettua sivua on lähes mahdotonta saada kovinkaan hyville "sijoituksille" esim. Googlen haussa. Hakukoneet eivät välttämättä pysty indeksoimaan kehyksillä toteutetusta sivustosta muita sivuja kuin "index.xxxx"-sivun. Tätä ongelmaa voi lieventää kirjoittamalla <noframes> tagien sisälle mahdollisimman paljon sivun sisäisiä linkkejä -> tästä seuraa toisaalta taas omia ongelmia.
Tutkimusten mukaan suurin osa internetin käyttäjistä ei pidä kehyssivuista.
Sivuston linkkeihin joutuu lähes poikkeuksetta laittamaan target- attribuutin, joka tekee sivun teknisesti epävalidiksi (Strict).

Kysely

Toteutin tätä sivua varten kyselyt "Mikä on tärkeintä internet-sivulla?" ja "Kehyksien käyttö" - kuudella eri foorumilla, joista neljä oli suomalaisia ja kaksi englantilaisia.

Kysymyksistä on tarkoituksellä jätetty pois se kaikkein oleellisin, eli sisältö, koska sen lisääminen olisi vääristänyt tuloksien teknillistä näkökantaa liian radikaalisti.

Kysymys 1: Mitä näistä pidät tärkeimpänä?

Tämä kysely toteutettiin loppukäyttäjille kahdella eri foorumilla ja tässä tulee selkeästi ilmi se, että loppukäyttäjiä ei sisällön lisäksi kiinnosta juuri muu, kuin että sivusto on helppo käyttää.

Tämä kysely oli sekä Mureakuhan, että Suomi24 web-ohjelmointifoorumilla. Käyttäjäkunta siellä on suurimmaksi osaksi niitä, jotka tekevät sivuja, minkä huomaa "Validin koodin" suhteellisen korkeana kannatuksena. Loppukäyttäjien tapaan koodaritkin kannattavat helppoa käytettävyyttä.

Tämä kysely oli molemmilla englanninkielisillä web-ohjelmointifoorumilla. Käyttäjäkunta siellä on suurimmaksi osaksi niitä, jotka tekevät sivuja, minkä huomaa "Validin koodin" suhteellisen korkeana kannatuksena. Loppukäyttäjien tapaan koodaritkin kannattavat helppoa käytettävyyttä.

Kommentteja kyselyihin vastanneilta:

Ensimmäinen kysymys on ihan hyvä - ja mielenkiintoista oli että (onneksi) vain 10% piti visuaalisuutta tärkeimpänä.

Aika monesti näkee sivuja joissa käytettävyys ja validi koodi ovat niitä tärkeimpiä eikä sitten viitsitä ajatella visuaalista puolta ollenkaan. Tällöin sivu on sitä mustaa tekstiä valkosella, siis tylsä.

Itselläni visuaalisuus/käytettävyys/toimivuus sitten validi koodi, yritän pitää kaikki sopusoinnussa, korostamatta liikaa yhtä. Noin siis, kun teen sivuja. Mutta surffatessa taasen visuaalisuus/käytettävyys/toimivuus ja koodin validiudella ei ole sitten mitään merkitystä.

Loppukäyttäjää varmaan paljon kiinnostaa "koodin oikeellisuus".

Usability is prime. If the page is not usable, what's the point?

..miksi mistään noista tarvitsisi tinkiä. No ok, joskus voin jonkun pienen myönnytyksen tehdä visuaalisuudessa, mutta isoista asioista ei silloinkaan ole kyse.

Hassua kyllä, ollenkaan ei oltu kiinnostuneita sisällöstä :) Mutta niinhän se on, toiset tekevät sisältöä ja toisten tehtävä on miettiä paras ratkaisu sisällön julkaisemiseen. Harvoin nämä kulkevat samassa paketissa.

Kysymys 2: Kehyksillä vai ilman?

Tämä kysely toteutettiin loppukäyttäjille kahdella eri foorumilla. Loppukäyttäjistä vain 30 % oli ehdottomasti sitä mieltä, että kehyksiä ei pitäisi käyttää.

Tämä kysely oli sekä Mureakuhan, että Suomi24 web-ohjelmointifoorumilla. Käyttäjäkunta siellä on suurimmaksi osaksi niitä, jotka tekevät sivuja. Lähes 60 % kannatuksen sai "Ei missään tapauksessa frameja".

Tämä kysely oli molemmilla englanninkielisillä web-ohjelmointifoorumilla. Käyttäjäkunta siellä on suurimmaksi osaksi niitä, jotka tekevät sivuja. Täydellinen yksimielisyys siitä, että kehyksiä ei tulisi käyttää.

Kommentteja kyselyihin vastanneilta:

Toinen kysymys ei oikeastaan ole noin yksioikoinen. Aboutti 99.99% framehässäköistä on täysin turhia, mutta joskus todella harvoin niiden käyttö on perusteltua. Ja sen takia pitäisi kaiketi vastata 'Framet on OK'. Mutta sen jälkeen ei saa viikkoon nukuttua :)

Poll #2 is a no-brainer. There is no good reason to use frames. You may use inline frames, iframe, to import foreign pages. Using <object> is a better choice, as it allows graceful failure/degradation. Never import from your own domain.

The W3C has specified frameset DTD's for HTML 4.01 and XHTML 1.0. The XHTML 1.1 standard only accepts the Strict DTD, as does the current draft of XHTML 2.0.

Frames are sooooo WEB 1.0.

I voted usability and no frames

Päätäntö

Kehykset toteutettiin poistamaan ongelmia, mutta jopa niiden kehittäjä totesi niiden aiheuttavan vain lisää niitä. Kehyksillä voidaan toteuttaa toimiva web-sivusto, mutta koska on enemmän sääntö, kuin poikkeus, että näin olisi, ei kehystekniikan käyttämistä voida pitää suositeltavana. Tutkimukset ovat myös osoittaneet, että käyttäjät eivät pidä kehyksin toteutetuista sivustoista, vaikka ne tekijän mielestä olisivatkin seksikkäät. Sivuja toteutetaan ensisijaisesti muille kuin itselle, joten tässäkin asiassa kannattaa uskoa mitä asiakas sanoo, koska muuten teet todella huonoa työtä.

Kun sivustot toteutetaan muulla tavalla kuin kehyksillä, ne ovat paljon saavutettavammat, alustayhteensopivammat ja helpommat navigoida, kuin kehyksillä toteutettuna.

Johtopäätöksenä tästä voidaan sanoa, että kehykset rikkovat niin montaa web-standardia, että niiden käyttäminen ei ole lainkaan suositeltavaa modernissa web-ohjelmoinnissa. Hyvin suunniteltu rakenne käyttäen XHTML:ää ja CSS-tyylejä on tekniikka jota nykyisin pitää käyttää.

XHTML 1.0:ssa on vielä mukana siirtymävaiheen DTD:eet, eli "Frameset" ja "Transitional". XHTML 1.1 on mukana enää vain "Strict", eikä vielä ilmestymättömässä XHTML 2.0:kaan ole muita kuin "Strict"-DTD.

Kehykset hämäännyttävät ja ärsyttävät ihmisiä - joten vältä niiden käyttöä.

Lähteet:

Opettajan (Riina Laaksonen) opetusmateriaali
http://www.yourhtmlsource.com/frames/goodorbad.html
http://www.searchenginewatch.com/webmasters/article.php
Internet-foorumeiden kyselyt
...ja omat (kärkkäät) mielipiteet...