Att komponera en webbsida

Ett dilemma du ställs inför när du gör en layout är att du oftast inte vet exakt vad användaren har för webbläsare, skärmstorlek eller inställningar på datorn. Användaren kan ju välja att visa webbläsarfönstret i hela skärmen eller minska storleken och ha två fönster öppna samtidigt. Allt det här påverkar hur din webbsida visas. I webbläsaren kan man välja, beroende på version, att zooma in en sida och då blir allting större proportionerligt. I äldre webbläsare, bara någon version bakåt, kunde enbart textstorlek ändras och orsaka oönskade effekter.

Men uppdaterar inte användare sina webbläsare så snabbt det går?

Nej, sådan tur har vi inte. ofta kan stora företag och myndigheter ligga lite efter i uppdateringar och är inte lika flexibla som mindre företag och privatpersoner. Har man exempelvis inte ändrat operativsystem till Windows 7 så kan man inte installera den senaste versionen av Internet Explorer. Det här är en god anledning till att du som designer måste göra ett gott förarbete och ”lära känna” dina användare. Om du skapar en sajt med en specifik målgrupp – kanske ska man via sajten sälja arbetskläder till sjukvården – då är det också viktigt att ta reda på vilka förutsättningar kunden har.

Idag är webbsidor inte heller något som bara besöks vid en stationär dator. Handdatorer, mobiltelefoner, surfplattor och laptops i ollika storlekar blir allt vanligare. Nya mini-pc:ar har en skärmstorlek på mindre än 10″ – är din webbsida läsbar även här? Liten skärm, hög upplösning = liten text…

I kurslitteraturen behandlas olika former av layouter som på olika sätt möter de här problemen. Nedan nämns begreppet ”box” vilket refererar till något som i CSS-sammanhang förklaras av ”boxmodellen” (se separat inlägg som rör just denna).

  • Flytande sidlayout: Använd %- och auto-värden.
  • Fast sidlayout: Ange elementens/boxarnas storlek med pixelvärden.
  • Elastisk layout: Använd enheten em för att ange storlek på dina boxar.

När du gör din layout så ta alltid för vana att kontrollera den på olika sätt – öka textstorlek/zooma, ta tag i webbläsarfönstret och dra ihop. vad händer? Är sidan läsbar i alla lägen?

Läs mer om sidlayout i Web Style Guide (nytt fönster)

Struktur

  • Ha strukturen i åtanke när du planerar dina webbsidor.
  • Vilken information ska finnas med?
  • Var hittar man kontaktuppgifter?
  • Var placeras titel, logo, företagsnamn mm?
  • Var ska menyn placeras?
  • Var vill du placera ditt huvudsakliga innehåll med text och bild?

Skissa upp hur du vill att sidan ska se ut innan du ger dig i kast med kodandet. Om du bygger en hemsida åt någon annan kan det vara en bra idé att visa en enkel skiss för både kund och användare som ni kan diskutera. En skiss är betydligt billigare och enklare att ändra på än en färdiguppmärkt webbsida!

Exempel på hur regeringskansliet byggt upp sin sidstruktur på www.regeringen.se.

Exempel på uppbyggnad av webbsida.

Läs mer om sidstruktur i Web Style Guide (nytt fönster)

Gå igenom ett par sidor, till exempel http://libris.kb.se/ (nytt fönster) och http://www.swedbank.se (nytt fönster). Hur är sidorna uppbyggda? Hur är de strukturerade för att du ska hitta på bästa sätt?

”Grids”

John Cato menar i sin bok, User-Centered Web Design, att det mesta är uppbyggt av rutmönster (grids) och att vi ofta undermedvetet ordnar saker i rutmönster. Hittar du något rutmönster i sajterna du just tittat på?

Utifrån ett japanskt måttsystem, Ken, använt vid design och konstruktion av byggnader har Cato experimenterat med en ”WebKen” för webbdesign.

  • Horisontell WebKen: 256×117 pixlar
  • Horisontell WebKen + 1/3: 256×156 pixlar
  • Vertikal WebKen: 129×233 pixlar

Tittar man på webbsidor finns det då fyra grundläggande rutmönster:

  1. 3×3
  2. 3×4
  3. 4×3
  4. 4×4

Jon Duckett beskriver i ”HTML, XHTML, CSS, and JavaScript” olika gridmönster som kan vara till hjälp vid layouten av en webbsida. Han utgår då ifrån det som kallas ”gyllene snittet” (The Golden Ratio) som sedan renässansen använts av konstnärer, formgivare och arkitekter i västerlandet.

Den kanske mest vanliga exemplet är den gyllene rektangeln, som ofta återfinns i fönsters form:

a+b/a = a/b = φ ~1,618

Tankarna bakom det gyllene snittet är att just den här proportionen är organisk, universell och estetiskt tilltalande. Vi hittar exempel överallt runtomkring oss enligt bland andra den tyske matematikern och filosofen Adolf Zeising. Exempel som ofta nämns är bladens placering hos många plantor och venerna i löv.

Vitaly Friedman ger i Smashing magazine exempel på, och talar för hur man kan använda det gyllene snittet inom webbdesign. Han menar att det gyllene snittet kan förbättra kommunikationen med användaren och pratar även om ”The rule of thirds” som är en förenklad version av gyllene snittet och kan ses som en tumregel för att skapa en proportionerlig komposition. Enkelt uttryckt kan man då dela alla kompositioner i nio delar genom två horisontella och två vertikala linjer placerade på lika långt avstånd från varandra. Genom att placera viktiga funktioner på webbsidan i skärningarna mellan linjerna hamnar dessa optimalt i förhållande till hur vi ”skannar” av informationen på en webbsida.

http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

Inom webbdesign finns inga direkt fasta regler för hur man måste bygga upp sin design. Däremot finns det riktlinjer och ”best practices” som det kan vara bra känna till – för att eventuellt kunna bryta mot dem. Menyer till höger? Kontaktinfo i ”main-boxen”? Kanske kan du skapa en ny trend. Hur ser Catos grid-mönster ut på dina favoritsajter? Hittar du något rutsystem/WebKen på webbsidorna du tittat på ovan?

Läs mer om ”grids” i Web Style Guide (nytt fönster)

Leave a Reply