Responsiv design med CSS: bygg för mobil, dator och Google

Responsiv design förklarad enkelt: så anpassar sig din sajt till mobil, surfplatta och dator med media queries i CSS – testa den i Chrome och Search Console.

Föreställ dig att en besökare hittar ditt företag via Google på bussen, klickar in och möts av en sida där texten är pytteliten, menyn ligger på tvären och en knapp gömmer sig utanför skärmkanten. Den personen är oftast borta inom några sekunder. Det är precis det scenariot responsiv design löser. I stället för en sida som råkar funka på din egen dator får du en sida som anpassar sig efter varje besökares skärm, oavsett om den är fyra tum eller trettio tum bred.

Tre saker går sönder först när en sajt byggd för dator möter en telefon: menyn tappar sin plats och lägger sig på tvären, tabeller och breda bilder tvingar fram scroll i sidled, och knappar hamnar så tätt att tummen träffar fel länk. Ingen av de sakerna kräver en utvecklare för att upptäckas. En god del av dem går dessutom att rätta till själv.

Innan du läser vidare: ta upp telefonen och ge din egen sida tre minuter. Försök dra sidan åt sidan med tummen, tryck på din viktigaste knapp utan att sikta först och läs ett stycke brödtext utan att föra telefonen närmare ansiktet – det du misslyckas med är det du ska leta rätt på i checklistan längre ned.

Vad är responsiv design egentligen?

Responsiv webbdesign, förkortat RWD, är ett sätt att bygga en webbplats så att den känner av besökarens skärm och ritar om sig själv. Termen myntades av Ethan Marcotte 2010, och poängen var redan då att en sida skulle anpassa sig efter skärmen i stället för att finnas i två separata versioner. Kärnan är att du har en enda kodbas och en enda URL per sida, men att innehållet flyter om beroende på fönstrets bredd.

Konkret innebär det att en meny som ligger horisontellt på en dator viks ihop på en mobil, att tre spalter blir en staplad kolumn, och att en stor bild krymper i stället för att spränga skärmen. Allt sker automatiskt, utan att du behöver underhålla två versioner av samma sida.

Vad är skillnaden mellan responsiv och adaptiv design?

Två begrepp blandas lätt ihop, och de är värda att hålla isär.

I praktiken landar de flesta i det responsiva lägret, helt enkelt för att skärmstorlekarna aldrig slutar dyka upp och ingen orkar rita en ny layout för varje ny modell.

Tre byggstenar gör en sajt responsiv

Bakom en sida som känns självklar ligger tre tekniker som samarbetar:

• Flexibla rutnät där bredder anges i procent i stället för fasta pixlar.
• Böjliga bilder och media som aldrig blir bredare än sin behållare.
• Media queries i CSS som ändrar reglerna vid olika skärmbredder.

Media queries i CSS

Media queries är hjärtat i tekniken. Det är regler i CSS som säger ungefär “om skärmen är smalare än 600 pixlar, gör så här i stället”. Med dem kan du dölja element, ändra typsnittsstorlek eller bygga om hela rutnätet vid olika brytpunkter. Du behöver inte memorera syntaxen, men det hjälper att veta att det är just media queries som låter en sida se olika ut på olika enheter.

Brytpunkter i CSS

En brytpunkt är den bredd där du låter layouten byta skepnad, och den skrivs som ett villkor i CSS. Var ska brytpunkten ligga? Ett vanligt sätt är att låta en spaltlayout falla ihop till en enda kolumn när fönstret blir smalare än ungefär 600 pixlar:

@media (max-width: 600px) {
  .kolumner { flex-direction: column; }
}

Siffran i exemplet är inget facit. Brytpunkter är bedömningsfrågor: sätt dem där din egen layout faktiskt bryter ihop. En lista över populära mobilstorlekar säger ingenting om hur just din sida beter sig när den blir smalare.

Media queries för mörkt läge i CSS

Bredd är långtifrån det enda en media query kan lyssna på. Med villkoret prefers-color-scheme kan du låta CSS möta besökare som kör sin telefon i mörkt läge, så att en knallvit bakgrund inte bländar den som läser sent på kvällen. På samma sätt låter prefers-reduced-motion dig lugna ned eller stänga av animationer för besökare som aktivt har valt bort rörelse i sina systeminställningar. Båda går att lägga till i efterhand, kostar i praktiken ingenting i laddtid och gör sidan behagligare för en grupp du annars aldrig hör av.

Samtidigt hör de hemma i kategorin trevliga extrasaker snarare än grundjobb. I ett CMS sköter temat det åt dig, och behöver du mer än så är det den utvecklare du anlitar som skriver raderna. Saknas de två villkoren fäller det inte din mobilvy – ta dem den dag grunden redan sitter.

Flexbox och moderna rutnät

Flexbox är en layoutmodell i CSS som fördelar utrymme och radar upp innehåll som flyter om av sig självt. Tillsammans med media queries låter Flexbox dina spalter, kort och knappar ändra ordning och bredd utan krångel. För en nybörjare räcker det att veta att Flexbox är det verktyg som gör staplade kolumner på mobil till prydliga spalter på en dator.

Flexbox på mobil

På mobilen gör Flexbox det mesta av grovjobbet åt dig. En rad med tre kort får lov att radbryta och lägga sig på varandra när bredden inte räcker till, utan att du skriver en enda ny brytpunkt. Sätter du dessutom riktningen till kolumn på smala skärmar staplas innehållet i den ordning det står i koden, vilket brukar vara precis den ordning en mobilbesökare vill läsa det. Det är därför Flexbox ofta räcker långt innan du behöver något mer avancerat.

CSS Grid som komplement

CSS Grid är den andra moderna layoutmodellen i CSS, byggd för rutnät i två riktningar – rader och spalter samtidigt. Där Flexbox är starkast på en rad eller en kolumn i taget passar CSS Grid när du vill styra hela sidans struktur, till exempel ett kortrutnät som går från en spalt på mobil till tre på dator. De två utesluter inte varandra, utan används i praktiken sida vid sida i samma sajt. Har du ett färdigt tema är chansen stor att båda redan finns under ytan. Färdiga ramverk som Bootstrap och Tailwind levererar ett responsivt rutnät åt dig, och de flesta teman har redan ett inbyggt – men de avgör inte vad som ska ligga överst på en liten skärm, det beslutet är fortfarande ditt.

Tumregeln som brukar räcka: Flexbox när du ska ordna en rad kort, en knapprad eller en meny, CSS Grid när hela sidans stomme ska styras och rader och spalter behöver hänga ihop samtidigt.

Varför responsiv design påverkar din SEO

Den version av din sajt du aldrig öppnar är den version Google bedömer först.

Google använder mobile-first-indexering, vilket betyder att det normalt är mobilversionen av din sida som bedöms och rankas. Är den versionen trasig spelar det mindre roll hur fin datorvyn är. Responsiv design löser detta eftersom mobil och dator delar samma innehåll och samma URL. Mobilanpassning tar bort ett hinder – den lyfter inte placeringen av sig själv. Hur den processen fungerar i grunden kan du läsa mer om i vår förklaring av indexering.

Vinsterna är konkreta, även om ingen av dem är ett rankningstrick. När mobil och dator delar samma adress samlas länkkraften – alltså det länkvärde andra sajter skickar till dig – på en enda URL i stället för att splittras på två. Att besökare i regel stannar längre är egentligen ingen SEO-vinst utan en ren användarvinst, men den brukar märkas i samma statistik: den som kan läsa och klicka utan att zooma har en anledning mindre att backa ut. Och så finns den tråkigaste fördelen, den som betyder mest över tid – med en uppsättning sidor att underhålla i stället för två blir det helt enkelt färre tillfällen att göra fel.

Förr byggde många en separat mobilsajt på en egen adress, ofta i stil med m.dinsajt.se. Då fanns två uppsättningar sidor att hålla uppdaterade, två adresser som kunde konkurrera med varandra och en omdirigering som kostade tid vid varje besök. Med en responsiv sajt har varje sida en enda adress och samma innehåll för alla, vilket gör både underhållet och hur Google indexerar sidorna enklare att resonera om. Separata m-domäner har därför i stort sett fasats ut, och har du en kvar är det oftast rätt att peka om den till motsvarande sidor på huvudsajten.

Bygg mobilen först

Det enklaste sättet att lyckas är att vända på ordningen. I stället för att bygga en påkostad datorvy och sedan klämma in den i en mobil börjar du med den minsta skärmen och bygger utåt. Då tvingas du prioritera det viktigaste, och resten faller på plats.

En stor del av dina besökare läser på telefonen, ofta i farten:

• Lägg det viktigaste budskapet överst, synligt utan att besökaren skrollar, eftersom det är där de flesta bestämmer sig för att stanna eller backa.
• Använd en tydlig kontaktväg som inte kräver zoomning – ett klickbart telefonnummer gör mer nytta än ett formulär som kräver precision med tummen.
• Se till att text går att läsa utan att zooma, annars tappar du besökaren innan hen hunnit förstå vad du erbjuder.
• Håll menyn enkel, gärna en hopfälld meny på små skärmar, så att navigationen inte äter upp hela första skärmbilden.

Vad som förtjänar platsen allra överst är i grunden en prioriteringsfråga, och den blir mycket lättare att svara på när du redan bestämt vilka sidor som ska bära sajten. Där hjälper en genomtänkt innehållsstrategi dig att avgöra vilka sidor som verkligen behöver byggas och underhållas – och därmed vad som förtjänar att synas först på en liten skärm.

Steg för steg: gör din webbplats responsiv

Här är en process du kan följa oavsett om du jobbar i ett Content Management System som WordPress eller bygger för hand. Mycket av det första kan du göra själv, och vill du gå på djupet i just den plattformen hjälper vår guide till SEO för WordPress dig vidare.

Ett enda fält i sidans head-kod avgör om mobilen visar din sida i rätt skala eller zoomar ut den till oläslighet. Saknas viewport-taggen ser sidan ofta ut som en hopkrympt datorvy: allt finns med, i miniatyr, och besökaren tvingas nypa och dra sig fram över sidan för att läsa en enda rubrik. Det är ett av de vanligaste och billigaste felen att rätta till.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Raden hör hemma i sidans head-kod, alltså mellan <head> och </head> högst upp i HTML-dokumentet, och i ett CMS sköts den i regel av temat utan att du behöver röra en fil.

Hur gör du bilder och video responsiva?

Bilder är ofta den tyngsta posten på en sida. En tung bild i full storlek på en liten mobil slösar både data och tålamod. Tänk igenom formaten:

• Använd SVG-filer för logotyper och ikoner som ska vara knivskarpa i alla storlekar.
• Servera mindre bildversioner till mobiler så att laddtiden hålls nere. En bild som visas 400 pixlar bred behöver inte vara 3 000 pixlar i filen, och med attributet srcset kan du lista flera storlekar och låta webbläsaren välja den som passar skärmen.
• Låt video, till exempel en inbäddad video från YouTube eller Vimeo, skala med sin behållare.
• Undvik bakgrundsbilder som döljer text på smala skärmar. Låt hellre texten ligga på en lugn, enfärgad yta och ge bilden ett eget block där den får ta plats.

Grunden under allt detta är ändå en enda regel i CSS, som hindrar varje bild från att bli bredare än utrymmet den fått:

img { max-width: 100%; height: auto; }

Med den på plats krymper bilderna med layouten och behåller sina proportioner.

En SVG är ett vektorformat som behåller skärpan oavsett storlek, vilket gör det perfekt för responsiva gränssnitt. För fotografier passar komprimerade pixelformat bättre.

Layoutmönster som fungerar på både mobil och dator

Några upplägg återkommer i nästan varje sajt, oavsett vilket tema eller verktyg som ligger under. Det vanligaste är den enkla spalten: allt ligger i en enda kolumn på mobil och delar upp sig i två eller tre spalter först när skärmen växer. Nära besläktat är sidopanelen, som flyttar ned under brödtexten på smala skärmar – ett riktigt beslut när panelen bär stödinformation, men fel så snart den innehåller navigation som besökaren behöver komma åt direkt.

Kortrutnätet löser samma problem på ett tredje sätt: korten bryter om efter tillgänglig bredd, så att fyra kort i rad på en datorskärm blir två på en surfplatta och ett i taget på en telefon. Och allra överst hittar du nästan alltid en hjältesektion, alltså den stora ingångsytan högst upp på sidan, följd av innehållsblock under.

Utgå från vad besökaren ska göra på sidan. Ett lokalt tjänsteföretag behöver sällan en avancerad bildspelsstartsida. Det behöver tydlig kontaktinfo, vad företaget erbjuder och var det finns, snabbt åtkomligt på mobil.

Gör och undvik när du bygger sidan

Det mesta som avgör om en sida känns responsiv är småsaker, och de återkommer på båda sidor om linjen:

Hur vet du att din sida faktiskt är responsiv?

Du behöver inga dyra verktyg. Det mesta gör du gratis, med en webbläsare och den utrustning du redan har framför dig:

• Dra ihop fönstret på datorn och se om innehållet flyter om snyggt.
• Simulera olika enheter, från liten mobil till surfplatta.
• Ladda sidan på din riktiga telefon, eftersom verkligheten avslöjar mest.
• Kontrollera att alla knappar går att träffa med tummen.
• Kontrollera den renderade mobilvyn i URL-inspektionen i Search Console, så ser du sidan som Google själv hämtar den.

Gör sedan om testet efter varje större ändring på sajten. Det som fungerade före ett nytt plugin, en ny sidmall eller ett inklistrat block behöver inte fungera efteråt, och ett fel som har funnits i två veckor brukar vara dyrare att hitta än ett du upptäcker samma dag som det uppstod.

Verktyg du redan har från Google

Två gratisverktyg räcker för nästan allt du behöver kontrollera, och du har med största sannolikhet redan tillgång till båda. Det ena sitter i din webbläsare, det andra är gratis men kräver att du först verifierar din domän i Search Console – en engångsåtgärd som tar några minuter.

Enhetsläge i Google Chrome

Det snabbaste sättet att få en förhandstitt sitter i webbläsaren du redan har. Du öppnar utvecklarverktygen i Chrome, slår på enhetsläget och väljer en simulerad telefon eller surfplatta. Drar du sedan i bredden ser du exakt var layouten hoppar, alltså var dina brytpunkter ligger. Verktyget visar hela tiden vilken bredd du står på, så att du kan notera precis var det ser fel ut.

Det går snabbare än att gissa sig fram i koden. Enhetsläget låter dig dessutom strypa uppkopplingen så att du ser hur sidan beter sig på ett svagt mobilnät, vilket säger mer om verkligheten än en tom laddningstid på fast bredband. Använd det för att hitta fel snabbt, men lita aldrig på det som enda test.

Rendering och Core Web Vitals i Search Console

Search Console visar hur Google faktiskt hämtar och renderar dina sidor, vilket är något annat än hur de ser ut i din egen webbläsare. Med URL-inspektionen kan du be Search Console visa den renderade mobilversionen av en enskild sida och se om innehållet verkligen kommer med. Core Web Vitals-rapporten, alltså Googles mått på hur snabbt, stabilt och responsivt sidan upplevs, delar upp resultatet på mobil och dator, så du ser om långsamheten är specifik för telefonen. Det är en bra andra åsikt när du redan städat det uppenbara.

Varför ska en responsiv sajt också vara snabb?

En sida som ser bra ut men laddar segt på mobil tappar ändå besökare. Laddtid ingår i Googles sidupplevelsesignaler, men den största vinsten är besökare som stannar kvar, och en djupdykning i optimering av sidhastighet tar dig längre än de snabba åtgärderna nedan:

• Komprimera och skala ned alla bilder, eftersom de nästan alltid är det som gör en mobilsida tung.
• Ladda bara den CSS och JavaScript som sidan faktiskt behöver, så slipper besökaren vänta på kod som aldrig används.
• Skjut upp icke-kritiska skript så att texten dyker upp snabbt, eftersom besökaren bedömer sidan på det som syns först.
• Undvik att ladda stora resurser som bara används på datorvyn, annars betalar mobilbesökaren för något hen aldrig får se.

JavaScript är kraftfullt men också en av de vanligaste orsakerna till tunga sidor. Börja med det som sällan bär sin vikt på en liten skärm: bildspelet på startsidan som ingen skrollar igenom, chattwidgeten som laddas på varje sida trots att den behövs på en enda, och de extra spårningsskript vars rapporter ingen längre öppnar. Var och en av dem går att ta bort utan att sidan tappar något besökaren kom dit för.

Vilka misstag sänker en responsiv sajt?

Utöver det återkommer samma fällor:

• Text som blir oläsligt liten i stället för att flyta om, vilket får besökaren att zooma i stället för att läsa.
• Tabeller som spränger skärmen och kräver scroll i sidled, så att kolumnerna längst till höger aldrig hittas.
• Popup-rutor som täcker hela mobilskärmen utan synlig stängknapp, vilket för besökaren är omöjligt att skilja från en trasig sida.
• Formulär med fält som är för små för att fylla i med tummen, vilket gör att halvfyllda formulär överges i stället för att skickas.

Responsivt i ett Content Management System

Arbetar du i WordPress eller ett annat CMS slipper du i regel skriva CSS från grunden. Det mesta sköts av temat och plugins:

• Välj ett tema som uttryckligen anges vara responsivt. Står det ingenting om saken är det oftast ett tecken på att temat har några år på nacken.
• Använd temats inbyggda inställningar för menyer och spaltbredder på mobil.
• Lägg bara till egen CSS när standardinställningarna inte räcker.
• Håll antalet plugins nere, eftersom var och en kan lägga till tyngd. Ett plugin du inte längre använder är sällan värt att ha kvar.

Det betyder inte att du kan luta dig tillbaka helt: temat gör grundjobbet, men bedömningarna om vad som ska synas först på en liten skärm är fortfarande dina.

Ett vanligt mönster är att temat är fullt responsivt medan en enda hårdkodad pixelbredd, ofta i en egen CSS-rad eller ett inklistrat block från någon annanstans, fäller hela mobilvyn. Symtomet är en sida som går att dra i sidled trots att allt annat beter sig precis som det ska.

Många moderna teman är responsiva direkt ur lådan, vilket gör att du kan lägga tiden på innehåll och budskap i stället för på teknik. Det är också där den mesta nyttan finns: ett tema kan göra layouten smidig och menyn hopfällbar, men det kan aldrig avgöra vilket budskap som ska möta besökaren först i telefonen.

Tillgänglighet hänger ihop med responsivt

En sida som är genuint responsiv brukar också bli mer tillgänglig. När du tänker på små skärmar tvingas du tänka på läsbarhet, kontrast och träffytor, och det gynnar alla.

Träffytor som är tillräckligt stora för en tumme är samma träffytor som fungerar för någon med nedsatt motorik – du löser båda problemen med samma beslut. Text som går att läsa utan att zooma hjälper den som har nedsatt syn lika mycket som den som läser i solsken vid en busshållplats. Och den logiska ordning du tvingas bestämma när allt ska staplas i en enda kolumn är precis den ordning en skärmläsare läser upp sidan i, vilket gör att en genomtänkt mobilvy ofta råkar bli en genomtänkt tillgänglighetsvy på köpet. Kontrasten är det enda du behöver tänka på för sig, eftersom den sällan avslöjar sig på en ljusstark skärm på ditt eget skrivbord.

Ett exakt minimimått för hur stor en knapp måste vara går inte att ge – riktlinjerna skiljer sig åt mellan olika standarder, och kravet beror dessutom på var på skärmen knappen sitter. Testet är enklare än siffran. Håll telefonen som du normalt håller den, med en hand, och försök träffa varje knapp och länk med tummen utan att sikta först. Missar du, eller råkar du träffa grannlänken, är ytan för liten eller mellanrummet för trångt. Samma metod fungerar för teckenstorlek: behöver du föra telefonen närmare ansiktet för att läsa brödtexten är den för liten, oavsett vad CSS-värdet säger.

Tillgänglighet och responsivitet drar åt samma håll: båda handlar om att besökaren faktiskt kan använda sidan. Det är ett värde i sig, och det hör hemma i samma trovärdighetsresonemang som E-E-A-T – men räkna inte med att träffytor och kontrast i sig ger bättre placeringar.

Lokalt perspektiv för svenska företag

För dig som driver ett lokalt företag, oavsett om kunderna finns i Umeå eller på en mindre ort, är mobilen ofta första kontakten. Någon söker “rörmokare nära mig”, hittar dig och måste snabbt kunna ringa eller hitta din adress. En responsiv sida med tydlig kontaktinfo överst gör skillnaden. Öppna dina lokala konkurrenters sidor i din egen telefon och räkna sekunderna till telefonnumret – en strukturerad konkurrentanalys visar sedan var ni överlappar i övrigt. Ett klickbart telefonnummer och adressen högt upp på sidan gör mer nytta än en snygg startbild.

Vad kostar det och hur lång tid tar det?

Var ärlig mot dig själv om utgångsläget. Har du redan ett modernt, responsivt tema är svaret nästan alltid att justera snarare än att bygga om, och de justeringarna kan du ofta göra själv utan kostnad.

Vill du ha löpande SEO-hjälp av en byrå eller konsult ligger vanliga arvoden i storleksordningen 5 000–15 000 kr/mån beroende på omfattning. En ombyggnad av en äldre sajt är något annat: det är en projektkostnad som varierar med sajtens storlek, antalet sidmallar och hur mycket innehåll som ska flyttas med. Räkna med att ett större omtag tar 3–6 månader i kalendertid, eftersom innehåll och beslut brukar vara det som drar ut på tiden. Be alltid om en avgränsad offert så du vet exakt vad som ingår.

Nästa steg

Börja smått och konkret: öppna din egen sajt i telefonen i dag och skriv ned tre saker som krånglar. Rätta det enklaste först, oftast viewport-taggen och tunga bilder, och testa om. Sitter du i WordPress är SEO för WordPress det naturliga nästa steget, och är du osäker på var flaskhalsarna sitter börjar du med optimering av sidhastighet, eftersom snabbhet och responsivitet går hand i hand.