God smak på webben

HTML är ett kodspråk som möjliggör att webben är plattformsoberoende. Det betyder att alla oberoende av program- och hårdvara har tillgång till samma information. Med HTML strukturerar (markerar) man dokumentets innehåll i rubriker, stycke, listor eller tabeller.

Dessa markeringar (styrkoder) tolkas av en webbläsare och dokumentet presenteras på det sätt som det strukturerades. Hur sedan dokumentet ser ut beror helt och hållet på de inställningar (typsnitt, färger, skärmbredd, skärmupplösning o.s.v.) som läsaren har. Har man t.ex. en stor skärm breder innehållet ut sig, har man en liten skärm blir det smalare. Dokumentets layout anpassar sig till rådande förhållanden.

Att försöka manipulera layouten och tvinga besökaren att titta på dokumentet på ett visst sätt kommer oftast att leda till problem. HTML är inte ett sidbeskrivningsspråk, d.v.s. språket beskriver inte hur sidan ska se ut. Språket beskriver sidans struktur. Man kan sedan rekommendera olika utseende för de olika strukturerna med hjälp av style sheets. Trots det kan webbsidan se helt olika ut beroende på vilken dator och med vilket program den visas.

När man designar webbsidor måste man därför alltid tänka på att sidan ska se bra ut på så många olika system som möjligt. Om man vill att alla ska kunna se ens sidor så får man undvika koder och konstruktioner som t.ex. Netscape är ensamma om. Ju färre antaganden man gör om läsarnas programvara, skärmstorlek och datortyp man gör, desto bättre.

Stora bilder

Man ska också undvika alltför stora bilder (i kilobyte räknat), speciellt på titelsidorna. Bilder tar lång tid att föra över på långsamma modemförbindelser och lång tid att rita upp på skärmen för äldre datorer.

Tänk också på att bara cirka 10 procent av användarna rullar neråt på sidan, ifall sidan inte får plats i webbläsarens fönster. Lägg alltså det viktigaste överst, och inte en stor logotyp som täcker större delen av skärmen.

Måste du ha en stor bild, lägg den gärna på en separat sida, och ange storleken i kilobyte vid sidan av länktexten, så får besökaren avgöra om hon vill hämta hem bilden eller inte. Ange alltid WIDTH, HEIGHT och även ALT till alla bilder. Det gör att sidan laddas in fortare. Tänk också på att bilder med många färger i kan se fruktansvärda ut på äldre skärmar som inte kan visa så många färger.

Intranät

När man gör webbsidor för internt bruk inom ett företag kan man vara lite mer vårdslös eftersom man vet vilket webbläsarprogram som används, vilken typ av datorer personalen har och hur de är inställda, men fortfarande vet man inte vilken storlek på texten användaren har ställt in, vilken fönsterstorlek hon har för tillfället eller om hon valt att slå av bildvisning.

Dessutom kan det hända att vissa eller alla av någon anledning byter webbläsarprogram i framtiden, och då måste alla sidor som utnyttjar t.ex. Netscape-specifika koder justeras. Skriver man rätt från början så slipper man det extrajobbet.

God design

God designs uppgift är att göra texten lätt att läsa. God design märks inte, eftersom idealet är att läsprocessen ska gå automatiskt, utan att man tänker på det. Man ska aldrig behöva anstränga sig för att läsa texten.

Allt i designen som stör läsandet ska därför undvikas. Att välja andra bakgrundsfärger än vitt eller någon ljus färgton är dumt eftersom texten då blir svår att läsa. Mönstrade bakgrundsbilder är ännu värre, och väljer man att använda en sådan så måste man vara väldigt noggrann med att testa sidan på olika datorer och med olika skärminställningar för att vara säker på att den inte blir svårläst. Kom ihåg att du inte kan utgå ifrån att alla ser din sida som den ser ut på din skärm.

På webben ska designen också hjälpa besökarna att navigera bland sidorna. Tydliga bilder och förklarande länktexter är ett krav. Det ska klart framgå vad som händer och vart man kommer när man klickar på en länk. Det är därför också viktigt att namnge sina mappar och HTML-filer så att det av URL:erna framgår vad de handlar om.

God design har mycket med vana att göra; det är lättast att läsa text och hitta bland sidor som är uppställda på det sätt man är van vid. Därför ska man till exempel inte ändra färgen på länkarna i onödan. Länkar till sidor som användaren inte har sett är blå, och länkar till besökta sidor är lila eller röda. Ändrar man på detta så förvirrar man sina besökare.

Frames

En annan sak som stör det normala sättet att navigera bland webbsidor är att dela upp sidorna i Frames (mer om detta i ett kommande avsnitt). Användaren kan inte förutse i vilken ruta som länkade sidor kommer att hamna, URL:er pekar fel, och utskrifter blir svårare att göra. Frames-indelade sidor går inte att sätta bokmärken på, eftersom man då kommer tillbaka till en annan version av Frameset:et.

Back-knappen fungerar också olika i olika versioner av de populära webbläsarna. I en del följer man det spår av sidor i de olika rutorna som man faktiskt har sett, i andra hoppar man ur hela Frameset:et. Dessutom tar de olika rutorna upp värdefull plats på skärmen. Använd därför Frames endast då det verkligen tillför något till din sida. Och glöm inte att erbjuda ett <NOFRAMES>-alternativ för dem som inte kan eller vill se Frames.

Rörliga element

Det mänskliga seendet är konstruerat så att om någonting i synfältet rör sig så får det all uppmärksamhet. Eventuell text och andra saker på sidan kommer knappt att märkas alls. Därför ska man inte ha saker på sin sida som rör sig, om inte avsikten är att dra all uppmärksamhet dit, till exempel vid omedelbar livsfara. Rörliga element inkluderar animerade GIF-bilder, rullande texter och blinkande text.

Formuleringar att undvika

Vissa webbdesigners som har gjort sidor som bara ser vettiga ut i en viss webbläsarversion eller med en viss skärmstorlek försöker ibland skyla över detta genom att uppmana sina besökare att installera samma webbläsare eller ställa in sina skärmar likadant. Gör inte så. Dels är det oartigt att tala om för andra vilken webbläsare de ska använda, dels kanske besökaren inte har möjlighet (eller motivation nog) att byta.

Andra formuleringar som ska undvikas är "klicka här" (det är uppenbart att man ska klicka på en länk, om man vill) och "under konstruktion". Alla sidor är alltid under konstant omarbetning, det behövs ingen speciell annonsering. Och är sidan inte tillräckligt klar för att visas upp alls, så ska den heller inte visas upp alls.

Var noggrann

Se alltid till att dina sidor är uppdaterade och korrekta, det gäller både textinnehåll och länkar. Gör gärna upp en plan för uppdateringen redan när du gör sidan första gången. Vissa typer av sidor (referensinformation t.ex.) uppdateras aldrig eller mycket sällan, andra ska uppdateras ofta. Och kontrollera då och då att dina länkar fortfarande leder någon vart.

Var noga med upphovsrätten. I den digitala världen är det väldigt lätt att kopiera andras texter och bilder, men lättheten gör det inte lagligt. Att kopiera andras dokument kallas för stöld, även om det sker med ett par musklick. Den som gjorde jobbet ska ha uppskattning och ingen annan.

Slutligen så ska man naturligtvis vara noga med att HTML-koden är korrekt. Glöm inte att stänga alla citat, skriva ut alla nödvändiga slutkoder och att göra svenska bokstäver och specialtecken riktigt. En del HTML-editorer har inbyggda funktioner för syntaxkontroll, det finns också speciella webbsidor på nätet som kontrollerar koden på de sidor man begär. Ett enkelt test är också att titta på koden med Netscapes "View page source" har du glömt att stänga citat eller gjort liknande syntaxfel kommer den sektionen av din kod att blinka (gäller Netscape 2.0 och senare). Sådana fel klarar man sig i regel ifrån ifall man använder en HTML-editor, men dessa låter dig istället göra andra typer av fel, till exempel att länkar och bildreferenser leder till lokala filer på din hårddisk (URL:en börjar på file://) vilket gör att länkarna fungerar för dig, men inte för någon annan.

Testa gärna sidorna på flera olika datorer, uppkopplade till Internet på olika sätt (modem, ISDN, fast förbindelse) och med flera olika programvaruversioner.

<<< Förra avsnittet Innehåll Nästa avsnitt >>>