CSS-design, hva er det?

Denne artikkelen vil gi deg svar på hva det vil si å lage et webdesign ved bruk av CSS, samt fordeler og ulemper. Vurderer du en ny nettside eller å redesigne ditt nettsted bør du vurdere et CSS-design.

Innledning
CSS er en forkortelse for Cascading Style Sheet, på norsk som oftest kalt «stilsett».

I samme åndedrag som CSS-design vil du ofte høre betegnelsen XHTML også. Dette er en strengere og renere standard for HTML, og vil erstatte HTML-standarden. XHTML er en forkortelse for EXtensible HyperText Markup Language.

Webdesign ved bruk av CSS handler kort fortalt om at man benytter seg av webstandarder og at man holder innhold og design adskilt. All informasjon om design lagres i en egen CSS-fil. Det vil si at man ved å forandre informasjonen i CSS-filen kan redesigne et helt nettsted. For å se eksempler på hvor effektivt dette er anbefales css Zen Garden.

Oversikt: Hvorfor CSS?

Dine sider lastes raskere

Tabell-design består av mye mer HTML-kode enn et CSS-designet nettsted. For hver gang du klikker deg til en ny side må informasjonen om designen lastes på nytt. I tillegg brukes ofte blanke gif-bilder for å bestemme bredde/høyde og lage avstand i et tabelldesign. Siden CSS-design holder innhold og design adskilt blir det mye mindre HTML-kode, CSS-filen lastes bare en gang per session, og lagres lokalt i brukerens cache. All informasjon om bredde/høyde og avstand defineres i CSS-filen i et CSS-design, man trenger ikke bruke gif-bilder.

«Sannhetens øyeblikk» (kundens/den besøkendes første møte med bedriften/nettsiden) gjelder også på internett, en nettside som det tar lang tid å laste ned kan gi assosiasjoner om at også bedriften som har nettsiden er treg. Vi mennesker har også mindre tid enn før, en nettside som bruker lang tid på å vises vil den besøkende forlate. Siden nettsiden vil vises raskere, kan CSS-design gi deg noen ekstra verdifulle sekunder på å fange den besøkendes interesse.

Båndbredde er som oftest heller ikke gratis, mange leverandører av webhotell har begrensninger i hvor mye båndbredde ditt nettsted kan bruke. Siden CSS-design medfører mindre HTML-kode vil dette også kunne medføre reduserte kostnader.

Redesign blir billigere og mer effektivt

Som nevnt innledningsvis er innhold og design adskilt når man lager et CSS-design. På denne måten kan man enkelt redesigne et helt nettsted bare ved å forandre kodene i CSS-filen. I tillegg er det enklere å ha et visuelt samstemt design på et stort nettsted.

Nettsidene blir mer tilgjengelige

Foruten at søkemotorer vil ha lettere for å finne relevant innhold, vil også handikappede (svaksynte eller brukere med spesielle nettlesere for blinde) «trives» bedre på en CSS-designet nettside. Dette fordi den følger standarder, noe som gjør det enklere for de spesielle nettleserne å lese websiden. En annen ting som gjør den mer tilgjengelig er at man tillater at brukeren selv kan forstørre/forminske skriften, du ønsker vel ikke å «jage bort» dine besøkende bare fordi de har dårlig syn eller har glemt brillene sine? Mange designere låser i dag fontstørrelsen i piksler noe som gjør at fontstørrelsen ikke kan forandres, dette fordi at de ikke vil at de besøkende skal endre utseendet. Å tillate at den besøkende kan forandre fontstørrelsen vil ikke den vanlige besøkende merke noe til, men det kan ha betydning for svaksynte. Still deg selv spørsmålet, hvem er nettstedet laget for? De besøkende, eller designeren?

Nettsider designet i CSS blir også lettere tilgjengelig for flere typer nettlesere, f.eks. PDA og mobiltelefon. I fremtiden vil vi kanskje surfe mye mer med mobil enn nå, et tabell-design vil gjøre disse nettsiden mindre tilgjengelige.

For å demonstrere dette vil jeg at du skal se på en tabell-designet og en CSS-designet webside i Opera sin nettleser. Trykk Ctrl+G for å slå av CSS og G for å slå av grafikk. Forestill deg så at du surfer med en mobil eller PDA med en oppløsning på 3-400 piksler og ikke din pc-skjerm på kanskje 1024×768. Hvilken av nettsidene tror du vil se best ut?

Bedre resultat i søkemotorer

Mye bruk av tabeller forvirrer søkemotorenes roboter, de kan rett og slett få problemer med å skille innhold fra kode. Søkemotorenes roboter starter å lese på toppen av siden, og de ønsker å danne seg et bilde av relevansen for nettsiden så hurtig som mulig. Siden CSS-design betyr mye mindre kode vil dette hjelpe søkemotorene til å finne relevant innhold, og sannsynligvis din nettside til en bedre rangering. Du finner mer informasjon om hvordan oppnå bedre resultater i søkemotorer i artiklene om søkemotoroptimalisering.

Meningen med tabeller

Tabeller finnes i HTML på grunn av en ting,- listing av tabulært innhold, f.eks. en telefonliste. Tabeller kan brukes til å få til helt nøyaktige design, men det er flere ulemper enn fordeler ved dette.

Årsaken til at man begynte å designe ved hjelp av tabeller var at koden border=»0″ gjorde dette mulig. Fremdeles designes de fleste websider på denne gammeldagse måten.

Problemer med tabeller

Innhold og design blir mikset noe som gjør at redesign blir svært arbeidskrevende (og sannsynligvis dyrt). Design og innhold skal være adskilt. Det vil også være vanskeligere å opprettholde en visuell samstemthet på et stort nettsted. I tillegg vil tabelldesign være mindre tilgjengelig for personer med ulike typer handikapp (eks. svaksynte, spesielle nettlesere for blinde), samt PDA’er og mobiltelefoner. Et tabelldesign medfører unødvendig stor filstørrelse, og et tabelldesign må lastes ned for hver side de besøkende besøker.

Ulemper med CSS-design

Det er også enkelte ulemper med CSS-design. Besøkende med en gammel nettleser (f.eks. Internet Explorer 4 og i enkelte tilfeller 5.5) kan oppleve at CSS-designede nettsider ikke vises korrekt. Men bruker man en så gammel nettleser som IE 4 vil man også ha andre mer seriøse problem,- en så gammel nettleser er et sikkerhetsproblem.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

Du kan bruke disse HTML-kodene og -egenskapene: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>