 |
 |
|
|
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 for at få det ud af teksten, du har tænkt dig. 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.
(Dette afsnit er en smule teknisk - undskyld. Der er desværre ingen vej udenom. På den anden side: Hvis det virkelig er nyt for dig, 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. Flere og flere bruger fladskærm. Det er ikke så underligt, for en traditionel 17-tommer er en ordentlig bamse at finde plads til på skrivebordet. Men fladskærme har den løjerlige egenskab, at de helst skal indstilles til en bestemt opløsning for at give et skarpt 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 bliver uldent, og du bliver træt i øjnene af at se på det i længere tid.
De fleste webdesignere sætter 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 nogle mennesker bruger små skærme.
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.
De har tilpasset deres webdesign, så siden passer til 800x600 pixel - både i bredden og i højden. Det betyder, at deres side på min 19-tommersskærm (30x37 cm, 1110 cm2) fylder 16x24 cm (384 cm2); og tekstfeltet fylder 4,5x13 cm (58,5 cm2). Med andre ord: De bruger lidt over 5 % af min skærm til at fortælle deres historie! Ændrer jeg min skærmopløsning til 800x600, kommer deres side selvfølgelig til at fylde hele min skærm, og så kommer de op på at bruge hele 15 % af pladsen på at fortælle historien. Til gengæld bliver skriften meget ulden, fordi den forstørres så meget.
(U)læseligheden bliver værre af farvevalget og typografien: lysegrå mikroskrift på mellemgrå baggrund (mere om farver nedenfor)
Oven i købet er det hele lavet i flash, så man ikke kan 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. Prøv selv - her er adressen: Prolog.
Det kan selvfølgelig sagtens gøres bedre, også af reklamebureauer. Se fx her: Concept Interest.
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 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
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 nok 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.
Og endelig er 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 er en smule kraftigere end Times New Roman (den er i øvrigt - lige som Verdana - skabt specielt til brug på skærmen), og den tåler også at blive brugt i forholdsvis små størrelser uden at blive ulæselig.
(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, og du mister al kontrol 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.
(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 i størrelse 10 pt. Mindre skrift bør du absolut ikke bruge, og vil du absolut skrive med Times New Roman, så gå lidt op. 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.
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 vi tage alvoligt! Dels for læsernes skyld - for at skåne deres øjne, de skal jo bruges igen i morgen - og dels for vores egen skyld. Jo mindre trættende et webdesign er, jo længere kan man 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:
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:
Det betyder:
Og hvis du ikke er enig, så værs'go - gør endelig, som du selv synes. Det er din egen webside!
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. Her kan du se, hvordan besøgene på www.omatskrive.dk har udviklet sig fra december 2008 til januar 2010:
| Browser | December 2008 |
Januar 2010 |
78,7% |
69,9% |
|
14,2% |
15,3% |
|
3,1% |
9,2% |
|
2,6% |
4,5% |
|
0,5% |
0,3% |
|
0,5% |
0,4% |
|
0% |
0% |
Safari går altså kraftigt frem og bruges efterhånden også af andre end Apple-brugere. Men Firefox-andelen stiger også, og den spritnye (2008) Google Chrome vil helt sikkert vinde frem de kommende år.
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.
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.