3.3.3 Skapa en design som fungerar oavsett fönster- och skärmstorlek

Prioritet: 1

Eftersom en allt större variation i skärm- och fönsterstorlekar finns bland användare är den allra bästa lösningen att skapa en layout som är flexibel och kan anpassa sig efter användarens förutsättningar och önskemål. Undvik att göra en webbplats med låst layout.

Om du använder statistik för att ta reda på hur spridningen ser ut bland dina användare är det viktigt att vara medveten om att många statistikprogram bara rapporterar skärmupplösning, vilket inte är samma sak som fönsterstorlek. Statistiken baseras ofta på ett genomsnitt av samtliga Internetanvändare, och de användare som er webbplats vänder sig till behöver inte alls motsvara det genomsnittet. 

För att skapa en webbplats med flexibel bredd kan man till exempel använda sig av flytande eller elastisk layout.

Flytande layout

En flytande layout använder spaltbredder i procent för att anpassa sig efter webbläsarfönstrets bredd. För att undvika alltför långa rader kan man använda procent även för marginaler och spaltmellanrum så att de också växer när fönstret blir bredare. Om du väljer en flytande layout ska du vara medveten om att användare med stora skärmar kan få väldigt långa rader som gör det mycket svårt att läsa texten. En flytande layout är dock alltid bättre än en låst layout.

Elastisk layout

En elastisk layout är lik en flytande layout, men genom att använda enheten em för att ange en maximal bredd anpassar sig layouten också efter den textstorlek webbläsaren är inställd på. Om användaren ökar textstorleken ökas också den maximala radlängden, vilket gör att textrader består av samma antal tecken oavsett textstorlek. När webbläsarfönstret är brett förhindrar detta också att rader blir så långa att de försämrar läsbarheten.

Se även 3.3.6 Använd flexibla måttenheter.

Fördjupning

Ingående beskrivning (på engelska) av flytande och elastisk layout.

Senast uppdaterad 2008-12-10