Responsiv design

Vad är responsiv design och varför är det nödvändigt?

Responsiv design innebär att skapa layouter som anpassas till varje skärmstorlek — telefon, surfplatta, laptop och ultrawide-skärm. Samma HTML, samma innehåll, men ett annat arrangemang beroende på tillgängligt utrymme.

Det är nödvändigt, eftersom din publik använder varje enhet. En design som bara fungerar på desktop utesluter hälften av dina besökare. En design som bara fungerar på mobil slösar desktoputrymme. Responsiv design tjänar alla från en enda kodbas.

På denna sajt är varje stil responsiv. Ändra storlek på webbläsarfönstret och se: kolumner kollapsar, mellanrum justeras och typografi omflödas. Stilens karaktär förblir — bara arrangemanget ändras.

Vad är skillnaden mellan mobile-first och desktop-first?

Mobile-first innebär att designa för den minsta skärmen först, sedan lägga till komplexitet för större skärmar. Du börjar enkelt och expanderar.

Desktop-first innebär att designa för den största skärmen först, sedan ta bort funktioner för mindre skärmar. Du börjar komplext och förenklar.

Mobile-first föredras generellt idag, eftersom: (1) det tvingar dig att prioritera innehåll, (2) mobilanvändare ofta är majoriteten och (3) att lägga till är lättare än att ta bort.

Web Brutalism är oavsiktligt mobile-first — fullbredd, enkolumn, systemtypsnitt och ingen dekoration. Det fungerar på varje skärm utan media queries, eftersom det aldrig antog en stor skärm från början.

Bauhaus och Swiss International är desktop-first — deras 2-kolumns rutnät och 1100px bredd är designade för stora skärmar och kollapsar sedan till enkolumn på mobil.

Hur fungerar brytpunkter och när bör du använda dem?

En brytpunkt är en skärmbredd vid vilken layouten ändras — typiskt bytte från flerkolumn till enkolumn, eller justering av mellanrum. Vanliga brytpunkter: 768px (surfplatta), 1024px (desktop) och 1440px (stor desktop).

Men modern responsiv design använder brytpunkter mindre än förut. Verktyg som CSS Grid `auto-fit`, `clamp()` och fluid typografi minskar behovet av hårda brytpunkter.

Nordic Minimal demonstrerar detta: dess mellanrum använder `clamp(3rem, 8vw, 6rem)` — mellanrummet är flytande mellan 3rem och 6rem, skalande proportionellt med viewportbredd. Ingen brytpunkt behövs.

Brytpunkter är fortfarande nödvändiga för strukturella förändringar (2 kolumner → 1 kolumn), men undvik att använda dem för finjustering. Om du behöver 10 brytpunkter är din layout förmodligen för rigid.

Hur påverkar innehållsbredd mobilupplevelsen?

På desktop begränsar `max-width` innehåll till en läsbar measure. På mobil fyller innehåll naturligt viewporten — ingen begränsning behövs.

Jämför på mobil:

• Art Deco (800px max-width) — på mobil blir den kompakta desktopbredden fullbredd ändå. Mobilupplevelsen domineras av höga sektioner och ceremoniellt mellanrum.

• Bauhaus (1100px max-width) — på mobil kollapsar 2-kolumns rutnätet till 1 kolumn. Innehåll som låg sida vid sida blir staplat.

• Web Brutalism (100% bredd) — identisk på varje skärm. Ingen anpassning behövs, eftersom den aldrig begränsade sig.

Lärdomen: välj din desktop `max-width` med vetskapen att mobil ignorerar den. Den verkliga frågan är hur ditt rutnät och mellanrum anpassas.

Hur bör typografi svara på skärmstorlek?

Typstorlekar bör vara bekväma på varje enhet. Brödtext vid 16px (1rem) fungerar överallt. Men rubriker behöver ofta krympa på mindre skärmar — en 5rem-rubrik som passar på desktop svämmar över på mobil.

Lösningen: fluid typografi med `clamp()`. Till exempel: `font-size: clamp(2rem, 5vw, 4rem)` — minimum 2rem, maximum 4rem, skalas med viewport däremellan.

På denna sajt använder hjältetiteln `clamp(1.8rem, 4vw, 3rem)` på learn-sidor och `clamp(3rem, 8vw, 5rem)` på stilsidor. Texten är alltid läsbar, alltid proportionell och svämmar aldrig över.

Radlängd spelar också roll: på smala skärmar blir en 720px-kolumn fullbredd — vilket potentiellt skapar mycket korta rader. Det är acceptabelt på telefoner (användare förväntar sig kortare rader) men kräver tillräcklig typstorlek för att förbli läsbar.

Vad händer med rutnät och flerkolumnslayouter på mobil?

CSS Grid med `auto-fit` och `minmax()` hanterar detta naturligt: `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))`. På breda skärmar, flera kolumner. På smala skärmar, en enda kolumn. Ingen brytpunkt behövs.

Det här är hur StyleShifts principkort fungerar. På desktop visar Bauhaus dem i ett 2-kolumns rutnät. På mobil staplas de vertikalt. `minmax(280px, 1fr)` säkerställer att kort aldrig blir för smala att läsa.

Art Deco använder `grid-orphan-column: 1 / -1` — det sista kortet i ett ojämnt rutnät sträcker sig fullbredd. På mobil är detta irrelevant (allt är en kolumn), men på desktop upprätthåller det symmetri.

Nyckelprincipen: designa rutnätet för innehåll, inte för en specifik enhet. Om din minimala kolumnbredd är 280px, anpassas rutnätet naturligt till varje skärm bredare eller smalare än så.

Hur anpassas mellanrum och utfyllnad responsivt?

Fast pixelmellanrum bryts på små skärmar. Ett 5rem sektionsgap som andas vackert på desktop krossar mobilanvändare med ändlös scrollning.

Lösningar:

• clamp() — `padding: clamp(1rem, 5vw, 3rem)` skalas mjukt

• Viewport-enheter — `padding: 5vw` är alltid proportionell

• Reducerade värden på mobil — enklare men kräver brytpunkter

Nordic Minimal använder clamp för sektionsmellanrum: `clamp(3rem, 8vw, 6rem)`. På en 375px-telefon löses detta till 3rem. På en 1440px-desktop, 6rem. Mjuk övergång, ingen brytpunkt.

Victorian använder fast 1.5rem sidutfyllnad — tätt på alla skärmar. Det speglar stilens horror vacui: inget utrymme slösas, oavsett enhet.

Målet: mellanrum bör kännas proportionellt mot skärmen, inte identiskt över enheter. Ett 5rem-gap som skapar ceremoni på desktop skapar frustration på mobil.