Web-toteutuksen virheet

Artikkelissa "web-suunnittelun virheet" kävimme läpi virheitä, joita tehdään sivujen suunnitteluvaiheessa. Tässä artikkelissa käymme läpi virheitä, joita tehdään sivujen toteutusvaiheessa. Asijoita ei ole montaa, mutta ne ovat tärkeämpiä, kuin mitä moni kuvittelee.

Kuvat:

Toisinaan näkee sivuja, joissa on käytetty paljon kuvia ja pahimmassa tapauksessa niiden kokoa ei ole optimoitu mitenkään. Tämä takaa sen, että hitaamman yhteyden käyttäjät eivät tule sivuilla viipymään pitkään. Ei kukaan jaksa ladata sivuja kymmeniä sekuntteja, kun optimoimalla kuvat, voi ne saada latautumaan nopeammin. Otetaanpas esimerkkejä.

Esimerkki 1 | Esimerkki 2 | Esimerkki 3

Ensimmäinen kuva on pakkaamaton "bmp" ja sen koko on 2,25MB. Hitailla yhteyksillä kuva latautuu todella hitaasti. Toinen kuva on pakattu "gif" muotoon ja sen koko on 541KB, eli se on yli neljä kertaa pienempi kuin ensimmäinen kuva. Kolmas kuva on pakattu "jpg" muotoon ja sen koko on vain 135KB! Kuvien laadussa ei huomaa mitään eroa, ellei ala tutkimaan tarkemmin.

Usein näkee myös sivuja, joissa jonkin elementin taustaväri on toteutettu kuvalla. Näinhän ei pitäisi tehdä. Paljon parempi olisi käyttää CSS:ää. Miksi turhaan käyttää kuvia, kun homman voi hoitaa tyylikkäämmin muilla keinoilla ja näin säästetään myös sivujen latautumisajassa.

CSS-taitto vai taulukko-taitto?

Hyvin moni web-sivujen merkkaaja, merkkaa sivujen rakenteen käyttäen taulukko-taittoa. Taulukko-taitto on kuitenkin vanhaa, eikä sitä ole koskaan suositeltu käytettäväksi sivuston rakenteessa, eli ulkoasussa. Taulukko-taitolla tulee esittää vain taulukko muotoinen data, ei muuta. Sivujen runko tulisikin merkata käyttäen CSS-taittoa.

Alla on pari esimerkkiä. Esimerkkien takaa löytyy nopeasti katsottuna lähes samanlaiset sivut.

Esimerkki 1 | Esimerkki 2

Mutta katsoppas esimerkkien lähdekoodia. Esimerkki yksi on toteutettu taulukko-taitolla, kun taas toinen esimerkki on toteutettu CSS-taitolla. Kumpi on siistimpää ja helpompi lukea? Myönnetään, että ehkä vähän liioittelin taulukko-taiton suhteen, mutta näinkin huonosti toteutettuja sivuja näkee liian usein.

Taulukko-taitolla merkatussa ulkoasussa on rakenne ja tyylit samassa. Css-taitossa käytin erillistä css-tiedostoa, joka on paitsi selkeämpi, myös nopeuttaa sivujen latautumista. Tulisikin aina erottaa tyylit ja rakenne toisistaan.

Tagien käyttö?

Moni sivuja tekevä käyttää vanhoja tageja, joita ei enään suositella käytettäväksi. Näitä tageja on mm. B, U, I ja FONT. World Wide Web Consortium (W3C) ei ole aikoihin suositellut näitten tagien käyttöä. Nämä kaikki tagit voidaan korvata CSS:llä, tai tageilla, jotka on kehitetty korvaamaan nämä määritykset. WWW-sivujen rakenteessa ei pitäisi käyttää mitään tyylimäärityksiä, vaan ne pitäisi laittaa erilliseen tyylitiedostoon. Siksi näitä tageja ei tule käyttää.

Sama homma koskee esim. BR- tagia, jolla siis saadaan rivinvaihto. BR- tagia ei pitäisi koskaan käyttää leipätekstissä, eli varsinaisessa sisällössä. Teksti tulee erotella toisistaan kappaleilla, eli P- tagilla.

Pahin virhe vanhentuneiden tagien käytössä ilmenee silloin, kun merkataan XHTML:llä, jos merkkaaja ei tiedä mitä on tekemässä. XHTML ei nimittäin edes tunne näitä edellämainittuja tageja! Toki uudet selaimet osaavat tulkita ja soveltaa huonoakin koodia, mutta miten on vanhojen selainten laita?

XHTML:än ja HTML:än eroja:

Usein myös näkee sivuja, joiden DOCTYPE kertoo, että sivu on merkattu XHTML:llä. Kuitenkin, kun aletaan tutkia koodia, niin huomataan, että on käytetty sekä XHTML:ää, että HTML:ää. Näin ei pidä koskaan tehdä. XHTML ja HTML merkkausta ei saa sekoittaa toisiinsa. Yleisin virhe on väittää DOCTYPEssä käyttävänsä XHTML:ää ja kirjoittaa tagit isolla. Hyvänä kakkosena tulee, kun väitetään käyttävän HTML:ää ja suljetaan img, br, meta ym. tagit.

-Foxytin 20.09.2006