En webbplats, många skärmar. Responsiv design gör att en enda layout anpassar sig till olika enhetsstorlekar och orienteringar. Termen myntades av Ethan Marcotte år 2010 och bygger på tidigare idéer om flexibla rutnät och flytande bilder. Istället för att bygga separata webbplatser för dator och mobil skapar designers en kodbas som omorganiserar sig baserat på viewport-bredd.

Tre tekniska ingredienser gör att det fungerar. Flytande rutnät använder procentsatser istället för fasta pixlar, så kolumner sträcks ut och krymper. Flexibla bilder skalas inom sina behållare. Mediefrågor detekterar skärmstorleken och tillämpar olika CSS-regler vid definierade brytpunkter. En skrivbordslayout med tre kolumner kan komprimeras till en enda kolumn på en telefon, där navigeringen flyttas till en hamburgermeny. Målet är inte pixelperfekt kontroll utan elegant anpassning.

Kärntekniker

• Flytande rutnät baserade på procentsatser.
• Flexibla bilder och media.
• Mediefrågor vid definierade brytpunkter.
• Prioritering av mobilt främst innehåll.

Responsiv design är nu standardpraxis. Användare förväntar sig att en webbplats ska fungera oavsett om de öppnar den på en telefon, en surfplatta, en bärbar dator eller en TV.