Sidlayout: detaljer

Sidan uppdaterades senast: 2005-07-19


[ Hoppa direkt till textinnehållet ] [ Hjälp ] [ Tillgänglighetsinformation ]
Gå till LiU.se

Textlayout

Det finns några enkla regler du kan följa för att text ska bli lättläst. I sajten nedan så har det gjorts på ett bra sätt. (Bilden är förminskad och därför svårläst trots allt).

  • Om du vill vara säker på att användaren får se samma typsnitt som du själv använt, så bör du använda webbsäkra typsnitt. Problemet är att användaren måste ha typsnittet installerat på sin dator för att kunna se det. Det räcker alltså inte med att du har det på din dator. Webbsäkra typsnitt finns installerade på flertalet datorer. Det finns websäkra typsnitt med och utan seriffer, det vill säga små fötter längst ner. Seriffer gör text mer lättläst på papper, men inte på webben. Verdana, Arial, och Helvetica saknar seriffer, medan Times New Roman, och Courier New har seriffer. Om användaren trots allt varken har Verdana, Arial, eller Helvetica installerat så kan du be datorn att plocka fram något annat typsnitt utan seriffer genom att ange sans-serif som ett av typsnitten i din lista.
  • Om texten är för bred, så får ögat svårt att byta till nästa rad. Du bör därför begränsa radernas längd. 60 tecken inklusive mellanslag är ofta en bra längd.
  • Håll ihop text och rubrik: Standard HTML gör ett mellanrum mellan text och rubrik. Använd en CSS för att hålla ihop texten och rubriken istället.
  • Gör mellanrum mellan rader
  • Gör en utskriftsvänlig layout också: Använd en alternativ CSS för att ge bra utskrifter.

De färger du har valt för din sida påverkar också hur lättläst texten blir.

  • Kontrast. Svart text på vit bakgrund (och tvärtom) är mest lättläst, och har maximal konstrast. Om du vill piffa upp sidan med andra färger, se då till att få god kontrast: Tänk på att ögat inte kan fokusera på rött och blått samtidigt. Tänk också på att färgblinda inte ser någon text alls, ifall kontrasten mellan text och bakgrund i olika färger är för dålig.
  • Svart på vitt, eller vitt på svart? Om du har ett dåligt upplyst rum, så är svart bakgrund bättre, eftersom den inte ger ett så skarpt sken. Om du istället har ett väl upplyst rum, så är en vit bakgrund bättre. Därför har text-tv normalt sett (om du inte ändrar) svart bakgrund.
  • Tänk på belysningen i rummet: Om det är mörkt ska bakgrunden vara svart. Om det är ljust ska den vara vit.
  • Webbsäkra färger: Tidigare var det vanligt med skärmar som bara klarar 256 färger. Då var det viktigt att använda så kallade webbsäkra färger. Det är fortfarande vanligt att primärt använda webbsäkra färger.

Länklayout

Det finns några enkla regler du kan följa för att länkar ska bli så tydliga som möjligt. En länk ska indikera att man kan nå en text genom att klicka på den. Dessutom kan den indikera om man varit där förut, eller om den inte besökts. Klickbarhet och historik indikerar du tydligast om du följer följande tumregler:

  • Använd textlänkar: Textlänkar indikerar var man varit, och var man ännu inte har varit. Med bilder försvinner den funktionen.
  • Använd konsekvent samma färger för länkar: Om du har olika länkfärger på olika sidor, så får många användare problem. Tidigare underlättade det för många att ha den blå standardfärgen för länkar, men det gäller inte längre.

Det finns även några andra tumregler för länkar:

  • Länktitlar: Ibland passar det inte förklara vart en länk leder med en lång text. Du kan använda länktitel-taggen för att ge en förklaring när användaren peklar på länken med pekaren.
  • Undvik länkar inom sidor: De flesta förväntar sig att en länk leder till en ny sida.
  • Öppna länkar inom sajten i samma fönster, och länkar till andra sajter i ett nytt fönster.

Bildlayout

För att ge bra nerladdningstider och snygga bilder så behöver du välja rätt förmat. Använd JPEG för fotografier och andra bilder med mycket detaljer och många färger. Om bilden består en enkel form med få färger ska du istället använda GIF. Med GIF får du mindre filer, men bilder blir inte bra.

För att bilderna ska ladda snabbt bör du använda attributen width och height i dina img taggar. Med den informationen kan webbläsaren förbereda sidans layout för bilder innan dom laddas. Annars måste sidan ritas om för varje bild.

Skrollning

Tvärt emot vad som står i många designriktlinjer så kan det vara bra att ha längre sidor än som syns på skärmen. Särskilt förstasidan kan vara längre. Att skrolla en förstasida med nyhetsrubriker i en webbtidning kan till exempel motsvara att snabbt bläddra igenom en tryckt tidning.

När du har långa sidor är det viktigt att du håller reda på vad som hamnar under kanten för det synliga området. Många besökare kommer inte att skrolla din sida, utan nöja sig med det dom ser vid första anblicken. Dom kommer bara att gå vidare med din sajt om det dom ser väcker deras intresse. Därför måste du presentera en översikt över det allra viktigaste på sajten över kanten på sidan. Mindre viktiga saker kan du placera under kanten.

  • Du bör inte dela upp korta texter.
  • Undvik att göra en sida mer än ett par skärmar hög.
  • Långa texter kan du dela upp på flera sidor.

Mer läsning om grafisk design

Här kan du läsa mer om grafisk design av dina sidor.