Jesper Tverskov, 16. januar 2003
BEDST PÅ NETTET gør et godt job med at evaluere offentlige hjemmesider for at fremme kvaliteten. BEDST PÅ NETTET som website bør være forbilledligt og sætte et eksempel som Best Practice. Desværre lever BEDST PÅ NETTET ikke op til forventningerne, hvad angår brugervenlighed og tilgængelighed.
BEDST PÅ NETTET, www.bedstpaanettet.dk, er et projekt under IT- og Telestyrelsen med en styregruppe, der blandt andet omfatter PLS Rambøll Management. Websitet er lavet af Bysted Hovedkvarteret A/S, og Netmester A/S står for teknisk implementering og redigeringsværktøjer. BEDST PÅ NETTET er som projekt så stor en succes, at EU nu er i gang med et tilsvarende projekt med PLS Rambøll Management som projektleder.
BEDST PÅ NETTET er hjemmeside for et projekt, der evaluerer offentlige websites for at højne kvaliteten med brugervenlighed og tilgængelighed i centrum. Det betyder, at vi kan gå i detaljer med en række problemer, der ofte behandles for overfladisk. Vi må kunne stille store krav til et website, der bør være rollemodel for andre.
"The World Wide Web Consortium" (W3C) har i et "Tip of the Day" kaldt "page title" for: "the most important element of a quality Web page". Hvorfor er "page title" så vigtig?
Lad os nøjes med at liste "page titles" for 8 af 11 websider i hovedmenuen. Disse "page titles", der dårligt kan blive mere pinlige, er desværre repræsentative for websiderne på BEDST PÅ NETTET. Først listes linknavnet til websiden, derefter websidens "page title" som den vises øverst i browseren.
Menupunkt: Vurderingsgrundlaget
"Page title:" Bedst på Nettet - Vurderingsgrundlaget - VurderingsgrundlagetVurderingsgrundlaget for 2003 - UDKAST
Menupunkt: Netværk
"Page title": Bedst på Nettet - Netværk - NetværkNetværk
Menupunkt: Debat
"Page title": Bedst på Nettet - Debat- DebatVelkommen til Bedst på Nettets debatforum
Menupunkt: Prisen
"Page title": Bedst på Nettet - Prisen- PrisenPrisen år 2002
Menupunkt: Om Bedst på Nettet
"Page title": Bedst på Nettet - Om Bedst på Nettet- Om Bedst på NettetOm Bedst på Nettet
Menupunkt: Kontakt
"Page title": Bedst på Nettet - Kontakt- KontaktKontakt
Menupunkt: Spørgsmål og Svar
"Page title": Bedst på Nettet - Videnbank - Spørgsmål og svarSpørgsmål og Svar
Menupunkt: English
"Page title": Bedst på Nettet - English- EnglishTop of the Web
BEDST PÅ NETTET skal som website roses for én ting. "Font size" er i CSS (Cascading Style Sheets) angivet relativt. Det betyder, at brugeren uden videre i egen browser kan gøre teksten større eller mindre for at vise websiderne mest muligt læsevenlige efter forholdene.
Det er min vurdering, at mere end 90 procent af denne verdens professionelle websites ikke kan finde ud af at give brugerne mulighed for selv at bestemme skriftstørrelsen. Lad os derfor dvæle lidt ved den ene ting, som BEDST PÅ NETTET gør rigtigt. I stylesheetet er "Font size" for BODY og TD ("table data") sat til 80 procent. Det vil sige til 80 procent af angivelsen i browserens medfødte stylesheet, der er default, hvis der ikke er andre stylesheet.
BEDST PÅ NETTET anvender fonten Verdana, som er meget læsevenlig, og som da også er den mest udbredte font lavet til nettet. Verdana er meget stor som font og fremtræder større end mange andre fonte ved en given skriftstørrelse. Derfor kan det være fristende ikke at anvende "100 procent" som skriftstørrelse, men 80 procent er for småt til brødtekst.
På Klapmusen.dk, der henvender sig til erfarne brugere, anvender jeg Verdana sat til 90 procent. Det er min anbefaling, at de fleste offentlige websites bør anvende en endnu større skriftstørrelse som udgangspunkt. Offenlige websites skal servicere alle borgere, også nybegyndere i edb, lejlighedsbrugere, der har svært ved edb, ordblinde, ældre mennesker og svagtseende. Når det kommer til stykket, er browsernes default, hvad angår Verdana, nok det bedste kompromis for de fleste brugere. Procentstørrelsen skal altså sættes til 100 procent, der er det samme som default.
Brugere, der klarer sig fint med lille skrift til brødtekst, tenderer imod at være bedre til edb end brugere, der ønsker stor skrift. Derfor skal brødteksten snarere være for stor end for lille som udgangspunkt. Det er lettere for de gennemsnitligt lidt dygtigere til edb at gøre teksten mindre i browseren, end omvendt.
Navigation er omdrejningspunktet for et website, og er et af de elementer, der vejer tungest, når kvaliteten af et website skal vurderes. Navigation er hovedvejen i et websites informationsarkitektur (IA). BEDST PÅ NETTET gør stor set alt omkring navigation og link forkert.
BEDST PÅ NETTET har en forvirrende hovedmenu. Det er svært at afgøre, om den består af to linjer eller om linje to er lokalmenu til det valgte menupunkt i linje ét. Flere af menupunkterne i linje to, f.eks. "Nyheder", er klassiske menupunkter i en hovedmenu, og "Nyheder" er da også det valgte menupunkt, når forsiden loades. I øverste linje er menupunkterne fremhævet med fed skrift, og de er understreget med en tyk rød streg. I anden linje er menupunkterne tonet ned med grå skrift og uden rød understregning, og kun i linje to er der anvendt punkttegn som skilletegn.
En sådan opsplitning af hovedmenuen i to visuelt forskellige menuer er dårligt håndværk. Der er tale om én hovedmenu, der blot har for mange menupunkter til én menulinje. I stedet for at gennemtænke en bedre struktur til websitet maskerer man skavankerne med visuelt lir, der skaber forvirring og usikkerhed.
Når et menupunkt i øverste linje vælges, markeres det ved at fjerne den tykke røde streg under menupunktet. Det gælder dog ikke det sidste menupunkt i øverste linje, "Om Bedst på Nettet"! Det er også forvirrende, at den røde streg i anden menulinje har den modsatte betydning: Her tilføjes en tyk rød linje, når menupunktet er valgt.
Når ét af menupunkterne i den øverste af de to menulinjer vælges, kommer det valgte menupunkts lokalmenu frem til venstre, og en introduktionstekst til menupunktet kommer frem i indholdsruden midt på websiden. Denne introduktionstekst bør være listet i lokalmenuen som første menupunkt, men er slet ikke med. Det har som konsekvens, at brugeren ikke kan finde tilbage til introduktionsteksten, når et af de andre menupunkter er valgt.
Introduktionsteksten kan selvfølgelig atter vælges, hvis brugeren skulle finde på at klikke på menupunktet i hovedmenuen én gang til. Men dette menupunkt er jo allerede markeret som valgt, og bør ikke kunne vælges, da en webside ikke bør linke til sig selv.
Lokalmenuer er traditionelt blot en liste af link, typisk med ét link per linje. Det er et klassisk problem, at enkelte link kan blive så lange, at de ombrydes og fortsætter på næste linje. Ombrydningen kan gøre det svært at skelne menupunkterne fra hinanden. En god metode til at gøre link mere læsevenlige er at indlede hvert link med et punktegn.
Lad gå, at der blandt lange lister af link på mindre vigtige websider sker uskøn ombrydning et par steder. Det er uundgåeligt, specielt hvis browservinduet gøres meget lille, og der, hvad jeg anbefaler, er anvendt fleksibelt sidelayout (relativ sidebredde).
Men det er uacceptabelt at 5 ud af 6 lokalmenuer på BEDST PÅ NETTET er svære at læse ved normal visning. Der er anvendt punkttegn, der ved en fejl er placeret efter menupunkterne i stedet for foran! Den pågældende webdesigner fik det måske aldrig lavet færdigt, og fik andet arbejde midt i processen, og den ny webdesigner turde ikke lave om på noget!
Det er forvirrende, at menupunkterne "Resultater", "Netværk" og "Tilmelding" gentager lokalmenuen til venstre, som punktopstilling øverst i indholdsvinduet. Selv om websitets forside åbner med nyhederne i indholdsvinduet, kan brugeren alligevel klikke på "Nyhederne", der indlæser en ny webside identisk med forsiden bortset fra URL og "Page title", og menupunktet "Nyhederne" er nu fremhævet med rød understregning.
Forsiden og menupunkterne "Nyhederne", "Kontakt" og "Tilmelding" åbner med en speciel lokalmenu, hvor linket for to af tre menupunkter hedder "Tilmelding", som på forvirrende måde også er et menupunkt i hovedmenuens anden linje.
En sidste smagsprøve på dårlig informationsarkitektur er linket til "pressemeddelelser og anden omtale". Et så vigtigt link indgår hverken i hovedmenuen eller i lokalmenuen til hovedmenuens menupunkt "Om Bedst på Nettet", men er blot et link i introduktionsteksten til "Om Bedst på Nettet". "Pressemeddelelser og anden omtale" lister ministeriets og IT- og Telestyrelsens pressemeddelelser og anden omtale, dvs. omtale af BEDST PÅ NETTET i diverse computerblade og aviser. Brugerne forventer en tydeligere adskillelse mellem, hvad der er BEDST PÅ NETTET's egne pressemeddelelser og omtale i medierne, der er noget helt andet.
Lad os tage menupunktet "Prisen" som eksempel. Begrundelserne for priserne i 2002 mangler øverst på siden mellem "Hent billeder til brug for trykte medier" og den vandrette streg. Den indledende tekst under menupunktet "Prisen" mangler som menupunkt i lokalmenuen til venstre. Lokalmenuen med menupunkterne "Prisen 2001", "Prisen 2000" og "Prisen 2002" er sorteret på en ikke før set måde på nettet. Sidste halvdel af teksten i menupunktet "Prisen 2001" er et godt bud på, hvad der i stedet burde have været med i den indledende tekst.
Linkene "Hent billeder til brug for de trykte medier" både for 2002 og 2001 viser 14-15 link til billeder med linknavnene "Billede 1", "Billede 2 ", "Billede 3", osv. Det vil sige meningsløse linknavne, som ikke hjælper brugerne til effektiv navigation. Ingen steder kan brugerne finde tekst, der fortæller, hvad billederne forestiller, f.eks. navnene på personerne. Denne information findes dog for "Prisen 2000". Vi kan altså drage den lære, at selv om man gør det rigtigt i år 2000, er der ingen garanti for fremtiden.
Flere af websiderne, f.eks. begrundelserne for priserne i 2001, der ses under menupunktet "Prisen" i hovedmenuen, er uindbydende med tilfældig layout. Den samme opgave er løst bedre i menupunktet "Prisen 2002". Her er dog også plads til forbedringer, f.eks. er det usselt, at der kun er korte begrundelser for priserne uden link til en mere dybtgående analyse. Den samme opgave er løst helt forskelligt i år 2000, 2001 og 2002. Det er okay at blive bedre fra år til år, men der er mistanke om dårligt arbejde til skade for brugerne.
Et website bør laves med så enkle og simple teknikker som muligt. Det gør websiderne lettere at lave, de loader hurtigere og virker med større sandsynlighed korrekt i flere browsere. "Keep it simple" gør ikke mindst et website lettere at videreudvikle. Derfor skal vi altid, igen og igen, forsøge at reducere brugen af tabeller til layout, og ikke mindst brugen af nestede tabeller.
Ideelt bør tabeller kun bruges til data og ikke til layout. Denne holdning er afspejlet i "The WAI Content Authoring Guidelines" f.eks. i en note til "Checkpoints 5.3", der siger: "Once user agents support style sheet positioning, tables should not be used for layout." Det gør browserne i dag, men jeg er uenig i WAI's anbefaling. Tabeller er ofte bedre til layout end CSS, bl.a. fordi tabeller er mere robuste.
Når tabeller anvendes til layout, er det vigtigt at sikre sig, at websiden giver mening, når den læses op af skærmlæsere. Tekst indsat i tabeller skal kunne læses lineært, dvs. celle for celle, række for række, tabel for tabel. Principielt er nestede tabeller af det onde, men blot de er lavet omhyggeligt, dvs. så teksten i dem giver mening i en skærmlæser, er de ikke et problem for tilgængelighed.
BEDST PÅ NETTET anvender på hver eneste webside syv tabeller til layout: én hovedtabel, der består af fire indlejrede (nestede) tabeller, hvoraf to yderligere har en indlejret tabel. Alle disse tabeller gør websiderne unødigt komplekse. Tabellerne fungerer dog fint på de par websider, jeg har tjekket i skærmlæseren JAWS, bortset fra en skønhedsplet på forsiden. Her fortæller JAWS misvisende, fordi lytteren ikke kan bruge informationen til noget, at den nestede tabel, der begynder efter søgefunktionen, består af 2 kolonner og 4 rækker.
BEDST PÅ NETTET's hovedmenu i to linjer, der ligner traditionelle tekstlink til forveksling, er ikke lavet som tekstlink, men med grafik og JavaScript. Hvorfor bruge grafik til at imitere tekstlink, når tekstlink gør det samme arbejde bedre og er lettere at lave og vedligeholde?
Grafiske link skalerer ikke, når brugeren anvender muligheden for at gøre websitets tekst større eller mindre for bedre læselighed. Grafiske link, der indeholder vigtig information til vurdering af et website, bliver ikke altid som tekstlink indekseret eller fulgt af søgerobotterne på nettet. I GOOGLE's "Design and Content Guidelines" hedder det f.eks.: "Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link."
Grafiske link har også det problem, at de gør et website mere afhængigt af et webbureau, fordi den typiske netredaktør ikke uden videre kan forandre teksten i et link (selv ikke den mindste lille rettelse) eller kan tilføje et nyt link. Grafiske link kræver også, at ALT-tekster anvendes med samme indhold som den grafiske tekst. Disse ALT-tekster tjener det dobbelte formål at erstatte grafikken for den blinde, og at være linktekst i den blindes skærmlæser. Disse ALT-tekster, der blot har samme information som grafikken, og som altså er overflødige for den seende, popper irriterende op, når den seende bruger menuerne.
Brugen af grafik gør det også umuligt at anvende såkaldte "tool-tip" (attributten TITLE konflikter med attributten ALT), der ellers kan være nyttige til at uddybe linknavne for mere sikker navigation. Da grafik ikke uden videre kan skifte farve som et fremhævet ("hover") tekstlink, er BEDST PÅ NETTET nødt til at anvende JavaScript blot for at opnå den samme funktionalitet. Det gør det endnu vanskeligere for andre end eksperter, at foretage selv små rettelser og korrektioner af hovedmenuen.
Hverken den grafiske hovedmenu, lokalmenuernes tekstlink og andre link på websitet har traditionelle tekstlinks evne til at skifte farve for besøgt link. Det er heller ikke funktionalitet, som det altid er nyttigt at anvende. Specielt i hovedmenuer kan det være relevant ikke at udnytte denne mulighed. Men netop på BEDST PÅ NETTET ville farveskift for henholdsvis ubesøgt og besøgt link men fordel kunne anvendes mange steder.
Forsiden og menupunkterne "Nyheder", "Kontakt" og "Tilmelding" har den samme lokalmenu med overskrifterne "Hvem er med", "Tilmeld hjemmesiden" og "Nyhedsbrev". De tre menupunkter kan dog kun vælges med grafiklignende knapper, der har linknavnene "Tjek", "Tilmeld" og "Tilmeld". Sådanne linknavne er meningsløse i en skærmlæser.
Det ved BEDST PÅ NETTET godt for i eget "Vurderingsskema for 2002" hedder punkt 1.2: "Er der sigende linktekster? (ikke "klik her", "læs mere" e.lign.)". Som vi skal se i næste afsnit, er der mange af denne type linktekster på BEDST PÅ NETTET's eget website.
BEDST PÅ NETTET's nyheder på forsiden anvender to links til hver historie, øverst er historiens overskrift link til historien og nederst er nogle små pile lavet som grafik med ALT-teksten "Se Artiklen". Disse ALT-tekster fungerer som linktekst i en skærmlæser, og er endnu et eksempel på anvendelse af linknavne, der er meningsløse i en blinds skærmlæser.
BEDST PÅ NETTET vil sikkert undskylde sig med, at det jo er derfor, at de anvender to link per historie. Det bliver det jo blot endnu mere forvirrende af i en skærmlæser. Blinde hader at skulle lægge øre til overflødige links, der forsinker læsningen af websiden og som tilmed er uden brugbart indhold.
Overflødige link er også en pestilens for alle brugere, der ønsker at navigere et website med tastaturet. Disse brugere skal tabulere gennem dobbelt så mange link som nødvendigt.
I menupunktet "Tilmelding" anvendes også grafikpile som overflødigt supplement til linkene i de tre overskrifter, "Abonnér på nyhedsbrev", "Tilmelding til hjemmeside" og "Hvem kan deltage i bedst på nettet?" Her hedder ALT-teksterne også "Se Artiklen", selv om det nu drejer sig om link til abonnement, tilmelding og information.
BEDST PÅ NETTET begår den udbredte fejl, at websiderne linker til sig selv. I en menu, der går igen på mange websider, burde det ellers være indlysende, at menupunktet til den webside, hvor man befinder sig, blot skal være tekst, der visuelt skiller menupunktet ud fra de andre.
Det hjælper brugeren til at orientere sig på websitet, og det reducerer mængden af fejlnavigation. Det er rigtigt, at menuer i klassiske edb-programmer, f.eks. kontorprogrammer, ikke virker på denne måde. Men den typiske bruger kender sine få kontorprogrammer, og navigationsfejl koster mindre i spildtid, fordi kontorprogrammer ikke downloader sider og dialogbokse over Internettet.
Websider, der linker til sig selv, er veritable minefelter for den blindes navigation. Gang på gang bliver den blinde bombet tilbage til websidens start! Lad os tage BEDST PÅ NETTET som eksempel. Forsiden har både et logo og et grafikbillede, der linker til forsiden. Hvad tænker den blinde, når skærmlæseren annoncerer det første link: "Link: BEDST PÅ NETTET"?
Den blinde ignorerer logoet som link, fordi den blinde er vant til manglende forståelse for tilgængelighed, som BEDST PÅ NETTET er et så eklatant eksempel på. Den blinde bevæger sig hurtigt videre til næste link på websiden. Nu hører den blinde atter, "Link: BEDST PÅ NETTET". Mange blinde har nu grund til at tro, at dette link skal følges, for at komme til forsiden.
Problemet med websider, der linker til sig selv, er endnu større i lokalmenuer længere nede på en webside. Her er det meget fristende for en blind at følge et link til sig selv, fordi der let kan sås tvivl om, hvor man befinder sig. Haps, HAHA, og den blinde må begynde forfra på websiden.
For at blinde i praksis skal kunne anvende et website, skal gentagne lange lister af link kunne springes over. Hver eneste webside på BEDST PÅ NETTET indledes med de samme 14 links, der består af bl.a. logo og hovedmenu. Denne liste af link skal kunne springes over, så den blinde kan hoppe direkte til en websides lokalmenu eller indhold.
Hver eneste webside skal altså indledes med et link, der hedder "spring hovedmenuen over", og som peger på et "anker", der blot skal være en ID i et HTML-element, længere nede på samme webside. Linket kan enten laves som usynlig grafik af typen "nothing.gif", eller som et tekstlink med samme forgrundsfarve og baggrundsfarve, så seende brugere intet bemærker.
BEDST PÅ NETTET anvender ALT-tekster forkert. En ALT-tekst er en tekstmæssig erstatning for et grafikbillede. Oprindeligt var ALT-tekster til brug for brugere, der af en eller anden grund havde slået browserens visning af grafik fra, eller hvis browseren ikke understøttede grafik. I dag er ALT-tekster først og fremmest relevante for blindes skærmlæsere, der udfra ALT-teksten kan give den blinde forståelse for grafikken, der ikke kan ses.
I næsten alt litteratur om tilgængeligt webdesign anvendes logoer lavet med grafik som konkret opmærknings-eksempel, når der diskuteres ALT-tekster. Det skyldes selvfølgelig, at næsten alle professionelle hjemmesider har et logo, og at det ofte er det eneste stykke grafik på et website. Derfor er det pinligt, at BEDST PÅ NETTET ikke engang kan finde ud af at lave en korrekt ALT-tekst til deres logo.
En ALT-tekst skal give en blind en fair erstatning for det, der ikke kan ses. En fair erstatning for logoet BEDST PÅ NETTET er ikke teksten BEDST PÅ NETTET, men f.eks.: "Logo for projektet Bedst på Nettet" eller blot "Logo for Bedst på Nettet".
Øverst på BEDST PÅ NETTET's websider er der link til "IT- og Telestyrelsen" lavet som grafik. Her er ALT-teksten, der samtidigt er linktekst for den blinde, "Statens Information". Det er selvfølgelig forkert, at seende ser et link, der hedder "IT- og Telestyrelsen", og at den blinde hører et link, der hedder "Statens Information".
Formularer bør anvende "label"-tag for at sikre, at formularen fungerer optimalt i bl.a. skærmlæsere. BEDST PÅ NETTET anvender da også "label"-tag i to af fire formularer, men forkert i begge tilfælde. I søgefunktionen er der ikke indsat tekst mellem "label"-taggene. I søgefunktionen "Se om din institution er med" er der ikke anvendt "label". I funktionen "Tilmelding af hjemmeside" er et indtastningsfelt af typen "Input" uden ALT-tekst indsat mellem "label"-taggene. I funktionen "Abonnér på Nyhedsbrev" er der ikke anvendt "label".
Ideen med en "label"-tag er, at den peger på et input-felt ved hjælp af et ID, og at teksten, der skal vises på websiden, og som skal læses op i skærmlæseren, placeres mellem "label"-taggene. Her er et eksempel, hvor "label"-tag er anvendt rigtigt sammen med en søgefunktion (forenklet opmærkning):
<label for="soeg">Indtast søgeord</label><input type="text" id="soeg" /><input type="submit" value="Søg" />
Alle eksperter i brugervenlighed og tilgængelighed advarer imod brugen af baggrundsgrafik, der gør en webside vanskeligere at læse for mange brugere. Selv om der kan være undtagelser, hvor æstetikken i digitale vandmærker eller baggrundsgrafik kan opveje ulemperne, har jeg ikke kendskab til dem.
Lad os tage BEDST PÅ NETTET's brug af logo som baggrundsbillede på hver eneste webside som eksempel. Opvejer det æstetiske den reducerede læsevenlighed; og er det fornuftigt, at BEDST PÅ NETTET legitimerer brugen af baggrundsgrafik?
"Jamen, det ser da meget smart ud", vil mange sikkert sige. Ja for jer! Men gør det websiderne mere læsevenlige for svagtseende, for ordblinde og for ældre mennesker? Handler BEDST PÅ NETTET blandt andet om at gøre det offentliges hjemmesider mere brugervenlige og tilgængelige for alle borgere, herunder for brugere med funktionsnedsættelser?
Vi vil ikke gå i dybden med søgefunktionerne, men det er ærgerligt, at de hos BEDST PÅ NETTET indeholder elementære fejl. Søgefunktionens input-felt bevarer ikke de indtastede søgeord, så brugeren let kan tilpasse søgningen.
Hvis du i søgefunktionen for "Hvem er med - Se om din institution er med" søger på f.eks. "www.bedstpaanettet.dk", returnerer søgningen bekræftende et link, der blot er URL'en til BEDST PÅ NETTET. Det er ikke så nyttigt, da man jo selv netop har indtastet den pågældende URL. Brugeren forventer et link til BEDST PÅ NETTET's vurdering af sig selv, eller til information om, hvornår en sådan foreligger.
Når man i søgefunktionen indtaster ordet "tilgængelighed", er der mange hit, og øverst på listen finder vi dokumentet "Tilgængelighed - Quick & Dirty". Hvis BEDST PÅ NETTET havde fulgt sine egne råd og vejledninger, var det meste af kritikken i denne anmeldelse overflødig. Problemet er, at jeg på websitet BEDST PÅ NETTET ikke kan finde et link til den pågældende tekst. Søgefunktionen søger altså også i materiale, der ikke findes på websitet!
BEDST PÅ NETTET anvender som så mange andre websites såkaldte printervenlige sider. BEDST PÅ NETTET har det endog som et af sine vurderingskriterier, når offentlige website bedømmes. BEDST PÅ NETTET er galt afmarcheret. Printervenlige websider er noget bras!
I browseren som i alle andre edb-programmer skal indholdet udskrives ved hjælp af menupunktet "Udskriv" i "File"-menuen, ved hjælp af printer-ikonet i værktøjslinjen eller endnu lettere: ved hjælp af genvejstasten Ctrl+P. Sådan udskriver alle programmer til Windows, og sådan skal en webside også udskrives. Det fungerer mere eller mindre på samme måde i andre styresystemer.
Når en webside udskrives, er der næsten altid behov for at erstatte stylesheetet optimeret til skærm med et stylesheet optimeret til printer. Der kan være behov for andre margener og f.eks. for en anden font og skriftstørrelse, og der kan være behov for at skjule navigation og for at erstatte tung grafik.
Udskrivning fra et website skal optimeres ved hjælp af et stylesheet til printeren. Det har den fordel at udskrive hurtigere, at være lettere at lave og at vedligeholde, og at udskrivningen foregår som fra et hvert andet edb-program.
Såkaldte printervenlige sider er teknisk de samme websider håndkodet én gang til blot til printer, eller endnu engang genereret fra en database med en lidt anden præsentation. Printervenlige websider er elendige, hvad angår brugervenlighed, fordi de sætter browserens udskrivningsfunktioner ud af spil, og fordi de overlæsser websiderne med unødvendige print-ikoner eller tekstlink for "Printervenlig side".
Det bliver selvfølgelig ikke bedre af, at de såkaldt printervenlige sider på BEDST PÅ NETTET ikke er lette at læse. Teksten er med alt for lille skrift, og linjerne er alt for lange.
Elektroniske debatfora kan laves på mange måder. Der er set mange mere eller mindre gode løsninger, men et par ting ligger fast. Der skal være en oversigt over de enkelte tråde i debatten, og disse tråde bør være åbne som default, så længe der er lav aktivitet i debatten, og bør være lukket som default, hvis der er meget, meget stor aktivitet i debatten. Det er et simpelt spørgsmål om overblik og plads til rådighed.
BEDST PÅ NETTET har en slags lokalmenu til venstre, der lister en håndfuld uklare emner, der er vanskelige at skelne fra hinanden. Vælges et emne, kommer der nogle "svar" frem i indholdsvinduet i midten. Der er vist nok tale om svar på "emnet", der altså skal opfattes som debatindlæg!
Selv om debatten på BEDST PÅ NETTET kun har få indlæg, er trådene klappet sammen som udgangspunkt, for rigtigt at holde kortene tæt til kroppen. Overskueligheden er yderligere reduceret ved at lade indlæggene præsentere både med overskrift og med resume af indlægget. Det er smart i betragtning af, at mange indlæg i debatfora erfaringsmæssigt består af en enkelt sætning, f.eks.: "Se artikel om emnet på den eller den hjemmeside...". Mange mindre erfarne brugere vil overse de lukkede svar på svarene. De er kun repræsenteret ved et "+", der kan klikkes på, i næsten tomme oversigter over debattrådene.
BEDST PÅ NETTET begår en næsten utilgivelig fejl, der er undergravende for respekt og tillid til BEDST PÅ NETTET som projekt. HTML anvendes fundamentalt forkert. Alle BEDST PÅ NETTET's websider har opmærkning, hvor HTML anvendes som ren farvelade, dvs. visuelt. HTML skal anvendes til struktur.
Overskrifter er ikke opmærket som overskrifter med H1, osv., men blot med fed skrift. Afsnit er ofte ikke opmærket som afsnit med P-tags, men med dobbelte "<br/>". Det svinger fra side til side. Opmærkningen med HTML er meget sjusket. Mange attributter på hver eneste webside mangler anførselstegn. Elementer og attributter er helt tilfældigt opmærket med store eller små bogstaver efter den enkelte webdesigners forgodtbefindende. Der er endog elementer, der har start-taggen skrevet med store bogstaver og slut-taggen skrevet med små. Jeg har sågar fundet link, der udover linkets naturlige understregning, også er opmærket med "<u>" for understregning!
Med den manglende strukturelle anvendelse af HTML, undergraver BEDST PÅ NETTET forudsætningerne for et Internet, der kan bruges til noget. Det gør BEDST PÅ NETTET til et eksempel på en fundamental forkert tilgang til webdesign, hvor f.eks. skærmlæsere og søgemaskiner ikke kan få optimal information ud af websiderne, fordi de er utilstrækkeligt eller forkert opmærket.
Ideelt bør alt præsentation på et website ligge i et eller flere eksterne stylesheet, for at gøre websitet lettere at lave, vedligeholde og videreudvikle. Præsentation skal være adskilt fra opmærkning med HTML/XHTML, og alt præsentation skal kunne rettes i ét stylesheet med gyldighed for alle websider, der anvender stylesheetet.
Et website signalerer gennem sin anvendelse af DOCTYPE øverst på en webside, hvilken holdning det har til stylesheet og til det faglige niveau for websitet. I dag forventer man, at et website som BEDST PÅ NETTET, der bør være fyrtårn og frontrunner for offentlige websites, anvender valid "XHTML 1.1" eller "XHTML 1.0 Strict" eller til nød "HTML 4.01 Strict". Disse deklarationer stiller store krav til Best Practice: Brug af "deprecated" opmærkning, dvs. opmærkning der er afløst af bedre metoder, er ikke tilladt, og det er et krav, at stylesheet anvendes til så godt som alt præsentation.
BEDST PÅ NETTET anvender i stedet uvalideret "HTML 4.01 Transitional", der på grund af såkaldte "unesapede" "&" i URL'erne ikke kan valideres i W3C's online validator. "Transitional" er så at sige amatør-niveauet, hvor der ikke er krav om, at præsentationen er lagt ud i et stylesheet, og hvor opmærkning, der er forældet eller afløst af bedre metoder, ikke tæller som fejl ved validering. Det er skuffende at BEDST PÅ NETTET's ambitionsniveau er så lavt.
Det er endnu mere skuffende, at det lille stylesheet, BEDST PÅ NETTET trods alt stiller op med, er en rodebunke, hvor stort set alt er kritisabelt. I følge W3C's CSS-validator er der én fejl og ca. 40 advarsler. Det er godt gået, når der er det samme antal selektorer. Det er dog de samme to advarsler, der går igen. Derudover er der mange kritisable småting, som ikke opfanges af en validering.
Lad os tage den sidste selektor i stylesheetet som eksempel, da det er denne selektor, der returnerer en decideret fejl.
.noborder {BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-BOTTOM: 0px; BORDER-LEFT-STYLE: none; border-top-left: 0px}
Fejlen består i, at der ikke er nogen egenskab, der hedder "border-top-left". Men der er flere problemer. Egenskaberne "border-right" osv., er såkaldt stenografi-egenskaber, der gør det muligt på én gang at angive tre værdier for tre egenskaber, f.eks. således: "border: 1px solid black", dvs. angivelse af bredde, form og farve. For at reducere muligheden for tvivl, bør alle tre værdier normalt angives (der er undtagelser), selv om browseren kan udlede nogle af værdierne andre steder, hvis de mangler. Egenskaben "border-width" bør anvendes, hvis det kun er bredden, der ønskes reguleret.
Da BEDST PÅ NETTET ønsker at lave en selektor, der fjerner rammen omkring et grafikbillede, er egenskaben "border-left-style: none;" selvfølgelig også en fejl, da den kun gælder venstre side af rammen. En selektor, der slår rammen fra, kan se således ud:
.noborder{border-width: 0px;} eller .noborder{border: none;}
Mere skal der ikke til. Den største fejl ved BEDST PÅ NETTET's selektor, der bl.a. anvendes af søgefunktionen, er, at den er overflødig, fordi grafikbilleder er født uden ramme. Det er derfor selektoren virker trods alle fejlene. Rammen er slået fra i forvejen.
Næsten alle selektorer i BEDST PÅ NETTET's stylesheet indeholder egenskaben "text-decoration" sat til værdien "none". Det er overflødigt, fordi "none" næsten altid er default bortset fra f.eks. i link. Næsten alle selektorer har angivet forgrundsfarve uden samtidig angivelse af baggrundsfarve. Begge farver bør normalt angives, for ikke at overlade den ene farve til websidens forfatter og den anden farve til browserens default. Når forgrundsfarve og baggrundsfarve ikke bestemmes af den samme part, kan det under uheldige omstændigheder fører til kontrastproblemer i nogle browsere.
I BEDST PÅ NETTET's stylesheet er egenskaben "font-family" sat til "Verdana". Det er bedre at angive en prioriteret liste af fonte, og at afslutte listen med et generisk navn, f.eks.: {font-family: Verdana, Helvetica, Arial, sans-serif;}. I stylesheetet er der selektorer for H1, H2, H3, H4, H5, H6. De bruges slet ikke på de mange websider, jeg har kontrolleret, da der ikke er anvendt struktural opmærkning, men visuel opmærkning med f.eks. fed skrift til at markere overskrifter. Omvendt er der anvendt klasser i HTML-tags, der ikke eksisterer i stylesheetet (og som derfor blot ignoreres), f.eks. "MsoNormal" på siden "Om bedst på nettet, projektbeskrivelse".
Det er vigtigt at understrege, at problemer med kode, HTML-opmærkning og stylesheet ikke nødvendigvis betyder funktionelle problemer for et websites brugere. Problemerne kan alligevel være meget alvorlige, fordi de gør websiderne vanskeligere at videreudvikle, og fordi den manglende kvalitet sender et uheldigt signal.
Når BEDST PÅ NETTET's website skal videreudvikles, så er det dejligt med et sundt udgangspunkt. Når der skal laves nye websider med ny funktionalitet, eller der skal tilføjes ny funktionalitet til gamle websider, eller når et website skal præsenteres på en ny måde med et flottere stylesheet, så er det ikke sjovt, at udgangspunktet er et stylesheet på fusker-niveau.
Specielt når nye medarbejdere overtager et gammel website, kan det kræve timer at finde ud af, hvordan et stylesheet er skruet sammen, før de nye folk tør slette, rette eller tilføje noget. Derfor er det vigtigt, at der stilles store krav til kvaliteten af kode, HTML-opmærkning og stylesheet. Det sparer i længden ressourcer og højner moralen omkring et website.
BEDST PÅ NETTET er hjemmeside for et projekt, der evaluerer offentlige websites med henblik på at fremme kvalitet og godt webdesign. Vi forventer et forbilledligt website, der viser vej med f.eks. valid HTML og CSS, og et website der lever op til Best Practice, hvad angår brugervenlighed og tilgængelighed.
Derfor er det tankevækkende, at BEDST PÅ NETTET fremstår som et eksempel på det værste på nettet. Rejs land og rige rundt og brug BEDST PÅ NETTET som "worst case scenario".
BEDST PÅ NETTET er så sjusket, at det især er manglende kvalitet, der springer i øjnene. BEDST PÅ NETTET overtræder gang på gang egne retningslinjer og anbefalinger for godt webdesign og anvender sågar visuel opmærkning i stedet for strukturel. BEDST PÅ NETTET repræsenterer en tilgang til webdesign, der er uforenelig med brugervenlighed og tilgængelighed.
8. marts 2003: BEDST PÅ NETTET har rettet mange af de i artiklen nævnte fejl.
Copyright © 2003 Klapmusen.dk
The document is made to be a resource. Use it. Link to it. The document will be maintained, the URL is stable.
Opdateret: 27-03-2003 09:48
Status:
Revision:
Debatten er lukket. Send mig en mail.