CSS-ulkoasun kirjoittamisen oppiminen voi olla hankalaa, varsinkin jos olet perehtynyt taulukoiden käyttämiseen fancy-sivujen ulkoasujen luomiseen. Mutta vaikka HTML5 sallii taulukoita ulkoasulle, se ei ole hyvä idea.
Taulukot eivät ole käytettävissä
Aivan kuten hakukoneet, useimmat näytönlukijat lukevat verkkosivuja siinä järjestyksessä, että ne näkyvät HTML-muodossa, ja taulukot voivat olla hyvin vaikeita seulanlukijoiden jäsentää. Tämä johtuu siitä, että taulukon asettelun sisältö, lineaarisesti, ei aina ole järkevää lukemalla vasemmalta oikealle ja ylhäältä alas. Plus, sisäkkäisillä taulukoilla ja erilaisilla pöydän soluilla voi olla vaikea selvittää sivua.
Tämä johtuu siitä, että HTML5-määritys suosittelee layoutien taulukoita ja miksi HTML 4.01 estää sen. Käytettävissä olevat verkkosivut antavat enemmän ihmisille mahdollisuuden käyttää niitä ja ovat ammattimainen suunnittelija.
CSS: llä voit määritellä osion sivun vasemmalta puolelta, mutta asettaa sen viimeiseksi HTML-muotoon. Sitten näytönlukuohjelmat ja hakukoneet lukevat tärkeät osat (sisältö) ensin ja vähemmän tärkeät osat (navigointi) viimeiseksi.
Taulut ovat hankalia
Vaikka luot taulukon, jossa on web-editori, verkkosivut ovat edelleen hyvin monimutkaisia ja vaikeita ylläpitää. Yksinkertaisimmista verkkosivujen suunnittelusta lukuun ottamatta useimmat layouttaulukot edellyttävät paljon ja ominaisuuksia ja sisäkkäisiä taulukoita.
Pöydän rakentaminen voi olla helppoa, kun teet sen, mutta kun se on tehty, sinun on säilytettävä se. Kuusi kuukautta alaspäin ei välttämättä ole yhtä helppoa muistaa, miksi nimetit taulukot tai kuinka monta solua oli peräkkäin ja niin edelleen. Puhumattakaan, jos ylläpidät verkkosivuja tiimin jäsenenä, sinun on selitettävä kaikille osallistujille, miten taulukot toimivat tai odottaa heiltä lisäaikaa, kun he tarvitsevat muutoksia.
CSS voi olla myös monimutkainen, mutta se pitää esityksen erillään HTML: stä ja helpottaa sen pitämistä pitkällä aikavälillä. Lisäksi CSS-ulkoasun avulla voit kirjoittaa yhden CSS-tiedoston ja muotoilla kaikki sivut näin. Sitten, kun haluat muuttaa sivustosi ulkoasua, voit yksinkertaisesti vaihtaa yhden CSS-tiedoston ja koko sivusto muuttuu - ei enää mene sivun läpi kerrallaan päivittääksesi taulukoita päivittääksesi asettelua.
Taulukot ovat joustamattomia
Vaikka on mahdollista luoda taulukon ulkoasuja, joiden prosenttiosuus on leveys, ne ovat usein hitaampia lataamaan ja voivat muuttaa dramaattisesti ulkoasun ulkoasua. Mutta jos käytät taulukoille määritettyjä leveyksiä, pääset hyvin jäykkään ulkoasuun, joka ei näytä hyvältä näytöistä, jotka ovat eri kokoisia kuin omasi.
Joustavien ulkoasujen luominen, jotka näyttävät hyviltä monilta monitoreilta, selaimilta ja päätöslauselmilta, on suhteellisen helppoa. Itse asiassa CSS-mediakyselyissä voit luoda erillisiä malleja eri kokoisia näyttöjä varten.
Sisäkkäiset taulukot latautuvat hitaasti kuin CSS samalle mallille
Tavallisin tapa luoda kuvitteellisia taulukoita on "pesiä" pöytiä. Tämä tarkoittaa, että yksi (tai useampi) taulukko sijoitetaan toiseen. Mitä useampia sisäkkäisiä pöytiä on, sitä kauemmin verkkoselaimelle tehdään sivu.
Useimmissa tapauksissa taulukon ulkoasu käyttää enemmän merkkejä kuin CSS-mallin. Ja vähemmän merkkejä tarkoittaa vähemmän ladata.
Taulukot voivat vahingoittaa hakukoneoptimointia
Tavallisimmalla taulukon luomalla ulkoasu on sivun vasemmalla puolella oleva navigointipalkki ja oikealla oleva pää sisältö. Taulukoita käytettäessä tämä (yleensä) edellyttää, että ensimmäinen sisältö, joka näkyy HTML-muodossa, on vasemmanpuoleinen navigointipalkki. Hakukoneet luokittelevat sivut sisällön perusteella, ja monet moottorit määrittävät, että sivun yläosassa näkyvä sisältö on tärkeämpää kuin muu sisältö. Joten sivu, jossa vasemmalla on navigointi ensin, näyttää olevan sisällön, joka on vähemmän tärkeä kuin navigointia.
CSS: n avulla voit sijoittaa tärkeän sisällön ensin HTML: ään ja käyttää sitten CSS: ää määrittämään, mihin se pitäisi sijoittaa suunnitteluun. Tämä tarkoittaa sitä, että hakukoneet näkevät tärkeän sisällön ensin, vaikka muotoilu alentava sivulle.
Taulut Älä aina paina hyvin
Monet taulukkomallit eivät tulosta hyvin, koska ne ovat yksinkertaisesti liian suuria tulostimelle. Joten, jotta ne sopivat, selaimet leikata taulukot pois ja tulostaa osia alla aiheuttaen hyvin disjointed sivua. Joskus pääset sivuille, jotka näyttävät kunnolta, mutta koko oikea puoli puuttuu. Muut sivut tulostavat osioita eri levyille.
CSS: n avulla voit luoda erillisen tyylitiedoston vain sivun tulostusta varten.
Layout-taulukot ovat virheellisiä HTML 4.01: ssä
HTML 4 -spesifikaatiossa todetaan: "Taulukoita ei pidä käyttää pelkästään asiakirjan sisällön asetteluun, koska se voi aiheuttaa ongelmia tulostettaessa ei-visuaaliseen mediaan."
Joten, jos haluat kirjoittaa voimassa olevan HTML 4.01: n, et voi käyttää taulukoita ulkoasulle. Sinun tulisi käyttää vain taulukoita taulukkotietojen osalta, ja taulukkotietoja yleensä näyttää jotain, jota saatat näyttää taulukkolaskennassa tai mahdollisesti tietokannassa.
HTML5 on kuitenkin muuttanut sääntöjä, ja nyt layout-taulukoita, joita ei suositella, katsotaan nyt kelvollisiksi HTML-muotoiksi. HTML5-määrityksessä sanotaan: "Taulukoita ei tule käyttää ulkoasumateriaaleina." Tämä johtuu siitä, että näytön lukijoille on vaikea erottaa, kuten aiemmin mainittiin.
Sivustojen sijainnin ja ulkoasun CSS-sovelluksen käyttäminen on ainoa kelvollinen HTML 4.01 -tapa, jolla voit luoda malleja, joita käytit pöydän luomiseen ja HTML5 suosittelee myös tätä menetelmää.
Taittojen taulukot voivat vaikuttaa työn näkymiin
Kun yhä useammat uudet suunnittelijat oppivat HTML: n ja CSS: n, taitosi rakennuksen pöydän asettelut ovat yhä vähemmän kysyntää. Kyllä, on totta, että asiakkaat eivät yleensä kerro sinulle tarkkaa tekniikkaa, jota sinun on käytettävä verkkosivujen rakentamiseen, mutta he vaativat esimerkiksi seuraavia asioita:
- Käytettävissä olevat verkkosivut: monissa maissa ja yrityksissä valtakirjojen näyttäjät voivat katsoa malleja, joiden avulla näytön lukijat saavat saatavuuden yhä tärkeämmäksi päivittäin.
- Ylläpitettävät verkkosivut: mallit, joita he voivat ottaa heidän kanssaan, vaikka et aio säilyttää niitä tulevaisuudessa.
- Joustavat mallit: mallit, jotka toimivat useilla selaimilla, resoluutioilla ja laitteilla.
- Nopeasti ladattavia sivuja: nopeus on yhä tärkeämpää, jopa SEO.
- Tulostettava malli: sivut, jotka tulostuvat ilman erityisiä skriptejä tai ylimääräisiä sivuja.
Jos et pysty toimittamaan mitä asiakkaat pyytävät, he lopettavat sinut tuloksista mallien - ajan. Onko sinulla todella varaa antaa yrityksesi kärsiä, koska et ole valmis oppimaan ja sisällyttämään tekniikkaa, joka on ollut käytössä 1990-luvun loppupuolelta lähtien?
Moral: oppia käyttämään CSS: tä
CSS: tä voi olla vaikea oppia, mutta kaiken arvoinen on vaivan arvoista. Älä pidä taitojasi pysähtyneenä. Opi CSS ja rakenna web-sivuja, miten ne oli tarkoitus rakentaa - CSS: llä asettelua varten.
