HTML-Hajen

Overordnede designregler for hjemmesider








Når man starter

Når man starter på at lave en hjemmeside, er man ofte ikke helt afklaret omkring design og indhold, og selv hvis man er, skal man alligevel påregne at skulle revidere både idéen og designet flere gange inden man er tilfreds. Selve designet af en hjemmeside er en kreativ proces, og skal helst være underlagt så få regler som muligt, så gode idéer kan komme til udtryk. Der er nogle få grundregler man skal være opmærksom på, hvis man har tænkt sig at ville have en hjemmeside der kommer ud til andre end den nærmeste kreds af venner og familie:


Indhold er alfa og omega

Der er to grunde til at nogen besøger en hjemmeside: de søger informationer eller de søger underholdning. Findes dette ikke, er der ingen der gider komme på sitet. Content is king, som de siger. I World Wide Web's barndom, omkring 1996-1997, hvor folk bare var nysgerrige efter at se noget på det nye massemedie, kunne man slippe af sted med at have et site uden reelt indhold. Hvis der var et site at kigge på, skulle folk nok komme der, for der var ikke så meget at vælge imellem. Sådan er det ikke længere. Vi har set en webside før, og der er pt. mere end 900 millioner at vælge mellem. De tre vigtigste ting på dit site er indhold, indhold og indhold.


Lær noget programmering

En almindelig misforståelse er, at hvis man bruger systemer som Joomla og hvad de ellers hedder, behøver man ikke kunne programmere. Hvis man nøjes med at bruge en skabelon, kan man nøjes med at kunne ganske lidt programmering, og det giver illusionen af at man slipper let om ved designet. På den anden side, hvor fedt er det lige at have en side der ligner tusindvis af andre sider?

Så snart man skal til at lave noget der ligner design, skal man bruge noget kendskab til grundliggende programmering. Det gode ved at lære programmering er, at det er ret let at komme i gang og få lavet noget der hænger sammen.


Filnavne

Det hedder sig, at man godt kan lave filnavne og biblioteker med mellemrum og specialtegn som f.eks. æ, ø og å. Det kan man også, men det er en rigtig dårlig idé. Det er ikke alle søgemaskinerne der kan finde ud af at håndtere mellemrummene og specialtegnene, og dem der kan, kommer også på afveje fra tid til anden og får kun indekseret en del af linket. Det giver en masse unødige fejlmeddelelser på sitet og holder de besøgende væk. Brug tallene, bogstaverne a til z (både store og små bogstaver) og de to streger bindestreg, -, og underscore, _.


Navigation

Når man nu er kommet så langt som at have genereret et indhold som nogen kunne være interesseret i, er det altid en god idé, at sætte siderne op så de besøgende kan finde rundt til de andre gode ting på sitet. Dette er ikke et forsøg på at være vittig! Mange ejere/web designere glemmer at lave ordentlig navigation på deres site, fordi de er så fokuseret på at generere indhold, at de besøgende ikke kan se, at man har mere at byde på end blot den side de står på.

Forsøg med at spore besøgendes øjenbevægelser viser at den øverste del af siden og en del af venstre margin er der hvor de besøgende kigger først. Ikke helt oppe imod den øverste kant men i størrelsesordnen 5 cm fra kanten. Tilsvarende fra venstre margin. Ikke helt ude ved kanten, men et par cm inde. Grundliggende, som vi overskuer et stykke papir med tekst. I disse områder har man læserens udelte opmærksomhed, så her anbringer man overskrifter og navigationspaneler, som hjælper læseren med at finde rundt.

Der er flere måder at lave sin navigation på, afhængig af behov og personlig smag. Tommelfingerreglen er, den skal være synlig og intuitivt let at forstå. Er man i tvivl, så få nogen til at se på siden. Kan de finde rundt uden problemer eller instruktioner, er det fint, og hvis ikke, skal navigationen laves om.


Sideopsætning

Man arbejder grundliggende med to typer af sideopsætning til hjemmesider:

OverskriftOverskrift
NavigationBrødtekstNavigation
Brødtekst

Feltet med brødteksten kan selvsagt deles op i søjler og flere mindre felter, hvis man vil. Det er det man ofte ser på nyhedssider. Nogle sites, f.eks. mange sites lavet med WordPress, har navigationen i højre side i stedet for venstre. På dette site sidder navigationsfeltet som en bjælke under overskriftsfeltet. Når man kigger rundt på nettet ser man flere variationer over de to temaer. Der er absolut ingen grund til at holde sig stringent til disse simple opbygninger, hvis man kan få sitet til at fungere bedre ved at udbygge dem.

I gamle dage da vi havde skærme på 15 tommer og lav skærmopløsning, var sideopsætning ikke det store problem. Der var for lidt plads, så det skulle udnyttes til det yderste. Det var heller ikke nødvendigt at overveje en maksimal bredde, på det man lavede, for 15 tommer var i bedste fald godt nok, og der var under ingen omstændigheder grund til at bruge mindre end den fulde skærm til at læse på.

Fra udgivelser af bøger, ved man at der er en fysisk begrænsning på hvor bred en tekst skal være før læseren skal bevæge hovedet for at læse hele linjen. I forhold til moderne skærme, er fuld skærmbredde på tekst alt for bredt til at være læsevenligt, så sørg for at begrænse tekstens bredde ved at definere en fast bredde. Erfaringsmæssigt er 800-1000 pixel i bredde på selve teksten et godt bud på en øvre grænse, men det varierer lidt med tekststørrelsen og fonttype, så man må lige prøve sig lidt frem.

Hvad så med resten af pladsen? Brug den til noget fornuftigt. Navigationspanel, billeder, tekstbokse, reklamer osv. Der er masser af gode muligheder.


Sidelængder

En almindelig misforståelse omkring hvor meget der må stå på en side er, at der ikke må stå ret meget, for læseren gider alligevel ikke læse det.

Dette er forkert af to grunde:
  1. Søgemaskinerne som indekserer siderne, og viser link til siderne når man søger efter et eller andet, favoriserer sider med meget indhold.
  2. Folk læser lange tekster hele tiden, f.eks. bøger, artikler/nyheder og instruktioner. Det folk de ikke gider læse, er tekst som er noget usammenhængende og ustruktureret rod.
Struktur med overskrifter og underoverskrifter, velformuleret sprog uden en masse irriterende stavefejl, er det der sælger en side. I nettets barndom var det sjovt at klikke rundt mellem en masse sider, og der var lidt legetøj over det nye medium. I dag er det et stykke professionelt værktøj, hvor besøgende ønsker hurtigt at kunne overskue og finde informationer. At klikke rundt på en masse sider for at finde simple informationer, virker i dag irriterende og får de besøgende til at forsvinde.

En god tommelfingerregel: Ét emne, én side. Hvis man har mange billeder så siden bliver langsom, kan der være en idé i at splitte op i flere sider, men som udgangspunkt: Ét emne, én side.


Farver

Der er stærkt divergerende meninger om farver på sites. Den almindeligt accepterede holdning er, at tekst er bedst hvis den er sort på hvid baggrund. En del af argumentationen er, at det virker mere seriøst end diverse farver. Dette er imidlertid nok mest et udtryk for reaktionære holdninger.

Farver er fint. Man skal dog overveje hvad man gør. Brug farver til tekst og baggrund som gør det let at læse teksten. Sort på lysegul baggrund er fint, mens orange på lysegul er en skidt idé. Meget skrigende farver kan være hårdt for øjnene, hvis der er meget der skal læses. Sider med meget tekst stiller derfor andre krav end sider med mange billeder.

Det eneste rigtige er, at prøve sig frem. Man oplever mange kombinationer der fungerer i praksis.


Fonte

Det største trick ved et stykke tekst er, at man kan læse det. Det næststørste er, at man kan læse lange tekstafsnit.

Brug af fonte er en af de ting man skal overveje kraftigt. Det kan være fristende at prøve at bryde normen og lave noget med krøllede skrifttyper der ligner skråskrift eller gotiske bogstaver. Til meget korte sekvenser, ja, fin idé. Længere sekvenser, nej! Fokus går fra indholdet til at det bliver en udfordring at læse, og hele idéen og budskabet med teksten forsvinder.

At læse en side på en skærm er fundamentalt forskelligt fra at læse på et stykke papir. En af grundene til at man i bøger ofte bruger Times New Roman er, at skrifttyper med seriffer er lettere at læse over længere tid/flere sider. På en skærm bliver teksten i reglen lidt mere grynet end på papiret, man har en anden afstand til teksten end man typisk har med en bog og man sidder i en anden stilling. Her kan man med fordel bruge fonte uden seriffer, og gerne fonte der er lidt åbne/brede, som f.eks. Arial, Tahoma og Verdana.

Som med farverne: Man må prøve sig frem og se hvad der fungerer for ens hjemmeside. Man oplever mange kombinationer der fungerer i praksis.


Animationer, blinkende tekst og andre pornoeffekter

Den korte version: Lad være!

Den knapt så korte version: Brug det med omtanke. Enkelte animationer og effekter er fint, hvis de bidrager med noget konstruktivt til sitet, som f.eks. at give lidt liv eller henlede opmærksomheden på et specifikt område på siden. Skærmbilleder der ligner en myretue af ting der bevæger sig (eller Las Vegas om man vil), virker forstyrrende. En god tommelfingerregel er max én effekt pr. skærmbillede. Less is more, som de siger... De sites der forsøger at opnå et look i retning af Las Vegas, Flunkerne, Find Holger osv. skal selvsagt "bare" bruge løs af effekterne og blot overveje placeringen af disse.


Find inspiration

Hvis man ikke fra starten af har en klar idé om hvordan man vil have siderne til at se ud, er der intet fordækt i at se på andre sites og bruge deres idéer. Det gælder både inspiration til måder at gøre tingene på, såvel som afklaringen af ting man bestemt ikke vil have eller gøre på sitet. Begge dele er lige vigtige. Det kan være sites der har implementeret idéer som man selv overvejer, hvor man kan se løsningen i praksis inden man kaster tid efter at lave den.

At finde inspiration er også en god idé, hvis man ved hvordan siden skal se ud. Ved at kigge i kildekoderne (dvs. HTML-programmeringen) på de sites der indeholder elementer man selv vil bruge, kan man ofte aflure nogle elegante løsninger, og spare tid på ikke at skulle opfinde den dybe tallerken hver gang man vil lave noget nyt. Mange gange kan man kopiere koderne direkte og blot nøjes med at ændre til de farver, skrifttyper osv. som man selv bruger.


Lad være med at spille Karl Smart

Der er altid nogen der skal prøve at være smarte, skære hjørner og ignorere sund fornuft når de laver et site. Webdesign er bygget op af tre typer af regler: dem der ikke kan brydes, dem der kan bøjes, og dem der kan brydes. Brug sund fornuft og se hvad andre gør og ikke gør. Hvis man bryder de forkerte regler, og det er forbavsende let at gøre ved en fejltagelse, bliver man enten helt ignoreret af søgemaskinerne eller anset for at være uærlig eller uduelig og derefter enten helt filtreret fra i søgningerne eller parkeret på side 1000 i listen over hits. At have et succesfuldt site kræver noget arbejde, noget viden og en række færdigheder.