Skärmar & Upplösning

En websida ser inte likadan ut på alla bildskärmar. Skärmarna har inte samma storlek och kan ställas in för att visa innehållet med olika upplösning.

Därför kan det vara bra att känna till det mest grundläggande om sånt här - för att kunna anpassa din websida så att den fungerar oberoende av vad dina besökare har för upplösning på skärmen.

Till att börja med kan det kanske vara bra att känna till vad man själv har för upplösning på sin egen bildskärm...   Blink-Smily!

Din upplösning är:     pixlar!

Bildskärmar & Upplösning

Bilskärmar finns ju som bekant i olika storlekar. Storleken mäts i tum - precis som på TV-apparater. De mest förekommande för vanliga datorskärmar idag (2006-03-07) är 17, 19, och 21 tum - men mindre och större är inte ovanligt. Det finns ju t.ex. små handdatorer med betydligt mindre skärmar och dessutom möjlighet att surfa via TV'n... Så som du förstår varierar storlekarna på dina besökares skärmar väldigt mycket.

Men det är inte bara bildskärmens storlek som styr hur mycket av t.ex. en websida som får plats på skärmen. En bildskärm kan ställas in på att visas med en viss upplösning.

Upplösningen på en bildskärm mäts i pixlar och en stor bildskärm har möjlighet till högre upplösning än en mindre. Användaren själv bestämmer hur hög upplösningen ska vara.

En stor bildskärm behöver alltså inte nödvändigtvis betyda att användaren väljer maximal upplösning...

De vanligaste upplösningarna för datorskärmar är:

800 x 600 / 1024 x 768 / 1280 x 1024

De här är inte heller alltför ovanliga:

1600 x 1280 / 1800 × 1440

Ändra Skärmupplösning

Upplösningen på en bildskärm mäts alltså i pixlar och vanligtvis har man två alternativ att välja på: Mindre eller Maximal upplösning. Antingen den ena eller den andra, alltså!

Vill man ändra upplösningen på sin skärm gör man så här:

Websidor & Upplösning

Själva storleken på dina besökares bildskärm är alltså egentligen ingenting du behöver bry dig om - för oavsett vad man har för storlek på skärmen är det alltså först och främst upplösningen som styr hur din websida visas.

Ju högre upplösning desto mer innehåll får plats på skärmen!

Här följer några exempel på hur den här sidan kan se ut beroende på skärmens upplösning:

800 x 600 pxlar:

800x600

1024 x 768 pixlar:

1024x768

1280 x 1024 pixlar:

1280x1024

Anpassa din sidas Layout

Det pågår en ständig debatt på webben om vilka upplösningar och tekniker som gäller när man ska försöka anpassa sin sida så att den fungerar och ser snygg ut för flertalet användare.

Men en sak är fullkomligt säker: Det är OMÖJLIGT att förutse hur en websida kommer att ta sig ut för alla upptänkliga besökare! Man måste välja och prioritera.

Anledningen till att man bör tänka igenom hur sidan ser ut i olika upplösningar är att de flesta besökare upplever det som besvärligt om sidan är för bred - därför att man måste scrolla i sidled för att kunna ta del av innehållet. Samtidigt som en alltför smal sida kan upplevas som "minimal" och "svårläst" på en skärm med hög upplösning.

Vad man också bör ha i åtanke är att man i sin webläsare - manuellt - kan ställa in med vilken storlek man vill att text ska visas. Alltså bör du se till att sidans layout inte ser alltför gräslig ut om man förminskar eller förstorar textstorleken ett eller ett par snäpp.

Det är alltså främst bredden på layouten som ska anpassas - eftersom scrollning vertikalt är någonting man är van vid och som ingår i de flesta sidors layout.

När man ska anpassa sin websidas layout har man några olika alternativ att välja på. Vilket är det bästa, då? Sorry! Det finns inget optimalt svar på den frågan... SMILE!

Vilket alternativ man väljer beror på hur man vill att sidan ska se ut och fungera. Har man hängt med i debatten på webben kan man konstatera att det helt klart är en smaksak och att det råder olika uppfattningar. Välj det alternativ som passar bäst för din sidas målgrupp och utformning.

Fast Layout

Med en Fast Layout anger man en fast bredd på sidan och dess olika delar. Det innebär oftast att man använder sig av måttet pixlar.

Väljer man en Fast Layout är det inte möjligt för besökaren att förändra bredden på sidan - den kommer att förbli densamma även om man ändrar storleken på webbläsarfönstret eller ändrar textstorleken i webläsaren manuellt.

Flytande Layout

En Flytande Layout anger man bredden på sidans olika delar i procent. Sidans bredd anpassar sig efter webläsarfönstret och sidans innehåll anpassar sig sedan därefter.

Om man förändrar storleken på webläsarfönstret kommer sidans bredd och innehåll att anpassa sig - men sidans bredd kommer inte att påverkas av manuellt ändrad textstorlek i webläsaren.

Elastisk Layout

Med Elastisk Layout menas att sidan kommer att anpassa sig efter textens storlek. Det åstadkommer man genom att ange sidans bredd och innehåll med ett relativt mått som utgår från fontstorleken på sidan - vilket oftast innebär att man använder sig av måttet em.

Förändras storleken på teckensnittet manuellt i webläsaren kommer sidan att anpassa sig efter det på bredden. Ju större teckenstorlek desto bredare sida. Men bredden på sidan kommer inte att påverkas av ändrad storlek på webläsar-fönstret.

Man kan säga att en sida med Elastisk Layout på sätt och vis har en "fast bredd" - med utgångspunkt från den fontstorlek som är standard på sidan. Det är först när textens storlek förändras manuellt som bredden anpassar sig! Och glöm för all del inte att en del besökare kommer att förminska texten...

Blandad Layout

Att använda sig av en Blandad Layout (hybrid) är nog det vanligaste och är precis vad det låter som - en blandning av de tidigare varianterna.

Hur man blandar är upp till var och en...

Här handlar det om vad du föredrar, prioriterar och hur du vill att din sida ska fungera.


Avslutningsvis...

Testa din sida

Du behöver inte hålla på och byta upplösning på din skärm fram och tillbaka för att kontrollera hur din websida tar sig ut i olika upplösningar!

Tyvärr kan du - av naturliga skäl - inte kontrollera hur din sida ser ut i en högre upplösning än vad du själv har tillgång till...

Men! Genom att förminska och förstora webläsarfönstret kan du se hur din sida tar sig ut med en lägre upplösning och dessutom få en uppfattning om hur den beter sig när storleken på webläsarfönstret förändras.

Läs mer om olika enheter på nästa sida: LAYOUT & DESIGN / Mått & Enheter