Responsiv design: så bygger du en mobilanpassad hemsida

Responsiv design betyder att en hemsida anpassar sin layout efter skärmen den visas på. Samma sida och samma adress fungerar i en mobil, en surfplatta och på en stor datorskärm. Kolumner staplas på varandra när utrymmet blir smalt, bilder krymper och menyn byter form.

En responsiv hemsida är alltså en mobilanpassad hemsida, men ordet beskriver tekniken bakom. Du behöver ingen separat mobilversion. Det är en kodbas som läser av skärmens bredd och ändrar presentationen därefter.

Varför mobilen styr#

För många företag kommer en stor del av besöken från mobilen. Kolla gärna fördelningen mellan enheter i din egen statistik. Den som letar efter en hantverkare, en frisör eller en byrå gör det ofta med telefonen i handen. Kan besökaren inte läsa texten eller trycka på knappen lämnar hen sidan och går till nästa sökträff.

Google tittar också i första hand på mobilversionen av din sajt. Mer om det längre ner.

Mobile first#

Mobile first är ett arbetssätt. Du designar och kodar för den minsta skärmen först och lägger sedan till mer layout när skärmen blir större.

Det tvingar fram prioriteringar. På en mobilskärm får bara det viktigaste plats överst, så du måste bestämma vad besökaren ska se och göra först. När grundversionen fungerar lägger du till fler kolumner och mer luft för surfplatta och dator.

Tekniskt innebär det att grundstilen i CSS gäller mobilen och att media queries med min-width bygger på för bredare skärmar.

Viewport-metataggen#

Utan den här raden i <head> visar mobilwebbläsaren sidan som om skärmen vore lika bred som en datorskärm och krymper sedan ner allt. Texten blir oläsbar och besökaren måste zooma.

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

Taggen säger åt webbläsaren att använda enhetens faktiska bredd. Den är grunden för all responsiv design. Ramverk som Next.js lägger in den automatiskt, men i äldre sajter och egenbyggda mallar saknas den ibland.

Undvik att stänga av zoom med user-scalable=no eller maximum-scale=1. Det hindrar besökare som behöver förstora texten.

Flexibla rutnät och brytpunkter#

En responsiv layout bygger på två saker: element som tar en andel av utrymmet i stället för en fast bredd, och brytpunkter där layouten ändras.

Brytpunkter skrivs med media queries i CSS. Här är ett rutnät som visar ett kort per rad i mobilen, två på surfplatta och tre på dator:

.kort-lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .kort-lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .kort-lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

Några tumregler:

• Sätt brytpunkter där innehållet behöver det. Dra ut webbläsarfönstret och se var layouten börjar se trång eller utdragen ut. Där lägger du brytpunkten, oavsett vilken telefonmodell som råkar ha den bredden.
• Använd relativa enheter. %, fr, rem och vw skalar med skärmen. Fasta pixelbredder på stora block är den vanligaste orsaken till att något sticker ut i sidled.
• Begränsa radlängden. På en bred skärm blir textrader svåra att följa. En max-width på textblocket håller raderna läsbara.

CSS Grid och Flexbox gör det mesta av jobbet. Med flex-wrap och auto-fit kan många layouter anpassa sig helt utan media queries.

Bilder i rätt storlek#

En bild som är 2 400 pixlar bred behövs på en stor skärm men är slöseri i en mobil som visar den i 400 pixlars bredd. Med srcset och sizes låter du webbläsaren välja rätt fil:

<img
  src="/bild-800.webp"
  srcset="/bild-400.webp 400w, /bild-800.webp 800w, /bild-1600.webp 1600w"
  sizes="(min-width: 1024px) 50vw, 100vw"
  width="1600"
  height="1000"
  alt="Beskrivning av motivet"
>

Tre saker att få med:

1. Moderna format. WebP och AVIF ger mindre filer än JPEG och PNG vid samma upplevda kvalitet.
2. Angivna mått. width och height gör att webbläsaren reserverar plats, så att innehållet inte hoppar när bilden laddas.
3. Lazy loading för bilder längre ner. loading="lazy" skjuter upp bilder utanför skärmen. Använd det inte på den översta bilden, eftersom den ska visas så fort som möjligt.

I Next.js sköter bildkomponenten next/image det mesta av detta åt dig.

Behöver ni en ny hemsida? Läs om Webbutveckling →

Tryckytor och läsbar text#

Ett finger träffar sämre än en muspekare, så mobilen kräver större mål och tydligare text.

• Knappar och länkar behöver plats. Googles riktlinjer på web.dev rekommenderar tryckytor på minst 48 × 48 CSS-pixlar, med luft emellan så att man inte träffar fel.
• Brödtexten ska gå att läsa utan zoom. 16 pixlar är en vanlig grundstorlek för brödtext i mobilen.
• Formulärfält ska ha rätt typ. type="tel" och type="email" ger rätt tangentbord i telefonen, vilket gör formuläret snabbare att fylla i.
• Viktiga knappar ska nås med tummen. Ett telefonnummer eller en bokningsknapp högt upp, och gärna igen längre ner, sparar besökaren onödig scrollning.

Allt som gör sidan lättare att använda i mobilen påverkar också hur många som tar kontakt. Läs mer i vår guide om konverteringsoptimering.

Mobile-first-indexering hos Google#

Google använder mobilversionen av en sida för att indexera och ranka den. Det kallas mobile-first-indexering. Innehåll som bara finns i datorversionen räknas därför inte.

För en responsiv sajt är det sällan ett problem, eftersom samma HTML skickas till alla enheter. Risken uppstår när du döljer innehåll i mobilen för att spara plats, eller när rubriker, strukturerad data och interna länkar skiljer sig mellan versionerna. Utfällbara sektioner går bra så länge texten finns i koden.

Mobilanpassning är en del av den tekniska grunden för SEO. Vår guide om teknisk SEO går igenom resten av checklistan.

Så testar du en mobilvänlig hemsida#

Webbläsarens utvecklarverktyg. I Chrome, Firefox och Safari kan du växla till enhetsläge och se sidan i olika skärmbredder. Dra långsamt mellan smalt och brett och se var layouten går sönder.

PageSpeed Insights. Googles verktyg mäter laddtid och Core Web Vitals för mobil och dator var för sig. Fältdatan visar hur riktiga besökare upplever sidan, om sajten har tillräckligt med trafik för att Google ska ha sådan data.

Riktiga telefoner. Utvecklarverktygen simulerar skärmstorleken men inte en riktig telefons processor, nätverk eller pekskärm. Testa på minst en iPhone och en Android-telefon, gärna en äldre modell, och fyll i formulären på riktigt.

Vanliga problem#

• Horisontell scroll. Något element är bredare än skärmen, ofta en bild, en tabell eller ett block med fast bredd. Sidan glider i sidled när besökaren scrollar.
• För små knappar. Länkar som sitter tätt i menyer och sidfötter är svåra att träffa.
• Popup som täcker innehållet. En nyhetsbrevsruta eller cookie-banner som tar hela mobilskärmen och är svår att stänga stör besökaren. Google kan dessutom bedöma påträngande popup-fönster som en sämre sidupplevelse.
• Text i bilder. Text som är inbränd i en bild skalar ner med bilden och blir oläsbar.
• Fasta element som tar plats. En sidhuvudmeny som ligger kvar överst och en chattknapp i hörnet kan tillsammans täcka en stor del av en liten skärm.

Responsiv, adaptiv eller separat mobilsajt#

Det finns tre sätt att hantera olika skärmar.

Responsiv design använder samma HTML och samma adress för alla enheter. CSS ändrar layouten. Det är det sätt Google rekommenderar och det enklaste att underhålla.

Adaptiv design (dynamisk visning) använder samma adress men skickar olika HTML beroende på vilken enhet servern tror att besökaren har. Det kräver att servern känner igen enheter korrekt och att du underhåller flera mallar.

Separat mobilsajt ligger på en egen adress, ofta m.dindoman.se. Det var vanligt innan responsiv design slog igenom. Du får två versioner att hålla i synk, och kopplingen mellan dem måste märkas upp med rätt taggar för att Google ska förstå att de hör ihop. Har du en sådan sajt i dag är det oftast värt att ersätta den med en responsiv.

Hur sajten byggs påverkar också hur lätt den är att hålla mobilanpassad över tid. Med ett headless CMS redigerar du innehållet separat från presentationen, så nya texter och bilder följer layoutens regler utan att du behöver tänka på skärmstorlekar.

Så hjälper Solva till#

Vi bygger hemsidor i Next.js med Sanity som CMS. Varje sida designas för mobilen först och testas i flera skärmbredder och på riktiga telefoner innan lansering. Har du en befintlig sajt som inte fungerar i mobilen går vi igenom den och visar vad som behöver åtgärdas. Läs mer om hur vi arbetar med webbutveckling.