Webbdesign och layout

1. Inledning
2. Vad är webbdesign?
3. Hur planerar man en sajt?
4. Hur man lär sig design?
5. Planera startsidan
6. Förhållandet mellan form och innehåll

1. Inledning

Den här sidan handlar om webbdesign och layout och det betyder att den tar upp sådant som hur man planerar en sajt, hur man disponerar en startsida på ett bra sätt och hur man utnyttjar olika typsnitt och färger för att göra sidan både snygg och lättläst.

Sidan skrevs ursprungligen 1998, då man fortfarande stavade "webb" med bara ett "b". Sidan uppdaterades under 2005. Under denna tid har webben utvecklats mycket och en del gammal information har jag tagit bort.

Du kan läsa mer om layout på sidorna Teckensnitt, Grafisk produktion, samt på sidorna om multimedia. Tänk också på att det finns kompletterande sidor, framförallt i sektionerna om stilmallar och Bilder och färger.

Du har säkert redan läst mina 10 enkla regler för saker man skall undvika när man skapar hemsidor. Dessa förkunskaper bygger jag nu vidare på.

2. Vad är webbdesign?

Webbdesign är arbetet med att skapa en snygg och lättläst hemsida. Det är ett arbete som har några bestämda regler, men som framförallt lämnar det öppet för var och en att uttrycka något personligt. Det kan vara egna bilder, färgkombinationer, osv.

Det heter ju att en byggnad eller möbel har en viss design och man pratar på samma sätt om att en tidningssida har en snygg layout. Men man tänker sällan på det arbete som ligger bakom slutprodukten. Faktum är att både ordet "design" och ordet "layout" betyder att planera, anlägga, uppställa, gestalta, formge, o.s.v, och betecknar alltså även förarbetet.

Varför skall man planera en sajt eller en sida? Här finns traditionellt två olika svar. Det finns nämligen två olika skäl till varför man sysslar med design och formgivning:

Det finns dels de som arbetar med det för dess egen skull, för att hitta nya, spännande stilarter och former. Design och layout blir då ett självändamål, som snarast kan liknas vid en konstart. Jag är själv inte så intresserad av denna inriktning.

Det andra syftet innebär att design och layout används för att göra innehållet lättare att ta till sig. Funktionaliteten är då det viktigaste, även om det naturligtvis också måste vara snyggt och stilrent.

3. Hur planerar man en sajt?

Du förstår nu säkert att man behöver planera sin sajt, både för att underlätta för sig själv, men framför allt för att hjälpa besökaren. Innan du börjar koda de olika sidorna bör du ha gjort en genomtänkt plan som du kan arbeta efter.

Det kallas ibland för att skriva ett manus, men om din sida eller sajt inte är så komplicerad så handlar det mest om att göra en grovskiss. Webbyråerna brukar lägga ungefär 30% av tiden på förberedelser, 30% på att skriva koden och tillverka bilderna, samt 30% för att felsöka och finjustera.

Ofta börjar man med att bestämma hur stor sidan får vara. Skärmbilden är normalt 800x600 eller 1024x768 pixlar och dessa storlekar är idag standard.

En metod är därför att öppna ett bildbehandlingsprogram och en ny fil med den storlek man vill använda. Sedan kan man skissa sig fram till en snygg design. Jag visar hur man gör detta rent praktiskt på mina sidor om Dreamweaver och GoLive, i sektionen för programkunskap. Läs mer >

Jag tänker nu visa planeringen för två olika sajter: privatpersonen och den lilla föreningen:

Exempel 1: privatpersonen

Peter Svensson fick utrymme på ett webbhotell och en domänadress i present och har nu satt igång med att göra en hemsida. Till en början använder han bara en enda sida, men det visar sig snart inte räcka. I stället vill han ha en startsida, från vilken man sedan kan nå olika underavdelningar, enligt följande:

index.html blir startsidan

Peter.html blir en sida där Peter berättar om vem han är, när han fyller år, vilken skola han går i o.s.v. Han berättar också om vad han brukar göra på fritiden och vad han gillar för musik. Den här sidan lägger han sedan i en mapp som han döper till "Peter". I samma mapp lägger han också en länksida.

Musik.html hamnar i mappen "Musik" och här berättar Peter mer om sitt stora musikintresse. Han länkar också till två andra sidor i samma mapp: Cozmoz.html och Skivor.html. Den första av dessa handlar om Cozmoz, som är Peters band. På den sidan har han även tänkt att lägga in konsertbilder och kanske ett par demolåtar så småningom. Sidan som heter "Skivor.html" är en enda lång lista över vilka skivor som Peter har, med kommentarer och recensioner.

Sajten får alltså följande struktur:

Det kan kanske tyckas överambitiöst att skapa dessa underavdelningar, men Peter vet ännu inte hur många sidor han kommer att vilja lägga upp. Därför tar han det säkra före det osäkra och gör ordentliga underbibliotek på en gång.

När han bestämt sig för hur strukturen skall se ut och har en skiss på designen av sidorna, sätter han igång med det praktiska arbetet. Han skapar då en sida som han testar och sedan använder som mall.

Exempel 2: Den lilla föreningen

Sävenäs IF vill lägga upp en hemsida, där man presenterar klubben, dess historia och ger fortlöpande information om matcher och resultat. Man väljer att ha en enkel startsida, med klubbhuset som bild. Sedan har man länkar till följande sidor, som var och en bildar en egen underavdelning:

Klubb.html innehåller klubbinformation, t.ex var klubblokalen finns och när den är bemannad, telefon- och faxnummer dit, samt e-postadresser till klubbens kansli. Man har också lagt in ett formulär där intresserade kan lämna uppgifter och ge sina synpunkter på sidan.

Nyheter.html är en sida som talar om vad som har hänt i föreningen. Sidan uppdateras så fort kansliet får veta något nytt, t.ex matchresultat och kommande tävlingar.

Resultat.html är sidan med alla resultat. Eftersom man bara har ett herr- och ett damlag, har man lagt resultat och tabeller på samma sida. Men man funderar på att starta en ungdomssektion och då kommer man förmodligen att dela upp resultaten så att varje lag får en egen sida.

Kalender.html innehåller information om kommande aktiviteter. Här finns alla de viktiga datumen registrerade, som när årsmötet skall hållas och matchprogrammen för de bägge lagen. Sidan är upplagd som en kalender, där aktiviteterna kommer i ordning efter datum. Man har även lagt upp gamla protokoll här.

Souvenir.html har en förteckning över vilka souvenirer man säljer, samt lite bilder på några av dem.

Match.html är en sida med länkar till olika matchbilder.

Historik.html innehåller en kort historisk beskrivning av klubben. Denna del hoppas man kunna bygga ut mer så småningom, när man samlat in alla fakta och hittat lämpliga bilder.

Sajten får alltså följande struktur:

På det här sättet får man alltså en lättläst och lättnavigerad struktur. Behöver man byta ut en sida är den gamla lätt att hitta. Vill man i stället lägga till en sida går det också lätt att hitta rätt underavdelning. Den här sajten blir alltså mycket lättskött och kan växa ganska mycket innan det är dags att skapa nya underavdelningar.

4. Hur lär man sig design?

 Ett bra sätt att lära sig vad som är snygg och användbar design är att läsa böcker i ämnet, titta på hur andra har gjort och sedan öva, öva och öva. Själv brukar jag använda följande metod: när jag besöker en snygg sida tar jag en skärmdump av den, som jag sparar. Sedan sparar jag sidans Html-kod genom att välja "Spara fil som" i Arkiv-menyn.

Nu har jag alltså två olika filer som jag kan jämföra. Skärmdumpen visar sidan så som den faktiskt såg ut och den sparade Html-versionen visar sidans kod. På så vis får jag en ganska bra uppfattning av hur sidan är gjord, var transparenta bilder lagts in och hur bilderna ligger placerade.

Verktygen för att skapa snygg design

De verktyg som finns för design och layout på en webbsida är lätträknade, åtminstone om vi pratar med normalanvändaren. Proffsen använder diverse trix och knep, t.ex olika scripts, som är alldeles för svåra att hantera för de flesta av oss andra. Därför struntar vi tills vidare i de mer avancerade funktionerna och tittar på vad vi då har till vårt förfogande. Det finns då:

• Html
• GIF- och JPEG-bilder
• Stilmallar

Bilderna på en sida avgör hur snygg den blir. Företag som vill profilera sig på webben hyr ofta in personer som är duktiga på att rita snygga bilder. Det kostar mycket, men det smakar desto mer. Snygga bilder lönar sig, helt enkelt.

På motsvarande sätt är fula, mörka, otydliga och dåligt bitmappade bilder ofta sämre än inga bilder alls. Tänk också på att nästan alla bilder blir mörka, fula och otydliga när de skrivs ut på en normal skrivare.

Proffsen använder sig av program som delar upp en stor bild i mindre. Detta gör man för att små bilder laddas mycket fortare, än en motsvarande stor. Men det ställer också större krav på webbsnickraren.

GIF-animationer var vanligare förr, men syns nu mest i reklambanners, eftersom allt som rör sig drar till sig uppmärksamhet. Man bör därför vara ganska sparsam med animationer, eftersom de kan avleda uppmärksamheten från det som är viktigt på en sida. Dessutom kan animationer vara ganska tröttsamma, om man måste titta länge på en sida.

I stället för GIF-animationer är det idag allt vanligare att man jobbar med Flash, ssom är ett program för att göra vektorgrafik. Man kan göra såväl enkla animationer som hela webbplatser.

Stilmallar skapades för att ge webbdesigners bättre layoutmöjligheter. Med en extern stilmall kan man t.ex styra utseendet på samtliga sidor på en sajt, i stället för att skriva kommandona på var och en av sidorna. Jag har gjort så på min resurs. Stilmallar möjliggör också "riktig" layout, med sådana specialfunktioner som att bestämma mellanrummet mellan två bokstäver, två ord eller två rader. Med stilmallar kan man även ge texter och bilder en exakt position på en sida och man kan skapa flera olika lager av texter och bilder, m.m.

Idag fungerar stilmallar även om det finns mer att önska. Webläsarna klarar inte alltid av att tolka stilmallskoden på ett korrekt sätt. Proffsen löser detta genom att ha en särskild sida för varje webbläsare. Ett script känner av vilken webbläsare som används och dirigerar besökaren till rätt sida.

5. Planera startsidan

Nu skall vi planera en startsida. Jag har valt att utgå från startsidan på en sajt eftersom den oftast är den som syns först, som styr de andra sidornas layout och som, enkelt uttryckt, är klart viktigast.

Det utrymme vi har till förfogande är själva skärmbilden, d.v.s den del av sidan som besökaren ser på skärmen när sidan laddats ner. Det är där den viktigaste informationen skall synas, för det har nämligen visat sig, att ytterst få scrollar nedåt på en okänd eller oattraktiv startsida.

Som jag skrev tidigare måste man börja med att bestämma sig för hur stor den skall vara. 800x600 eller 1024x768 pixlar - eller något annat mått.

Innan du börjar behöver du tänka igenom några viktiga saker:

Fundera över vilket huvudsyfte startsidan har, innan bestämmer dig för en viss design och layout. Det är nämligen viktigt att sidans utseende harmoniserar med budskapet. Vad skall sidan handla om?

Skriv upp några av de saker du vill att besökaren skall se när de besöker din startsida. Att använda tre sådana riktlinjer är lagom. Du kanske vill att besökaren skall hitta underavdelningen med bilder du ritat. Då måste du lyfta fram denna på något vis och har på så sätt en viktig sak att tänka på när du gör startsidan.

Sidans färg och typsnitt, placeringen av text, bilder och navigeringsknappar skall passa ihop med ditt budskap och med det du vill att besökaren skall upptäcka. Om besökaren måste leta för att hitta sidans syfte, kommer du att tappa många besökare på vägen. Tänk därför noga igenom din strategi och låt det viktigaste synas först och mest.

När du är ute och surfar på nätet hittar du säkert sidor du tycker bra om: de är både snygga och lätta att navigera efter. Man kan få många tips genom att se hur andra har gjort sina startsidor.

Försök att använda bara de typsnitt som kom förinstallerade när du köpte datorn, som Verdana, Arial, Trebuchet och Impact. Och om du ändå vill använda typsnitt som inte är standard: se till att ge den besökande webbläsaren vettiga alternativ. (Detta kan man ju göra i en stilmall.) Annars riskerar du att sidan ser ful ut hos besökaren.

Använd inte för liten text, så att besökaren inte kan läsa den. Undvik också att kursivera då många fortfarande har skärmar som gör sådan text oläslig. Undvik också att blanda teckensorter, t.ex fet och kursiv stil, eller fet och understruken text, eftersom det ser fult ut.

Använd inte för många typsnitt. Tre olika räcker: ett för sidans logotyp, ett för rubrikerna och ett för brödtexten. Använd inte heller för många olika teckenstorlekar, utan håll dig till ett så litet antal som möjligt. Skriver du längre texter och har många olika underrubriker, måste du kanske bryta mot den här regeln, men då använder du säkert ofta numrerade avsnitt, så då går det bra ändå.

Tabeller är användbara om man vill få lite ordning på text och bilder. Har man en teckenstorlek om 12 pixlar så är en 500-600 pixlar bred tabell lagom. Med tabeller kan man alltså begränsa radlängden, något som gör texten mer lättläst.

Testa alltid att skriva ut din sida så att du ser hur det blir. Om du upptäcker felaktigheter tidigt har du lättare för att rätta till dem.

Gör några olika testsidor innan du bestämmer dig för hur en sida skall se ut. Fråga några personer du känner vad de tycker om designen.

Testa sidan i många olika webbläsare, på många olika datorer. Titta även på den på nätet. Det händer ofta att en sida fungerar på egna datorn men ser annorlunda ut på nätet.

6. Förhållandet mellan form och innehåll

Om du har underavdelningar på din sajt och länkar till dem från startsidan, kan du placera länkarna på lite olika sätt:

Det vanligaste är att man placerar innehållsförteckningen i vänstermarginalen och det är också den placering jag både tycker är snyggast och lättast att läsa. Använder man frames kan man mycket enkelt placera en fast innehållsförteckning i vänstermarginalen och sedan ladda startsidan på resten av skärmytan.

Placeringen i högermarginalen är lite mer ovanlig och lite svårare att använda. Här måste man nämligen tänka på att högerjustera länkarna och vill man inte ha resten av texten på sidan justerad åt samma håll, måste man använda en tabell med två kolumner med olika justering, eller använda frames. Tabellvarianten är dock att föredra, med tanke på hur svårt vissa besökare har att se frames.

En innehållsförteckning som ligger överst på sidan ger ett lite annat intryck och passar egentligen bara om man inte har särskilt många länkar. Fördelen med denna variant är dock att innehållsförteckningen kan läggas på varje sida, vilket gör det lättare för besökaren att navigera.

Ungefär samma gäller för en layout med länkarna underst på sidan. Denna variant skall man bara använda när hela startsidan får plats på skärmen. Annars riskerar man att besökaren måste scrolla för att hitta länkarna och det är många som hoppar över ett sådant moment och istället surfar vidare.

Placeringen i mitten är den kanske svåraste att skapa och få snygg. Den kräver att man inte har särskilt många länkar eller textsnuttar och allra helst skall man också använda snygga navigeringsknappar (=bilder).

Vilken av de här varianterna man väljer beror naturligtvis också på tycke och smak. Det finns inga självklara regler för vilken man skall välja och ibland är en layout inte så snygg, men desto mer praktisk.

Oavsett vilken av de olika utseendena man väljer, finns det en viktig detalj att tänka på: det tomma utrymmet . Med det menar jag att det är viktigt att tänka på den plats som ligger mellan texterna och bilderna.

Först och främst måste det finnas luft, för att sidan inte skall se för kompakt ut och dessutom måste man se till att de luftiga utrymmen som finns fungerar ihop med resten av layouten.

Har man t.ex en innehållsförteckning till vänster, är det inte så snyggt att centrera den eftersom det skapas en ojämn luftspalt mellan texten och sidans kant. Lägger man länkarna överst med vänsterjustering kommer man att få ett liknande intryck i sidled. Ett liknande exempel från böckernas värld är då man ibland på en boksida hittar mellanrum mellan orden, som bildar en vit spalt som löper diagonalt på sidan.

Hur vet man då vad som är snyggt? Jo, genom att pröva sig fram och se hur olika utseenden fungerar. Ta ett par steg bakåt och betrakta bildskärmen från ett litet större avstånd. Då ser man ibland underliga fel. Titta på bilderna och texten och skifta sedan perspektiv, så att du tittar på mellanrummet. Ser det konstigt ut? Skriv ut sidan och titta på den. Vänd sedan bladet upp-och-ner och betrakta layouten. Fungerar den? Är bilderna och texten rätt placerade? Är rubrikerna snygga?

Du kan använda en tabell med flera kolumner för att dela upp en större textmassa i flera spalter. Använder du ingen tabell bör du göra täta radbrytningar. Du ser t.ex hur jag har gjort på den här sidan. Det är nämligen stor skillnad mellan att läsa text på skärmen jämfört med om den är utskriven på papper.

Du kan antingen arbeta symmetriskt eller asymmetriskt Här är några förslag på båda typerna:

Symmetrisk	Symmetrisk	Asymmetrisk	Asymmetrisk

Symmetrisk	Symmetrisk	Asymmetrisk	Asymmetrisk

Om man vill använda symmetrisk eller asymmetrisk layout är hugget som stucket. I vissa fall passar den ena bättre än den andra. Som vanligt gäller alltså att man måste pröva sig fram. Den sida du just nu läser är asymmetrisk i det avseendet att den har olika bredd på vänster- och mittenspalten. Koden ser ut så här:

<center>
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<TR>
<TD align="right" valign="top" width="30"></TD>
<TD valign="top"></TD>
</TR>
</TABLE>
</center>

Här har jag justerat vänsterkolumnen i högerkant och högerkolumnen i både vänster- och högerkant (=Html 4.0-funktion). Vänsterkolumnen behöver egentligen inte justeras i sidled, utan det viktiga är att man justerar i höjdled med valign="top". Annars finns risken att bilden (se nedan) hamnar fel.

Man kan även lägga in rubriker asymmetriskt. Man kan t.ex dela upp en bild i två delar och lägga dem i var sin tabellcell:

Här börjar texten på sidan och rubriken bildar ett naturligt indrag. Effekten blir snygg och lättläst, men är svår att åstadkomma med Html. I stället har jag här arbetat med två bilder.

Den vänstra bilden är 30 pixlar bred och ligger i vänsterkolumnen, som ju är 30 pixlar bred:

<- här är bilden delad  ->

Den högra bilden ligger således i högerkolumnen och genom att attributen "cellspacing" och "cellpadding" är satta till noll, kommer bilderna att smälta ihop och se ut som en enda bild. (Du behöver alltså ett bildbehandlingsprogram, som klarar att dela upp bilden på en pixel när, för att det här skall fungera.)

Denna finess är det många som använder. Tänk bara på att varje ny rubrik kräver en ny rad i tabellen. Du måste därför göra en ny <TR> för varje nytt par av bilder du använder. Det kräver en del pyssel och trixande innan det blir bra. Men visst är det ganska fräckt?