Redaktörsskap

Responsiv design för webbredaktörer

7 maj, 2013

Det blir allt vanligare med responsiv webbdesign, det som också ibland kallas för anpassningsbar eller följsam design. Egentligen finns det en liten teknisk gradskillnad mellan dem, men syftet med responsiv design oavsett namn är att webbdesignen anpassar sig atuomagiskt efter den skärm eller device som används för att läsa webbsidan.

Att ha en sida som på något sätt är mobilanpassad blir allt viktigare, särskilt som vi svenskar surfar alltmer på mindre skärmar som smartphones och surfplattor. Enligt en SCB-undersökning från 2012 är det nästan 60 procent av svenskarna i åldern 16-74 som använder en smartphone eller mobiltelefon för att koppla upp sig mot nätet utanför hemmet eller arbetet, till exempel.

Responsiv design är smart, och ställer nya krav

Responsiv design är ett smart sätt att mobilanpassa sajter på, helt enkelt för att det fungerar sömlöst för många typer av skärmstorlekar, och dessutom med allt innehåll i ett och samma CMS, publiceringsverktyg. De senaste webbprojekten vi har gjort har varit responsiva, även ett intranät som är tillgängligt från mobiler och surfplattor. Responsiv design ställer krav på den som designar och den som programmerar, men även lite högre krav på den som är webbredaktör.

responsiv design och webbredaktörer

Responsiv design för webbredaktörer

Just som webbredaktör behöver man tänka ett steg extra, både rent tekniskt och som skribent. I just det här inlägget är det egentligen två saker som jag tänker fokusera på, det är textmässiga förhållanden och vad man ska tänka på när man gör tabeller. Tabeller är något som många redaktörer använder i olika publiceringsverktyg, utan att användaren av sajten egentligen ser att det är en tabell.

Hur tabeller fungerar – och hur de kan göras responsiva

Tabeller är ett sätt att få till exempel flera bilder på rad med text under i en innehållsyta/editfält att linjera snyggt på en webbsida. Det syns inte för den ordinära webb-besökaren att innehållet ligger i en tabell, utan bilderna och texten ligger bara snyggt och rakt, men i verktyget läses bilderna och texten in med hjälp av en tabell. Självklart använder man även tabeller till just klassiska tabeller, med information i.

Problemet uppstår när sidan anpassar sig för olika skärmstorlekar, eftersom man ofta i en tabell anger storleken i pixlar på bredd och höjd. Då blir storleken på tabellen statisk, och den följer inte med den responsiva designen och anpassar sig. Den bryter av designen och fungerar inte för olika skärmtyper. Ett första sätt att testa om det löser problemet är att sätta storleken på tabellen i procent istället för pixlar. Fungerar det är det bra, men det är rätt ofta som det inte räcker, särskilt om din tabell ska ha många kolumner.

Två lite mer avancerade varianter

Loopia har skrivit ett inlägg om just den här problematiken, och beskriver sin egen lösning här. De släcker helt enkelt den första kolumnen i sina tabeller som oftast innehåller radrubriker, och visar istället radrubrikerna ovanför varje cells innehåll, plus minskar textstorleken något. Testa på den här sidan och minska och öka storleken på fönstret så ser du vad som händer.

Har du väldigt mycket information i många kolumner finns det en mer avancerad lösning som bygger på JavaScript/CSS. Det innebär att tabellen läses om lite för mindre skärmar, så en del av översiktligheten försvinner, men det fungerar ändå bra. Läs mer här och prata med din utvecklare.

Att anpassa text och innehåll till responsiv design

Det första en redaktör för en responsiv sida behöver lära sig är att alltid tänka på att texten ska fungera för flera skärmtyper. Det låter självklart, men ibland får man påminna sig. Inte bara skärmtyper för den delen, utan även i många olika situationer. I lokaltrafik, på toaletten, i sängen, i soffan och så vidare.

Med det sagt är det egentligen inte så svårt. Tillämpa ännu hårdare fokus på webbens gyllene regel: det viktigaste först. Generellt för text på webb så behöver det viktigaste komma först i texten, och ännu mer så när man dessutom vill få texten läst och använd på en liten skärm. Skriv direkt vad sidan handlar om, använd enkla meningar och undvik gärna långa broderande inledningar.

Använd korta ord, dela av långa ord med mjuka bindestreck som följer med i designen (ctrl+bindestreck på PC, och i många windowsbaserade CMS) och tänk på att dela upp stycken i lagom storlek. Inte för långt och inte för kort. Läs gärna Klarspråks mycket längre och utförligare inlägg om just responsiv textanpassning, och hur du kan använda det med exempel.

 

Du kanske också vill läsa

2 kommentarer

  • Reply Jonas, GFD Webbyrå 8 maj, 2013 at 21:35

    Dina inlägg fortsätter att hålla hög klass Anna-Carin!
    Ännu ett sätt att hantera tabeller, eller kanske snarare framför allt rutnät, är också att ändra antalet kolumner så att raderna blir smalare (men kolumnerna längre). Fungerar alldeles utmärkt i tex e-butiker, och i en vanlig tabell är det görbart så länge man tänker på att märka ut kolumnrubrikerna på ett tydligt sätt.

    • Reply Anna-Carin Carnebro 10 maj, 2013 at 10:52

      Tack, Jonas! Vad glad jag blir att du tycker det. Bra tips med tabellerna också!

    Svara