[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Yleisinfo > Sivujeni toimivuus eri selaimilla > Dynaamisia valikoita käsittelevä taulukko (jakso 1a/4)

Dynaamisia valikoita käsittelevä taulukko

Suurimmat erot koskevat yläoikealla dynaamisissa valikoissa niiden alapuolella olevien päälinkkien toimivuutta. Käytän esimerkkinä CSS-sivuja. Niillä pitäisi olla alla olevan kuvakaappauksen kaltainen dynaaminen valikko ja linkkikokonaisuus (kuvakaappaus on otettu 11/2003).

CSS-sivut

Arvioin dynaamisten valikkojen ja erityislinkkien toimivuutta käyttäjäystävällisyyden ja ulkoasun perusteella. Olen jakanut käyttäjäystävällisyyteen liittyvät seikat kahteen osaan, yleiseen käyttäjäystävällisyyteen ja nopeuteen, jotka on arvioitu erikseen. Olen tehnyt arvioinnit seuraavilla periaatteilla ja painotuskertoimilla:

  1. Yleinen käyttäjäystävällisyys (painotuskerroin 3.0). Tässä kohdin arvion kaikki sellaiset CSS-piirteet ja JavaScript toiminnot, joilla olen pyrkinyt maksimaaliseen käyttäjäystävällisyyteen. Selain saa täydet pisteet jos seuraavat seikat toimivat:

    • Valikot ja niiden alapuolella olevat erityislinkit pysyvät kiinteänä sivun alussa eivätkä rullaudu sivun mukana. Alivalikot voi avata koska tahansa. Arvostelussa otetaan huomioon vain position:fixed avulla toteutettava elementtien pysyminen sivun yläreunassa.
    • Kaikki valikoiden avaus- ja sulkulinkit toimivat ja ne käyttävät aina ensisijaisia avaus- ja sulkemiskomentoja.
    • Valikot asettuvat riittävän oikein suhteessa toisiinsa nähden, että käyttäjäystävällisyys on hyvä (muutaman pikselin heitto optimaalisesta tuloksesta sallitaan tässä arviointikohdassa).
    • Alivalikoilla on ei-aktiiviset "varjoalueet", joiden tarkoituksena on estää vahingossa "liukastumasta" pois alivalikoista.
    • Linkit ovat maksimaaliselta leveydeltään aktiivisia.
    • Linkkien taustat toimivat oikein kun hiirtä liikutetaan linkkien päällä tai sitä klikataan.
    • Hiiren osoitin (kursori) toimii suunnitellusti.
    • Selain näyttää opastavat title attribuutit ja tilarivin informaatiot.

  2. Nopeus (painotuskerroin 1.5). Nopeudella ei tarkoita tässä yhteydessä sitä, miten nopeasti selaimet lataavat sellaiset Web-sivuni, jotka käyttävät dynaamisia valikoita vaan ainoastaan sitä, miten hyvin selaimet seuraavat dynaamisissa valikoissa hiiren liikettä. Selain saa täydet pisteet, jos valikoissa liikuttaessa ei esiinny 200 Mz PC-tietokoneella lainkaan selailua häiritseviä viiveitä.

  3. Ulkonäkö (painotuskerroin 2.0). Arvioin tässä yhteydessä kaikki ulkonäköön liittyvät piirteet lukuun ottamatta joitakin sellaisia piirteitä, jotka olen huomioinut käyttäjäystävällisyyttä arvioidessani. Selain saa täydet pisteet, jos seuraavat seikat on esitetty moitteetta:

    • Kaikki elementtien asemointiin ja mitoituksiin liittyvät ominaisuudet toteutuvat CSS2-spesifikaation mukaisesti (width, height, line-height, text-align, left, top, padding, margin ja border-width). Sitä pysyvätkö valikot sivun alussa tai eivät, ei kuitenkaan oteta huomioon, sillä se on arvioitu käyttäjäystävällisyyden kohdassa.
    • Fontteihin liittyvät ominaisuudet ovat oikein.
    • Taustaominaisuudet ja värit toimivat CSS2-spesifikaation mukaisesti. Joillakin selaimilla on ongelmia esittää sivujen taustaominaisuudet heti ensimmäisellä vierailukerralla oikein ja niillä saattaa esiintyä tarvetta ladata sivu uudestaan. En ota tätä seikkaa huomioon. Testi lähtee siitä, että taustaominaisuudet toimivat normaalisti.

Annan arvion asteikolla 4,0-10,0 ja pisteillä. Arvostelukohtainen pistemäärä saadaan kertomalla arvio painotuskertoimella. Loppuarviossa yhteenlaskettu pistemäärää jaetaan painotuskertoimien summalla, jotta maksimiarvio olisi aina 10,0 (painotuskertoimet ja maksimipistemäärät ovat suluissa ensimmäisellä taulukkorivillä). Kullankeltainen taustaväri merkitsee parasta arviota ja lihavoidut ovat maksimiarvion saaneita kohtia. Tähtiarvio on suoritettu seuraavalla tavalla:

(käyttäjäystävällisyys) Ulkoasu
(2.0):


(maks. pistem. 20,0)		 Kokonaisarvio:



(maks. pistem. 65,0)		 Tähdet:
Yleinen
käytt.ystäv.
(3.0):
(maks. pistem. 30,0)		 Nopeus
(1.5):

(maks. pistem. 15,0)
Opera 7.x
[Yksityiskohdat]		 10,0 (30,0) 9,6 (14,3) 10,0 (20,0) 9,9 (64,4) [Star] [Star] [Star] [Star] [Star]
Mozilla 1.1, Netscape 7.0, Konqueror 3.1
[Yksityiskohdat]		 9,9 (29,7) 8,5 (12,8) 10,0 (20,0) 9,6 (62,5)
Opera 6.x
[Yksityiskohdat]		 9,0 (27,0) 9,6 (14,4) 9,8 (19,6) 9,4 (61,0) [Star][Star][Star][Star]
Mozilla 0.9.1-0.9.4, Netscape 6.1x-6.2x
[Yksityiskohdat]		 9,7 (29,1) 7,5 (11,2) 9,9 (19,2) 9,2 (60,1)
Opera 5.1x
[Yksityiskohdat]		 8,6 (25,8) 9,6 (14,3) 9,6 (19,2) 9,0 (58,6)
MS IE 5.x
(Mac)
[Yksityiskohdat]		 9,1 (27,3) 8,0 (12,0) 9,6 (19,2) 9,0 (58,5)
Mozilla 1.3x/1.4x
[Yksityiskohdat]		 8,5 (25,5) 8,5 (12,8) 10,0 (20,0) 9,0 (58,3)
MS IE 6.0
(Windows)
[Yksityiskohdat]		 8,5 (25,5) 8,0 (12,0) 10,0 (20,0) 8,8 (57,5) [Star][Star][Star]
MS IE 5.x
(Windows)
[Yksityiskohdat]		 8,5 (25,5) 8,0 (12,0) 9,8 (19,6) 8,8 (57,1)
MS IE 4.0
(Windows)
[Yksityiskohdat]		 8,0 (24,0) 8,5 (12,8) 9,0 (18,0) 8,4 (54,8)
Netscape 6.0x, Mozilla 6.0
[Yksityiskohdat]		 8,0 (24,0) 7,0 (10,5) 9,6 (19,2) 8,3 (53,7)
Netscape 4.x
[Yksityiskohdat]		 7,5 (22,5) 10,0 (15,0) 7,0 (14,0) 7,9 (51,5) [Star][Star]
Opera 4.x
[Yksityiskohdat]		 4,0 (12,0) 4,0 (6,0) 8,0 (16,0) 5,2 (34,0) -

Käsittelen dynaamisten valikoiden luomista eräällä sivulla[S]. Olen listannut sekä CSS-sivuilla että muilla sivustoilla ilmenneitä CSS-ongelmia sekä eräitä selaimilla havaitsemiani yleisiä toimintaongelmia. Selainversiot myös poikkeavat toisistaan merkittävässä määrin, minkä vuoksi joistakin selaimista paljon tiettyä versiota koskevia huomautuksia. Joillakin selaimilla (erityisesti Operalla) voi tulla ongelmia epäasiallisen suunnittelun vuoksi, mutta se ei ole tekemieni sivustojen ongelma.

Käsittelen tiedossa olevissa ongelmissa myös sellaisia puuttuvia piirteitä, jotka rajoittavat Web-suunnittelua.

[Alku]