Responsive webdesign houdt in dat een website zó ontworpen wordt dat die er goed uitziet op desktops, laptops, tablets en smartphones, op schermen dus van groot tot klein.
Reponsive webdesign wordt geregeld in het stijlblad.
Het begint met gebruik van relatieve afmetingen voor bijna alle elementen.
Dus:
Daarnaast wordt gebruik gemaakt van media queries. Daarmee kan speciale opmaak voor grote schermen (of juist voor kleine schermen) worden toegevoegd aan de standaard opmaak.
Bij het gebruik van media queries voor responsive webdesign zijn vooral de volgende twee vormen van belang:
en
Er zijn twee methoden om een responsive website te bouwen: van groot naar klein en van klein naar groot.
Hierbij wordt gebruik gemaakt van media queries van vorm 1. Er is minimaal 1 breekpunt, maar het kunnen er ook meer zijn.
Als er verschillende breekpunten zijn, moeten die geordend zijn van groot naar klein. Zie voorbeeld 1.
Hierbij wordt gebruik gemaakt van media queries van vorm 2. Er is minimaal 1 breekpunt, maar het kunnen er ook meer zijn.
Als er verschillende breekpunten zijn, moeten die geordend zijn van klein naar groot. Zie voorbeeld 2.
Ook zou gedacht kunnen worden aan een breekpunt bij een schermbreedte die niet vaak gebruikt wordt, bv. tussen de breedte van een smartphone en die van een tablet. Het is echter zo dat de gebruikelijke schermgrootten in de loop der jaren voortdurend veranderen.
Om responsive design goed te laten werken op mobieltjes moet in de head van elk html document de volgende 'viewport-regel' worden opgenomen:
Zonder deze regel probeert de browser de hele website op het mobieltje in beeld te brengen, waardoor die onleesbaar klein wordt.
Toelichting bij de regel:
Bij mobieltjes staan de pixels, de beeldpunten veel dichter op elkaar dan bij computers en wat oudere laptops.
Is op een wat oudere laptop een afbeelding van 100px bijna 2 cm groot op het scherm, op de nieuwste telefoons is die afbeeling minder dan een halve cm groot.
Bij gebruik van de viewport-regel houdt de browser rekening met de pixeldichtheid om te voorkomen dat de pagina op mobieltjes nog steeds te klein wordt afgebeeld.