Hae pomosi paikalle

Onko yleisössä "pukuja" ? Ovatko pomosi täällä, mutta eri paikassa? Hae heidät tänne. He ovat niitä ihmisiä, joiden tarvitsee tietää, miten web-standardit voivat säästää firmasi rahoja.

Yleistä: Mitä minä siitä saan?

Kerromme sinulle hieman työtavasta, jolla

• teet sivuistasi nopeammat
• lasket ylläpitokustannuksia
• teet päivityksistä tehokkaampia ja halvempia
• kykenet ylläpitämään visuaalisen ilmeen helposti koko sivustolla
• saat parempia hakukonetuloksia
• teet sivustostasi käytettävämmän kaikille käyttäjäryhmille ja -ohjelmille
• saat kilpailuedun (eli varman työpaikan) kun suurempi ja suurempi osa maailmasta siirtyy käyttämään web-standardeja.

Kerromme myös sivujen suunnittelusta ja tyylisivujen (Cascading Style Sheets = CSS) käytöstä, mikä vaatii hiukan erilaista ajattelutapaa ja merkkauskieltä kuin mihin olet ehkä tottunut.

Killer Web Sites: sisäkkäisiä taulukoita ja läpinäkyviä GIF-kuvia

Aluksi Internet oli pääasiassa väline tiedon jakamiseen akateemikoille, tutkijoille ja puolustusvoimille. Rahoituspuolen visionääreillä ei kuitenkaan mennyt kauaa ymmärtää, että tämä uusi väline oli loistava tapa myydä kaikkea koiranruoasta käytettyihin autoihin ja streamaaviin urheiluselostuksiin asti.

Kuitenkin, kuten mikä tahansa media lapsenkengissään, Internetin alkuvaiheet olivat esteettisesti ‘karua’ katseltavaa (eivätkä siten kovinkaan kiinnostavia kuluttajalle) kunnes David Siegel julkaisi suunnannäyttäjäkirjansa, joka tarjosi näppäriä tapoja kiertää olemassa olevien selainten rajoituksia ja W3C-määrityksiä. Oltiin noin vuodessa 1997 (ja puhumme siis Netscapen versioista 2 ja 3!).

Nämä kikka kolmoset olivat niin näppäriä, että ne ovat edelleen käytetyin tapa web-sivustojen suunnittelussa.

Ongelmat taulukoiden käytössä:

• ulkoasuohjeet ja sisältö sekoittuvat
  • Tämä tekee sivustoista tarpeettoman suuria, kun käyttäjät joutuvat latamaan ulkoasun uudelleen jokaisella sivulla, jolla käyvät.
  • Kaista ei ole ilmaista.
• Sivuston uudelleensuunnittelusta ja sisällön päivityksestä tulee erittäin työlästä (ja kallista).
• Tällöin on erittäin vaikeata (ja kallista) ylläpitää visuaalista ilmettä koko sivustolla.
• Taulukkopohjaiset sivut ovat myös vaikeammin käytettäviä erikoisryhmille tai kannettavien päätelaitteiden käyttäjille.

Pelastus on tarjolla

Nykyaikaiset selaimet näyttävät web-standardit paljon paremmin, emmekä enää tarvitse noita ikiaikaisia keinoja.

Sisäkkäisten taulukoiden ja läpinäyvien GIF-kuvien täyttämien solujen sijasta voimme käyttää yksinkertaisempaa merkkauskieltä ja tyylitiedostoja luodaksemme kauniita sivustoja, jotka latautuvat nopeammin, ovat helpompia ylläpitää ja päivittää sekä käytettävempiä kaikille käyttäjille.

Ratkaisu: CSS ja rakenteellinen merkkaus

Käyttämällä rakenteellista merkkausta HTML-dokumenteissamme tyylitiedostoja (Cascading Style Sheets) ulkoasua varten, voimme pitää sivujen sisällön erossa kaikista ulkoasumääreistä.

Tällä ratkaisulla on useita etuja verrattuna taulukoiden käyttämiseen...

Ulkoasumuutokset ovat helpompia ja halvempia

Jättämällä ulkoasumerkkauksen pois sivuiltasi, uusien ulkoasujen suunnittelu on paljon helpompaa (ja paljon halvempaa). Vaihtaaksesi sivuston ulkoasua, sinun tarvitsee vain vaihtaa käytettävää tyylitiedostoa; sinun ei tarvitse muokata sivujasi lainkaan.

Katsopa esimerkiksi CSS Zen Garden:ia, tai tyylitiedoston vaihtajia Eric Meyer:in sivustolla. Lisää tietoa löydät vaikkapa Paul Sowdenin sivulta Alternative Style.

Kaista ei ole ilmaista

Web-standardien käyttäminen pienentää tiedostokokoa sivustollasi, kun käyttäjien ei enää tarvitse ladata ulkoasutietoja uudelleen jokaisella sivulla jolla käyvät. Tyylitiedostot, jotka siis hallitsevat ulkoasua, jäävät käyttäjien selainten välimuistiin talteen.

Pienempi tiedostokoko tarkoittaa lyhyempiä latausaikoja ja halvempia ylläpitokustannuksia.

Hei, nämä sivuthan näyttävät samanlaisilta!

Web-standardien käyttäminen tekee visuaalisen ilmeen säilyttämisestä helppoa koko sivustollasi. Koska sivut käyttävät samaa tyylitiedostoa ulkoasuohjeenaan, kaikki sivut näyttävät samanlaisilta.

Tämä vahvistaa brandiasi ja tekee sivustostasi käytettävämmän.

Kirjoita kerran, käytä joka puolella, kaikille

Käyttämällä web-standardeja teet sivustostasi helpommin käytettävän käyttäjille, joilla on erikoistarpeita tai kannettavien päätelaitteiden käyttäjille.

Käyttäjät, jotka käyttävät ruudunlukijoita (tai hitaiden yhteyksien päässä olevat) pääsevät käsiksi sisältöön helpommin, kahlaamatta läpi roppakaupalla taulukon soluja tai läpinäkyviä kuvia.

Toisinsanoen, sisällön erottaminen ulkoasusta tekee sisällöstäsi laiteriippumatonta.

Google on sokea

Käytettävyydestä puhuttaessa, merkkauskielen vähentäminen ja otsikko-tägien oikeaoppinen käyttö parantaa sivustosi mahdollisuuksia hakukoneiden tuloksissa.

Kun koodin määrä sisältöön verrattuna pienenee, otsikkotägit sisältävät avainsanoja ja otsikkokuvat korvataan ihan oikealla tekstillä, sivustosi nousee kohisten hakukoneiden listoilla.

Voit edelleen käyttää taulukoita, jos tarvitset, mutta älä käytä liikaa

Tällä tavalla voit antaa käyttäjille (ja pomoillesi), jotka ovat päättäneet käyttää 4-version selaimia loppuun asti, hyväksyttävän näköisen version siitä, mitä muu maailma näkee kunnollisena.

Melko miellyttävän näköinen taulukko

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.				Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
		Suscipit lobortis nisl ut aliquip ex ea commodo consequat.				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. • At vero eros et accumsan et iusto odio dignissim qui blandit • Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.				Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Epsum factorial non deposit quid pro quo hic escorol. • Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
		Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Katsotaanpa pinnan alle

		Tämän voisi tehdä yksinkertaisemminkin.				Arvaapa kuinka paljon merkkauskieltä vaaditaan tähän pikku-taulukkoon? 13.7k. Taulukossa on 17 riviä ja 9 saraketta. Ja mainitsinko jo läpinäkyvät GIF:it?
		Tässä taulukossa on aivan liian paljon soluja ja kuvia.				Ja kaikki pistereunat on tehty background-määreellä solujen sisällä, mikä ei mene läpi validaattorista. • Sisäkkäisiä taulukoita? Miksi? • Listaa varten? Vitsailetko?
		Tämä kaikki saataisiin aikaan 8:lla solulla 4:llä CSS-tyylillä.				Oikeasti. 8 solua ja 4 CSS-tyyliä, siinä kaikki. • Ei kai, toinenkin taulukko leikkii listaa. • Mikset vain merkkaisi listoja listoiksi ja anna tyylisivun hoitaa loput.
		Tarvitset yhden <table>-säännön , yhden <td>:lle, yhden <ul>:lle ja yhden <li>:ta varten.				Siinä kaikki. Kun olet luonut ne, olet selvillä vesillä. • Paljon parempi siitä tulee kuin 8:ta solusta, jotka leikkivät listaa. Ja käytettävämpikin. • Loistavaa! Viimeinen kohta huijauslistalla.

Tässä koodi ylläolevaa taulukkoa varten:

table { margin: 3px; padding: 2px; border: solid 2px blue }

td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver }

Paljon parempi

Paljon parempi	Arvaapa, kuinka paljon tämän taulukon merkkauskieli painaa? 2.1k. Taulukossa on 4 riviä ja 2 saraketta. Eikä ainuttakaan läpinäkyvää GIF:iä.
Aivan oikein	Ja kaikki pisteytetyt reunat on tehty tyylitiedostolla, sääntöjen mukaan. Tämä on nyt ihan oikea lista Niin kuin pitäiskin
Tämä kaikki on tehty 8:lla solulla ja 4:llä tyylisäännöllä	Oikeasti. 8 solua ja 4 sääntöä, siinä kaikki. Eläköön listamerkit Mikset merkkaisi listoja listoiksi ja anna tyylisivun huolehtia lopusta?
Tarvitset <table>-säännön, säännön <td>:lle, yhden <ul>:lle ja yhden <li>:lle.	Siinä kaikki. Kun olet luonut ne, olet selvillä vesillä. Rakastan listoja! Loistavaa! Ei enää huijauksia!

Tässä CSS-koodi, jolla pääset eroon turhasta merkkauksesta:

table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }

td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia }

ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em }

li { margin-bottom: 10px }

Selainriippumatonta designia

Käytä marginaaleja ja padding-asetuksia ylimääräisten solujen ja läpinäkyvien spacer-kuvien sijaan.

Käytä linkitettyjä tyylitiedostoja ja @import -käskyä. Link-käsky vanhemmille selaimille, @import taas uudemmille.

<link href="perus.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(moderni.css) screen;
--></style>

Esimerkkejä tosielämästä:

• Santa Cruz Montessori School
• k10k
• Fox Searchlight Pictures

Eikä tässä vielä kaikki;

Lisätietoja selainriippumattomasta sivusuunnittelusta saat kirjan Eric Meyer on CSS ensimmäisestä luvusta ja paljon tietoa löytyy myös Jeffrey Zeldmanin sivustolta Designing with Web Standards.

CSS-taitto: tulevaisuus on täällä

Suurimmalla osalla netin käyttäjistä on jo selaimet, jotka tukevat tyyylitiedostoja hyvin. Melkein kaikilla selaimilla on kuitenkin omia omituisuuksiaan, mutta nekin voi kiertää helposti.

Tyylitiedoston koodaaminen on helppoa. Jopa minunkaltaiselleni tyypille, jonka mielestä JavaScript näyttää käsittämättömälle.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Jokaisella CSS-säännöllä on selektori ja deklaraatio. Deklaraatio koostuu ominaisuudesta ja arvosta. Ominaisuudet, jotka kirjoitettaisiin kahdella sanalla yhdistetään väliviivalla.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue}

#footer {color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0}

Rakenteellinen merkkaus; koodaa, mitä tarkoitat ja tarkoita sitä, mitä koodaat.

Vaikkakin tyylitiedoston kirjoittaminen on yksinkertaista, CSS-taitto vaatii hieman erilaista ajattelua kuin mihin olemme tottuneet.

Sen sijaan, että ajattelisimme tyyliin " tämä menee tänne ja tuo tuonne" kun työskentelemme sivumme kanssa, meidän pitäisi paneutua siihen, minkälaista informaatiota sivullemme haluamme ja miettiä tämän informaation rakennetta.

Tärkein otsikko saa <h1>-tägin, alaotsikot merkataan <h2>-tägeillä ja kappaleet merkataan kappaletägillä.

Tämä tyyli tunnetaan nimellä "rakenteellinen" tai "semanttinen" merkkaus.

Sen sijaan, että laittaisin sisältösi taulukon soluihin, kääritkin sen div -elementin sisään. Anna div -elementeillesi id- tai class-määrite, joka kuvaa niiden sisältöä ja/tai funktiota ennemin kuin niiden ulkonäköä.

Vältä <b>ed and <br>eakfast- merkkausta

Mietipä hetki miksi haluat jonkin elementin näyttävän siltä kuin haluat; mitä se tarkoittaa? Merkkauksesi voi ja sen pitäisi välittää sivun tarkoitus jopa jollekin, joka ei edes näe sivuasi. Semanttinen merkkaus tekee sivuistasi käytettävämpiä kaikille, myös hakukoneille.

Kun kursivoit jotakin, teetkö niin koska halua korostaa (emphasize) sitä, <em>, vai koska se on kirjan nimi, <cite>?

Jos jokin asia on lihavoitua, se kannattaa merkitä koodiin <strong>-tägillä.

Jos haluat rivinvaihdon elementin jälkeen, olisi luultavasti parasta merkata se otsikkoelementiksi. Jos se ei ole otsikko, onko se osa class-luokkaa, joka toistuu läpi sivustosi? Jos näin on, käytä CSS-koodia <br>-tägin sijaan.

.foo {display:block}

Jos kaipaat lisätietoja, Tantek Çelikin kirja Bed and BReakfast markup (B&BR) auttanee.

Mitä navigointipalkit ovat?

Mietipä: navigointipalkkisi on itseasiassa vain luokittelematon lista linkkejä.

Sijoitetaanpa ne <ul> -tägin sisään.

• linkki 1
• linkki 2
• linkki 3
• linkki 4
• linkki 5

Navigaatio vaakatasoon

CSS:ää käyttäen voimme määrätä, miten nämä listat näytetään.

Käyttämällä käskyä display:inline voimme helposti luoda horisontaalisen navigaation.

Tässä koodi tätä vaakatasossa olevaa navigaatiota varten:

#nav1{
margin-top: 1em;
margin-bottom: 0.5em;
}

#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}

#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}

#nav1 li:first-child {
border: none;
}

Pystypalkit navigaatiossa

Alla koodi tätä navia varten:

#nav2 {
background-color: silver;
border: solid 1px gray;
width: 8em
}

#nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}

#nav2 li {
margin: 0;
padding: 0.25em 0.5em 0.25em 1em;
border-top: 1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li {
width: auto;
}

#nav2 li:first-child {
border: none
}

Lisätietoja löydät mm. Mark Newhouse:n artikkelista, Taming lists, A List Apart-sivustolla, ja "Styling lists" CSS-Discuss wikistä.

Asioita, jotka taulukot tekevät paremmin

On joitakin asioita, joissa taulukot ovat parempia kuin CSS.

Oletetaanpa esimerkiksi että sinulla on musta sivunavigointi, jonka haluat venyvän koko sivun kokoiseksi. Taulukoilla tämä on helppoa; annat vain <td>:lle mustan taustan.

Tämän voi tehdä myös CSS:llä, mutta se vaatii ajatustavan muutosta.

Jos annamme div:lle mustan taustan, mustaa riittää vain siihen asti, kun navigaatio loppuu. Useimmilla sivuilla sisältö on pidempi kuin navigointipalkki, joten tämä ei toimi.

Voisimme myös laittaa kokomustan GIF-kuvan sisältö-div:iin ja asettaa tämän div:in left_padding-arvon tarpeeksi suureksi, mutta jos navigointipalkki on pidempi kuin sivun sisältö, tämäkään ei toimi.

Tietysti voisimme laittaa GIF-kuvan myös <body>:n taustakuvaksi, mikä toimisi, jos emme halua käyttää <body>:lle mitään muuta taustakuvaa.

Tai voisimme laittaa sisällön omaan 'kääre'-div:iinsä ja toistaa taustakuvaa vain tässä div:issä. Tämä tapa kuitenkin vaatisi rakenteellisen merkkauksen unohtamista.

Ja pitää muistaa, että taustakuvat eivät toimi, jos haluat navigointipalkkisi olevan skaalautuva.

Kuten sanottua, on joitain asioita, joissa taulukon käyttö on perusteltua. Kannattaa kuitenkin kysyä itseltäsi, onko kaikki taulukoiden aiheuttama vaiva haluamasi layoutin arvoista.

Taulukkosekoilujen muuntaminen standardoiduksi koodiksi: suurempi kokonaisuus

Ensimmäiseksi sinun tulee päättää siirtymästrategia. Aiotko muuttaa koko sivuston kerralla, vai aiotko tehdä sen osio kerrallaan?

Määritä sivuston osiot ja niiltä sivut, jotka hyötyvät eniten muunnoksesta. Kotisivut, uusien tuotteiden mainokset ja vastaavat ovat luonnollisia aloituspaikkoja.

Määritä sivustosi informaatiokokonaisuudet:

• Tuotetiedot
• Hintatiedot
• Yritystiedot
• Portfolio
• Tarjottavat palvelut
• Sijoittajatiedot
• Ostoskori
• Keskustelufoorumit
• ja niin edelleen

Leikellään sivut palasiksi

Kun olet määritellyt minkä tyyppistä tietoa sivustollasi on, on aika analysoida olemassa olevien sivujen loogiset sisältökokonaisuudet.

• Päänavigaatio
• Alanavigaatio
• Aloitus- ja lopetuspalkit
• Sisältö
• Sisältöä tukeva tieto
• Muut

Tutki, onko taulukkotaitossa sisäkkäisiä taulukoita tai tyhjiä spacer- tai reunasoluja.(Nämä korvataan div-tägeillä tai yksinkertaisemmalla taulukkorakenteella.)

Tarkastele merkkaustasi

Kun olet analysoinut sivujesi rakenteen, on aika ottaa vertauskuvallinen huppu silmiltä ja tarkastella olemassa olevaa koodia miettien samalla, miten voit muuttaa esittävän HTML:n rakenteelliseksi merkkaukseksi.

• Kaiken kauniin nimissä, poista kaikki <font> -tägit ja spacer GIF:it!
• Poista myös kaikki <b> ja <br> -merkkaukset.
• Poista kaikki taulukoiden ulkoasuun liittyvät tägit (bgcolor, background, ja vastaavat).
• Korvaa kaikki pelkästään ulkoasuun liittyvä CSS -koodi (kuten esimerkiksi <span class="header">) sopivalla rakenteellisella versiolla. (Tantek Çelik kertoo asiasta yksityiskohtaisemmin viestissään A Touch of Class.)

Korvaa ulkoasutägit rakenteellisilla tägeillä

Voit toki käyttää etsi-ja-korvaa-toimintoa, mutta helpoin tapa saattaa olla vain katsoa sivuasi selaimella ja kopioimalla sieltä kaikki teksti HTML-editoriisi.

Ajattele dokumenttisi rakennetta! Pelkästään <b> -tägien korvaaminen <strong> -tägeillä ei riitä.

Mikä on tärkein otsikko? Merkitse se <h1> -tägillä. Merkitse alaotsikot <h2> -tägeillä ja niin edelleen. Merkitse kappaleet <p> -tägeillä. Tee navigaatiostasi vapaa lista.

Valitse DOCTYPE ja käytä sitä. (Me suosittelemme XHTML transitional:ia, ellet ole tosi guru, jolloin voit kokeilla XHTML strict:iä.)

Jaa sivusi loogisiin div:eihin

Laita sivustosi päänavigaatio div:iin ja anna sen id:ksi mainnav; laita alatason navigaatiosi div:in sisään ja anna sille id tai class subnav, laita sivun alaosan footer diviin <div id="footer">, ja kääri sisältösi <div id="content">:iin.

Tämä ei näytä ihmeelliseltä nyt, mutta odotapa, kun alamme lisäämään sääntöjä tyylitiedostoon.

On aika aloittaa CSS:n luominen

Aluksi anna kaikille div:eille reunus. Esimerkiksi div {border: 1px dotted gray; padding: .5em} Tämä auttaa sinua näkemään mistä ne alkavata ja mihin ne päättyvät. Lisäksi huomaat nopeasti sisäkkäiset osat.

Kirjoita elementtien CSS ensin (esim. <html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, jne.)

Käytä kontekstuaalisia tai alenevia selektoreita mahdollisimman paljon. Näin pidät koodisi siistimpänä. Esimerkiksi #subnav li {border: 1px solid black; padding: .5em; display: inline} vaikuttaa ainoastaan listoihin, jotka ovat subnav-div:in sisällä.

Testaa sivuasi mahdollisimman monessa selaimessa ja pyydä kavereitasi kokeilemaan sitä omilla koneillaan.

Esimerkkejä CSS-taittoa käyttävistä sivustoista

• CSS Zen Garden
• Adobe Studio
• Wired News
• ESPN
• Quark
• Inc.com
• PGA Open Championship
• phish.com
• CSS Edge

Lue lisää

Emme tietenkään voi tällä sivustolla kattaa kaikkea sitä, mitä sinun tarvitsee tietää. Mutta alla olevat kirjat auttavat sinua tekemään sivuistasi tehokkaampia, kauniimpia ja nopeampia.

• Eric Meyer on CSS: Mastering the Language of Web Design; Eric Meyer; New Riders; 2002
• Designing with Web Standards; Jeffrey Zeldman; New Riders; 2003
• Cascading Style Sheets: Separating Content fom Presentation; Owen Briggs, Steven Champeon, Eric Costello, ja Matt Patterson; glasshaus; 2002
• SAMS Teach Yourself CSS in 24 Hours; Kynn Bartlett; SAMS; 2002
• Cascading Style Sheets: Designing for the Web; Hakon Wium Lee and Bert Bos; Addison-Wesley Pub Co; 1999
• Cascading Style Sheets: The Definitive Guide; Eric Meyer; O'Reilly & Associates; 2000
• CSS-tyylit; Jukka K.Korpela; Docendo Finland Oy; 2003 - Suomentajan lisäys

Paperia? Kuinka vanhanaikaista! eli Nettilähteet

CSS-Discuss

• postituslista: Erittäin aktiivinen ja erittäin avuliaita ihmisiä.
• Wiki: "Wiki toimii monien muiden asioiden lisäksi myös kollektiivisena muistina listan tilaajille." Haluatko tuottaa Windowsin Internet Explorerille jotain, mitä se ymmärtää, mutta tehdä muille selaimille 'kunnon kamaa'? Opit sen ja paljon muuta täältä.
• Arkistot: Onko sinulla CSS-ongelma, johon olet juuttunut? Älä hätäile, joku muu on luultavasti tapellut saman ongelman kanssa ja saanut siihen apua. Täältä löydät vastaukset.

zeldman.com The Daily Report: Näkemyksellistä, ajatuksia herättävää ja hyvin kirjoitettua sisältöä ja paikkansa pitäviä linkkejä

A List Apart Ihmisille, jotka tekevät nettisaitteja

• Taming lists, Mark Newhouse. Ohittamatonta tietoa, joka auttaa sinua koodaamaan semanttisesti.
• CSS: Going to Print, Eric Meyer. Sinun ei enää koskaan tarvitse tehdä erillistä 'tulostettavaa' versiota.
• Alternative Style: Working With Alternate Style Sheets, Paul Sowden. Anna kävijöiden päättää, miltä sivusi näyttävät.
• Using XHTML and CSS for an effective Search Engine Optimization Campaign, Brandon Olejniczak. Rakenteellinen merkkaus antaa parempia tuloksia myös hakukoneissa.

The Web Standards project Loistavaa porukkaa.

CSS: A guide for the unglued Mahtava linkkisivu.

CSS Layout Techniques: for Fun and Profit Valmiita layouteja projekteihisi, tekijänä Eric Costello. Myös tietoa ja oppaita.

Real World Style CSS layouteja, vinkkejä, kikkoja ja tekniikoita Mark Newhouselta.

DevEdge Netscape Sidebar Tabs Erittäin näppäriä likkejä W3C spekseihin CSS:lle, HTML:lle ja DOM:ille.

New York Public Library Style Guide Todella toimiva tietolähde XHTML:n ja CSS:n perusteista.

The Business Benefits of Web Standards Hyviä uutisia pukumiehille. Web-standardien raamattu muodossa, jota myyntimiehetkin arvostavat.

Kiitos. Kysymyksiä?