Gode råd om web-design

Af Jakob Paikin. Alle rettigheder forbeholdes! Teksten må ikke mangfoldiggøres, kopieres eller udgives uden forfatterens udtrykkelige skriftlige tilladelse!


Oversigt over ændringer:


Stadig flere Internet-brugere ønsker at oprette en hjemmeside og der findes mange programmer, der kan hjælpe med at danne selve HTML-filen, så man slipper for at skriver koderne selv. Men disse programmer kan kun sjældent hjælpe med at gøre siderne pæne og de danner ikke altid den mest effektive HTML-kode.

Her vil jeg give nogle gode råd og tips om såvel tekniske som indholdsmæssige forhold, som det kan være godt at tage i betragtning når man designer web-sider. Alle disse råd står naturligvis for min egen regning, men er de i vidt omfang baseret på hvad jeg har hørt og læst af kommentarer til egne eller andres web-sider.

Bemærkning pr. 20. oktober 2000: Jeg har gennem længere tid ikke haft tid til at ajourføre denne side, så der er utvivlsomt forhold der burde være omtalt, men som alligevel er udeladt. Jeg beklager naturligvis, men tid er som bekendt en mangelvare...

Indhold

Valg af indhold

Der kan naturligvis ikke gives meningsfulde råd om selve indholdet af en web-side - det afhænger af hvad den enkelte bruger ønsker at offentliggøre. Men der kan gives generelle råd vedrørende typen af indhold.

Undgå rene link-oversigter. Sider med indhold af typen 'her er nogle (tilfældige) links, som jeg synes er interessante' tjener sjældent noget formål. Der findes store, kendte systemer f.eks. den internationale Yahoo og den danske Jubii, der begge er emneopdelte og de egentlige søgeværktøjer som Lycos, AltaVista og danske JORI, der til fulde opfylder dette behov. Dermed ikke være sagt, at der ikke skal være links! Det skal der naturligvis, men de bør have en relation til det emne, som siderne omhandler.

Henvis til lignende sider. Hvis der findes andre sider, der omhandler samme emne, bør der være henvisninger til dem. På den måde kan brugerne hurtigt finde mere information. Ligeledes skal man naturligvis anføre, hvis dele af sidernes indhold stammer fra andre kilder.

En eller flere sider

Hvis du skal have meget indhold på dine sider kan det være en god ide at dele indholdet op over flere sider. Dels bliver det hurtigere for brugeren at hente siden hjem, dels medvirker en opdeling ofte til, at indholdet struktureres bedre. Hver side bør være under ca. 10 kb.

Start gerne med en indholdsfortegnelse, så brugeren med det samme kan se, hvad der er at vælge imellem. Fra hver side skal der så naturligvis være et link tilbage til forsiden.

Check dine links

Gode web-sider indeholder naturligvis links - ofte mange. Men for at de er interessante og relevante kræves naturligvis at de stadig eksisterer når brugeren forsøger at følge dem. Selv store og stabile systemer ændres således at et link må ændres. Sørg derfor for at checke dine links med jævne mellemrum.

Hvis du finder ud af, at et link som findes i din WWW-browsers bookmark- eller yndlingsliste er blevet fejlagtigt, så check om du nævner det pågældende link på din web-side. Gør du det skal det naturligvis opdateres eller fjernes (hvis siden ikke længere findes).

Afslut alle koder!

Hvis du ikke bruger et program til at danne HTML-filen, eller vis du blot retter i filen selv, skal du være opmærksom på at alle HTML-koderne bliver afsluttet korrekt. Næsten alle HTML-koder (de såkaldte tags) optræder parvis hvor den første angiver start og den anden slut. Slut-koden ligner start-koden men har fået tilføjet en / efter <-tegnet. Eksempelvis <H2>Overskrift</H2>. De eneste normalt brugte HTML-koder, der ikke skal afsluttes er <HR> (vandret linie), <BR> (ny linie i et afsnit), <IMG ...> (billeder) og <!-- ... --> (kommentar),.

Mange benytter <P> som 'nyt afsnit'-kode, i stedet for at omgive hele afsnittets tekst med <P> ... </P>. Selvom dette formelt er korrekt må det anbefales at også slut-koden (</P>) anvendes. Eksempelvis:
<P>Dette er et afsnit.</P>
<P>Her er et nyt afsnit.</P>

For at holde orden i koderne bør de også afsluttes 'omvendt' eller 'inden i hinanden'. Det vil sige, at hvis to kode-par omslutter hinanden skal den der står først afsluttes sidst. Eksempel: <CENTER><H2>Overskrift</H2></CENTER>. Her står hele kode-parret H2 inden i CENTER-koden.

Henvisninger til egne sider og til billeder

Hvis der fra en web-side skal henvises til en anden, der findes på samme server (f.eks. hvor en bruger har flere sider), kan det hastighedsmæssigt betale sig at bruge en forkortet henvisningsform, fremfor en komplet URL. Skal der eksempelvis henvises fra http://www.etsted.dk/mig/test.htm til http://www.etsted.dk/mig/test2.htm kan henvisningen skrives som blot test2.htm. Den samme teknik kan anvendes, når der fra en web-side skal henvises til grafik-filer.

Hastighedsfordelen opstår, da det ikke er nødvendigt at slå systemets adresse op. Denne teknik giver også mulighed for, at siderne til fulde kan afprøves på ens egen maskine, da henvisningen er 'lokal' og relativ.

Brug af baggrundsgrafik

Brug kun baggrundsgrafik hvis det er nødvendigt og/eller pænt. Ofte anvendes baggrundsgrafik ukritisk, hvilket blot gør siderne 'urolige' at se på. Undgå også at anvende for mange farver i baggrunsgrafikken - ofte vil en sort/hvid eller gråtonet baggrund være rigeligt. Men vigtigst af alt: Sørg for, at selve teksten kan læses!

Tips om brug af grafik

Hvis der skal bruges grafik på web-siden - og det gør jo det hele lidt mere spændende at se på - kan visningen hos brugeren gøres hurtigere på flere måder:

"Grafik-tekst"

En efterhånden udbredt uvane er at vise tekst som et grafik-billede. Dette sker tilsyneladende automatisk ved brug af nogle web-design programmer.

Problemt er i sin enkelhed følgende: I stedet for at skrive teksten i selve HTML-filen i et <P>...</P> afsnit skrives den i et grafik-program og gemmes som f.eks. en GIF-fil, der indlægges i HTML-filen som et billede med <IMG SRC="...">.

Årsagen til at mange anvender denne metode er - udover, at nogle produkter tilsyneladende automatisk benytter metoden - at man har fuld kontrol over tekstens udseende (skrifttype, størrelse m.v.). Det er imidlertid meget uhensigtsmæssigt af flere grunde:

  1. Det tager betydelig længere tid at hente et grafikbillede end at hente den tilsvarende mængde ren tekst. Specielt for brugere med langsomme modems (f.eks. 14.400 baud - som stadig bruges!) er det næsten u-udholdeligt.
  2. Brugere, der vælger at slå grafikken fra i deres browser (f.eks. af hensyn til hastigheden, jf. ovenfor) kan slet ikke se den tekst, der gemmes som en grafikfil. Dette kan afhjælpes med ALT="..." attributten (se afsnittet "Husk alternativ tekst") - men så skal teksten jo alligevel indtastes i HTML-filen og så er det bedre at skrive den direkte i første omgang.
  3. Med fremkomsten af browsere, der understøtter cascading style sheets (CSS) kan man opnå betydelig kontrol over udseendet direkte med HTML-koder. For nærmere oplysnigner om CSS se f.eks. www.w3.org/Style.

I nogle tilfælde kan "grafik-tekst" dog anvendes på rimelig måde. Eksempelvis til enkelte overskrifter, tekst der skal fungere som en slags vandmærke (måske endda stå lodret). Dog skal der naturligvis være en ALT= attribut.

Danske bogstaver

Hvis man i teksten skal bruge andre tegn end 0-9 og a-Z, f.eks. de danske bogstaver æ ø og å, kan der opstå problemer. Det skyldes, at forskellige computer-type (og styresystemer) har forskellige tegnsæt. Så hvor en Windows-bruger ser et æ vil en bruger af et andet styresystem måske se noget andet.

Det problem løses ved at benytte nogle special-tegn, der af det enkelte browser-program vises som det korrekte tegn på den pågældende maskine. Nogle programmer, f.eks. HoTMetaL, 'oversætter' selv de tastede tegn til de rette koder. Men i mange tilfælde må man selv lave dem om. For de danske tegn og andre hyppigt anvendte tegn ser koderne således ud:

Det kan være fristende blot at bruge de tegn, som ens egen computer anvender og være ligeglad med andre brugere. Men hvis du gerne vil have, at andre folk skal læse din hjemmeside, så brug de par minutter det tager at erstatte bogstaverne med koder. De fleste tekst-editorer og HTML-designprogrammer kan lave 'søg-og-erstat'. Du kan også hente DOS-programmet KONV.EXE, der automatisk kan konvertere fra både DOS- og Windows-tegnsæt til HTML-koder. Programmet accepterer wildcards (* og ?) i filnavne. Programmet oversætter kun de danske bogstaver.

Netscape, Internet Explorer eller hvad?

Der kommer flere og flere udvidelser af HTML-sproget, men ikke alle understøttes af alle browsere. Man bør derfor være opmærksom på, at nogle koder måske ikke virker i en bestemt browser. Hvis man ønsker at lave sider, der er på forkant med udviklingen vil man naturligvis benytte alle kendte HTML-funktioner, som en udvalgt browser understøtter. Er man derimod mere fokuseret på indholdet af sin side og ønsker man, at mange skal læse det bør man holde lidt igen med det 'smarte' - medmindre man sikre sig, at siderne kan læses på mange browsere.

Det er en god ide at have et par af de udbredte browsere installeret, f.eks. den nyeste Netscape, den nyeste Microsoft Internet Explorer. Derudover er en eller anden gammel browser også god at have. På den måde kan siderne afprøves i forskellige browsere for at se, hvordan de ser ud.

Hovedreglen er derfor, at siden skal kunne læses af alle, eller i hvert fald af flest mulig.

Hvis du vil anvende script-sprog (JavaScript eller VBScript) skal du også her være opmærksom på at ikke alle browsere opfører sig ens (se afsnittet JavaScript og VBscript).

JavaScript og VBScript?

Ikke alle browsere understøtter de samme script(dele). Eksempelvis understøtter Microsoft Internet Explorer (version 2 og 3) ikke Image-objektet. VBScript benyttes kun af Microsoft Internet Explorer og vil derfor ikke kunne anvendes i andre browsere. Anvend derfor hellere JavaScript, der er langt mere udbredt.

Selve JavaScript-koden bør omgives af kommentar-koder (<!-- ... //-->). Dette sikrer at ældre browsere, der ikke understøtter JavaScript, ikke bliver forvirret af selve koden. De to skråstreget (//) foran kommentar-afslutningen sikrer, at JavaScript-fortolkeren ikke opfatter --> som en JavaScript-kommando og fremkommer med en fejl. Eksempelvis:

<SCRIPT LANGUAGE="JavaScript">
<!--
// her kommer selve koden
// -->
</SCRIPT>

Hvis du vil benytte JavaScript på dine sider bør du finde og læse nogle af de udmærkede vejledninger og referencer der findes forskellige steder på Internet. Eksempelvis på http://developer.netscape.com/library/documentation/index.html

Frames

Spørgsmålet om frames ligger i forlængelse af problemet om browser-funktioner. Mange brugere bryder sig ikke om frames - måske fordi det endnu er lidt besværligt at anvende dem. Hovedreglen må derfor være kun at bruge frames hvis det tjener et nogenlunde fornuftigt formål.

Hvis du ikke ved, hvordan du opretter frames i et HTML-dokument er resten af dette afsnit uden betydning.

Lav samtidig en komplet udgave af siderne som ikke anvender frames. Dette skal forstås dobbelt: Dels skal <NOFRAMES>...</NOFRAMES> blokken anvendes, dels bør brugeren have mulighed for at vælge en udgave uden frames - selvom han/hun benytter en browser der kan vise frames.

Sørg endelig for, at links har den korrekte TARGET= attribut. Det vil sige, at links til fremmede servere/sider bør have TARGET="_top", så de ikke vises inden i dine egne frames. Derimod bør dine egne undersider vises i dine frames og skal derfor have et passende TARGET=.

Afprøv siden

Afprøv dine sider inden du gør dem tilgændelige for alle Internettets brugere. Dels bør du prøve siderne af på din egen maskine inden du lægger dem ind på din web-udbyders server. Men også når siderne er lagt på plads bør du prøve dem af. På nogle servere gør det nemlig en forskel om et filnavn er skrevet med store eller små bogstaver - og den slags problemer opdages ofte først når siderne er lagt på plads.

Afhængig af din opsætning kan det være svært at få en WWW-browser til at fungere uden at være online med udbyderen. Hvis du benytter Windows 3.x kan det problem løses med MOZOCK.DLL, der kan 'snyde' WWW-browseren. Der findes også en kort tilhørende tekst. Placer blot filen i \WINDOWS\SYSTEM under navnet WINSOCK.DLL. Hvis dit opkaldsprogram ikke er startet, dvs. når du ikke har forbindelse til din Internet-udbyder, vil denne 'tomme' WINSOCK blive brugt. Har du derimod online-kontakt vil den rigtige WINSOCK blive brugt - under forudsætning af, at den ligger i samme directory/katalog/bibliotek som selve opkaldsprogrammet. Brug af programmet sker på eget ansvar!

En anden løsning består i at sætte 'Online status detection' til 'None' (Setup under File) i Trumpet Winsock og slå automatisk login fra (Options under Dialler)

Ingen ufærdige sider

Noget som man absolut bør undgå er ufærdige sider. Det vil sige sider, der kun - eller næsten kun - indeholder teksten "disse sider er undet opbygning" eller den tilsvarende "under construction".

For det første er beskeden overflødig: Er der intet indhold kan læseren nok regne ud, at det er på vej. For det andet er næsten alle web-sider konstant under bearbejdning/ændring.

Hvis nogle sider endnu ikke er klar så lad være med at gøre dem offentligt tilgængelige gennem links eller andet. Siderne kan sagtens ligge på serveren uden at være synlige for almindelige brugere. Først når siderne er klar til fremvisning bør der laves links til dem. Ligeledes skal adressen (URL'en) på en side ikke offentliggøres eller tilmeldes søgesystemer, emneoversigter eller lignende før siderne er klar.

Kontrol af siden

Der findes forskellige muligheder for at teste, om en web-side indeholder forkerte koder eller andet, der kan give problemer. Du kan blandt andet benytte programmet SpyGlass HTML Validator. Der findes også nogle online-services, blandt andet:

Diverse små-tips

Henvisninger

På følgende sider kan du få flere gode tips og ideer til web-design: