Design af browser-uafhængige websider

I midten af 1990'erne var mantraet "nye browsere - nye muligheder - nyt design". For webdesigneren var det en forretningsmæssigt fordelagtig situation, for det krævede et nyt design for hver browser, og det var jo fast arbejde. For brugerne betød det, at man konstant havde behov for den nyeste browser, for de nye sites var jo "Optimeret til NetXplorer 3.45", og de andre browsere blev afvist:

- ofte uden anden grund end webdesignerens manglende viden om forskellene.

Dot-com-boblen brast, pengene svandt ind, og webdesignere skulle til at arbejde mere for deres penge. Da det er dårlig forretning at arbejde mere for mindre, er der opstået et voldsomt behov for at skabe en lettere adgang til en ensartet gengivelse af websiderne - uafhængigt af hvilken browser, de bliver vist på.

Løsningen kommer fra flere fronter. Først og fremmest har browserproducenterne nu accepteret, at World Wide Web Consortium (W3C.org) udstikker retningslinjerne for internettets udvikling. For webmediernes vedkommende hedder det webstandarder, og de skal sikre, at websider opfører sig ens i forskellige browsere.
W3's kongstanke er adskillelsen af form fra indhold - i andre sammenhænge en tåbelig tanke, men i forbindelse med webbet giver det god mening): HTML bruges kun til strukturering af indhold og renses for visuelle udtryk. Det visuelle design, former og farver, styres med stor nøjagtighed med Cascading Style Sheets (CSS).

Alt i alt giver det gode muligheder for hurtigt design af komplekse websider, der i hvert fald tilnærmelsesvis vises på samme måde, uanset browser-type, selvom visningsforskellene ikke er udryddet helt. Blandt gevinsterne er også, at det samme indhold uden større armbevægelser kan tilgås fra en lang række andre platforme - fx mobiltelefoner og PDA'er.
Det er dog ikke helt problemfrit: Et af de største problemer hedder CSS Box Model, og det er kort fortalt den måde browseren tegner kasser på, men der er også forskelle på en række andre områder, font-størrelser mv., som kan tage humøret fra enhver designer.

Den nemmeste måde man kan udvikle et design, der fremstår på samme måde i de gængse browsere, er ved - så at sige - at lave så lidt som muligt, og sikre, at der er tydelig mening med de koder, man bruger.

I sin korteste form handler det om at koncentrere sig om at bruge markup, der fortæller om indholdets betydning internt i webdokumentet: Det betyder, at man skal "nøjes" med den basale HTML. I menneskeord handler det om at bruge den HTML, som angiver, hvad der er overskrifter (h1 til h6), brødtekst i paragraffer (p), listeopstillinger (ul eller ol) etc. Og gør det på samme måde på alle websider.
Hvis et afsnit skal se specielt ud - som fx første afsnit under overskriften, kan man give den et tilnavn, man kalder det, at man tilføjer class="manchet" til koden.

<p class="manchet">teksten</p>

På den måde kan man tilføje en mening - omend strukturel - til sin webside, men det hjælper på to måder. Kombinerer man den sparsomme HTML med tilnavnene, har man en god mulighed for at lave et godt design, og samtidig kan man få et godt overblik over teksten.

Som rå HTML ser websiden ikke så spændende ud, men den er et godt sted at starte. Det vigtigste er dog, at man som webdesigner modstår fristelsen til at angive størrelse, farve og anden typografi direkte i HTML-delen af websiden. Falder man for fristelsen, får man godt nok et hurtigt resultat, men man kommer også til at gentage sit arbejde utallige gange. Og en gang til for hver gang, man skal foretage en ændring i designet, eller tilføje en ny side.
Det er her, de store gevinster ved at holde sig til simpel HTML og CSS bliver udbetalt.

Cascading Style Sheets (CSS) anvendes til at formgive typografien og den visuelle stil på websider.

CSS fungerer ved, at man vha. en tekst "omprogrammerer" browseren til at vise indholdet i en HTML-kode efter nogle regler, man selv har bestemt. Det kan lyde besværligt, men er faktisk forholdsvist enkelt. Man henviser nemlig browseren til at læse et dokument, som indeholder de nye regler. Det bedste er, at har man flere websider, som skal have samme design, kan man henvise alle disse til samme dokument, og når man så skal ændre udseendet i alle sider, kan man nøjes med at rette i det ene dokument.
Eksempel
I vores CSS skriver vi (i fx wordpad)

body {
     (anvisninger her)
     }

I dette eksempel omprogrammerer vi udseendet for koden body. Hele websidens indhold er altid styret af body-koden. Stort set alle HTML-koder kan omprogrammeres, og så er det smart at bruge fx de indbyggede overskriftsformater, h1, h2 etc., da det derved bliver let at ændre overskrifternes udseende.

De virkemidler man umiddelbart kan arbejde med er:

• Skriften - type og størrelse
• Linjeafstand
• Tekstens justering
• Overskrifter

Og med en smule ekstra benarbejde kan man opnå store skridt i retning af læsevenligt design ved at arbejde med:

• Linjelængde - hvor mange anslag der skal være i en linje

Der er dog ingen facitliste: Alle virkemidler påvirker hinanden, og gør ofte det hele lidt mere end spændende at arbejde med.;-)

Skrifter uden "fødder" (sans-serif-skrifter) er mest læsevenlige til længere tekster på skærmen.

Typografiske regler for skærmmediet afviger noget fra de traditionelle regler:
Modsat den typografiske tradition, hvor serif-skrifter

(skrift med "fødder", som Times, Georgia mv.)
typisk fremhæves som bedst egnede til længere passager med tekst, er skrifter uden fødder lettere at læse på en skærm:

(skrift uden "fødder", som Helvetica, Arial mv.)
Men traditionen er opstået ud fra den forudsætning, at teksten er trykt på papir, og ikke som på web vist på skærme, der har en frygteligt lav opløsning.
På en skærm bliver serif-skrifterne, især i de små størrelser, gnidrede at se på. Og kursiverer man dem, bliver det bare værre.

(Times 10px. Kursiv forstørret og i original størrelse).

På nettet er hver mand sin egen herre. Når man som webdesigner definerer skrifttypen på en webside, er man nødt til at beskrive sine ønsker på en prioriteret liste, med det højeste ønske først, en række alternativer og den grundlæggende karakteristik (fødder eller ej) sidst.

Den prioriterede liste er nødvendig, fordi brugerens browser benytter de skrifter, som er installeret på vedkommendes computer, og det er ikke nødvendigvis de samme, som designeren har på sin. Computeren vil altid benytte den første skrift på listen, som den har i systemet. Bruger man en skrift, hvis navn består af flere ord, sætter man "gåseøjne" omkring navnet.

I vores CSS definerer vi det således:

Body {
     Font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
     Color:#000000;
     Background-color:#ffffff;
     }

For at undgå problemer med tekstens synlighed på websiden, er skriftens farve defineret til sort (#000000) og baggrundsfarven hvid (#ffffff). Når man bestemmer baggrundsfarven i body gælder det hele vinduets baggrundsfarve.

Det er vigtigt at holde øje med, at skriften hverken bliver for lille eller for stor. Mellem 10 og 13 pixel er som regel en passende størrelse til brødtekster.

Jo mindre tegnene er, des større er faren for, at de bliver for gnidrede at læse. Omvendt, hvis tegnene er alt for store, kan man ikke overskue dem og den sammenhæng (det ord) de er i.

I vores CSS tilføjer vi:

Body {
     Font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
     Color:#000000;
     Background-color:#ffffff;
     Font-size:12px;

     }

Går man op i brugervenlighed undlader man at definere størrelsen, og overlader det til brugerens indstillinger, fordi brugeren har mulighed for at tilpasse skriftstørrelsen i browseren til sine behov.

Linjeafstanden skal være mindre end afstanden mellem afsnit, men større end punktstørrelsen på tegnene.

Linjeafstanden skal skabe så meget luft mellem linierne, at man ikke blander linjernes tekst sammen, men ikke så meget luft, at man mister orienteringen og farer vild mellem linjerne.

En linjeafstand på 1.5 (altså halvanden gange punktstørrelsen) er typisk god. Fra "fabrikken" er linjeafstanden sat til 1, og det giver en kompakt "væg af tekst", som ikke ligefrem fremmer læsevenligheden i længere tekstpassager.

I vores CSS definerer vi derfor:

Body {
     Font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
     Color:#000000;
     Background-color:#ffffff;
     Font-size:12px;
     Line-height:1.4;
     }

Fast venstrekant er browserens "fabriksindstilling", og som regel den som giver det bedste resultat med hensyn til læsevenlighed.

Centrering og fast højrekant (højrejustering) får linjernes begyndelse til at flagre, og det gør det lidt vanskeligere at læse. Men som effekt kan det jo bruges.

Lige margin i begge sider ser meget designet ud, men da browseren ikke deler ordene, risikerer man at ordene står og råber til hinanden fra hver sin kant, og det fremmer heller ikke læsevenligheden.
Selvom det ikke er strengt nødvendigt, fastslår vi venstrejusteringen og tilføjer:

Body {
     Font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
     Color:#000000;
     Background-color:#ffffff;
     Font-size:12px;
     Line-height:1.4;
     Text-align:left;
     }

I HTML er overskrifterne kaldt h1 til h6, hvor h1 er "Header One" - topoverskriften - og h6 en under-under-under-under-under-overskrift.

Udvikler man et design med et klassisk look men har, af hensyn til læsbarheden, alligevel valgt de mere moderne sans serif-skrifter, er der mulighed for at forme overskrifterne i den rette stil. Overskrifter med færre og større bogstaver kan sagtens have fødder, uden at det forringer læsbarheden.
Da alle overskrifter gerne skal have samme udseende, kan man gruppere alle overskrifterne i sit css, og lade dem deles om noget af omprogrammeringen:

h1,h2,h3,h4,h5,h6 {
     font-family: Georgia, "Times New Roman", times, serif;
     color: #AA0000;
     font-weight:normal;
     line-height:1;
     margin:0.5em 0 0 0;
     }

I eksemplet ønskes overskriftersfonten Georgia - en serif-skrift, i farven #AA0000 som er en nydelig vinrød. Da fabriksindstillingerne på overskrifterne gør dem lidt fremhævede, skal webdesigneren anføre sit ønske: Her ønskes "normal" skrift. Linjeafstanden skal være 1. Den er tidligere defineret til 1.4, og det bliver voldsomt meget luft mellem linjerne i en overskrift, hvis der kommer linjeskift. Derfor reguleres linjeafstanden den modsatte vej.
Overskrifternes margin er i eksemplet blevet reduceret til 0 undtagen i toppen, det giver lidt afstand mellem afsnittene og samtidig en sammenhæng mellem overskriften og den følgende tekst.

Skal størrelsen også reguleres, tilføjes en linje med fx font-size: 200%; så har alle overskrifterne den samme størrelse.
Skal de forskellige overskrifts-niveauer have forskellige størrelser - det er jo ret praktisk - skal der oprettes en ny regel for hver enkelt overskrift, hvor den enkelte overskrifts særkende angives. Typisk benytter man følgende størrelser, men det kommer an på, hvordan designet skal se ud.

Overskrift	Størrelse (%)
H1	200
H2	180
H3	160
H4	140
H5	120
H6	100

Der er ingen, som siger, at h1 skal være størst - det er jo designerens valg - men det er den øverste overskrift, over alle andre.

Linjens længde - antallet  af tegn og mellemrum på en linje - på en skærm bør ikke overstige 62 anslag, og helst være kortere, mellem 35 og 55 anslag.

Den typografiske tradition anbefaler en linjelængde på mellem 2 og 3 alfabeter - det er 58-87 anslag pr. linje. Til brug på websider er det dog alt, alt for meget. Her er 30%-50% færre anslag pr. linje mere fornuftigt, altså mellem 35 og 55 anslag.
 
Desværre kan man ikke bare definere linjelængden præcist af flere årsager.

• Brugeren kan have en større - eller en anden - skrifttype defineret i browserens grundindstillinger
• Brugeren kan have forstørret teksten (prøv at trykke tasterne "ctrl" og "+")
• Webbrowsere kan ikke lave orddeling

Bortset fra at formulere sig i kortere ord, er der ikke meget at gøre. Det nytter ikke at "knække" de lange ord og opdele dem i mindre ord: Det er ikke lige meget, om man er i et par forhold eller et parforhold.

Vil man definere linjelængden effektivt, kræver det lidt ekstra benarbejde i forhold til, hvad man kan opnå med de grundlæggende typografiske justeringer.

Det er ikke svært, det kræver bare megen øvelse
Bare fordi det er webstandard, behøver det ikke at være kedeligt. Designet i denne er ikke særligt avanceret, men det er så let at lave, at alle - der har mod på at kode - kan begynde at arbejde med CSS og webstandarder.

Når designet bliver mere interessant visuelt, er det ligeledes vanskeligere at få det til at fungere i de mange forskellige browsere, og deres udlægning af "standard", som findes på markedet. På den ene side er Microsoft med Explorer som bruges af ca. 75% af alle brugere (på Designværkstedet er det ca. 90% og på emu.dk er det ca. 97%), og på den anden side står de "webstandarder" som alle browserproducenter, incl. Microsoft, er enedes om at følge. Det værste er, at man ikke bare kan vælge side og ignorere de andre, for så er man ikke en tand bedre end fortidens webdesignere.

I realiteten må man nøjes med acceptere, at websidernes udseende i de forskellige browsere afviger tåleligt fra idealet. Det væsentligste er, at budskabet kommer ud så godt som muligt, men man kan ikke gøre sig til herre over, hvad brugerne benytter, når de går på nettet - der findes sågar nogle, der bruger mobiltelefoner. Følger man webstandarderne, får de også noget ud af deres besøg på ens websider!

A List Apart - for People who make Web Sites: http://www.alistapart.com

BrowserCam - Overblik i browserjunglen. Giver et billede af en websides opførsel i de forskellige browsere. Der er en gratis prøveperiode, hvorefter der kræves betaling: ( http://www.browsercam.com)

Mirland, John: Lynkursus i Cascading Style Sheets (CSS), Designværkstedet, 2002:
( http://design.emu.dk/artik/02/38-css.html)

Mirland, John:  Fra tabel til div-baseret layout, Designværkstedet, 2003 ( http://design.emu.dk/artik/03/22-div.html)

Toksvig, Jan:  Cascading Style Sheet, Designværkstedet, 1999: ( http://design.emu.dk/artik/99/css.html)

Hammel, Michael: Æstetik virker - hvorfor usability kan lære af kunst, Designværkstedet, 2004: http://design.emu.dk/artik/04/49-aestetik.html

The Web Standards Project: http://webstandards.org/

World Wide Web Consortium (Noget tekniske, men deres "Recommendations" og "TR" (Technical Reports) er det, som udgør standarderne. http://www.w3.org/)

Zeldman, Jeffrey: Designing with Web Standards (2003)

Se mor, de bruger css og webstandarder:
CSSZenGarden.com - inspiration til spændende design med css og webstandarder. ESPN.com -( http://www.espn.com), og se et stort udvalg af sites som er designet udfra W3-standarder: http://www.w3csites.com/

Og nyd det hele i en god, webstandard-browser, som Firefox ( http://www.getfirefox.com).