ohjeita web-sivuston tekijälle
Webissä käytetään todella harvoin hyvää grafiikkaa. On olemassa muutamia yksinkertaisia ohjeita, joilla voi välttää graafisen katastrofin sivustollaan. Tässä oppaassa esittelen niistä tärkeimpiä.
Grafiikka on yhtävertainen kaikkeen muuhun web-sivulle laitettavaan materiaaliin siinä suhteessa, ettei sitä kannata käyttää jos se ei anna lisäarvoa sivulle. Grafiikkaa tulisi käyttää tekstiä tukevana välineenä ja erityisesti sen synnyintoimeen, vaikeaymmärteisen yksinkertaistamiseen.
Kannattaa ajatella kolmesti ennen raskaan materiaalin laittamista sivuille. Muista kuitenkin, että jos grafiikka on raskasta mutta helpottaa huomattavasti sivustosi sanoman ymmärtämistä, useimmat kävijät jaksavat odottaa. Kaikista parhaimmat latausajat saa käyttämällä yksinkertaistettua ja toistuvaa grafiikkaa. Jos käytät samaa kuvaa (esim. logoa) joka sivulla, se latautuu selaimen muistiin vain kerran eikä sitä tarvitse hakea palvelimelta joka sivuhaun yhteydessä.
Grafiikan käyttöä tekstin korvaamiseen ei voi perustella millään. Kuvien lataaminen vie huomattavasti enemmän aikaa kuin HTML-sivuun yhdistetyn tekstin lataaminen jo siitä syystä, että palvelimelta ei tarvitse hakea useampia tiedostoja yhden sivun näyttämiseen, puhumattakaan kuvien suuresta koosta tekstiin verrattuna. Uusilla tekniikoilla kuten tyylipohjilla saa aikaan kaunista tekstistä jälkeä sivuille.
Grafiikan käytössä pätee yksi julkaisemisen elintärkeistä perussäännöistä: yhteneväisyys. Jos käytät sivullasi graafista ulkoasua, tulisi sen olla yhdennäköinen joka sivulla. Mikään ei harhauta vierailijoita enemmän kuin ulkoasun muuttuminen sivulta toiselle siirryttäessä. Mikäli sivustollasi ei ole varsinaista graafista ulkoasua, on siinä varmasti käytössä oma värimaailmansa, oli se sitten kaikkia sateenkaaren värejä käyttävä tai tyypillisen mustavalkoinen. Tämä värimaailma tulee pitää yhtenevänä alusta loppuun, ettei käyttäjälle tule webbiviidakkoon eksyneen oloa.
Monet surffaavat webissä hitaiden yhteyksien takia selaimilla, joista on kuvat poistettu käytöstä. Kämmentietokoneiden selaimet eivät muodosta pienintä osa näistä käyttäjistä. Kuvia web-sivulla käytettäessä on tärkeää tarjota tekstivaihtoehto kuvalle. Tämä toteutetaan <IMG> -tagin ALT -attribuutilla. Lyhyen kuvauksen tulisi kuvata kuvan keskeistä sanomaa. Tekstivaihtoehdon lisääminen auttaa myös kartoittamaan kuvan oikeaa tarvetta ja hyödyllisyyttä kävijälle.
Aika suppea :( silti silkkaa faktaa :)
Ihan hyvä mutta miten itse kuvan saisi läntättyä palvelimelle??
19.1.2005 16:22Muuten hyvä mutta toisaalta joitakin tekstejä on hyvä tehdä grafiikalla. Kaikki selaimet kun eivät välttämättä tue erikoisempia fontteja. Siksi erikoisemmat tekstit kannattaa tehdä grafiikaksi ja pakata se hyvin, esimerkiksi GIF-muotoon. Näin saadaan sivuston ilmeelle oleelliset kirjasinlajit näkymään oikein.
11.3.2005 11:27hei tietaako kukaan kuinka saa tekstin kuvan paalle, jos tekisin esim gif napin ja haluaisin sen paalle tekstin?
22.3.2005 14:50Hmm.. Mä yritin tehä urliin sivuja mutta sitten se tössäskin siihen, kun olin jo rekisteröiny tunnuksen ja aktivoinu, ym. niin sitten en enää osannut pidemmälle. :(
23.7.2005 19:38Tee taulukko; esim. 5 x 10. Tee 5 x 10:n pikselin kokoinen GIF (tai joku muu)-kuva. Laita kuva taulukon solun taustakuvaksi. Näin voit vapaasti kirjoittaa tekstiä tai tehdä muita efektejä taulukon solun sisään.
18.12.2005 07:59Hei!
Tietääkö kukaan, miten saan tehtyä sellaisen koodin, jossa kuva vaihtuu, kun sen päälle laitetaan hiiren kursori?
Laita CSS-koodiin vaihtuva taustakuva.
esim.seuraava koodi head-osioon
<style type="text/css>
a.linkit
{
background-image:url("ekakuva.jpg");
}
a.linkit:hover
{
background-image:url("tokakuva.jpg"};
}
</style>
Sitten annat linkeille luokan "linkit",
<a href="jokulinkki.html"
class="linkit">Johonkin</a>
Jäi pois e.m. koodista lainausmerkki kohdasta ...text/css" toivottavasti ei tullut muita kirjoitusvihreitä.
24.5.2006 23:38Jos kerran on pakko grafiikkaa käyttää (itse vältän aina kun mahdollista) suosittelen PNG-formaatin ja piakkoin myös SVG-formaatin käyttöä. Molemmat ovat W3C:n standardoimia.
Minkä lisäksi ainakin GIF ja ilmeisesti myös JPEG-formaatit vaativat softantekijöiltä kalliit lisenssit - onneksi tosin meidän loppukäyttäjien ei tarvitse moisesta välittää, ellemme sitten tahdo parantaa maailmaa.
Suosittelen kaikille kuvaformaatiksi ehdottomasti png:tä.Se syrjäyttää gifin melko löysästi ja on paljon parempi kuin esimerkiksi bmp,jota tosin löytyy netistä mielin määrin...Bmp lataa kuvia kamalan kauan,oli pieniä tai suuria.