Derfor skal du bruge CSS til layout

Af Lasse Gejl - nam nam design webbureau

En kollega spurgte mig forleden hvorfor jeg sværger til webdesign med Cascading Style Sheets (CSS) fremfor layout baseret på tabeller. Hun sagde sådan cirka;

"Jeg lægger mest vægt på det visuelle layout, og CSS er derfor ikke anvendeligt og/eller nødvendigt. Hvorfor anvende CSS til layout? Hvad er der galt med tabeller? Hvad får kunderne ud af et CSS webdesign?"

Mit vage svar afslørede manglende evne til at formidle en relativt teknisk problemstilling til et anvendeligt konkret svar. Jeg prøver derfor igen. Denne artikel vil tage dig igennem fordelene ved at anvende CSS layout og valideret HTML.

Adskil indhold og layout med CSS
I internettets spæde barndom læste browsere kun tekst. Efterhånden blev det muligt at se grafik, og tabeller fik en helt ny rolle. For at præsentere grafik og tekst i et flot layout anvendte man tabeller indlejret i tabeller indlejret i tabeller osv. Tabeller er til tabulære data og ikke til selve opbygningen af en hjemmeside.

Med introduktionen af CSS skulle man tro at webdesignere ville droppe tabellerne, og styre deres layout ved hjælp af CSS. Men langt de fleste anvender stadig tabeller til selve opbygningen, og kun CSS til styring af tekst - herunder navigation, links, overskrifter etc. Ideen med CSS er at adskille indhold og layout. Dvs. selve HTML koden skal kun bestå af "indhold", mens layout, tekstformatering osv. findes i et eller flere eksterne CSS dokumenter.

Hvorfor anvende CSS til styring af layout?
Et 100 % CSS layout giver både webdesigner, webmaster og hjemmesidebruger en række fordele. Her er de bedste:

• Søgemaskinevenlighed
• Fleksibilitet
• Tilgængelighed
• Hastighed

Søgemaskinerne bliver gladere for din hjemmeside, fordi dit HTML dokument er renset for overskudskode og valideret efter de officielle web standarder. Overskrifter, menu/navigation osv. skal være formateret korrekt, hvilket giver bedre, hurtigere og mere omfattende indeksering i søgemaskinerne.

Søgemaskinerne læser ikke grafik, Javascript osv. De læser HTML tekst, og jo mere der er, jo mere kan søgemaskinerne indeksere. Rene Javascript menuer hindrer indeksering af undersider, og skal således erstattes med en CSS styret menu, der giver sigende tekstlinks til undersiderne.

Fleksibilitet
Enhver webdesigner kender sikkert følelsen af panik, når kunden beder om en ændring i dit perfekte tabellayout. Forestil dig problemerne med at flytte navigationen fra venstre til højre i et tabelbaseret layout. Arbejdet ville være enormt!  Hvis layoutet derimod er styret af CSS, ville det blot kræve et par ændringer af attributterne "position" og "float". Og ændringen ville gælde for samtlige sider, hvor Style Sheetet er tilknyttet.

Derudover vil en mindre ændring i menuens udseende, farven på links, overskriftens skrifttype etc. kunne laves på få minutter, hvis hjemmesidens layout er styret af et eksternt Style Sheet. Fordelene er indlysende.

Tilgængelighed
CSS gør det langt nemmere at lave tilgængelige hjemmesider. Dvs. hjemmesider der kan anvendes af stort set alle. Fx brugere der anvender screen readers, håndholdte computere, mobiltelefoner etc.
Screen readers kan ikke læse en tabelbaseret hjemmeside korrekt, fordi den ikke ved hvad der skal vises først, om den skal springe det over, og i så fald hvordan den kommer tilbage. Forestil dig hvor forvirrende en dybt indlejret tabel er for en screen reader der læser lineært.
CSS giver mulighed for at placere indholdet efter væsentlighed, og lave usynlige elementer med short-cuts der kun vises til udvalgte medier fx screen readers.

Hastighed
CSS baseret layout giver hurtigere hjemmesider. HTML dokumenterne er renset for layout kode, og dokumentet fylder således væsentlig mindre. Browseren cacher læste sider og læste Style Sheets. Det vil sige at et eksternt Style Sheet kun skal hentes én gang, men anvendes på samtlige sider. I et tabelbaseret layout skal browseren hente layoutet på hver eneste side, da det er indlejret i selve HTML koden.

Hvad med Web Standarder?
Til et 100 % CSS styret layout hører naturligvis også Web Standarder. Både HTML og CSS kode skal være valideret efter de officielle standarder fra World Wide Web Consortium. Web Standarder gør hjemmesider tilgængelige for flest mulige brugere og sikrer langtidsholdbarhed, idet de fortsat vil fungere korrekt i takt med at traditionelle browsere og andre enheder udvikler sig. Anvendelse af Web Standarder simplificerer og mindsker omkostningerne til udvikling og editering af hjemmesider.

Stadig ikke overbevist?
Mange webdesignere er af den overbevisning at hjemmesider styret med CSS ikke kan være visuelt attraktive - det er ikke korrekt. Jeg nævner i flæng: Badboy Media Design, Round Two, Web.Burza, 38one, joshuaink.com osv. Og derudover naturligvis klassikeren CSS Zen Garden, der med en enkelt HTML fil og x-antal Style Sheets tydeligt viser mulighederne med CSS.

CSS webdesign kan og bør efter min mening anvendes på alle hjemmesider. Der er naturligvis forskel på graden af anvendelig, idet forskellige hjemmesider har forskellige behov. Som udgangspunkt vil langt de fleste hjemmesider dog få del i ovenstående fordele.

Skamløs reklame
Jeg sælger brugervenlige og appetitvækkende webløsninger til små og mellemstore virksomheder, og er bl.a. leveringsdygtig i håndlavet CSS-baseret søgemaskinevenligt webdesign og søgemaskineoptimering. Ring eller skriv og lad os få en uforpligtende snak om hvordan jeg kan hjælpe. Du finder mere info på min hjemmeside: www.gejl.net