Öppna en webbplats på din telefon, sedan på en bärbar dator och sedan på en TV. Om den ser bra ut på alla tre sätten utan att du behöver nypa eller kisa, är den byggd med responsiv design. Metoden låter en enda kodbas anpassa sin layout, bilder och typografi till vilken skärm den än landar på.

Ethan Marcotte myntade termen 2010, när mobil surfning exploderade och designers stod inför ett val: bygga separata webbplatser för varje enhet eller bygga en som var flexibel. Responsiv design vann. Kärnverktygen är flytande rutnät, flexibla bilder och mediefrågor. En mediefråga frågar webbläsaren hur bred visningsporten är och tillämpar olika CSS-regler beroende på svaret.

Vad gör en design responsiv

• Flytande rutnät som använder procentsatser istället för fasta pixlar
• Flexibla bilder som skalas inom sina behållare
• Mediefrågor som tillämpar brytpunkter för olika skärmstorlekar
• Pekvänliga mål på mobila layouter

Målet är inte bara att få plats med innehåll på en liten skärm. Det är att bevara läsbarhet, hierarki och användbarhet i alla sammanhang. En skrivbordslayout med tre kolumner kan krympa till en kolumn på en telefon. En hamburgermeny ersätter en fullständig navigeringsfält. Bra responsiv design känns oundviklig, som om webbplatsen alltid var tänkt att se ut så på din enhet.