Jedna strona internetowa, wiele ekranów. Projektowanie responsywne sprawia, że ​​jeden układ dostosowuje się do różnych rozmiarów i orientacji urządzeń. Termin ten został ukuty przez Ethana Marcotte'a w 2010 roku, opierając się na wcześniejszych pomysłach dotyczących elastycznych siatek i płynnych obrazów. Zamiast tworzyć oddzielne witryny dla komputerów stacjonarnych i urządzeń mobilnych, projektanci tworzą jedną bazę kodu, która dostosowuje się do szerokości obszaru wyświetlania.

Trzy techniczne składniki sprawiają, że to działa. Płynne siatki wykorzystują wartości procentowe zamiast stałych pikseli, dzięki czemu kolumny rozciągają się i kurczą. Elastyczne obrazy skalują się w obrębie kontenerów. Zapytania o media wykrywają rozmiar ekranu i stosują różne reguły CSS w zdefiniowanych punktach przerwania. Trzykolumnowy układ na komputerze może zostać zwinięty do pojedynczej kolumny na telefonie, a nawigacja przekształci się w menu hamburgerowe. Celem nie jest kontrola z dokładnością do pikseli, ale płynna adaptacja.

Podstawowe techniki

• Siatki płynów oparte na procentach.
• Elastyczne obrazy i media.
• Zapytania multimedialne w zdefiniowanych punktach przerwania.
• Priorytet dla treści przeznaczonych na urządzenia mobilne.

Responsywny design jest obecnie standardem. Użytkownicy oczekują, że strona będzie działać niezależnie od tego, czy otwierają ją na telefonie, tablecie, laptopie czy telewizorze.