Rekommendationer för flexibel layoutLänk hit

• Undvik horisontell scrollning ner till 320 pixlars bredd.
• Använd i första hand responsiv design.
• Gör en anpassad mobilversion om responsiv design är inte är möjligt.
• Även dokument som inte är webbsidor bör kunna presenteras i begränsad bredd.

Undvik horisontell scrollning ner till 320 pixlars breddLänk hit

För att inte skapa besvär för den som använder en liten skärm eller förstoring bör layouten anpassas så att den inte behöver scrollas i mer än en dimension. Gränsvärdet är satt till skärmbredder ner till 320 pixlar. För horisontella skriftspråk som svenska innebär detta att vanlig vertikal scrollning gärna får användas men inte samtidigt som användaren måste scrolla även horisontellt. För vertikala skriftspråk (till exempel japanska) motsvaras detta av att enbart horisontell scrollning ska behövas i fönsterbredd ner till 256 pixlars höjd.

En skärm eller ett fönster ska kunna vara så smal som 320 pixlar utan att innehållet behöver scrollas i sidled.

Förutom att själva layouten behöver vara flexibelt är det viktigt att tänka på andra aspekter av att presentera information på begränsat utrymme. Se Anpassa webbplatsen även för små skärmar (R111).

Undantag för innehåll som måste sträckas ut i två dimensioner

Riktlinjen gäller inte för delar av innehållet som kräver en tvådimensionell layout. Viss grafik och video är till sin natur tvådimensionell och det finns fall där innehållet förlorar sin mening om en bild delas upp och innehållet staplas ovanpå varandra. Exempelvis skulle en karta eller planlösning kunna bli mycket svårläst om den delades upp i olika delar eller förminskades till 320 pixlars bredd. Undantaget gäller även för komplexa datatabeller som har ett tvådimensionellt förhållande mellan tabellrubriker och dataceller. Men ofta fungerar det ganska bra att låta kolumner “falla in” som rader när det horisontella utrymmet minskar.

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

Responsiv layout är idag det enklaste sättet att följa riktlinjen. Använd så kallade ”media queries” i CSS 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.

Komplettera eventuellt med flytande och/eller elastisk layout

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.

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 rullningslist (scroll bar). 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 rem 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 rullningslist.

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 rem) 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.

Gör en anpassad mobilversion om responsiv design är omöjligtLänk hit

Om ni använder äldre system och av någon anledning inte kan bygga om eller uppdatera layouten kan ett alternativ vara att göra en anpassad mobilversion med en fast bredd på 320 pixlar. Huvudprincipen är att webbinnehållet måste kunna ändra storlek. Om man utgår ifrån en webbläsare som är 1280 pixlar bred och zoomar 400 % motsvarar det en mobilskärm på 320 pixlar.

WCAG-riktlinjen 1.4.4 Förändring av textstorlek gäller fortfarande, vilket innebär att det bör finnas ett sätt för användarna att öka enbart textstorleken med minst 200 %.

Dokument som inte är webbsidorLänk hit

Tänk även på att anpassa även dokument som inte är webbsidor (exempelvis pdf-filer och ordbehandlingsdokument) så att de kan uppfattas utan besvär av användare som förstorar eller har liten skärm.

PDF är i grunden inte ett responsivt format utan tvärtom: Det ger möjlighet att i detalj anpassa innehållet för ett fast (pappers-) format. Om en PDF-fil visas på någon av de många skärmar som är mindre än de vanliga pappersformaten så blir innehållet antingen väldigt litet eller så kan endast en liten del av dokumentet visas, vilket tvingar användaren att scrolla mycket.

I vissa PDF-program kan dock användaren välja att “omforma flöde” (“reflow” på engelska) till en kolumn. I Acrobat Reader hittar du verktyget omforma flöde genom att välja Visa > Zooma > Omforma flöde. Detta fungerar bara om PDF-filen är sparad med “taggar”. Resultatet blir inte alltid så snyggt, men det ger i bästa fall möjlighet att läsa dokumentets innehåll utan besvärlig scrollning i flera ledder. Presentationen kan förbättras av den som sparar filen genom manuell bearbetning av taggarna, men det går inte att få samma kontroll över presentationen av en PDF-fil med omformat flöde som det går att få över en html-sida som anpassats till exempelvis en smal skärm med hjälp av css media queries.

Enligt W3C kan PDF-dokument uppfylla denna riktlinje om de är kodade enligt standarden PDF/UA (Universal Accessibility, ISO 14289). Det är en variant av PDF som bland annat kräver taggning, men standarden ställer även andra tillgänglighetskrav, som till ganska stor utsträckning motsvarar WCAG 2.0.

Se även Publicera i första hand dokument i html och skapa tillgängliga pdf:er (R88).

Utdrag från WCAG-standardenLänk hit

Riktlinje 1.4 Urskiljbart: Gör det enklare för användare att se och höra innehåll, bland annat genom att skilja förgrund från bakgrund.

1.4.10 Reflow Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

• Vertical scrolling content at a width equivalent to 320 CSS pixels;
• Horizontal scrolling content at a height equivalent to 256 CSS pixels;

Except for parts of the content which require two-dimensional layout for usage or meaning.

(Nivå AA)

Relaterade riktlinjerLänk hit

• Anpassa webbplatsen även för små skärmar (R111)
• Se till att text går att förstora utan problem (R127)
• Presentera innehållet i en meningsfull ordning för alla (R122)

ExempelLänk hit

• Webbplatsen mediaqueri.es visar exempel på webbplatser som använder ”media queries” för att anpassa layouten.
• Tabeller behöver ofta flöda om i en responsiv design. Ett sätt att lösa det på är att låta varje kolumn blir en egen rad. Exempel på responsiv tabell finns i Märk upp vanliga formulärfält i koden.

MätbarhetLänk hit

Kontrollera layouten i olika webbläsare, i stora och små (åtminstone ner till 320 pixlars bredd) fönster, på olika plattformar (bordsdator, bärbar, surfplatta, 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.

TerminologiLänk hit

Det engelska begreppet scroll eller scrolling kallas på svenska ofta för scrollning eller rullning. Ibland talar man om att bläddra neråt. Vid interaktion med pekdon används oftast en rullningslist medan pekskärmsgränssnitt brukar kunna panoreras genom en svepande rörelse med fingret (swipe).

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.

Inom både tidningslayout och interaktionsdesign förekommer begreppet “the fold”. En tidning viks ofta på mitten och det innehåll som visas på ovansidan (“above the fold”) får allra mest exponering. På motsvarande sätt får det innehåll som presenteras innan användaren scrollat överhuvudtaget mest exponering på en webbsida. För användare som förstorar innehållet eller har en liten skärm kommer “vecket” tidigare, men om ni inte följer denna riktlinje så får de användarna en betydligt sämre upplevelse och en stor del av innehållet får betydligt minskad exponering.

Dokument som inte är webbsidor kallas i webbtillgänglighetsdirektivet för “filformat för dokument”.

Flexbox och CSS Grid är tekniker som går att använda att använda för att skapa responsiva layouter. Båda teknikerna går att använda var och en för sig eller i kombination med varandra.

Med flexbox går det att styra med större precision hur olika element i en rad eller kolumn placeras i olika skärmstorlekar i förhållande till varandra, t.ex. Genom att linjera eller justera element vertikalt och horisontellt i layouten.

CSS grid gör det möjligt att skapa mer avancerade layouter med rader och kolumner och fritt styra placering av element beroende på skärmstorlek för att exempelvis göra så att ett element hamnar högst upp på sidan på en stor skärm men längst ned på en mindre skärm.

Em och rem är relativa måttenheter. Skillnaden mellan dem är att rem anger ett förhållande till ett basmått för hela sidan, medan em anger ett förhållande till ett basmått för aktuellt element.