Riktlinje nr 91 Prio 2

Skapa en flexibel layout

Formge webbplatsen så att den är flexibel, och anpassar sig efter användarnas förutsättningar och önskemål. Att använda responsiv webbdesign med hjälp av css ”media queries” är oftast en bra grund, men även mellan brytpunkterna mellan de olika skärmstorlekarna kan en viss flexibilitet behövas. Undvik att göra en låst layout.


Rekommendationer för att skapa en flexibel layoutLänk hit

  • Använd i första hand responsiv webbdesign (följsam design).
  • Komplettera eventuellt med flytande och/eller elastisk layout.

Använd i första hand responsiv webbdesignLänk hit

Använd så kallade (”media queries” i CSS3) för att skapa olika grundlayout för olika storlekar av webbläsarfönster eller skärmar, till exempel kan olika antal spalter visas beroende på fönstrets bredd. Se R111 Anpassa webbplatsen även för små skärmar.


Komplettera eventuellt med flytande och/eller elastisk layoutLänk hit

Kombinera gärna ”media queries” med olika metoder för att skapa flexibilitet mellan brytpunkterna på de olika skärmstorlekarna för att på så sätt använda skärmutrymmet optimalt.  Det är svårt, men inte omöjligt, att enbart med hjälp av media queries skapa en responsiv design som optimalt tar till vara den stora variation av skärmstorlekar som förekommer idag.

Flytande layout ger flexibel spaltbredd

En flytande layout använder spaltbredder i procent för att anpassa sig efter webbläsarfönstrets bredd. Fördelen är att användaren slipper en horisontell rullist. Nackdelarna är att extremt smala fönster gör att spalter överlappar varandra, samt att breda fönster ger för långa textrader som är svåra att läsa.

Elastisk layout kontrollerar radlängden

En elastisk layout använder enheten em för spaltbredder, vilket gör att layouten anpassar sig efter webbläsarens textstorlek. Om användaren ändrar textstorleken ändras också den maximala radlängden, vilket gör att textrader består av samma antal tecken oavsett textstorlek. Fördelen är kontroll över radlängderna. Nackdelen är att ett smalt fönster eller stor text ger en horisontell rullist.

Hybridlayout blandar flytande och elastisk layout

Det går att kombinera flytande och elastisk layout. Då kan man till exempel göra vissa spalter elastiska (bredd i em) och vissa flytande (bredd i procent). Med hjälp av CSS-egenskaperna för maximal och minimal bredd kan man undvika såväl överlapp som för långa rader.


Statistik kan vara missvisandeLänk hit

De flesta statistikprogram anger normalt bara storleken på bildskärmen och  säger inget om själva webbläsarfönstrets storlek, vilket har stor inverkan på användarens upplevelse av webbplatsen. Förutsättningarna varierar dessutom över tid. Utgå inte heller från statistik för andra webbplatser eftersom besökarprofiler skiljer sig åt från webbplats till webbplats.


ExempelLänk hit


MätbarhetLänk hit

Kontrollera layouten i olika webbläsare, i stora och små fönster, på olika plattformar (bordsdator, bärbar, minibärbar, smartphone, mobiltelefon och så vidare) och försäkra er om att innehållet inte överlappar eller blir helt eller delvis oåtkomligt.

Pröva också med olika inställningar för textstorlek eller zoom, beroende på vilka funktioner webbläsaren erbjuder. Många webbläsare låter användarna ändra bastextstorleken eller ställa in en minsta tillåten storlek. Vissa användare behöver text som är 30 pixel eller mer.


FördjupningLänk hit

R111 Anpassa webbplatsen även för små skärmar tar upp flera frågor som ligger nära denna riktlinje.

Se även specifikationen CSS3 Media Queries.


TerminologiLänk hit

Följsam webbdesign kallas på engelska responsive web design (RWD). På svenska används ofta responsiv design. Även uttrycket dynamisk layout förekommer. När man utvecklar en webbplats  skapar man ofta mellan två och fem olika anpassningar för olika skärmbredder: liten stående skärm (smartphone), liten liggande skärm, stående surfplatta, liggande surfplatta/litet fönster och fullskärm/stort fönster i en eller ett par olika upplösningar.



Kommentarer (0)