Arkisto › Elokuu 2004 › 22. päivä

Nytin uusien sivujen tekninen analyysi

Internet, sunnuntaina 22.8.2004,

Kuulutin eilen Nytin verkkosivujen uudistuksesta. En silloin vielä ollut pahemmin tutustunut palvelun toteutukseen, mutta oletin, että suurten yritysten sivu-uudistukset ovat aina hieman ongelmallisia. Nyt paneudun tarkemmin Nytin sivujen tekniseen toteutukseen (valitan, etten saa koodiesimerkkeihin kulmasulkeita näkyviin). Käytettävyyden jätän huomiotta, sitä on käsitellyt ainakin Marjut. Ensin katsotaan HTML-koodia:


meta http-equiv="Content-Type"
  content="text/html; charset=UTF-8"

Sivut on koodattu UTF-8:llä, ainakin alku on onnistunut. Mitenkäs dokumentin tyyppimääritys?


!DOCTYPE HTML PUBLIC
  "-//W3C//DTD HTML 4.0 Transitional//EN"

HTML 4 Transitional on varmaankin ihan hyvä valinta. Entä miten selaimet sitten tulkitsevat sen. Mozilla: Quirks Mode, Internet Explorer: Quirks Mode. Yritys on hyvä, mutta sivu olisi toiminut ilman tyyppimääritystäkin. Mitäs muuta HTML-koodista löytyy?


img src="/static/nyt/images/px_blank.gif"
  width="1" height="1" border="0"
img src="/static/nyt/images/px_blank.gif"
  width="150" height="1" border="0"
img src="/static/nyt/images/px_blank.gif"
  width="1" height="1" border="0"

function ReplaceAds() {
  if((arrBannerTypes[i] == 1) &&
    (eval("ad_"+strTemp+" != null"))) {
      eval("objR('target_" + strTemp
      + "').innerHTML = ad_"+strTemp+"");
  } else if(arrBannerTypes[i]==2) { ... }
}

Spacer giffit ovat nekin ahkerassa käytössä. Luulin, että innerHTML- ja outerHTML -koodit olisi nekin jätetty jo 1990-luvulle. Olin ilmeisesti väärässä. Kyseessä on tosin mainoksen luova skripti, joten sillä voi olla merkitystä.

Kun sivua katsoo ilman tyylitiedostoa, huomaa käytännössä kaiken tyylin hävinneen. Ovat eriyttäneet sivun rakenteen ja esitystavan oikein. En vain löydä tyylitiedostoon viittaavaa elementtiä mistään. Ahaa, lataavat tyylitiedoston javascriptin avulla (jscript.js):


[HTML-tiedostossa:]
script charset="UTF-8" src="/static/nyt/jscript/jscript.js"

[jscript.js-tiedostossa:]
if(userAgent.indexOf("mozilla") > -1
  || userAgent.indexOf("netscape") > -1) {
    document.writeln(
      'link rel="stylesheet" type="text/css"
      href="/static/nyt/css/styles_ns4.css" /');
  } else {
    document.writeln(
      'link rel="stylesheet" type="text/css"
      href="/static/nyt/css/styles_allother.css" /');
  }

Toimiihan se noinkin, mutta jos javascriptin kääntää pois, eivät tyylitkään näy. Jos kerta ylläpitäjät haluavat antaa Netscape 4 -käyttäjille eri tyylitiedoston, olisi sen voinut tehdä palvelimellakin. Tiedostot style_ns4.css ja styles_allother.css ovat muuten lähes identtiset.

Millainen mahtaa sitten olla se tyylitiedosto (mukaan otettu vain osa):


body {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-bottom: 0px;
  background-color: #999999;
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: none;
  text-decoration: none;
}

td.tdblack {
  background-color: #000000;
}
td.tdmaroon {
  background-color: #660000;
}
td.tdlightgray {
  background-color: #F0F0F0;
}

.text {
  color: #000000;
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: none;
  text-decoration: none;
}
.text_white {
  color: #FFFFFF;
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: none;
  text-decoration: none;
}
.text_orange {
  color: #FFCC00;
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: none;
  text-decoration: none;
}

No niin. Ensinnäkin body-elementin kirjasinkokoa ei kannata asettaa pikseleihin, sillä IE ei pysty suurentamaan tekstiä. Ja Nytin tapauksessa yli 90 prosenttia vierailijoista käyttää takuuvarmasti IE:tä.

Lihavointi poistetaan määritteellä font-weight: normal eikä none. Myös tapaa värittää solujen sisältöä voidaan pitää kyseenalaisena. Vaihdetaanpa erään taulukon solun taustaväri vihreäksi: td.tdblack { background-color: #00ff00; }. Eivätkö tyylitiedostot olekin hyviä?

Ja tyylitiedoston kokoa olisi saatu pienemmäksi, jos .text-luokan eri osat olisi tiivistetty seuraavaksi (mikäli välttämättä halutaan käyttää väreihin perustuvia nimiä):


.text, .text_white, .text_orange {
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  text-decoration: none;
}
.text {
  color: #000000;
}
.text_white {
  color: #FFFFFF;
}
.text_orange {
  color: #FFCC00;
}

Lopputulos: HTML-koodausta niin kuin sitä tehtiin jo 1996. Ainakin on saavutettu yhteensopivuus alaspäin. Pikanttina yksityiskohtana huomautettakoon, että sivun näkymä on Netscape 4:llä lähes samanlainen kuin esimerkiksi IE 6:llä.

Nytin uusien sivujen tekninen analyysi

Internet, sunnuntaina 22.8.2004, postCount('20040822_nytin_uusien_sivujen_tekninen_analyysi');

Arkisto

Internet, sunnuntaina 22.8.2004,