Seuraavan osion tarkoitus on valaista hieman sivun teknistä toteutusta ja sen taustalla olevia ratkaisuja. Asia ei varmaankaan kaikkia kiinnosta, mutta näin mielekkääksi kuitenkin kirjoittaa hieman asiasta.
Kaikille, joita kiinnostaa autot yhtään. Projektia suunnitellessa olen etsinyt aika paljon tietoa ko. autoon liittyen ja muutenkin autotekniikkaan ja pienimuotoiseen virittämiseen. Tarkoitus on välittää sivujen kautta tätä tietoa eteenpäin.
Yhdeksi lähtökohdaksi sivuja tehdessä/suunnitellessa, otin niiden käytettävyyden. Hyvin usein näkee sivuja, joita on vaikea selata, valitettavan usein näitä on suurien yritysten "hienot" sivut. Ylipäätään käytettävyys on aika vaikea asia ja luultavasti nämäkin sivut epäonnistuvat jollain osa-alueella tai jonkun mielestä. Web sivun, varsinkin näiden sivujen henkisen, tarkoitus on viestittää asia lukijalle, ei peittää sitä graafisesti hienon ulkokuoren alle. Ketä palvelee kolmen minuutin latausaika jollekkin Flash animaatiolle? Toisaalta pelkkä teksti ja kuvat sellaisenaan ei välttämättä innosta lukijaa pysymään sivuilla, ellei asia oikeasti ole tämän mielestä kiinostavaa.
Noin yleensä, olisi hyvä jos sivut toimisivat kaikilla käyttäjillä, siis kaikilla selaimilla ja käyttöjärjestelmillä ja näyttäisivät vielä samalta. Sen kun näkis. Eli ei ainakaan omat kyvyt riitä moisen saavuttamiseen. Joten olen koittanut tehdä kompromissejä joidenkin ulkoasuun liittyvien ratkaisujen kohdalla. Olen myös koittanut ottaa huomioon pienemmillä näyttötarkkuuksilla toimivat laitteet (kuten vanhat tietokoneet). Kuten myös merkkipohjaiset selaimet (esim. Links).
Koska käytetyt värit ovat tummia, on näytön kirkkaus- ja kontrastisäädöillä huomattava vaikutus havaittuun ulkoasuun. Usein näyttö on säädetty liian kirkkaalle. Seuraavassa pari nyrkkisääntöä:
Säädä kontrasti täysille. Aseta työpöydän taustaväri mustaksi (RGB 0,0,0). Säädä ruudun geometria niin, että kuva litistyy (jos mahdollista). Säädä valoisuus selvästi liian suureksi. Nyt pitäisi ruutu näkyä harmahtavana ja näytön yläreuna (tai ala) mustana, mihin kuvaa ei piirry. Säädä valoisuutta niin pieneksi, että työpöydän rajaa ei enää erota.
Nyt näyttö pitäisi olla säädöissään. Geometrian ja taustakuvan voi vaihtaa takaisin mieleisekseen :-) Tämä säätö on siis normaaliin käyttöön, himmeähköön valaistukseen sopiva, ei siis mitenkään erityisesti näitä sivuja varten. Lisäksi pitäisi säätää värilämpötila, mutta esim. 9300K on ok normaali käytössä.
Kun hiiren vie tekstikappaleen päälle, syttyy sen vasen reuna oranssiksi ja taustanväri muuttuu mustaksi. Tämä ominaisuus toimii ainakin Mozilla Firefoxilla (IE:llä ei toimi) ja Operalla (8.5). Ominaisuuden tarkoitus sivuilla on jäljitellä hiirellä kappaleen maalaamista. Itse lukiessani tekstiä teen näin. Johtunee varmaan kieroista silmistä, mutta omalla kohdalla riveillä pysyminen on kovin hankalaa, joten maalaan lukemani. Miksi siis en laittaisi tuota ominaisuudeksi. Lisäksi se mielestäni tavallaan elävöittää sivua. Anna palautetta jos moinen ärsyttää!
Toisaalta taas olion ulkoasun muuttaminen saatta antaa käyttäjälle kuvan siitä, että oliosta tapahtuu jotain. Vertaa esimerkiksi linkin korostus. Tässä tapauksessa tekele on huono, koska kappaletta klikkaamalla ei tapahdu mitään. Ero linkkien korostukseen on kyllä pidetty selvänä ja tekstikappale on suurempi kokonaisuus, kuin linkki, joten toivottavasti linkkimäistä vaikutelmaa ei synny.
Myös kuvissa on käytetty kehystystä, mutta tällä kertaa ilmoittamaan siitä, että kyseessä on linkki ja siitä aukeaa suurempi kuva. Tämä saattaa sekoittaa edellämainitusta syystä.
Sivujen värimaailman lähtökohtana oli autoon kaavailtu väritys. Matta-tummaharmaa ja tietyissä paikoissa oranssia. Lisäksi navi-linkeissä on käytetty auton alkuperäistä vastaavaa, moonstone blue, väriä. Tummaan taustaan pitää laittaa vaalea teksti, jotta se olisi luettavissa. Kirkas valkoinen olisi taas omasta mielestäni ollut kontrastiltaan liian suuri tumman kanssa, joten mursin sitä hieman. Kontrastiero säilyy kuitenkin kohtuu hyvänä, joten tekstin luulisi olevan luettavissa, vaikka näkö ei olisi paras mahdollinen.
Lisäksi olen koittanut välttää liian räikeaa vaikutelmaa ja käyttänyt oranssia vain tyylikeinona ja muutenkin pitänyt värien käytön vähäisenä. Kertonee jotain myös tekijästä...
Sivut ovat W3C validia HTML 4.01 Strict koodia, validein CSS tyylein. Tämä, kuten jo edellä annettiin ymmärtää, ei valitettavasti takaa sivujen samanlaisuutta eri selaimilla. Itse käytän ja suosittelen Mozilla Firfoxia (Linux ja Windows). Testaamisessa olen käyttänyt myös Links:iä, Operaa, sekä Internet Exploreia, jota en kuitenkaan suosittele :-).
Aluksi lähdin käyttämään XHTML 1.0 Strict mukaista, mutta siitä tuntuu toistaiseksi olevan enemmän haittaa kuin hyötyä. Näillä sivuilla muutos ei muutenkaan olisi kuin doctypen vaihdos ja muutamaan kohtaan sulkeva kenoviiva XHTML syntaksin mukaisesti. Haittoja voi käydä lukemassa vaikka: Spartanicus' web tips.
Firefoxilla sivut ovat kohtuu samannäköiset Linux ja Windows alustoilla. IE:lläkin ulkonäkö on jokseenkin samanlainen, lukuunottamatta niitä kappalekehyksiä. Erot Linux ja Windows alustoilla (samalla selaimella) johtunevat hieman erilaisista fonteista. Mahdolliset layout erot FF:n ja IE:n välillä johtuvat taas IE:n virheellisestä tavasta käsitellä DIV elementtien toppausta.
Kaikki palaute otetaan mielellään vastaan. Jos joku ei toimi, näyttää tyhmältä tai jopa hyvältä, niin kerro ihmeessä! Ilmeisesti asia kuitenkin kiinnostaa, kun jaksoit lukea näinkin pitkään ;-) Yhteystiedot löytyvät "Yhteystiedot" osiosta.