HTML-uutiskirjeet

Internet, sunnuntaina 31.10.2004,

HTML-muotoiset uutiskirjeet paranevat päivä päivältä.

Päivitys: korjattua uutiskirjettä on muokattu hieman kommenteissa ilmenneiden palautteiden mukaan.

Yllätyin positiivisesti A-lehtien uutiskirjeestä, joka ilmestyi jokin aika sitten. Yleensä ottaen HTML-muotoiset sähköpostit ovat aikamoista tagisekamelskaa, mutta tämä oli melkein täydellinen; siihen oli merkitty dokumentin tyyppimäärittely — ja huomatkaa — eriytetty tyyli täysin rakenteesta. Yhtään style-attribuuttia ei oltu laitettu body-elementin sisään. Kaikki tyylimääritykset oli sijoitettu sivun head-osioon, lukuun ottamatta muutamaa td bgcolor -ilmestystä. Vaikka jotkut sähköpostiohjelmat jättävät huomiotta head-osioon sijoitetun materiaalin, on tämä silti hyvä asia. Kuviin on kirjeessä linkattu absoluuttisten osoitteiden avulla, mitkä nekin jäävät joiltakin näkemättä.

Korjausehdotukset

Seuraavat parannusehdotukset on tarkoitettu yleisiksi rakentaviksi ehdotuksiksi muihin uutiskirjeisiin sekä HTML-sivun muodostamiseen eikä suoranaiseksi kritiikiksi esimerkkinä toimivaa uutiskirjettä kohtaan. Olen tummentanut allekirjoittaneen henkilön kuvan ja muuttanut nimen, sekä poistanut linkkien osoiteet. Olen edelleen tehnyt muutamia typografisia korjauksia, mutta ne eivät ole lainkaan välttämättömiä.

Kirje on sommiteltu taulukon avulla niin kuin odottaa sopii. Sen olen poistanut ja tehnyt taiton div-elementeillä. Lisäksi elementtien semanttisuuteen olen kiinnittänyt parempaa huomiota. Otsikot oli merkitty span class="ots" -merkinnällä ja kappaleet span class="leipis". Nämä korjasin oikeammiksi h2- ja p-elementeillä. Tekstin kursivointiin on käytetty merkintää span class="italic" minkä sijaan laitoin em. Myös kuvien sijaintiin liittyvät attribuutit halign="right" muutin nykyaikaiseksi: class="oikealle".

Kirjeen ensimmäisen tason otsikon sisään olen laittanut sivulla ensimmäisenä esiintyvän kuvan ja käyttänyt erästä kuvankorvausmenetelmää, vaikken ihan odota tämäntasoista toimintaa uutiskirjeissä. Teinpä kuitenkin. Punainen vaakapalkki ja pistekatkoviiva olivat alkuun kuvia, mutta ne voi tehdä myös tyylien avulla.

Laitoin (melkein) alkuperäisen ja korjatun uutiskirjeen näytille.

Lisäparannukset

Dokumentin rakennetta voisi edelleen parantaa käyttämällä muutamia CSS 2 -ominaisuuksia. Esimerkiksi linkkien perään sijoitetut »-merkinnät voisi tuottaa määreellä :after { content("…"); } ja muutamia class-attribuutteja voisi myöskin karsia. Olen kuitenkin sitä mieltä, että uutiskirjeen on syytä näkyä myös vanhemmilla selaimilla. Muokattu kirje näkyy nyt myös Internet Explorer 5:llä.

Kuten alussa mainitsin, tämä uutiskirje oli varsin positiivinen kokemus. Kyllä tässä usko palaa netin kehittymiseen.