Godt webdesign: Skriv, så din tekst kan læses!

Du skriver vel for at blive læst. Så er det smart, at din tekst også er til at læse - sådan rent fysisk. Det burde være en selvfølge; men alt for mange websider er nærmest ulæselige på grund af dårligt webdesign - fx forkert typografi, for lille skriftstørrelse eller forkert farvevalg. Her er nogle gode råd om læselighed på skærmen: Simpelt og godt webdesign.

Af Per Salling

Om læseren overhovedet gider læse din tekst afhænger af (mindst) 3 forhold:

Læseværdien er altså et overordnet udtryk for, om teksten er så interessant, at din læser gider kæmpe med den sproglige læsbarhed og den fysiske læselighed. Og jo mindre modstand dit sprog, din struktur og den fysiske læselighed på skærmen giver, jo større er din chance for at holde på læseren. Godt webdesign er afgørende!

Sproget og strukturen har jeg skrevet om i andre artikler. Her skal det handle om læseligheden på skærmen - om dit webdesign.

  1. Udnyttelse af skærmen
  2. Typografi
  3. Skriftstørrelse
  4. Farvevalg
  5. Hovedsagen: Det, du vil fortælle

1. Udnyttelse af skærmen

(Dette afsnit er en smule teknisk - undskyld. På den anden side: Hvis det virkelig er nyt for dig som din egen web-redaktør, er det på tide, at du lærer det!)

Min første pc havde en 14-tommers farveskærm. Da den døde efter nogle år, og jeg skulle have en ny, var 15 tommer det mindste på markedet. I dag er 17 tommer ved at forsvinde fra butikkerne, 19 tommer er standard, og større skærme er på vej frem.

I dag bruger vi (næsten) alle fladskærm. Det er ikke så underligt, for en traditionel 17-tommer var en ordentlig bamse at finde plads til på skrivebordet. Men fladskærme har stadig den lidt ærgerlige egenskab, at de helst skal indstilles til en bestemt opløsning for at give det skarpest mulige billede. (Se i din brugsanvisning. Har du en 19-tommer, skal det formodentlig være 1280x1024 pixel.) Du kan godt ændre opløsningen til fx 1064x768 eller endda til 800x600, hvis du vil have vist billedet større; men det kan blive uldent, så du bliver træt i øjnene af at se på det i længere tid.

De fleste webdesignere sætter alligevel deres sider op, så de kan være på et 800 pixel bredt skærmbillede. Det gælder også Omatskrive.dk; derfor er der de mørke områder i siderne. Så er der taget højde for, at nogle (fx svagtseende) indstiller skærmen til denne opløsning - og også for, at små skærme igen bliver mere og mere almindelige.

På den måde udnytter man ganske vist ikke skærmens bredde helt. Men til gengæld undgår man de meget lange linier, som også gør læsningen svær. (Jeg vil ikke komme ind på spørgsmålet om linielængde her; men se denne artikel blæst ud i fuld skærmbredde - så forstår du, hvad problemet er: klik her!)

MEN hvad med højden? og hvad med, hvordan pladsen inden for den selvvalgte begrænsning i bredden er udnyttet? Se denne side fra et reklamebureau - klik på billedet for at få det vist i fuld størrelse, og klik igen for at få det væk.

E-mail eksempel 1 - klik for at se den i fuld størrelse

(For en ordens skyld skal det siges, at sådan ser Prologs hjemmeside ikke ud mere!) De havde tilpasset deres webdesign, så siden passede til 800x600 pixel - både i bredden og i højden. Det betød, at deres side på min 19-tommersskærm (30x37 cm, 1110 cm2) fyldte 16x24 cm (384 cm2); og tekstfeltet fyldte 4,5x13 cm (58,5 cm2). Med andre ord: De brugte lidt over 5 % af min skærm til at fortælle deres historie! Ændrede jeg min skærmopløsning til 800x600, kom deres side selvfølgelig til at fylde hele min skærm, og så kom de op på at bruge hele 15 % af pladsen på at fortælle historien. Til gengæld blev skriften ulden, fordi den forstørres for meget.

(U)læseligheden bliver værre af farvevalget og typografien: lysegrå mikroskrift på mellemgrå baggrund (mere om farver nedenfor)

Oven i købet var det hele lavet i flash, så man ikke kunne justere skriftstørrelsen på sin browser (også mere om størrelse nedenfor). - Flash betyder i øvrigt, at man skal vente en halv blommesæson på, at ting og sager farer frem og tilbage, hver gang man vil skifte til et nyt menupunkt.

Det kan selvfølgelig sagtens gøres bedre, også af reklamebureauer. Her er fx Prologs nuværende side.

Til top

2. Typografi

Godt webdesign handler også om skriften. De fleste websider er i dag skrevet med skrifttypen Verdana. (Det gælder også Omatskrive.dk). Det er der en god grund til. Den er nemlig skarp og tydelig, også i forholdsvis små størrelser, og den kan tåle at blive "pixeliseret" - opdelt i skærmens små lysende punkter. Verdana er skærmens svar på den gamle skrivemaskinetype Courier, som også var karakteristisk ved at være meget tydelig.

Der er andre typer, der er lige så gode, så længe de ikke bliver brugt i for små størrelser. Software Usability Research Laboratory (SURL) ved University of Wichita driver en omfattende forskning i IT-brugervenlighed, herunder webdesign, og de har bl.a. vist, at der ingen væsentlig forskel er på læsehastigheden for de 8 mest almindelige skrifttyper, når de bliver brugt i størrelserne 10 pt og opefter.

Men SURL's undersøgelse (som er fra 2001) viser også, at læsernes subjektive valg er Verdana foran Arial og Georgia som nr. 2 og og 3 - og at Verdana skiller sig mere og mere ud som foretrukken, jo mindre skriftstørrelsen bliver. Det er en vigtig pointe, for flere og flere vælger at skrive deres websider med en forholdsvis lille skrift.

Se et resumé af undersøgelsen her: Usability News: Popular Online Fonts

SURL foretager løbende undersøgelser på dette område. Hvilken skrifftype er bedst til forretnings-e-mails? Til private? Hvilke sender maskuline eller feminine signaler? Hvilke sender passive eller aktive signaler? Hvilke er kedelige? Der er fx Verdana, som jeg bruger her på siden. Til gengæld scorer den højest i alle undersøgelser, når det gælder letlæselighed. Men flere nyere typer, bl.a. Calibri, er pænere ... Kig selv på SURL's undersøgelser ved at taste "font type" e.l. i deres søgerude!

I dette afsnit har jeg udskiftet Verdana med Arial i samme størrelse. Arial ligner Verdana lidt - begge er såkaldte "grotesk"-typer, dvs. typer uden "fødder" - men den er smallere. Arial er god på papir, hvor Verdana kan virke lovlig bred; men på skærmen kommer Arial let til at virke for gnidret i de små størrelser.

Dette afsnit er skrevet med Times New Roman, igen i samme størrelse. Den er en "antikva", altså en skrift med "fødder", og den har i mange år været den foretrukne type i alle de trykte medier og også i papirbreve o.l. Times New Roman ses næsten ikke på internettet; jeg har faktisk kun fundet én professionel side, der bruger den konsekvent, nemlig online-udgaven af New York Times.
Typens ulempe er, at den bliver meget gnidret i små størrelser. Hvis man forstørrer den lidt, oser den til gengæld langt væk af konservativ klasse og elegance - og troværdighed? Det mener New York Times i hvert fald. Se selv.

Her et afsnit med en anden antikva, Georgia - SURL-undersøgelsens nummer 3. Jeg synes ikke, at man ser den brugt ret ofte, men den er måske et forsøg værd. Georgia (den er i øvrigt - lige som Verdana - skabt specielt til brug på skærmen) er en smule kraftigere end Times New Roman, og den tåler også at blive brugt i forholdsvis små størrelser uden at blive ulæselig.

Og endelig et afsnit med Calibri, den af de nyere skrifttyper der scorer højest i de seneste undersøgelser. Den virker pænere og mere moderne - men scorer stadig en anelse ringere end Verdana på ren læselighed. Og den skal i hvert fald bruges i en lidt større størrelse.

(Tilbage til Verdana.) Andre skrifttyper end de standardtyper, SURL omtaler, kan selvfølgelig friste; men la' hellere være. Du risikerer, at din læsers pc ikke har "Benguiat", "Quill Script" eller "Tiger Rag" i sit typebibliotek, og så vil hans eller hendes browser vise din side med en eller anden type, den selv vælger. Så mister du kontrollen over, hvordan dit webdesign kommer til at se ud.

Desuden er der så mange andre måder at skille sig ud på (fx ved at skrive bedre), og skrifttypernes rolle er jo ikke at påkalde sig opmærksomhed - tværtimod.

En anden side af typografien er det med opsætning: Ikke for lange afsnit, understøt overblikket over strukturen med afsnitsoverskrifter, brug punktopstillinger osv. Det har jeg skrevet om andre steder, fx i Om at skrive til nettet - "den hårde", så det vil jeg ikke komme ind på hér.

Til top

3. Skriftstørrelse

(Her bliver det teknisk igen. Men hvis du roder med websider, bør du være med.)

Som antydet ovenfor: Jo mindre skrift, jo sværere er teksten at læse, og det kommer vel ikke som den store overraskelse. Omatskrive.dk benytter som nævnt Verdana, og det i størrelse 10 pt. Mindre skrift bør du absolut ikke bruge, og vil du absolut skrive med Calibri eller Times New Roman, så gå op til 11 pt. Jeg mener: Internettet er jo stort, så du har plads nok ...

MEN der er en vigtig pointe her: Nogle læsere vil gerne have vist teksten større, fx fordi de er svagtseende eller af en eller anden grund har skærmen stående lidt længere væk. Som nævnt ovenfor er det lidt problematisk at "forstørre" skærmbilledet ved at ændre skærmopløsningen på fladskærme. Billedet bliver uldent, og man kan blive træt i øjnene af at se på det i længere tid.

Derfor er det vigtigt, at læserne kan forstørre skriften i dit webdesign med browserens indbyggede "vis tekststørrelse"-funktion:

Hvis du bruger Firefox i stedet for Internet Explorer, kan du også forstørre eller formindske skriften med "ctrl +" og "ctrl -", og du kan nulstille til den oprindelige størrelse med "ctrl 0".

Firefox er meget smidig på dette punkt; den ændrer størelsen på al tekst, der ikke er sat ind som grafik (fx logoet og mottoet allerøverst i Omatskrive.dk's ramme). Internet Explorer kan derimod kun ændre skrift, der er defineret som "em" eller som "%" - ikke som "px" eller "pt" - og den er (endnu) den mest udbredte browser; så hvis du benytter en af de sidstnævnte måder at definere din skriftstørrelse på, vil de fleste af dine læsere ikke kunne gøre skriften større efter behov.

Her er en rigtig pæn side, hvor man bare gerne vil have lov til at sætte tekststørrelsen lidt op. Teksten er defineret i "px", så hvis du bruger Internet Explorer, er der ikke noget at gøre; men med Firefox gør et enkelt "ctrl +" siden meget mere læselig - og mindst lige så pæn. Klik på billedet for at se siden i naturlig størrelse, og klik igen for at se den med let forstørret skrift.

E-mail eksempel 1 - klik for at se den i fuld størrelse
Til top

4. Farvevalg

Der er lavet masser af undersøgelser af, hvilke farver der er behageligst for øjnene, når man læser på skærmen. De undersøgelser bør du tage alvoligt! Dels for læsernes skyld - for at skåne deres øjne, de skal jo bruges igen i morgen - og dels for din egen skyld. Jo mindre trættende dit webdesign er, jo længere kan du håbe på, at læseren bliver hængende på siden.

Hvis du er specielt interesseret i farver på skærmen, så besøg www.colormatters.com - eller prøv denne simple og oplysende online-test: Tryit Editor. Ellers kan du nøjes med at følge disse regler:

Og mens vi er ved det: Undgå alt, hvad der bevæger sig! Det trækker opmærksomheden væk fra det, du vil sige, og det får som regel også siden til at "hænge" i tempoet, så læseren bliver utålmodig.

Her er et par slemme eksempler på uigennemtænkt webdesign:

Til Omatskrive.dk begyndte jeg med at vælge tekstfladens farver: mørkebrune bogstaver på cremefarvet baggrund og en lidt afvigende farve til links. Det gjorde jeg bevidst (og efter mange eksperimenter) for at dæmpe kontrasten og dermed gøre siden "blødere" for øjnene. Derefter tilpassede jeg simpelthen de omgivende farver til tekstfladens farveskala. (Tågegeneratorknappen falder selvfølgelig udenfor for at være iøjnefaldende).

Det kan selvfølgelig diskuteres, om siden er pæn; og det bliver det. Men jeg har aldrig hørt nogen påstå, at den er ubehagelig eller anstrengende at læse.

Her er et par andre sider, der er behagelige for øjnene:

Til top

5. Hovedsagen: Det, du vil fortælle

Jeg er ikke grafiker, webdesigner e.l., jeg er sprogkonsulent og tekstforfatter. Men jeg er interesseret i, at de ord, jeg skriver, kommer frem til læseren i en læselig form; og derfor har jeg været nødt til også at interessere mig for den visuelle side af internettet. Og hovedreglerne er efter min mening:

  1. Det er teksten, der fortæller historien. Selv når du har mange billeder - fx af den vare, du vil sælge - er det teksten, der forklarer læseren, hvad billederne betyder.
  2. Derfor skal dit webdesign først og fremmest understøtte din tekst.

Det betyder:

Og hvis du ikke er enig, så værs'go - gør endelig, som du selv synes. Det er din egen webside!

Til top

PS: Hvilken browser bruger du selv?

Du bruger muligvis selv Internet Explorer. Men Explorers markedsandel falder; så hvis du pusler med websider, er du nødt til også at teste dit webdesign i andre browsere.

Specielt Google Chrome går kraftigt frem. Men Apples Safari vinder også langsomt terræn, ikke mindst på grund af de mange nye elektroniske dippedutter fra det firma. Firefox-andelen stagnerer; men Firefox er stadig klart den næststørste browser.

Derimod kan du se stort på Opera, Mozilla og Netscape. Opera har ikke - og får heller ikke - nogen væsentlig markedsandel, og Mozilla og Netscape er forsvundet til fordel for Firefox.

Her kan du følge udviklingen i browser-krigen i Danmark (og i Europa som helhed eller ethvert andet område).

Men altså, ingen vej udenom: Din webside skal fungere i alle 4 moderne browsere! Heldigvis er de allesammen gratis, og de er meget hurtige (1-2 minutter med en almindelig bredbåndsforbindelse) og lette at installere.

Til top

Boksen

  1. Gør det til en vane at give 1-6 kokkehuer (eller skærmbilleder) til hver eneste side, du kommer ind på, når du surfer.
  2. Tænk over det, når du giver 1-2 skærmbilleder til en særligt dårlig side og 5-6 til en særligt god. Hvorfor? Hvad får dig til at reagere på den måde?
  3. Tænk specielt over dette: Hvad er forskellen mellem den bløde mellemgruppe og den rigtig gode (flotte, overskuelige, let læselige) side? Hvad skal der til for at løfte en halvgod side op mellem de bedste?
  4. Kig på din egen side med de briller på.

JavaScript Menu Courtesy of Milonic.com